survey-vue3-ui 1.10.2 → 1.10.4

package/survey-vue3-ui.es.js

@@ -1,7 +1,7 @@
-import { shallowReactive as Ce, watch as K, onBeforeUnmount as G, onMounted as M, ref as $, shallowRef as U, watchEffect as be, triggerRef as se, unref as w, isRef as ke, defineComponent as h, computed as I, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as a, createVNode as C, createCommentVNode as d, Fragment as _, renderList as D, createBlock as g, resolveDynamicComponent as T, normalizeProps as z, mergeProps as H, withCtx as F, normalizeStyle as S, createElementVNode as p, onUnmounted as O, guardReactiveProps as ne, withDirectives as P, vShow as E, toDisplayString as R, vModelRadio as x, vModelCheckbox as oe, vModelSelect as fe, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Ie, resolveDirective as X, toRaw as Se, Teleport as Re, useSlots as Te, renderSlot as $e } from "vue";
-import { Base as _e, RendererFactory as ee, DropdownListModel as De, Helpers as Be, DropdownMultiSelectListModel as Le, doKey2ClickUp as ye, createSvg as Ne, ActionDropdownViewModel as Pe, getActionDropdownButtonTarget as Ae, createPopupViewModel as Me, SurveyProgressModel as de, ProgressButtonsResponsivityManager as Ee, PopupSurveyModel as He, settings as j, createDialogOptions as We, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
-_e.createPropertiesHash = () => Ce({});
-function Qe(r) {
+import { shallowReactive as be, watch as K, onBeforeUnmount as G, onMounted as M, ref as $, shallowRef as U, watchEffect as ke, triggerRef as se, unref as w, isRef as fe, defineComponent as h, computed as S, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as a, createVNode as C, createCommentVNode as d, Fragment as D, renderList as B, createBlock as g, resolveDynamicComponent as T, normalizeProps as z, mergeProps as H, withCtx as V, normalizeStyle as I, createElementVNode as p, onUnmounted as O, guardReactiveProps as ne, withDirectives as P, vShow as E, toDisplayString as R, vModelRadio as x, vModelCheckbox as oe, vModelSelect as we, onUpdated as te, vModelText as Ie, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
+import { Base as De, RendererFactory as ee, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ye, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as Ee, SurveyProgressModel as de, ProgressButtonsResponsivityManager as He, PopupSurveyModel as We, settings as j, createDialogOptions as Fe, createPopupModalViewModel as Ve, ButtonGroupItemModel as Oe, SvgRegistry as ze, SurveyModel as Ue, doKey2ClickDown as Ke, doKey2ClickBlur as Qe } from "survey-core";
+De.createPropertiesHash = () => be({});
+function je(r) {
   var s;
   !r || (r.__vueImplemented = (s = r.__vueImplemented) != null ? s : 0, r.__vueImplemented <= 0 && (r.createArrayCoreHandler = (n, e) => {
     const o = [], t = U(o);
@@ -16,7 +16,7 @@ function Qe(r) {
       }, n[e] = o;
     }
   }), r.getPropertyValueCoreHandler = (n, e) => w(n[e]), r.setPropertyValueCoreHandler = (n, e, o) => {
-    ke(n[e]) ? n[e].value = o : n[e] = o;
+    fe(n[e]) ? n[e].value = o : n[e] = o;
   }), r.__vueImplemented++);
 }
 function me(r) {
@@ -25,11 +25,11 @@ function me(r) {
     n[e] = w(n[e]), Array.isArray(n[e]) && (n[e].onArrayChanged = void 0);
   }), delete r.__vueImplemented, r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0));
 }
-function B(r, s, n) {
+function L(r, s, n) {
   const e = K(
     r,
     (o, t) => {
-      o && s && s(o, t), t && (me(t), n && n(t)), Qe(o);
+      o && s && s(o, t), t && (me(t), n && n(t)), je(o);
     },
     {
       immediate: !0
@@ -41,7 +41,7 @@ function B(r, s, n) {
   });
 }
 function A(r, s, n, e) {
-  B(() => r.question, n, e), M(() => {
+  L(() => r.question, n, e), M(() => {
     r.question && r.question.afterRenderQuestionElement(s.value);
   }), G(() => {
     r.question.beforeDestroyQuestionElement(s.value);
@@ -68,14 +68,14 @@ function re(r) {
   return r.customWidget ? "survey-customwidget" : r.isDefaultRendering && r.isDefaultRendering() || r.isPanel ? "survey-" + r.getTemplate() : r.getComponentName();
 }
 function le(r) {
-  const s = U(), n = be(() => {
+  const s = U(), n = ke(() => {
     s.value = r(), se(s);
   });
   return G(() => {
     n();
   }), s;
 }
-const je = /* @__PURE__ */ h({
+const Ge = /* @__PURE__ */ h({
   __name: "Page",
   props: {
     survey: {},
@@ -85,8 +85,8 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, n = $(null), e = () => {
       s.survey && n.value && s.survey.afterRenderPage(n.value);
-    }, o = I(() => s.page._showDescription);
-    return B(
+    }, o = S(() => s.page._showDescription);
+    return L(
       () => s.page,
       () => {
         e();
@@ -113,12 +113,12 @@ const je = /* @__PURE__ */ h({
           }, null, 8, ["locString"])
         ], 2)) : d("", !0),
         C(c, { element: t.page }, null, 8, ["element"]),
-        (i(!0), u(_, null, D(t.page.visibleRows, (f) => (i(), g(T(t.page.getSurvey().getRowWrapperComponentName(f)), z(H({
+        (i(!0), u(D, null, B(t.page.visibleRows, (f) => (i(), g(T(t.page.getSurvey().getRowWrapperComponentName(f)), z(H({
           key: f.id
         }, {
           componentData: t.page.getSurvey().getRowWrapperComponentData(f)
         })), {
-          default: F(() => [
+          default: V(() => [
             C(q, {
               row: f,
               survey: t.survey,
@@ -130,7 +130,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ge = /* @__PURE__ */ h({
+}), Je = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     survey: {}
@@ -155,7 +155,7 @@ const je = /* @__PURE__ */ h({
         e.survey.renderedHasTitle ? (i(), u("div", {
           key: 1,
           class: a(e.survey.css.headerText),
-          style: S({ maxWidth: e.survey.titleMaxWidth })
+          style: I({ maxWidth: e.survey.titleMaxWidth })
         }, [
           C(t, {
             element: e.survey,
@@ -180,7 +180,7 @@ const je = /* @__PURE__ */ h({
       ], 2)) : d("", !0);
     };
   }
-}), Je = /* @__PURE__ */ h({
+}), Xe = /* @__PURE__ */ h({
   __name: "Row",
   props: {
     row: {},
@@ -189,7 +189,7 @@ const je = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, n = $();
-    return B(
+    return L(
       () => s.row,
       (e, o) => {
         e.setRootElement(n.value), o && (e.isNeedRender = o.isNeedRender);
@@ -211,7 +211,7 @@ const je = /* @__PURE__ */ h({
         ref_key: "root",
         ref: n
       }, [
-        (i(!0), u(_, null, D(e.row.visibleElements, (l) => (i(), g(t, {
+        (i(!0), u(D, null, B(e.row.visibleElements, (l) => (i(), g(t, {
           row: e.row,
           css: e.css,
           element: l,
@@ -220,10 +220,10 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Xe = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], Ye = ["id"], Ze = {
+}), Ye = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], Ze = ["id"], xe = {
   inheritAttrs: !1
-}, xe = /* @__PURE__ */ h({
-  ...Ze,
+}, es = /* @__PURE__ */ h({
+  ...xe,
   __name: "Question",
   props: {
     survey: {},
@@ -231,8 +231,8 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => s.element.showErrorOnTop), o = I(() => s.element.showErrorOnBottom), t = (k) => k.cssContent, l = () => s.element.getRootStyle();
-    B(() => s.element);
+    const s = r, n = $(null), e = S(() => s.element.showErrorOnTop), o = S(() => s.element.showErrorOnBottom), t = (k) => k.cssContent, l = () => s.element.getRootStyle();
+    L(() => s.element);
     const m = () => {
       n.value && s.element.afterRender(n.value);
     }, v = K(
@@ -240,7 +240,7 @@ const je = /* @__PURE__ */ h({
       () => {
         m();
       }
-    ), c = I(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), q = I(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), f = I(() => ({
+    ), c = S(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), q = S(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), f = S(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
@@ -248,14 +248,14 @@ const je = /* @__PURE__ */ h({
     }));
     return O(() => {
       v();
-    }), (k, L) => {
-      const b = y("survey-errors"), N = y("survey-element-header"), W = y("survey-string"), V = y("survey-question-comment");
+    }), (k, _) => {
+      const b = y("survey-errors"), N = y("survey-element-header"), W = y("survey-string"), F = y("survey-question-comment");
       return i(), u("div", {
         class: a(k.element.getRootCss()),
-        style: S(l()),
+        style: I(l()),
         ref_key: "root",
         ref: n,
-        onFocusin: L[0] || (L[0] = (Q) => k.element.focusIn()),
+        onFocusin: _[0] || (_[0] = (Q) => k.element.focusIn()),
         id: k.element.id,
         role: k.element.ariaRole,
         "aria-required": k.element.ariaRequired,
@@ -276,7 +276,7 @@ const je = /* @__PURE__ */ h({
           css: k.css
         }, null, 8, ["element", "css"])) : d("", !0),
         (i(), g(T(q.value), z(ne(f.value)), {
-          default: F(() => [
+          default: V(() => [
             P(p("div", {
               class: a(t(k.element) || void 0),
               role: "presentation"
@@ -296,7 +296,7 @@ const je = /* @__PURE__ */ h({
                     locString: k.element.locCommentText
                   }, null, 8, ["locString"])
                 ]),
-                C(V, { question: k.element }, null, 8, ["question"])
+                C(F, { question: k.element }, null, 8, ["question"])
               ], 2)) : d("", !0),
               o.value ? (i(), g(b, {
                 key: 2,
@@ -311,7 +311,7 @@ const je = /* @__PURE__ */ h({
                 C(W, {
                   locString: k.element.locDescription
                 }, null, 8, ["locString"])
-              ], 10, Ye)) : d("", !0)
+              ], 10, Ze)) : d("", !0)
             ], 2), [
               [E, k.element.renderedIsExpanded]
             ])
@@ -328,13 +328,13 @@ const je = /* @__PURE__ */ h({
           element: k.element,
           location: "bottom"
         }, null, 8, ["element"])) : d("", !0)
-      ], 46, Xe);
+      ], 46, Ye);
     };
   }
-}), es = ["id"], ss = ["id"], ns = {
+}), ss = ["id"], ns = ["id"], os = {
   inheritAttrs: !1
-}, os = /* @__PURE__ */ h({
-  ...ns,
+}, ts = /* @__PURE__ */ h({
+  ...os,
   inheritAttrs: !1,
   __name: "Panel",
   props: {
@@ -343,8 +343,8 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => s.element.survey);
-    return B(() => s.element), M(() => {
+    const s = r, n = $(null), e = S(() => s.element.survey);
+    return L(() => s.element), M(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, n.value);
     }), (o, t) => {
       const l = y("survey-errors"), m = y("survey-element-header"), v = y("survey-row"), c = y("sv-action-bar");
@@ -372,15 +372,15 @@ const je = /* @__PURE__ */ h({
         o.element.renderedIsExpanded ? (i(), u("div", {
           key: 3,
           id: o.element.contentId,
-          style: S({ paddingLeft: o.element.innerPaddingLeft }),
+          style: I({ paddingLeft: o.element.innerPaddingLeft }),
           class: a(o.element.cssClasses.panel.content)
         }, [
-          (i(!0), u(_, null, D(o.element.visibleRows, (q) => (i(), g(T(o.element.getSurvey().getRowWrapperComponentName(q)), z(H({
+          (i(!0), u(D, null, B(o.element.visibleRows, (q) => (i(), g(T(o.element.getSurvey().getRowWrapperComponentName(q)), z(H({
             key: q.id
           }, {
             componentData: o.element.getSurvey().getRowWrapperComponentData(q)
           })), {
-            default: F(() => [
+            default: V(() => [
               C(v, {
                 row: q,
                 survey: e.value,
@@ -392,11 +392,11 @@ const je = /* @__PURE__ */ h({
           C(c, {
             model: o.element.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, ss)) : d("", !0)
-      ], 42, es)) : d("", !0);
+        ], 14, ns)) : d("", !0)
+      ], 42, ss)) : d("", !0);
     };
   }
-}), ts = ["id"], is = /* @__PURE__ */ h({
+}), is = ["id"], rs = /* @__PURE__ */ h({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -424,7 +424,7 @@ const je = /* @__PURE__ */ h({
           C(l, {
             locString: e.element.locDescription
           }, null, 8, ["locString"])
-        ], 10, ts)), [
+        ], 10, is)), [
           [E, e.element.hasDescription]
         ]) : d("", !0),
         e.element.hasAdditionalTitleToolbar ? (i(), g(m, {
@@ -434,7 +434,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), rs = /* @__PURE__ */ h({
+}), ls = /* @__PURE__ */ h({
   __name: "String",
   props: {
     locString: {}
@@ -444,7 +444,7 @@ const je = /* @__PURE__ */ h({
       locString: s.locString.renderAsData
     }, null, 8, ["locString"]));
   }
-}), ls = ["innerHTML"], as = /* @__PURE__ */ h({
+}), as = ["innerHTML"], us = /* @__PURE__ */ h({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -455,12 +455,12 @@ const je = /* @__PURE__ */ h({
       key: 0,
       class: a(w(e)),
       innerHTML: w(n)
-    }, null, 10, ls)) : (i(), u("span", {
+    }, null, 10, as)) : (i(), u("span", {
       key: 1,
       class: a(w(e))
     }, R(w(n)), 3));
   }
-}), us = ["innerHTML"], ds = /* @__PURE__ */ h({
+}), ds = ["innerHTML"], ms = /* @__PURE__ */ h({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -479,7 +479,7 @@ const je = /* @__PURE__ */ h({
       innerHTML: o.locString.renderedHtml,
       onBlur: n,
       onClick: e
-    }, null, 40, us)) : (i(), u("span", {
+    }, null, 40, ds)) : (i(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
@@ -487,19 +487,19 @@ const je = /* @__PURE__ */ h({
       onClick: e
     }, R(o.locString.renderedHtml), 33));
   }
-}), ms = ["id"], cs = /* @__PURE__ */ h({
+}), cs = ["id"], ps = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     element: {}
   },
   setup(r) {
     const s = r;
-    return B(() => s.element), (n, e) => (i(), u("div", {
+    return L(() => s.element), (n, e) => (i(), u("div", {
       class: "sv-skeleton-element",
       id: n.element.id
-    }, null, 8, ms));
+    }, null, 8, cs));
   }
-}), ps = ["id"], vs = ["value"], qs = /* @__PURE__ */ h({
+}), vs = ["id"], qs = ["value"], ys = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -522,8 +522,8 @@ const je = /* @__PURE__ */ h({
         p("datalist", {
           id: e.question.dataListId
         }, [
-          (i(!0), u(_, null, D(e.question.dataList, (l) => (i(), u("option", { value: l }, null, 8, vs))), 256))
-        ], 8, ps)
+          (i(!0), u(D, null, B(e.question.dataList, (l) => (i(), u("option", { value: l }, null, 8, qs))), 256))
+        ], 8, vs)
       ], 512)) : (i(), g(t, {
         key: 2,
         question: e.question,
@@ -533,7 +533,7 @@ const je = /* @__PURE__ */ h({
       }, null, 8, ["question", "get-ref"]));
     };
   }
-}), ys = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], gs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], hs = /* @__PURE__ */ h({
+}), gs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], hs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Cs = /* @__PURE__ */ h({
   __name: "TextInput",
   props: {
     question: {},
@@ -543,8 +543,8 @@ const je = /* @__PURE__ */ h({
     const n = r, e = function(l) {
       n.getRef && n.getRef(l);
     }, o = $(null);
-    s({ root: o }), B(() => n.question);
-    const t = I(() => n.question.inputStyle);
+    s({ root: o }), L(() => n.question);
+    const t = S(() => n.question.inputStyle);
     return (l, m) => {
       const v = y("sv-character-counter");
       return l.question.getMaxLength() ? (i(), u("div", {
@@ -560,7 +560,7 @@ const je = /* @__PURE__ */ h({
           max: l.question.renderedMax,
           step: l.question.renderedStep,
           size: l.question.renderedInputSize,
-          style: S(t.value),
+          style: I(t.value),
           id: l.question.inputId,
           list: l.question.dataListId,
           placeholder: l.question.renderedPlaceholder,
@@ -578,7 +578,7 @@ const je = /* @__PURE__ */ h({
           "aria-describedby": l.question.a11y_input_ariaDescribedBy,
           "aria-invalid": l.question.a11y_input_ariaInvalid,
           "aria-errormessage": l.question.a11y_input_ariaErrormessage
-        }, null, 46, gs),
+        }, null, 46, hs),
         C(v, {
           counter: l.question.characterCounter,
           remainingCharacterCounter: l.question.cssClasses.remainingCharacterCounter
@@ -594,7 +594,7 @@ const je = /* @__PURE__ */ h({
         max: l.question.renderedMax,
         step: l.question.renderedStep,
         size: l.question.renderedInputSize,
-        style: S(t.value),
+        style: I(t.value),
         id: l.question.inputId,
         list: l.question.dataListId,
         placeholder: l.question.renderedPlaceholder,
@@ -612,13 +612,13 @@ const je = /* @__PURE__ */ h({
         "aria-describedby": l.question.a11y_input_ariaDescribedBy,
         "aria-invalid": l.question.a11y_input_ariaInvalid,
         "aria-errormessage": l.question.a11y_input_ariaErrormessage
-      }, null, 46, ys));
+      }, null, 46, gs));
     };
   }
-}), Cs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], bs = {
+}), bs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], ks = {
   key: 0,
   class: "sv-hidden"
-}, ks = { key: 7 }, fs = ["value"], ge = /* @__PURE__ */ h({
+}, fs = { key: 7 }, ws = ["value"], ge = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SelectBase",
   props: {
@@ -650,18 +650,18 @@ const je = /* @__PURE__ */ h({
         "aria-invalid": t.question.a11y_input_ariaInvalid,
         "aria-errormessage": t.question.a11y_input_ariaErrormessage
       }, [
-        t.showLegend ? (i(), u("legend", bs, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
-        t.question.hasHeadItems ? (i(!0), u(_, { key: 1 }, D(t.question.headItems, (v) => (i(), g(T(e(v)), H({
+        t.showLegend ? (i(), u("legend", ks, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
+        t.question.hasHeadItems ? (i(!0), u(D, { key: 1 }, B(t.question.headItems, (v) => (i(), g(T(e(v)), H({
           key: v.value
         }, o(v)), null, 16))), 128)) : d("", !0),
-        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u(_, { key: 2 }, D(t.question.bodyItems, (v) => (i(), g(T(e(v)), H({
+        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u(D, { key: 2 }, B(t.question.bodyItems, (v) => (i(), g(T(e(v)), H({
           key: v.value
         }, o(v)), null, 16))), 128)) : d("", !0),
         t.question.blockedRow ? (i(), u("div", {
           key: 3,
           class: a(t.question.cssClasses.rootRow)
         }, [
-          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u(_, { key: 0 }, D(t.question.dataChoices, (v) => (i(), g(T(e(v)), H({
+          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u(D, { key: 0 }, B(t.question.dataChoices, (v) => (i(), g(T(e(v)), H({
             key: v.value
           }, o(v)), null, 16))), 128)) : d("", !0)
         ], 2)) : d("", !0),
@@ -669,24 +669,24 @@ const je = /* @__PURE__ */ h({
           key: 4,
           class: a(t.question.cssClasses.rootMultiColumn)
         }, [
-          t.question.hasColumns ? (i(!0), u(_, { key: 0 }, D(t.question.columns, (v, c) => (i(), u("div", {
+          t.question.hasColumns ? (i(!0), u(D, { key: 0 }, B(t.question.columns, (v, c) => (i(), u("div", {
             key: c,
             class: a(t.question.getColumnClass()),
             role: "presentation"
           }, [
-            (i(!0), u(_, null, D(v, (q) => (i(), g(T(e(q)), H({
+            (i(!0), u(D, null, B(v, (q) => (i(), g(T(e(q)), H({
               key: q.value
             }, o(q)), null, 16))), 128))
           ], 2))), 128)) : d("", !0)
         ], 2)) : d("", !0),
-        t.question.hasFootItems ? (i(!0), u(_, { key: 5 }, D(t.question.footItems, (v) => (i(), g(T(e(v)), H({
+        t.question.hasFootItems ? (i(!0), u(D, { key: 5 }, B(t.question.footItems, (v) => (i(), g(T(e(v)), H({
           key: v.value
         }, o(v)), null, 16))), 128)) : d("", !0),
         t.question.renderedValue && t.question.isOtherSelected ? (i(), g(m, {
           key: 6,
           question: t.question
         }, null, 8, ["question"])) : d("", !0),
-        t.question.showClearButtonInContent ? (i(), u("div", ks, [
+        t.question.showClearButtonInContent ? (i(), u("div", fs, [
           p("input", {
             type: "button",
             class: a(t.question.cssClasses.clearButton),
@@ -694,12 +694,12 @@ const je = /* @__PURE__ */ h({
               t.question.clearValue();
             }),
             value: t.question.clearButtonCaption
-          }, null, 10, fs)
+          }, null, 10, ws)
         ])) : d("", !0)
-      ], 10, Cs);
+      ], 10, bs);
     };
   }
-}), ws = /* @__PURE__ */ h({
+}), Is = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
@@ -711,7 +711,7 @@ const je = /* @__PURE__ */ h({
       "show-legend": !0
     }, null, 8, ["question"]));
   }
-}), Is = ["name", "checked", "value", "id", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ h({
+}), Ss = ["name", "checked", "value", "id", "disabled"], Rs = ["xlink:href"], Ts = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "CheckboxItem",
   props: {
@@ -721,7 +721,7 @@ const je = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    B(() => s.item);
+    L(() => s.item);
     const n = (e) => {
       s.question.clickItemHandler(s.item, e.target.checked);
     };
@@ -746,7 +746,7 @@ const je = /* @__PURE__ */ h({
             id: e.question.getItemId(e.item),
             disabled: !e.question.getItemEnabled(e.item),
             class: a(e.question.cssClasses.itemControl)
-          }, null, 42, Is),
+          }, null, 42, Ss),
           e.question.cssClasses.materialDecorator ? (i(), u("span", {
             key: 0,
             class: a(e.question.cssClasses.materialDecorator)
@@ -757,7 +757,7 @@ const je = /* @__PURE__ */ h({
             }, [
               p("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Ss)
+              }, null, 8, Rs)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           e.hideLabel ? d("", !0) : (i(), u("span", {
@@ -772,7 +772,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ts = /* @__PURE__ */ h({
+}), $s = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Radiogroup",
   props: {
@@ -781,7 +781,7 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     return (s, n) => (i(), g(ge, { question: s.question }, null, 8, ["question"]));
   }
-}), $s = ["name", "value", "id", "aria-errormessage", "disabled"], _s = ["xlink:href"], Ds = /* @__PURE__ */ h({
+}), _s = ["name", "value", "id", "aria-errormessage", "disabled"], Ds = ["xlink:href"], Bs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RadiogroupItem",
   props: {
@@ -790,14 +790,14 @@ const je = /* @__PURE__ */ h({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), o = I({
+    const s = r, n = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), o = S({
       get: () => s.question.renderedValue,
       set: (t) => {
         const l = s.question;
         l.renderedValue = t;
       }
     });
-    return B(() => s.item), (t, l) => {
+    return L(() => s.item), (t, l) => {
       const m = y("survey-string");
       return i(), u("div", {
         role: "presentation",
@@ -816,7 +816,7 @@ const je = /* @__PURE__ */ h({
             "onUpdate:modelValue": l[0] || (l[0] = (v) => o.value = v),
             disabled: !t.question.getItemEnabled(t.item),
             class: a(t.question.cssClasses.itemControl)
-          }, null, 10, $s), [
+          }, null, 10, _s), [
             [x, o.value]
           ]),
           t.question.cssClasses.materialDecorator ? (i(), u("span", {
@@ -829,7 +829,7 @@ const je = /* @__PURE__ */ h({
             }, [
               p("use", {
                 "xlink:href": t.question.itemSvgIcon
-              }, null, 8, _s)
+              }, null, 8, Ds)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           t.hideLabel ? d("", !0) : (i(), u("span", {
@@ -844,7 +844,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Bs = ["src"], Ls = ["title"], Ns = { key: 0 }, Ps = /* @__PURE__ */ h({
+}), Ls = ["src"], Ns = ["title"], Ps = { key: 0 }, As = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Signaturepad",
   props: {
@@ -858,7 +858,7 @@ const je = /* @__PURE__ */ h({
         class: a(e.question.cssClasses.root),
         ref_key: "root",
         ref: n,
-        style: S({
+        style: I({
           width: e.question.renderedCanvasWidth
         })
       }, [
@@ -876,10 +876,10 @@ const je = /* @__PURE__ */ h({
             key: 0,
             class: a(e.question.cssClasses.backgroundImage),
             src: e.question.backgroundImage,
-            style: S({
+            style: I({
               width: e.question.renderedCanvasWidth
             })
-          }, null, 14, Bs)) : d("", !0),
+          }, null, 14, Ls)) : d("", !0),
           p("canvas", {
             tabindex: "-1",
             class: a(e.question.cssClasses.canvas),
@@ -898,13 +898,13 @@ const je = /* @__PURE__ */ h({
               e.question.clearValue();
             })
           }, [
-            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ns, "\u2716")),
+            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ps, "\u2716")),
             e.question.cssClasses.clearButtonIconId ? (i(), g(l, {
               key: 1,
               iconName: e.question.cssClasses.clearButtonIconId,
               size: "auto"
             }, null, 8, ["iconName"])) : d("", !0)
-          ], 10, Ls)
+          ], 10, Ns)
         ], 2)) : d("", !0),
         e.question.showLoadingIndicator ? (i(), u("div", {
           key: 1,
@@ -915,7 +915,7 @@ const je = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), As = ["innerHTML"], Ms = /* @__PURE__ */ h({
+}), Ms = ["innerHTML"], Es = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Html",
   props: {
@@ -930,9 +930,9 @@ const je = /* @__PURE__ */ h({
       ref: n,
       class: a(o.question.renderCssRoot),
       innerHTML: w(e)
-    }, null, 10, As));
+    }, null, 10, Ms));
   }
-}), Es = ["src", "alt", "width", "height"], Hs = ["src", "width", "height"], Ws = ["src", "width", "height"], Vs = /* @__PURE__ */ h({
+}), Hs = ["src", "alt", "width", "height"], Ws = ["src", "width", "height"], Fs = ["src", "width", "height"], Vs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Image",
   props: {
@@ -956,7 +956,7 @@ const je = /* @__PURE__ */ h({
           alt: o.question.altText || o.question.title,
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
@@ -967,7 +967,7 @@ const je = /* @__PURE__ */ h({
           onError: t[1] || (t[1] = (m) => {
             o.question.onErrorHandler();
           })
-        }, null, 46, Es)), [
+        }, null, 46, Hs)), [
           [E, w(e) && !o.question.contentNotLoaded]
         ]) : d("", !0),
         o.question.renderedMode === "video" ? P((i(), u("video", {
@@ -977,7 +977,7 @@ const je = /* @__PURE__ */ h({
           src: w(e),
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
@@ -988,7 +988,7 @@ const je = /* @__PURE__ */ h({
           onError: t[3] || (t[3] = (m) => {
             o.question.onErrorHandler();
           })
-        }, null, 46, Hs)), [
+        }, null, 46, Ws)), [
           [E, w(e) && !o.question.contentNotLoaded]
         ]) : d("", !0),
         o.question.renderedMode === "youtube" ? (i(), u("iframe", {
@@ -997,12 +997,12 @@ const je = /* @__PURE__ */ h({
           src: w(e),
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
           })
-        }, null, 14, Ws)) : d("", !0),
+        }, null, 14, Fs)) : d("", !0),
         !w(e) || o.question.contentNotLoaded ? (i(), u("div", {
           key: 3,
           class: a(o.question.cssClasses.noImage)
@@ -1015,7 +1015,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Fs = /* @__PURE__ */ h({
+}), Os = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Expression",
   props: {
@@ -1029,7 +1029,7 @@ const je = /* @__PURE__ */ h({
       ref: n
     }, R(e.question.formatedValue), 3));
   }
-}), Os = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], zs = ["id", "multiple", "placeholder"], Us = /* @__PURE__ */ h({
+}), zs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], Us = ["id", "multiple", "placeholder"], Ks = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "File",
   props: {
@@ -1058,7 +1058,7 @@ const je = /* @__PURE__ */ h({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 10, Os)) : d("", !0),
+        }, null, 10, zs)) : d("", !0),
         e.question.isReadOnly ? (i(), u("input", {
           key: 1,
           type: "file",
@@ -1068,7 +1068,7 @@ const je = /* @__PURE__ */ h({
           multiple: e.question.allowMultiple,
           placeholder: e.question.title,
           style: { color: "transparent" }
-        }, null, 10, zs)) : d("", !0),
+        }, null, 10, Us)) : d("", !0),
         p("div", {
           class: a(e.question.cssClasses.dragArea),
           onDrop: o[0] || (o[0] = (...k) => e.question.onDrop && e.question.onDrop(...k)),
@@ -1136,7 +1136,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ks = { class: "sv-hidden" }, ce = "survey-imagepicker-item", Qs = /* @__PURE__ */ h({
+}), Qs = { class: "sv-hidden" }, ce = "survey-imagepicker-item", js = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Imagepicker",
   props: {
@@ -1158,22 +1158,22 @@ const je = /* @__PURE__ */ h({
       ref_key: "root",
       ref: n
     }, [
-      p("legend", Ks, R(t.question.locTitle.renderedHtml), 1),
-      t.question.hasColumns ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.visibleChoices, (m) => (i(), g(T(e(m)), H({
+      p("legend", Qs, R(t.question.locTitle.renderedHtml), 1),
+      t.question.hasColumns ? d("", !0) : (i(!0), u(D, { key: 0 }, B(t.question.visibleChoices, (m) => (i(), g(T(e(m)), H({
         key: m.value
       }, o(m)), null, 16))), 128)),
-      t.question.hasColumns ? (i(!0), u(_, { key: 1 }, D(t.question.columns, (m, v) => (i(), u("div", {
+      t.question.hasColumns ? (i(!0), u(D, { key: 1 }, B(t.question.columns, (m, v) => (i(), u("div", {
         class: a(t.question.getColumnClass()),
         key: v,
         role: "presentation"
       }, [
-        (i(!0), u(_, null, D(m, (c) => (i(), g(T(e(c)), H({
+        (i(!0), u(D, null, B(m, (c) => (i(), g(T(e(c)), H({
           key: c.value
         }, o(c)), null, 16))), 128))
       ], 2))), 128)) : d("", !0)
     ], 2));
   }
-}), js = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Js = ["src", "width", "height", "alt"], Xs = ["src", "width", "height"], Ys = /* @__PURE__ */ h({
+}), Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Js = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Xs = ["src", "width", "height", "alt"], Ys = ["src", "width", "height"], Zs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ImagepickerItem",
   props: {
@@ -1182,7 +1182,7 @@ const je = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, n = (o) => s.question.getItemClass(o);
-    B(() => s.item);
+    L(() => s.item);
     const e = J(() => s.item.locImageLink);
     return (o, t) => {
       const l = y("sv-svg-icon"), m = y("survey-string");
@@ -1205,7 +1205,7 @@ const je = /* @__PURE__ */ h({
             "aria-invalid": o.question.ariaInvalid,
             "aria-errormessage": o.question.ariaErrormessage,
             class: a(o.question.cssClasses.itemControl)
-          }, null, 10, js)), [
+          }, null, 10, Gs)), [
             [oe, o.question.value]
           ]) : P((i(), u("input", {
             key: 1,
@@ -1220,7 +1220,7 @@ const je = /* @__PURE__ */ h({
             "aria-invalid": o.question.ariaInvalid,
             "aria-errormessage": o.question.ariaErrormessage,
             class: a(o.question.cssClasses.itemControl)
-          }, null, 10, Gs)), [
+          }, null, 10, Js)), [
             [x, o.question.value]
           ]),
           p("div", {
@@ -1246,7 +1246,7 @@ const je = /* @__PURE__ */ h({
                 src: w(e),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: S({ objectFit: o.question.imageFit }),
+                style: I({ objectFit: o.question.imageFit }),
                 alt: o.item.locText.renderedHtml,
                 onLoad: t[2] || (t[2] = (v) => {
                   o.question.onContentLoaded(o.item, v);
@@ -1254,7 +1254,7 @@ const je = /* @__PURE__ */ h({
                 onError: t[3] || (t[3] = (v) => {
                   o.item.onErrorHandler();
                 })
-              }, null, 46, Js)) : d("", !0),
+              }, null, 46, Xs)) : d("", !0),
               w(e) && !o.item.contentNotLoaded && o.question.contentMode === "video" ? (i(), u("video", {
                 key: 2,
                 controls: "",
@@ -1262,18 +1262,18 @@ const je = /* @__PURE__ */ h({
                 src: w(e),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: S({ objectFit: o.question.imageFit }),
+                style: I({ objectFit: o.question.imageFit }),
                 onLoadedmetadata: t[4] || (t[4] = (v) => {
                   o.question.onContentLoaded(o.item, v);
                 }),
                 onError: t[5] || (t[5] = (v) => {
                   o.item.onErrorHandler();
                 })
-              }, null, 46, Xs)) : d("", !0),
+              }, null, 46, Ys)) : d("", !0),
               !w(e) || o.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: a(o.question.cssClasses.itemNoImage),
-                style: S({
+                style: I({
                   width: o.question.renderedImageWidth + "px",
                   height: o.question.renderedImageHeight + "px",
                   objectFit: o.question.imageFit
@@ -1299,7 +1299,7 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Zs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], en = /* @__PURE__ */ h({
+}), xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], en = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], sn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Comment",
   props: {
@@ -1341,8 +1341,8 @@ const je = /* @__PURE__ */ h({
         "aria-describedby": o.question.a11y_input_ariaDescribedBy,
         "aria-invalid": o.question.a11y_input_ariaInvalid,
         "aria-errormessage": o.question.a11y_input_ariaErrormessage,
-        style: S({ resize: o.question.resizeStyle })
-      }, null, 46, Zs)) : !o.question.isReadOnlyRenderDiv() && o.question.getMaxLength() ? (i(), u("div", {
+        style: I({ resize: o.question.resizeStyle })
+      }, null, 46, xs)) : !o.question.isReadOnlyRenderDiv() && o.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: n
@@ -1370,8 +1370,8 @@ const je = /* @__PURE__ */ h({
           "aria-describedby": o.question.a11y_input_ariaDescribedBy,
           "aria-invalid": o.question.a11y_input_ariaInvalid,
           "aria-errormessage": o.question.a11y_input_ariaErrormessage,
-          style: S({ resize: o.question.resizeStyle })
-        }, null, 46, xs),
+          style: I({ resize: o.question.resizeStyle })
+        }, null, 46, en),
         C(l, {
           counter: o.question.characterCounter,
           remainingCharacterCounter: o.question.cssClasses.remainingCharacterCounter
@@ -1383,7 +1383,7 @@ const je = /* @__PURE__ */ h({
       }, R(o.question.value), 513));
     };
   }
-}), sn = /* @__PURE__ */ h({
+}), nn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Dropdown",
   props: {
@@ -1406,16 +1406,16 @@ const je = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), nn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], on = {
+}), on = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], tn = {
   key: 0,
   value: ""
-}, tn = ["id"];
+}, rn = ["id"];
 ee.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const rn = /* @__PURE__ */ h({
+const ln = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DropdownSelect",
   props: {
@@ -1428,7 +1428,7 @@ const rn = /* @__PURE__ */ h({
       s.question.onClick(l);
     }, o = (l) => {
       s.question.onKeyUp(l);
-    }, t = I({
+    }, t = S({
       get() {
         var l;
         return (l = s.question.value) != null ? l : "";
@@ -1453,7 +1453,7 @@ const rn = /* @__PURE__ */ h({
             disabled: "",
             id: l.question.inputId,
             class: a(l.question.getControlClass())
-          }, R(l.question.readOnlyText), 11, tn)) : P((i(), u("select", {
+          }, R(l.question.readOnlyText), 11, rn)) : P((i(), u("select", {
             key: 0,
             id: l.question.inputId,
             "onUpdate:modelValue": m[0] || (m[0] = (f) => t.value = f),
@@ -1467,13 +1467,13 @@ const rn = /* @__PURE__ */ h({
             "aria-errormessage": l.question.ariaErrormessage,
             required: l.question.isRequired
           }, [
-            l.question.allowClear ? (i(), u("option", on, R(l.question.placeholder), 1)) : d("", !0),
-            (i(!0), u(_, null, D(l.question.visibleChoices, (f) => (i(), g(v, {
+            l.question.allowClear ? (i(), u("option", tn, R(l.question.placeholder), 1)) : d("", !0),
+            (i(!0), u(D, null, B(l.question.visibleChoices, (f) => (i(), g(v, {
               item: f,
               key: f.id
             }, null, 8, ["item"]))), 128))
-          ], 42, nn)), [
-            [fe, t.value]
+          ], 42, on)), [
+            [we, t.value]
           ]),
           l.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
             key: 2,
@@ -1493,27 +1493,27 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), ln = ["value", "disabled"], an = /* @__PURE__ */ h({
+}), an = ["value", "disabled"], un = /* @__PURE__ */ h({
   __name: "OptionItem",
   props: {
     item: {}
   },
   setup(r) {
     const s = r, n = J(() => s.item.locText);
-    return B(() => s.item), (e, o) => (i(), u("option", {
+    return L(() => s.item), (e, o) => (i(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, R(w(n)), 9, ln));
+    }, R(w(n)), 9, an));
   }
-}), un = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], dn = { style: { visibility: "hidden" } }, mn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], cn = ["id"], pn = /* @__PURE__ */ h({
+}), dn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], mn = { style: { visibility: "hidden" } }, cn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], pn = ["id"], vn = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => {
+    const s = r, n = $(null), e = S(() => {
       const b = s.question;
-      return b.dropdownListModel || (b.dropdownListModel = new De(b)), s.question.dropdownListModel;
+      return b.dropdownListModel || (b.dropdownListModel = new Be(b)), s.question.dropdownListModel;
     }), o = (b) => {
       var N;
       (N = e.value) == null || N.onClick(b);
@@ -1529,7 +1529,7 @@ const rn = /* @__PURE__ */ h({
     }, v = () => {
       if (n.value) {
         const b = n.value, N = e.value.inputStringRendered;
-        Be.isTwoValueEquals(N, b.value, !1, !0, !1) || (b.value = e.value.inputStringRendered);
+        Le.isTwoValueEquals(N, b.value, !1, !0, !1) || (b.value = e.value.inputStringRendered);
       }
     }, c = (b) => {
       var N;
@@ -1539,11 +1539,11 @@ const rn = /* @__PURE__ */ h({
       (N = e.value) == null || N.onFocus(b);
     }, f = (b) => {
       e.value.inputStringRendered = b.target.value;
-    }, k = I(
+    }, k = S(
       () => s.question.showSelectedItemLocText
-    ), L = I(() => s.question.selectedItemLocText);
-    return B(() => e.value), te(v), M(v), (b, N) => {
-      const W = y("survey-string"), V = y("sv-svg-icon"), Q = y("sv-popup");
+    ), _ = S(() => s.question.selectedItemLocText);
+    return L(() => e.value), te(v), M(v), (b, N) => {
+      const W = y("survey-string"), F = y("sv-svg-icon"), Q = y("sv-popup");
       return i(), u("div", {
         class: a(b.question.cssClasses.selectWrapper),
         onClick: o
@@ -1577,13 +1577,13 @@ const rn = /* @__PURE__ */ h({
           }, [
             k.value ? (i(), g(W, {
               key: 0,
-              locString: L.value
+              locString: _.value
             }, null, 8, ["locString"])) : d("", !0),
             e.value.showHintString ? (i(), u("div", {
               key: 1,
               class: a(b.question.cssClasses.hintSuffix)
             }, [
-              p("span", dn, R(e.value.inputStringRendered), 1),
+              p("span", mn, R(e.value.inputStringRendered), 1),
               p("span", null, R(e.value.hintStringSuffix), 1)
             ], 2)) : d("", !0),
             b.question.showInputFieldComponent ? (i(), g(T(b.question.inputFieldComponentName), {
@@ -1613,7 +1613,7 @@ const rn = /* @__PURE__ */ h({
               onInput: f,
               onBlur: c,
               onFocus: q
-            }, null, 42, mn)
+            }, null, 42, cn)
           ], 2),
           b.question.allowClear && b.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
             key: 1,
@@ -1621,7 +1621,7 @@ const rn = /* @__PURE__ */ h({
             onClick: l,
             "aria-hidden": "true"
           }, [
-            C(V, {
+            C(F, {
               class: a(b.question.cssClasses.cleanButtonSvg),
               iconName: b.question.cssClasses.cleanButtonIconId,
               title: b.question.clearCaption,
@@ -1630,7 +1630,7 @@ const rn = /* @__PURE__ */ h({
           ], 2)), [
             [E, b.question.showClearButton]
           ]) : d("", !0)
-        ], 42, un)),
+        ], 42, dn)),
         b.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
@@ -1642,7 +1642,7 @@ const rn = /* @__PURE__ */ h({
             locString: b.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
           p("div", null, R(b.question.readOnlyText), 1)
-        ], 10, cn)) : (i(), g(Q, {
+        ], 10, pn)) : (i(), g(Q, {
           key: 1,
           model: b.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1652,7 +1652,7 @@ const rn = /* @__PURE__ */ h({
           onPointerdown: t,
           "aria-hidden": "true"
         }, [
-          C(V, {
+          C(F, {
             class: a(b.question.cssClasses.chevronButtonSvg),
             iconName: b.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1661,7 +1661,7 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), vn = /* @__PURE__ */ h({
+}), qn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
@@ -1684,15 +1684,15 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), qn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], yn = ["id"], gn = /* @__PURE__ */ h({
+}), yn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], gn = ["id"], hn = /* @__PURE__ */ h({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, n = I(() => {
+    const s = r, n = S(() => {
       const c = s.question;
-      return c.dropdownListModel || (c.dropdownListModel = new Le(c)), s.question.dropdownListModel;
+      return c.dropdownListModel || (c.dropdownListModel = new Ne(c)), s.question.dropdownListModel;
     }), e = (c) => {
       var q;
       (q = n.value) == null || q.onClick(c);
@@ -1709,8 +1709,8 @@ const rn = /* @__PURE__ */ h({
       var q;
       (q = n.value) == null || q.onBlur(c);
     }, v = le(() => s.question.selectedChoices);
-    return B(() => n.value), (c, q) => {
-      const f = y("sv-tagbox-item"), k = y("sv-tagbox-filter"), L = y("sv-svg-icon"), b = y("sv-popup"), N = y("survey-string");
+    return L(() => n.value), (c, q) => {
+      const f = y("sv-tagbox-item"), k = y("sv-tagbox-filter"), _ = y("sv-svg-icon"), b = y("sv-popup"), N = y("survey-string");
       return i(), u("div", {
         class: a(c.question.cssClasses.selectWrapper),
         onClick: e
@@ -1736,10 +1736,10 @@ const rn = /* @__PURE__ */ h({
           p("div", {
             class: a(c.question.cssClasses.controlValue)
           }, [
-            (i(!0), u(_, null, D(w(v), (W, V) => (i(), g(f, {
+            (i(!0), u(D, null, B(w(v), (W, F) => (i(), g(f, {
               item: W,
               question: c.question,
-              key: "item" + V
+              key: "item" + F
             }, null, 8, ["item", "question"]))), 128)),
             C(k, {
               model: n.value,
@@ -1752,7 +1752,7 @@ const rn = /* @__PURE__ */ h({
             onClick: t,
             "aria-hidden": "true"
           }, [
-            C(L, {
+            C(_, {
               class: a(c.question.cssClasses.cleanButtonSvg),
               iconName: c.question.cssClasses.cleanButtonIconId,
               title: c.question.clearCaption,
@@ -1761,7 +1761,7 @@ const rn = /* @__PURE__ */ h({
           ], 2)), [
             [E, c.question.showClearButton]
           ]) : d("", !0)
-        ], 42, qn)),
+        ], 42, yn)),
         c.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
@@ -1772,7 +1772,7 @@ const rn = /* @__PURE__ */ h({
             key: 0,
             locString: c.question.locReadOnlyText
           }, null, 8, ["locString"])) : d("", !0)
-        ], 10, yn)) : (i(), g(b, {
+        ], 10, gn)) : (i(), g(b, {
           key: 1,
           model: n.value.popupModel
         }, null, 8, ["model"])),
@@ -1782,7 +1782,7 @@ const rn = /* @__PURE__ */ h({
           onPointerdown: o,
           "aria-hidden": "true"
         }, [
-          C(L, {
+          C(_, {
             class: a(c.question.cssClasses.chevronButtonSvg),
             iconName: c.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1791,7 +1791,7 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), hn = { style: { visibility: "hidden" } }, Cn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], bn = /* @__PURE__ */ h({
+}), Cn = { style: { visibility: "hidden" } }, bn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], kn = /* @__PURE__ */ h({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1808,7 +1808,7 @@ const rn = /* @__PURE__ */ h({
     }, t = (l) => {
       s.model.onFocus(l);
     };
-    return B(() => s.model), (l, m) => {
+    return L(() => s.model), (l, m) => {
       const v = y("survey-string");
       return i(), u("div", {
         class: a(l.question.cssClasses.hint)
@@ -1830,7 +1830,7 @@ const rn = /* @__PURE__ */ h({
             key: 1,
             class: a(l.question.cssClasses.hintSuffix)
           }, [
-            p("span", hn, R(l.model.inputStringRendered), 1),
+            p("span", Cn, R(l.model.inputStringRendered), 1),
             p("span", null, R(l.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(p("input", {
@@ -1855,14 +1855,14 @@ const rn = /* @__PURE__ */ h({
             onKeydown: e,
             onBlur: o,
             onFocus: t
-          }, null, 42, Cn), [
-            [we, l.model.inputStringRendered]
+          }, null, 42, bn), [
+            [Ie, l.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), kn = { class: "sv-tagbox__item-text" }, fn = /* @__PURE__ */ h({
+}), fn = { class: "sv-tagbox__item-text" }, wn = /* @__PURE__ */ h({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1872,13 +1872,13 @@ const rn = /* @__PURE__ */ h({
     const s = r, n = (e) => {
       s.question.dropdownListModel.deselectItem(s.item.value), e.stopPropagation();
     };
-    return B(() => s.item), (e, o) => {
+    return L(() => s.item), (e, o) => {
       const t = y("survey-string"), l = y("sv-svg-icon");
       return i(), u("div", {
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        p("div", kn, [
+        p("div", fn, [
           C(t, {
             locString: e.item.locText
           }, null, 8, ["locString"])
@@ -1896,7 +1896,7 @@ const rn = /* @__PURE__ */ h({
       ]);
     };
   }
-}), wn = /* @__PURE__ */ h({
+}), In = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
@@ -1924,7 +1924,7 @@ const rn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: n
       }, [
-        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.rankingChoices, (v, c) => (i(), g(T(e(v)), H({
+        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u(D, { key: 0 }, B(t.question.rankingChoices, (v, c) => (i(), g(T(e(v)), H({
           key: v.value + "-" + c + "-item"
         }, o(v, c)), null, 16))), 128)),
         t.question.selectToRankEnabled ? (i(), u("div", {
@@ -1932,7 +1932,7 @@ const rn = /* @__PURE__ */ h({
           class: a(t.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (i(!0), u(_, null, D(t.question.unRankingChoices, (v, c) => (i(), g(T(e(v)), H({
+          (i(!0), u(D, null, B(t.question.unRankingChoices, (v, c) => (i(), g(T(e(v)), H({
             key: v.value + "-" + c + "-item"
           }, o(v, c, !0)), null, 16))), 128)),
           t.question.unRankingChoices.length === 0 ? (i(), u("div", {
@@ -1953,7 +1953,7 @@ const rn = /* @__PURE__ */ h({
           class: a(t.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (i(!0), u(_, null, D(t.question.rankingChoices, (v, c) => (i(), g(T(e(v)), H({
+          (i(!0), u(D, null, B(t.question.rankingChoices, (v, c) => (i(), g(T(e(v)), H({
             key: v.value + "-" + c + "-item"
           }, o(v, c)), null, 16))), 128)),
           t.question.rankingChoices.length === 0 ? (i(), u("div", {
@@ -1968,10 +1968,10 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), In = ["tabindex", "data-sv-drop-target-ranking-item"], Sn = {
+}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Rn = ["xlink:href"], Tn = ["xlink:href"], $n = ["xlink:href"], _n = /* @__PURE__ */ h({
+}, Tn = ["xlink:href"], $n = ["xlink:href"], _n = ["xlink:href"], Dn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -1981,8 +1981,8 @@ const rn = /* @__PURE__ */ h({
     unrankedItem: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = I(() => s.question.getNumberByIndex(s.index));
-    return B(() => s.item), (e, o) => {
+    const s = r, n = S(() => s.question.getNumberByIndex(s.index));
+    return L(() => s.item), (e, o) => {
       const t = y("survey-string");
       return i(), u("div", {
         tabindex: e.question.getItemTabIndex(e.item),
@@ -2008,7 +2008,7 @@ const rn = /* @__PURE__ */ h({
           );
         })
       }, [
-        p("div", Sn, [
+        p("div", Rn, [
           p("div", {
             class: a(e.question.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2023,14 +2023,14 @@ const rn = /* @__PURE__ */ h({
               }, [
                 p("use", {
                   "xlink:href": e.question.dragDropSvgIcon
-                }, null, 8, Rn)
+                }, null, 8, Tn)
               ], 2)),
               (i(), u("svg", {
                 class: a(e.question.getIconFocusCss())
               }, [
                 p("use", {
                   "xlink:href": e.question.arrowsSvgIcon
-                }, null, 8, Tn)
+                }, null, 8, $n)
               ], 2))
             ], 2),
             !e.unrankedItem && n.value ? (i(), u("div", {
@@ -2043,7 +2043,7 @@ const rn = /* @__PURE__ */ h({
               (i(), u("svg", null, [
                 p("use", {
                   "xlink:href": e.question.dashSvgIcon
-                }, null, 8, $n)
+                }, null, 8, _n)
               ]))
             ], 2)),
             p("div", {
@@ -2055,13 +2055,13 @@ const rn = /* @__PURE__ */ h({
             ], 2)
           ], 2)
         ])
-      ], 42, In);
+      ], 42, Sn);
     };
   }
-}), Dn = { role: "radiogroup" }, Bn = /* @__PURE__ */ p("legend", {
+}), Bn = { role: "radiogroup" }, Ln = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Ln = /* @__PURE__ */ h({
+}, null, -1), Nn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
@@ -2078,8 +2078,8 @@ const rn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: n
       }, [
-        p("fieldset", Dn, [
-          Bn,
+        p("fieldset", Bn, [
+          Ln,
           o.question.hasMinLabel ? (i(), u("span", {
             key: 0,
             class: a(o.question.cssClasses.minText)
@@ -2088,7 +2088,7 @@ const rn = /* @__PURE__ */ h({
               locString: o.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
-          (i(!0), u(_, null, D(o.question.renderedRateItems, (m, v) => (i(), g(T(o.question.itemComponent), {
+          (i(!0), u(D, null, B(o.question.renderedRateItems, (m, v) => (i(), g(T(o.question.itemComponent), {
             key: e(v),
             item: m,
             index: v,
@@ -2106,7 +2106,7 @@ const rn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Nn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Pn = /* @__PURE__ */ h({
+}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], An = /* @__PURE__ */ h({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2115,7 +2115,7 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return B(() => s.item), (n, e) => {
+    return L(() => s.item), (n, e) => {
       const o = y("survey-string");
       return i(), u("label", {
         key: n.item.value,
@@ -2134,7 +2134,7 @@ const rn = /* @__PURE__ */ h({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-errormessage": n.question.ariaErrormessage
-        }, null, 8, Nn),
+        }, null, 8, Pn),
         p("span", {
           class: a(n.question.cssClasses.itemText)
         }, [
@@ -2145,7 +2145,7 @@ const rn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), An = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Mn = /* @__PURE__ */ h({
+}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], En = /* @__PURE__ */ h({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2154,12 +2154,12 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return B(() => s.item), (n, e) => {
+    return L(() => s.item), (n, e) => {
       const o = y("sv-svg-icon");
       return i(), u("label", {
         key: n.item.value,
         onMousedown: e[1] || (e[1] = (t) => n.question.onMouseDown()),
-        style: S(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
+        style: I(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
         class: a(n.question.getItemClass(n.item.itemValue, n.item.highlight)),
         onMouseover: e[2] || (e[2] = (t) => n.question.onItemMouseIn(n.item)),
         onMouseleave: e[3] || (e[3] = (t) => n.question.onItemMouseOut(n.item))
@@ -2176,7 +2176,7 @@ const rn = /* @__PURE__ */ h({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-errormessage": n.question.ariaErrormessage
-        }, null, 8, An),
+        }, null, 8, Mn),
         C(o, {
           iconName: n.question.getItemSmileyIconName(n.item.itemValue),
           size: "auto",
@@ -2185,7 +2185,7 @@ const rn = /* @__PURE__ */ h({
       ], 38);
     };
   }
-}), En = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Hn = /* @__PURE__ */ h({
+}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Wn = /* @__PURE__ */ h({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2194,7 +2194,7 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return B(() => s.item), (n, e) => {
+    return L(() => s.item), (n, e) => {
       const o = y("sv-svg-icon");
       return i(), u("label", {
         key: n.item.value,
@@ -2215,7 +2215,7 @@ const rn = /* @__PURE__ */ h({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-errormessage": n.question.ariaErrormessage
-        }, null, 8, En),
+        }, null, 8, Hn),
         C(o, {
           class: a("sv-star"),
           iconName: n.question.itemStarIcon,
@@ -2231,21 +2231,21 @@ const rn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Wn = { class: "sd-rating-dropdown-item" }, Vn = { class: "sd-rating-dropdown-item_text" }, Fn = {
+}), Fn = { class: "sd-rating-dropdown-item" }, Vn = { class: "sd-rating-dropdown-item_text" }, On = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, On = /* @__PURE__ */ h({
+}, zn = /* @__PURE__ */ h({
   __name: "RatingDropdownItem",
   props: {
     item: {}
   },
   setup(r) {
     const s = r;
-    return B(() => s.item), (n, e) => {
+    return L(() => s.item), (n, e) => {
       const o = y("survey-string");
-      return i(), u("div", Wn, [
+      return i(), u("div", Fn, [
         p("span", Vn, R(n.item.title), 1),
-        n.item.description ? (i(), u("div", Fn, [
+        n.item.description ? (i(), u("div", On, [
           C(o, {
             locString: n.item.description
           }, null, 8, ["locString"])
@@ -2259,7 +2259,7 @@ ee.Instance.registerRenderer(
   "dropdown",
   "sv-rating-dropdown"
 );
-const zn = /* @__PURE__ */ h({
+const Un = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
@@ -2278,7 +2278,7 @@ const zn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Un = ["name", "value", "id", ".indeterminate", "disabled", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Kn = /* @__PURE__ */ h({
+}), Kn = ["name", "value", "id", ".indeterminate", "disabled", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Qn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -2320,7 +2320,7 @@ const zn = /* @__PURE__ */ h({
             "aria-describedby": t.question.a11y_input_ariaDescribedBy,
             "aria-invalid": t.question.a11y_input_ariaInvalid,
             "aria-errormessage": t.question.a11y_input_ariaErrormessage
-          }, null, 42, Un), [
+          }, null, 42, Kn), [
             [oe, t.question.booleanValue]
           ]),
           p("div", {
@@ -2340,7 +2340,8 @@ const zn = /* @__PURE__ */ h({
             onClick: l[2] || (l[2] = (c) => o(c))
           }, [
             p("span", {
-              class: a(t.question.cssClasses.slider)
+              class: a(t.question.cssClasses.slider),
+              style: I({ marginLeft: t.question.thumbMargin })
             }, [
               t.question.cssClasses.sliderText && t.question.isDeterminated ? (i(), u("span", {
                 key: 0,
@@ -2350,7 +2351,7 @@ const zn = /* @__PURE__ */ h({
                   locString: t.question.getCheckedLabel()
                 }, null, 8, ["locString"])
               ], 2)) : d("", !0)
-            ], 2)
+            ], 6)
           ], 2),
           p("div", {
             class: a(t.question.cssClasses.sliderGhost),
@@ -2374,7 +2375,7 @@ ee.Instance.registerRenderer(
   "radio",
   "sv-boolean-radio"
 );
-const Qn = /* @__PURE__ */ h({
+const jn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
@@ -2415,7 +2416,7 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), jn = ["name", "value", "checked", "aria-errormessage", "disabled"], Gn = ["xlink:href"], Jn = /* @__PURE__ */ h({
+}), Gn = ["name", "value", "checked", "aria-errormessage", "disabled"], Jn = ["xlink:href"], Xn = /* @__PURE__ */ h({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2445,7 +2446,7 @@ const Qn = /* @__PURE__ */ h({
             disabled: e.question.isInputReadOnly,
             class: a(e.question.cssClasses.itemRadioControl),
             onChange: n
-          }, null, 42, jn),
+          }, null, 42, Gn),
           e.question.cssClasses.materialRadioDecorator ? (i(), u("span", {
             key: 0,
             class: a(e.question.cssClasses.materialRadioDecorator)
@@ -2456,7 +2457,7 @@ const Qn = /* @__PURE__ */ h({
             }, [
               p("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Gn)
+              }, null, 8, Jn)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           p("span", {
@@ -2468,13 +2469,13 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Xn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Yn = ["xlink:href"], Zn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), xn = ["id"], eo = ["id"];
+}), Yn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Zn = ["xlink:href"], xn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), eo = ["id"], so = ["id"];
 ee.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const so = /* @__PURE__ */ h({
+const no = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2510,7 +2511,7 @@ const so = /* @__PURE__ */ h({
               "aria-label": e.question.ariaLabel,
               "aria-invalid": e.question.ariaInvalid,
               "aria-errormessage": e.question.ariaErrormessage
-            }, null, 42, Xn), [
+            }, null, 42, Yn), [
               [oe, e.question.booleanValue]
             ]),
             p("span", {
@@ -2522,9 +2523,9 @@ const so = /* @__PURE__ */ h({
               }, [
                 p("use", {
                   "xlink:href": e.question.svgIcon
-                }, null, 8, Yn)
+                }, null, 8, Zn)
               ], 2)) : d("", !0),
-              Zn
+              xn
             ], 2),
             e.question.isLabelRendered ? (i(), u("span", {
               key: 0,
@@ -2541,7 +2542,7 @@ const so = /* @__PURE__ */ h({
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])) : d("", !0)
-            ], 10, xn)) : d("", !0)
+            ], 10, eo)) : d("", !0)
           ], 2),
           e.question.canRenderLabelDescription ? (i(), u("div", {
             key: 0,
@@ -2551,12 +2552,12 @@ const so = /* @__PURE__ */ h({
             C(m, {
               locString: e.question.locDescription
             }, null, 8, ["locString"])
-          ], 10, eo)) : d("", !0)
+          ], 10, so)) : d("", !0)
         ], 2)
       ], 2);
     };
   }
-}), no = /* @__PURE__ */ h({
+}), oo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
@@ -2572,14 +2573,14 @@ const so = /* @__PURE__ */ h({
         ref: n
       }, [
         p("tbody", null, [
-          (i(!0), u(_, null, D(w(e), (m, v) => (i(), u(_, {
+          (i(!0), u(D, null, B(w(e), (m, v) => (i(), u(D, {
             key: o.question.inputId + "rowkey" + v
           }, [
             m.isVisible ? (i(), u("tr", {
               key: 0,
               class: a(o.question.cssClasses.row)
             }, [
-              (i(!0), u(_, null, D(m.cells, (c) => (i(), u("td", {
+              (i(!0), u(D, null, B(m.cells, (c) => (i(), u("td", {
                 key: "item" + c.item.editor.id,
                 class: a(c.className)
               }, [
@@ -2594,7 +2595,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), oo = { key: 1 }, to = /* @__PURE__ */ h({
+}), to = { key: 1 }, io = /* @__PURE__ */ h({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2602,8 +2603,8 @@ const so = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, n = (o) => re(o);
-    B(() => s.cell.item.editor);
-    const e = I(() => s.cell.item);
+    L(() => s.cell.item.editor);
+    const e = S(() => s.cell.item);
     return (o, t) => {
       const l = y("survey-string"), m = y("survey-errors");
       return o.cell.isErrorsCell ? (i(), g(m, {
@@ -2615,7 +2616,7 @@ const so = /* @__PURE__ */ h({
       }, [
         p("span", {
           class: a(o.question.getItemTitleCss()),
-          style: S({ minWidth: o.question.itemTitleWidth, width: o.question.itemTitleWidth })
+          style: I({ minWidth: o.question.itemTitleWidth, width: o.question.itemTitleWidth })
         }, [
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
@@ -2624,7 +2625,7 @@ const so = /* @__PURE__ */ h({
           C(l, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
-          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", oo, "\xA0")) : d("", !0),
+          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", to, "\xA0")) : d("", !0),
           e.value.editor.isRequireTextAfterTitle ? (i(), u("span", {
             key: 2,
             "aria-hidden": "true",
@@ -2643,7 +2644,7 @@ const so = /* @__PURE__ */ h({
       ], 2));
     };
   }
-}), io = { class: "sv-hidden" }, ro = { key: 0 }, lo = { key: 0 }, ao = ["onClick"], uo = ["data-responsive-title", "onClick"], mo = /* @__PURE__ */ h({
+}), ro = { class: "sv-hidden" }, lo = { key: 0 }, ao = { key: 0 }, uo = ["onClick"], mo = ["data-responsive-title", "onClick"], co = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
@@ -2675,17 +2676,17 @@ const so = /* @__PURE__ */ h({
         ref: n
       }, [
         p("fieldset", null, [
-          p("legend", io, R(t.question.locTitle.renderedHtml), 1),
+          p("legend", ro, R(t.question.locTitle.renderedHtml), 1),
           p("table", {
             class: a(t.question.getTableCss())
           }, [
-            t.question.showHeader ? (i(), u("thead", ro, [
+            t.question.showHeader ? (i(), u("thead", lo, [
               p("tr", null, [
-                t.question.hasRows ? (i(), u("td", lo)) : d("", !0),
-                (i(!0), u(_, null, D(t.question.visibleColumns, (v, c) => (i(), u("th", {
+                t.question.hasRows ? (i(), u("td", ao)) : d("", !0),
+                (i(!0), u(D, null, B(t.question.visibleColumns, (v, c) => (i(), u("th", {
                   key: c,
                   class: a(t.question.cssClasses.headerCell),
-                  style: S({
+                  style: I({
                     minWidth: t.question.columnMinWidth,
                     width: t.question.columnMinWidth
                   })
@@ -2693,7 +2694,7 @@ const so = /* @__PURE__ */ h({
                   (i(), g(T(t.question.getColumnHeaderWrapperComponentName(v)), {
                     componentData: t.question.getColumnHeaderWrapperComponentData(v)
                   }, {
-                    default: F(() => [
+                    default: V(() => [
                       C(m, {
                         locString: v.locText
                       }, null, 8, ["locString"])
@@ -2704,13 +2705,13 @@ const so = /* @__PURE__ */ h({
               ])
             ])) : d("", !0),
             p("tbody", null, [
-              (i(!0), u(_, null, D(e.value, (v, c) => (i(), u("tr", {
+              (i(!0), u(D, null, B(e.value, (v, c) => (i(), u("tr", {
                 key: "row_" + v.name + "_" + c,
                 class: a(v.rowClasses || void 0)
               }, [
                 P(p("td", {
                   class: a(v.rowTextClasses),
-                  style: S({
+                  style: I({
                     minWidth: t.question.rowTitleWidth,
                     width: t.question.rowTitleWidth
                   })
@@ -2718,7 +2719,7 @@ const so = /* @__PURE__ */ h({
                   (i(), g(T(t.question.getRowHeaderWrapperComponentName(v)), {
                     componentData: t.question.getRowHeaderWrapperComponentData(v)
                   }, {
-                    default: F(() => [
+                    default: V(() => [
                       C(m, {
                         locString: v.locText
                       }, null, 8, ["locString"])
@@ -2728,7 +2729,7 @@ const so = /* @__PURE__ */ h({
                 ], 6), [
                   [E, t.question.hasRows]
                 ]),
-                t.question.hasCellText ? (i(!0), u(_, { key: 0 }, D(t.question.visibleColumns, (q, f) => (i(), u("td", {
+                t.question.hasCellText ? (i(!0), u(D, { key: 0 }, B(t.question.visibleColumns, (q, f) => (i(), u("td", {
                   key: f,
                   class: a(t.question.getItemClass(v, q)),
                   onClick: (k) => o(v, q)
@@ -2736,8 +2737,8 @@ const so = /* @__PURE__ */ h({
                   C(m, {
                     locString: t.question.getCellDisplayLocText(v.name, q)
                   }, null, 8, ["locString"])
-                ], 10, ao))), 128)) : d("", !0),
-                t.question.hasCellText ? d("", !0) : (i(!0), u(_, { key: 1 }, D(t.question.visibleColumns, (q, f) => (i(), u("td", {
+                ], 10, uo))), 128)) : d("", !0),
+                t.question.hasCellText ? d("", !0) : (i(!0), u(D, { key: 1 }, B(t.question.visibleColumns, (q, f) => (i(), u("td", {
                   key: f,
                   "data-responsive-title": q.locText.renderedHtml,
                   class: a(t.question.cssClasses.cell),
@@ -2749,7 +2750,7 @@ const so = /* @__PURE__ */ h({
                     column: q,
                     columnIndex: f
                   }, null, 8, ["question", "row", "column", "columnIndex"]))
-                ], 10, uo))), 128))
+                ], 10, mo))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2757,7 +2758,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), co = ["data-sv-drop-target-matrix-row"], po = /* @__PURE__ */ h({
+}), po = ["data-sv-drop-target-matrix-row"], vo = /* @__PURE__ */ h({
   __name: "MatrixRow",
   props: {
     question: {},
@@ -2765,7 +2766,7 @@ const so = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, n = $();
-    B(() => s.row);
+    L(() => s.row);
     const e = K(
       () => s.row,
       (o, t) => {
@@ -2786,15 +2787,15 @@ const so = /* @__PURE__ */ h({
         ref_key: "root",
         ref: n
       }, [
-        (i(!0), u(_, null, D(o.row.cells, (m, v) => (i(), g(l, {
+        (i(!0), u(D, null, B(o.row.cells, (m, v) => (i(), g(l, {
           cell: m,
           question: o.question,
           key: o.row.id + "_" + v
         }, null, 8, ["cell", "question"]))), 128))
-      ], 42, co)) : d("", !0);
+      ], 42, po)) : d("", !0);
     };
   }
-}), vo = ["name", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], qo = ["xlink:href"], yo = /* @__PURE__ */ h({
+}), qo = ["name", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], yo = ["xlink:href"], go = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixCell",
   props: {
@@ -2825,7 +2826,7 @@ const so = /* @__PURE__ */ h({
           ),
           "aria-invalid": s.question.a11y_input_ariaInvalid,
           "aria-errormessage": s.question.a11y_input_ariaErrormessage
-        }, null, 10, vo), [
+        }, null, 10, qo), [
           [x, s.row.value]
         ]),
         p("span", {
@@ -2837,7 +2838,7 @@ const so = /* @__PURE__ */ h({
           }, [
             p("use", {
               "xlink:href": s.question.itemSvgIcon
-            }, null, 8, qo)
+            }, null, 8, yo)
           ], 2)) : d("", !0)
         ], 2),
         s.question.isMobile ? (i(), u("span", {
@@ -2851,7 +2852,7 @@ const so = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), go = /* @__PURE__ */ h({
+}), ho = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
@@ -2868,14 +2869,14 @@ const so = /* @__PURE__ */ h({
       }, null, 8, ["question"]);
     };
   }
-}), ho = { key: 0 }, Co = { key: 1 }, bo = /* @__PURE__ */ h({
+}), Co = { key: 0 }, bo = { key: 1 }, ko = /* @__PURE__ */ h({
   __name: "MatrixTable",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.question.renderedTable);
-    return B(
+    const s = r, n = S(() => s.question.renderedTable);
+    return L(
       () => n.value,
       (e) => {
         const o = ie();
@@ -2891,24 +2892,24 @@ const so = /* @__PURE__ */ h({
     ), (e, o) => {
       const t = y("survey-string"), l = y("survey-matrixheaderrequired"), m = y("survey-matrix-row"), v = y("survey-matrixdropdown-cell");
       return i(), u("div", {
-        style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
+        style: I({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: a(e.question.cssClasses.tableWrapper)
       }, [
         p("table", {
           class: a(e.question.getTableCss())
         }, [
-          n.value.showHeader ? (i(), u("thead", ho, [
+          n.value.showHeader ? (i(), u("thead", Co, [
             p("tr", null, [
-              (i(!0), u(_, null, D(n.value.headerRow.cells, (c) => (i(), u(_, null, [
+              (i(!0), u(D, null, B(n.value.headerRow.cells, (c) => (i(), u(D, null, [
                 c.hasTitle ? (i(), u("th", {
                   key: "header_" + c.id,
                   class: a(c.className),
-                  style: S({ minWidth: c.minWidth, width: c.width })
+                  style: I({ minWidth: c.minWidth, width: c.width })
                 }, [
                   (i(), g(T(e.question.getColumnHeaderWrapperComponentName(c)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(c)
                   }, {
-                    default: F(() => [
+                    default: V(() => [
                       C(t, {
                         locString: c.locTitle
                       }, null, 8, ["locString"]),
@@ -2924,21 +2925,21 @@ const so = /* @__PURE__ */ h({
                 c.hasTitle ? d("", !0) : (i(), u("td", {
                   class: a(c.className),
                   key: "header_" + c.id,
-                  style: S({ minWidth: c.minWidth, width: c.width })
+                  style: I({ minWidth: c.minWidth, width: c.width })
                 }, null, 6))
               ], 64))), 256))
             ])
           ])) : d("", !0),
           p("tbody", null, [
-            (i(!0), u(_, null, D(n.value.renderedRows, (c) => (i(), g(m, {
+            (i(!0), u(D, null, B(n.value.renderedRows, (c) => (i(), g(m, {
               key: e.question.inputId + "_" + c.id,
               row: c,
               question: e.question
             }, null, 8, ["row", "question"]))), 128))
           ]),
-          n.value.showFooter ? (i(), u("tfoot", Co, [
+          n.value.showFooter ? (i(), u("tfoot", bo, [
             p("tr", null, [
-              (i(!0), u(_, null, D(n.value.footerRow.cells, (c, q) => (i(), g(v, {
+              (i(!0), u(D, null, B(n.value.footerRow.cells, (c, q) => (i(), g(v, {
                 cell: c,
                 question: e.question,
                 key: "footer_" + q
@@ -2949,7 +2950,7 @@ const so = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), ko = /* @__PURE__ */ p("span", null, "\xA0", -1), fo = /* @__PURE__ */ h({
+}), fo = /* @__PURE__ */ p("span", null, "\xA0", -1), wo = /* @__PURE__ */ h({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2957,15 +2958,15 @@ const so = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return B(() => s.column), (n, e) => n.column.isRenderedRequired ? (i(), u(_, { key: 0 }, [
-      ko,
+    return L(() => s.column), (n, e) => n.column.isRenderedRequired ? (i(), u(D, { key: 0 }, [
+      fo,
       n.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
         class: a(n.question.cssClasses.cellRequiredText)
       }, R(n.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
-}), wo = ["data-responsive-title", "title", "colspan"], Io = /* @__PURE__ */ h({
+}), Io = ["data-responsive-title", "title", "colspan"], So = /* @__PURE__ */ h({
   __name: "MatrixDropdownCellComp",
   props: {
     question: {},
@@ -2988,38 +2989,38 @@ const so = /* @__PURE__ */ h({
       };
       s.question.survey.matrixAfterCellRender(s.question, k), f && f.afterRenderCore(q);
     });
-    const v = I(() => {
+    const v = S(() => {
       const q = s.cell;
       if (q.hasPanel) {
         const f = q.panel, k = f.survey;
         if (k) {
-          const L = k.getElementWrapperComponentName(f);
-          if (L)
-            return L;
+          const _ = k.getElementWrapperComponentName(f);
+          if (_)
+            return _;
         }
         return "survey-panel";
       }
-    }), c = I(() => {
+    }), c = S(() => {
       if (s.cell.hasPanel) {
         const f = s.cell.panel, k = f.survey;
-        let L;
-        return k && (L = k.getElementWrapperComponentData(f)), {
+        let _;
+        return k && (_ = k.getElementWrapperComponentData(f)), {
           componentName: "survey-panel",
           componentData: {
             element: f,
-            data: L,
+            data: _,
             css: s.question.cssClasses
           }
         };
       }
     });
     return (q, f) => {
-      const k = y("survey-errors"), L = y("sv-matrix-drag-drop-icon"), b = y("sv-action-bar"), N = y("survey-radiogroup-item"), W = y("survey-checkbox-item"), V = y("survey-other-choice"), Q = y("survey-string");
+      const k = y("survey-errors"), _ = y("sv-matrix-drag-drop-icon"), b = y("sv-action-bar"), N = y("survey-radiogroup-item"), W = y("survey-checkbox-item"), F = y("survey-other-choice"), Q = y("survey-string");
       return i(), u("td", {
         class: a(q.cell.className),
         "data-responsive-title": o(),
         title: q.cell.getTitle(),
-        style: S(t()),
+        style: I(t()),
         colspan: q.cell.colSpans,
         onFocusin: f[0] || (f[0] = (ue) => q.cell.focusIn()),
         ref_key: "root",
@@ -3029,7 +3030,7 @@ const so = /* @__PURE__ */ h({
           key: 0,
           element: q.cell.question
         }, null, 8, ["element"])) : d("", !0),
-        q.cell.isDragHandlerCell ? (i(), g(L, {
+        q.cell.isDragHandlerCell ? (i(), g(_, {
           key: 1,
           item: { data: { row: q.cell.row, question: q.question } }
         }, null, 8, ["item"])) : d("", !0),
@@ -3047,7 +3048,7 @@ const so = /* @__PURE__ */ h({
             key: 0,
             componentData: q.question.getCellWrapperComponentData(q.cell.cell)
           }, {
-            default: F(() => [
+            default: V(() => [
               (i(), g(T(m(q.cell.question)), {
                 question: q.cell.question
               }, null, 8, ["question"]))
@@ -3062,7 +3063,7 @@ const so = /* @__PURE__ */ h({
             key: 2,
             componentData: q.question.getCellWrapperComponentData(q.cell.cell)
           }, {
-            default: F(() => [
+            default: V(() => [
               q.cell.isRadio ? (i(), g(N, {
                 key: q.cell.item.value,
                 question: q.cell.question,
@@ -3078,7 +3079,7 @@ const so = /* @__PURE__ */ h({
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          q.cell.isOtherChoice ? (i(), g(V, {
+          q.cell.isOtherChoice ? (i(), g(F, {
             key: 3,
             question: q.cell.question
           }, null, 8, ["question"])) : d("", !0)
@@ -3089,7 +3090,7 @@ const so = /* @__PURE__ */ h({
           key: 5,
           componentData: q.question.getCellWrapperComponentData(q.cell)
         }, {
-          default: F(() => [
+          default: V(() => [
             q.cell.hasTitle ? (i(), g(Q, {
               key: 0,
               locString: q.cell.locTitle
@@ -3101,10 +3102,10 @@ const so = /* @__PURE__ */ h({
           ]),
           _: 1
         }, 8, ["componentData"])) : d("", !0)
-      ], 46, wo);
+      ], 46, Io);
     };
   }
-}), So = /* @__PURE__ */ h({
+}), Ro = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3191,11 +3192,11 @@ const so = /* @__PURE__ */ h({
 });
 function ae(r, s = !0) {
   return {
-    question: I(() => r.item.data.question),
-    row: s ? I(() => r.item.data.row) : void 0
+    question: S(() => r.item.data.question),
+    row: s ? S(() => r.item.data.row) : void 0
   };
 }
-const Ro = ["disabled"], To = /* @__PURE__ */ h({
+const To = ["disabled"], $o = /* @__PURE__ */ h({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3216,10 +3217,10 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         p("span", {
           class: a(w(n).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, Ro);
+      ], 10, To);
     };
   }
-}), $o = ["xlink:href"], _o = /* @__PURE__ */ h({
+}), _o = ["xlink:href"], Do = /* @__PURE__ */ h({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3232,13 +3233,13 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
     }, [
       p("use", {
         "xlink:href": w(n).iconDragElement
-      }, null, 8, $o)
+      }, null, 8, _o)
     ], 2)) : (i(), u("span", {
       key: 1,
       class: a(w(n).cssClasses.iconDrag)
     }, null, 2));
   }
-}), Do = ["aria-expanded", "aria-controls"], Bo = /* @__PURE__ */ h({
+}), Bo = ["aria-expanded", "aria-controls"], Lo = /* @__PURE__ */ h({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3259,10 +3260,10 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
           iconName: w(n).getDetailPanelIconId(w(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, Do);
+      ], 10, Bo);
     };
   }
-}), Lo = /* @__PURE__ */ h({
+}), No = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3313,7 +3314,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
       };
     };
     return (m, v) => {
-      const c = y("survey-string"), q = y("sv-paneldynamic-add-btn"), f = y("survey-paneldynamicprogress"), k = y("sv-paneldynamic-remove-btn"), L = y("survey-paneldynamicprogress-v2");
+      const c = y("survey-string"), q = y("sv-paneldynamic-add-btn"), f = y("survey-paneldynamicprogress"), k = y("sv-paneldynamic-remove-btn"), _ = y("survey-paneldynamicprogress-v2");
       return i(), u("div", {
         class: a(m.question.cssClasses.root),
         ref_key: "root",
@@ -3338,7 +3339,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         }, [
           p("div", {
             class: a(m.question.cssClasses.progressBar),
-            style: S({ width: m.question.progress }),
+            style: I({ width: m.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3349,7 +3350,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         p("div", {
           class: a(m.question.cssClasses.panelsContainer)
         }, [
-          (i(!0), u(_, null, D(m.question.renderedPanels, (b, N) => (i(), u(_, {
+          (i(!0), u(D, null, B(m.question.renderedPanels, (b, N) => (i(), u(D, {
             key: b.id
           }, [
             p("div", {
@@ -3375,14 +3376,14 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
           key: 4,
           data: { question: m.question }
         }, null, 8, ["data"])) : d("", !0),
-        m.question.showNavigation ? (i(), g(L, {
+        m.question.showNavigation ? (i(), g(_, {
           key: 5,
           question: m.question
         }, null, 8, ["question"])) : d("", !0)
       ], 2);
     };
   }
-}), No = /* @__PURE__ */ h({
+}), Po = /* @__PURE__ */ h({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3410,7 +3411,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
             }, [
               p("div", {
                 class: a(e.question.cssClasses.progressBar),
-                style: S({ width: e.question.progress }),
+                style: I({ width: e.question.progress }),
                 role: "progressbar"
               }, null, 6)
             ], 2)) : d("", !0),
@@ -3428,7 +3429,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Po = /* @__PURE__ */ h({
+}), Ao = /* @__PURE__ */ h({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3449,7 +3450,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         }, [
           p("div", {
             class: a(s.question.cssClasses.progressBar),
-            style: S({ width: s.question.progress }),
+            style: I({ width: s.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3466,11 +3467,11 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
   }
 });
 function Y(r) {
-  return I(
+  return S(
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const Ao = /* @__PURE__ */ h({
+const Mo = /* @__PURE__ */ h({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3498,7 +3499,7 @@ const Ao = /* @__PURE__ */ h({
       ], 2)) : d("", !0);
     };
   }
-}), Mo = ["title"], Eo = /* @__PURE__ */ h({
+}), Eo = ["title"], Ho = /* @__PURE__ */ h({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3519,10 +3520,10 @@ const Ao = /* @__PURE__ */ h({
           iconName: w(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Mo);
+      ], 10, Eo);
     };
   }
-}), Ho = ["title"], Wo = /* @__PURE__ */ h({
+}), Wo = ["title"], Fo = /* @__PURE__ */ h({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3543,7 +3544,7 @@ const Ao = /* @__PURE__ */ h({
           iconName: w(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Ho);
+      ], 10, Wo);
     };
   }
 }), Vo = /* @__PURE__ */ h({
@@ -3553,7 +3554,7 @@ const Ao = /* @__PURE__ */ h({
     data: {}
   },
   setup(r) {
-    const s = r, n = Y(s), e = I(
+    const s = r, n = Y(s), e = S(
       () => s.item && s.item.data.panel || s.data.panel
     ), o = (t) => {
       n.value.isInputReadOnly || n.value.removePanelUI(t);
@@ -3578,7 +3579,7 @@ const Ao = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Fo = /* @__PURE__ */ h({
+}), Oo = /* @__PURE__ */ h({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3590,7 +3591,7 @@ const Ao = /* @__PURE__ */ h({
       class: a(w(n).cssClasses.progressText)
     }, R(w(n).progressText), 3));
   }
-}), Oo = ["id"], zo = /* @__PURE__ */ h({
+}), zo = ["id"], Uo = /* @__PURE__ */ h({
   __name: "Errors",
   props: {
     element: {},
@@ -3607,22 +3608,22 @@ const Ao = /* @__PURE__ */ h({
       ref_key: "root",
       ref: s
     }, [
-      (i(!0), u(_, null, D(n.element.errors, (o, t) => (i(), g(T(n.element.survey.questionErrorComponent), {
+      (i(!0), u(D, null, B(n.element.errors, (o, t) => (i(), g(T(n.element.survey.questionErrorComponent), {
         element: n.element,
         key: "error_" + t,
         errorKey: "error_" + t,
         error: o,
         cssClasses: n.element.cssClasses
       }, null, 8, ["element", "errorKey", "error", "cssClasses"]))), 128))
-    ], 10, Oo)) : d("", !0);
+    ], 10, zo)) : d("", !0);
   }
-}), Uo = { key: 0 }, Ko = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Qo = /* @__PURE__ */ h({
+}), Ko = { key: 0 }, Qo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], jo = /* @__PURE__ */ h({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, n) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Uo, R(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, n) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Ko, R(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3633,16 +3634,16 @@ const Ao = /* @__PURE__ */ h({
       placeholder: s.question.renderedCommentPlaceholder,
       "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
       "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
-      style: S({ resize: s.question.resizeStyle }),
+      style: I({ resize: s.question.resizeStyle }),
       onChange: n[0] || (n[0] = (e) => {
         s.question.onCommentChange(e);
       }),
       onInput: n[1] || (n[1] = (e) => {
         s.question.onCommentInput(e);
       })
-    }, null, 46, Ko));
+    }, null, 46, Qo));
   }
-}), jo = /* @__PURE__ */ h({
+}), Go = /* @__PURE__ */ h({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3666,7 +3667,7 @@ const Ao = /* @__PURE__ */ h({
           s(l);
         })
       }, {
-        default: F(() => [
+        default: V(() => [
           n.element.hasTitleActions ? d("", !0) : (i(), g(o, {
             key: 0,
             element: n.element,
@@ -3682,7 +3683,7 @@ const Ao = /* @__PURE__ */ h({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : d("", !0);
     };
   }
-}), Go = { key: 3 }, Jo = { key: 5 }, Xo = { key: 7 }, Yo = /* @__PURE__ */ h({
+}), Jo = { key: 3 }, Xo = { key: 5 }, Yo = { key: 7 }, Zo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3690,12 +3691,12 @@ const Ao = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => (s.element.isPanel ? s.element.cssClasses.panel : s.element.cssClasses) || {}
     );
     return (e, o) => {
       const t = y("survey-string");
-      return i(), u(_, null, [
+      return i(), u(D, null, [
         e.element.isTitleRenderedAsString ? (i(), g(t, {
           key: 0,
           locString: e.element.locTitle
@@ -3711,18 +3712,18 @@ const Ao = /* @__PURE__ */ h({
           class: a(e.element.cssTitleNumber),
           "aria-hidden": !0
         }, R(e.element.no), 3)) : d("", !0),
-        !e.element.isTitleRenderedAsString && e.element.no ? (i(), u("span", Go, "\xA0")) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.no ? (i(), u("span", Jo, "\xA0")) : d("", !0),
         !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
           class: a(n.value.requiredText),
           "aria-hidden": !0
         }, R(e.element.requiredText), 3)) : d("", !0),
-        !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), u("span", Jo, "\xA0")) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), u("span", Xo, "\xA0")) : d("", !0),
         e.element.isTitleRenderedAsString ? d("", !0) : (i(), g(t, {
           key: 6,
           locString: e.element.locTitle
         }, null, 8, ["locString"])),
-        !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), u("span", Xo, "\xA0")) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), u("span", Yo, "\xA0")) : d("", !0),
         !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), u("span", {
           key: 8,
           class: a(n.value.requiredText),
@@ -3731,18 +3732,18 @@ const Ao = /* @__PURE__ */ h({
       ], 64);
     };
   }
-}), Zo = { class: "sv-title-actions" }, xo = { class: "sv-title-actions__title" }, et = /* @__PURE__ */ h({
+}), xo = { class: "sv-title-actions" }, et = { class: "sv-title-actions__title" }, st = /* @__PURE__ */ h({
   __name: "TitleActions",
   props: {
     element: {},
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.element.getTitleToolbar());
+    const s = r, n = S(() => s.element.getTitleToolbar());
     return (e, o) => {
       const t = y("survey-string"), l = y("survey-element-title-content"), m = y("sv-action-bar");
-      return i(), u("div", Zo, [
-        p("span", xo, [
+      return i(), u("div", xo, [
+        p("span", et, [
           e.element.isPage ? (i(), g(t, {
             key: 0,
             locString: e.element.locTitle
@@ -3762,15 +3763,15 @@ const Ao = /* @__PURE__ */ h({
   for (const [e, o] of s)
     n[e] = o;
   return n;
-}, st = {}, nt = { class: "sv-brand-info" }, ot = /* @__PURE__ */ Ie('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), tt = [
-  ot
+}, nt = {}, ot = { class: "sv-brand-info" }, tt = /* @__PURE__ */ Se('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), it = [
+  tt
 ];
-function it(r, s) {
-  return i(), u("div", nt, tt);
+function rt(r, s) {
+  return i(), u("div", ot, it);
 }
-const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use", null, null, -1), at = [
-  lt
-], ut = /* @__PURE__ */ h({
+const lt = /* @__PURE__ */ he(nt, [["render", rt]]), at = /* @__PURE__ */ p("use", null, null, -1), ut = [
+  at
+], dt = /* @__PURE__ */ h({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3781,7 +3782,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   },
   setup(r) {
     const s = r, n = $(), e = () => {
-      Ne(
+      Pe(
         s.size,
         s.width,
         s.height,
@@ -3799,9 +3800,9 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ref: n,
       class: "sv-svg-icon",
       role: "img"
-    }, at, 512));
+    }, ut, 512));
   }
-}), dt = /* @__PURE__ */ h({
+}), mt = /* @__PURE__ */ h({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -3831,7 +3832,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ]);
     };
   }
-}), mt = /* @__PURE__ */ h({
+}), ct = /* @__PURE__ */ h({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3842,7 +3843,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     const s = r, n = $(null), e = (t) => {
       s.handleClick && t.stopPropagation();
     };
-    B(() => s.model);
+    L(() => s.model);
     const o = le(() => s.model.renderedActions);
     return M(() => {
       !s.model.hasActions || s.model.initResponsivityManager(n.value);
@@ -3857,46 +3858,46 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
         class: a(t.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u(_, null, D(w(o), (v) => (i(), g(m, {
+        (i(!0), u(D, null, B(w(o), (v) => (i(), g(m, {
           key: v.id,
           item: v
         }, null, 8, ["item"]))), 128))
       ], 2)) : d("", !0);
     };
   }
-}), ct = ["id"], pt = { class: "sv-action__content" }, vt = /* @__PURE__ */ h({
+}), pt = ["id"], vt = { class: "sv-action__content" }, qt = /* @__PURE__ */ h({
   __name: "Action",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => s.item.component || "sv-action-bar-item"
     );
-    return B(() => s.item), (e, o) => {
+    return L(() => s.item), (e, o) => {
       const t = y("sv-action-bar-separator");
       return i(), u("div", {
         class: a(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        p("div", pt, [
+        p("div", vt, [
           e.item.needSeparator ? (i(), g(t, { key: 0 })) : d("", !0),
           (i(), g(T(n.value), { item: e.item }, null, 8, ["item"]))
         ])
-      ], 10, ct);
+      ], 10, pt);
     };
   }
-}), qt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], yt = {
+}), yt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], gt = {
   inheritAttrs: !1
-}, gt = /* @__PURE__ */ h({
-  ...yt,
+}, ht = /* @__PURE__ */ h({
+  ...gt,
   __name: "ActionBarItem",
   props: {
     item: {}
   },
   setup(r) {
     const s = r;
-    return B(() => s.item), (n, e) => {
+    return L(() => s.item), (n, e) => {
       const o = y("sv-svg-icon"), t = X("key2click");
       return P((i(), u("button", {
         class: a(n.item.getActionBarItemCss()),
@@ -3924,33 +3925,33 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           key: 1,
           class: a(n.item.getActionBarItemTitleCss())
         }, R(n.item.title), 3)) : d("", !0)
-      ], 42, qt)), [
+      ], 42, yt)), [
         [t, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
       ]);
     };
   }
-}), ht = ["disabled", "title", "role"], Ct = {
+}), Ct = ["disabled", "title", "role"], bt = {
   inheritAttrs: !1
-}, bt = /* @__PURE__ */ h({
-  ...Ct,
+}, kt = /* @__PURE__ */ h({
+  ...bt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, n = Ae;
+    const s = r, n = Me;
     let e;
-    return B(
+    return L(
       () => s.item,
       (o) => {
-        e = new Pe(o);
+        e = new Ae(o);
       },
       () => {
         e.dispose();
       }
     ), (o, t) => {
       const l = y("sv-svg-icon"), m = y("sv-popup"), v = X("key2click");
-      return i(), u(_, null, [
+      return i(), u(D, null, [
         P((i(), u("button", {
           type: "button",
           class: a(o.item.getActionBarItemCss()),
@@ -3975,7 +3976,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
             key: 1,
             class: a(o.item.getActionBarItemTitleCss())
           }, R(o.item.title), 3)) : d("", !0)
-        ], 42, ht)), [
+        ], 42, Ct)), [
           [v, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
         ]),
         C(m, {
@@ -3985,18 +3986,18 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 64);
     };
   }
-}), kt = /* @__PURE__ */ h({
+}), ft = /* @__PURE__ */ h({
   __name: "ActionBarSeparator",
   props: {
     item: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.item && s.item.innerCss);
+    const s = r, n = S(() => s.item && s.item.innerCss);
     return (e, o) => (i(), u("div", {
       class: a(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), ft = ["aria-label", "placeholder", "value"], wt = ["aria-label"], It = ["id"], St = /* @__PURE__ */ h({
+}), wt = ["aria-label", "placeholder", "value"], It = ["aria-label"], St = ["id"], Rt = /* @__PURE__ */ h({
   __name: "List",
   props: {
     model: {}
@@ -4011,7 +4012,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     }, t = (l) => {
       s.model.onMouseMove(l);
     };
-    return B(() => s.model), M(() => {
+    return L(() => s.model), M(() => {
       s.model.initListContainerHtmlElement(n.value);
     }), (l, m) => {
       const v = y("sv-svg-icon"), c = y("sv-list-item");
@@ -4040,7 +4041,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
             value: l.model.filterString,
             onChange: e,
             onKeyup: o
-          }, null, 42, ft),
+          }, null, 42, wt),
           l.model.showSearchClearButton && !!l.model.filterString ? (i(), u("button", {
             key: 0,
             onClick: m[0] || (m[0] = (q) => {
@@ -4060,7 +4061,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           p("div", {
             class: a(l.model.cssClasses.emptyText),
             "aria-label": l.model.emptyMessage
-          }, R(l.model.emptyMessage), 11, wt)
+          }, R(l.model.emptyMessage), 11, It)
         ], 2), [
           [E, l.model.isEmpty]
         ]),
@@ -4077,28 +4078,28 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
             l.model.onKeyDown(q);
           })
         }, [
-          (i(!0), u(_, null, D(l.model.renderedActions, (q) => (i(), g(c, {
+          (i(!0), u(D, null, B(l.model.renderedActions, (q) => (i(), g(c, {
             item: q,
             model: l.model,
             key: q.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, It)), [
+        ], 42, St)), [
           [E, !l.model.isEmpty]
         ]) : d("", !0)
       ], 2);
     };
   }
-}), Rt = ["aria-selected", "id", "tabindex"], Tt = ["title"], $t = /* @__PURE__ */ h({
+}), Tt = ["aria-selected", "id", "tabindex"], $t = ["title"], _t = /* @__PURE__ */ h({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.item.elementId), e = (o) => {
+    const s = r, n = S(() => s.item.elementId), e = (o) => {
       s.model.onItemClick(s.item), o.stopPropagation();
     };
-    return B(() => s.item), M(() => {
+    return L(() => s.item), M(() => {
       setTimeout(() => {
         s.model.onLastItemRended(s.item);
       });
@@ -4119,7 +4120,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           class: a(o.model.cssClasses.itemSeparator)
         }, null, 2)) : d("", !0),
         p("div", {
-          style: S({ paddingInlineStart: o.model.getItemIndent(o.item) }),
+          style: I({ paddingInlineStart: o.model.getItemIndent(o.item) }),
           class: a(o.model.cssClasses.itemBody),
           title: o.item.locTitle.calculatedText
         }, [
@@ -4137,14 +4138,14 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
             key: 2,
             item: o.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 14, Tt)
-      ], 42, Rt)), [
+        ], 14, $t)
+      ], 42, Tt)), [
         [E, o.model.isItemVisible(o.item)],
         [v, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
     };
   }
-}), _t = /* @__PURE__ */ h({
+}), Dt = /* @__PURE__ */ h({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4155,10 +4156,10 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     return K(
       () => s.model,
       (o) => {
-        n.value && n.value.dispose(), n.value = Me(o, void 0);
+        n.value && n.value.dispose(), n.value = Ee(o, void 0);
       },
       { immediate: !0 }
-    ), B(() => n.value), M(() => {
+    ), L(() => n.value), M(() => {
       const o = e.value;
       n.value.setComponentElement(
         o,
@@ -4176,13 +4177,13 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 512);
     };
   }
-}), Dt = { class: "sv-popup__shadow" }, Bt = { class: "sv-popup__body-content" }, Lt = {
+}), Bt = { class: "sv-popup__shadow" }, Lt = { class: "sv-popup__body-content" }, Nt = {
   key: 0,
   class: "sv-popup__body-header"
-}, Nt = { class: "sv-popup__scrolling-content" }, Pt = { class: "sv-popup__content" }, At = {
+}, Pt = { class: "sv-popup__scrolling-content" }, At = { class: "sv-popup__content" }, Mt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Mt = /* @__PURE__ */ h({
+}, Et = /* @__PURE__ */ h({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4191,7 +4192,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     const s = r, n = (e) => {
       e.stopPropagation();
     };
-    return B(() => s.model), te(() => {
+    return L(() => s.model), te(() => {
       const e = s.model;
       e.isVisible && !e.isPositionSet && s.model.updateOnShowing();
     }), M(() => {
@@ -4210,7 +4211,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       }, [
         p("div", {
           class: "sv-popup__container",
-          style: S({
+          style: I({
             left: e.model.left,
             top: e.model.top,
             height: e.model.height,
@@ -4219,19 +4220,19 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           }),
           onClick: n
         }, [
-          p("div", Dt, [
+          p("div", Bt, [
             e.model.showHeader ? (i(), g(T(e.model.popupHeaderTemplate), {
               key: 0,
               model: e.model
             }, null, 8, ["model"])) : d("", !0),
-            p("div", Bt, [
-              e.model.title ? (i(), u("div", Lt, R(e.model.title), 1)) : d("", !0),
-              p("div", Nt, [
-                p("div", Pt, [
+            p("div", Lt, [
+              e.model.title ? (i(), u("div", Nt, R(e.model.title), 1)) : d("", !0),
+              p("div", Pt, [
+                p("div", At, [
                   (i(), g(T(e.model.contentComponentName), z(ne(e.model.contentComponentData)), null, 16))
                 ])
               ]),
-              e.model.showFooter ? (i(), u("div", At, [
+              e.model.showFooter ? (i(), u("div", Mt, [
                 C(t, {
                   model: e.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4244,7 +4245,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ]);
     };
   }
-}), Et = /* @__PURE__ */ h({
+}), Ht = /* @__PURE__ */ h({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4252,16 +4253,16 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     return (s, n) => (i(), u("span", {
       class: "sv-popup__pointer",
-      style: S({
+      style: I({
         left: s.model.pointerTarget.left,
         top: s.model.pointerTarget.top
       })
     }, null, 4));
   }
-}), Ht = {
+}), Wt = {
   key: 0,
   class: "sv-components-column"
-}, Wt = /* @__PURE__ */ h({
+}, Ft = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     survey: {},
@@ -4269,17 +4270,17 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     needRenderWrapper: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => s.survey.getContainerContent(s.container)
     );
-    return (e, o) => n.value.length > 0 ? (i(), u(_, { key: 0 }, [
-      e.needRenderWrapper ? (i(), u("div", Ht, [
-        (i(!0), u(_, null, D(n.value, (t, l) => (i(), g(T(t.component), {
+    return (e, o) => n.value.length > 0 ? (i(), u(D, { key: 0 }, [
+      e.needRenderWrapper ? (i(), u("div", Wt, [
+        (i(!0), u(D, null, B(n.value, (t, l) => (i(), g(T(t.component), {
           survey: e.survey,
           container: e.container,
           model: t.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (i(!0), u(_, { key: 1 }, D(n.value, (t, l) => (i(), g(T(t.component), {
+      ])) : (i(!0), u(D, { key: 1 }, B(n.value, (t, l) => (i(), g(T(t.component), {
         survey: e.survey,
         container: e.container,
         model: t.data
@@ -4294,13 +4295,13 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.survey.progressValue + "%"), e = (t) => de.getProgressTextInBarCss(t), o = (t) => de.getProgressTextUnderBarCss(t);
+    const s = r, n = S(() => s.survey.progressValue + "%"), e = (t) => de.getProgressTextInBarCss(t), o = (t) => de.getProgressTextUnderBarCss(t);
     return (t, l) => (i(), u("div", {
       class: a(t.survey.getProgressCssClasses(t.container))
     }, [
       p("div", {
         class: a(t.survey.css.progressBar),
-        style: S({ width: n.value }),
+        style: I({ width: n.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4315,7 +4316,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       }, R(t.survey.progressText), 3)
     ], 2));
   }
-}), Vt = ["title"], Ft = ["onClick", "data-page-number"], Ot = ["title"], zt = ["title"], Ut = ["title"], Kt = /* @__PURE__ */ h({
+}), Vt = ["title"], Ot = ["onClick", "data-page-number"], zt = ["title"], Ut = ["title"], Kt = ["title"], Qt = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
     survey: {},
@@ -4323,7 +4324,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     container: {}
   },
   setup(r) {
-    const s = r, n = $(!1), e = $(!1), o = $(!1), t = $(!0), l = $(), m = I(() => s.survey.css);
+    const s = r, n = $(!1), e = $(!1), o = $(!1), t = $(!0), l = $(), m = S(() => s.survey.css);
     let v = null;
     const c = (q) => {
       let f = l.value;
@@ -4331,7 +4332,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     };
     return M(() => {
       const q = l.value;
-      v = new Ee(s.model, q, {
+      v = new He(s.model, q, {
         onResize: (f) => {
           t.value = f, e.value = !f;
         },
@@ -4341,7 +4342,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
         onUpdateSettings: () => {
           t.value = s.model.showItemTitles, o.value = !s.model.showItemTitles;
         },
-        container: I(() => s.container)
+        container: S(() => s.container)
       });
     }), G(() => {
       v.dispose();
@@ -4349,7 +4350,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       const k = y("survey-string");
       return i(), u("div", {
         class: a(q.model.getRootCss(q.container)),
-        style: S({ maxWidth: q.model.progressWidth }),
+        style: I({ maxWidth: q.model.progressWidth }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4369,7 +4370,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
         }, [
           p("div", {
             class: a(q.model.getScrollButtonCss(n.value, !0)),
-            onClick: f[0] || (f[0] = (L) => c(!0)),
+            onClick: f[0] || (f[0] = (_) => c(!0)),
             role: "button"
           }, null, 2),
           p("div", {
@@ -4380,11 +4381,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
             p("ul", {
               class: a(m.value.progressButtonsList)
             }, [
-              (i(!0), u(_, null, D(q.survey.visiblePages, (L, b) => (i(), u("li", {
+              (i(!0), u(D, null, B(q.survey.visiblePages, (_, b) => (i(), u("li", {
                 key: "listelement" + b,
                 class: a(q.model.getListElementCss(b)),
-                onClick: (N) => q.model.isListElementClickable(b) ? q.model.clickListElement(L) : null,
-                "data-page-number": q.model.getItemNumber(L)
+                onClick: (N) => q.model.isListElementClickable(b) ? q.model.clickListElement(_) : null,
+                "data-page-number": q.model.getItemNumber(_)
               }, [
                 p("div", {
                   class: a(m.value.progressButtonsConnector)
@@ -4392,17 +4393,17 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 t.value ? (i(), u("div", {
                   key: 0,
                   class: a(m.value.progressButtonsPageTitle),
-                  title: L.renderedNavigationTitle
+                  title: _.renderedNavigationTitle
                 }, [
                   C(k, {
-                    locString: L.locNavigationTitle
+                    locString: _.locNavigationTitle
                   }, null, 8, ["locString"])
-                ], 10, Ot)) : d("", !0),
+                ], 10, zt)) : d("", !0),
                 t.value ? (i(), u("div", {
                   key: 1,
                   class: a(m.value.progressButtonsPageDescription),
-                  title: L.locNavigationDescription.renderedHtml
-                }, R(L.locNavigationDescription.renderedHtml), 11, zt)) : d("", !0),
+                  title: _.locNavigationDescription.renderedHtml
+                }, R(_.locNavigationDescription.renderedHtml), 11, Ut)) : d("", !0),
                 p("div", {
                   class: a(m.value.progressButtonsButton)
                 }, [
@@ -4412,14 +4413,14 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                   p("div", {
                     class: a(m.value.progressButtonsButtonContent)
                   }, null, 2),
-                  p("span", null, R(q.model.getItemNumber(L)), 1)
+                  p("span", null, R(q.model.getItemNumber(_)), 1)
                 ], 2)
-              ], 10, Ft))), 128))
+              ], 10, Ot))), 128))
             ], 2)
           ], 2),
           p("div", {
             class: a(q.model.getScrollButtonCss(n.value, !1)),
-            onClick: f[1] || (f[1] = (L) => c(!1)),
+            onClick: f[1] || (f[1] = (_) => c(!1)),
             role: "button"
           }, null, 2)
         ], 2),
@@ -4430,12 +4431,12 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           p("div", {
             class: a(q.survey.css.progressButtonsPageTitle),
             title: q.model.footerText
-          }, R(q.model.footerText), 11, Ut)
+          }, R(q.model.footerText), 11, Kt)
         ], 2)) : d("", !0)
       ], 6);
     };
   }
-}), Qt = /* @__PURE__ */ h({
+}), jt = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
     survey: {},
@@ -4467,59 +4468,69 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 2);
     };
   }
-}), jt = { onsubmit: "return false;" }, Gt = {
+}), Gt = { onsubmit: "return false;" }, Jt = {
   key: 0,
   class: "sv_custom_header"
-}, Jt = { class: "sv-components-column sv-components-column--expandable" }, Xt = ["id"], Yt = { key: 2 }, Zt = ["innerHTML"], xt = ["innerHTML"], ei = ["innerHTML"], pe = /* @__PURE__ */ h({
+}, Xt = { class: "sv-components-column sv-components-column--expandable" }, Yt = ["id"], Zt = { key: 2 }, xt = ["innerHTML"], ei = ["innerHTML"], si = ["innerHTML"], pe = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const s = r, n = $(), e = $(""), o = $(1), t = I(() => {
-      const k = s.survey ? s.survey : s.model;
-      return Se(k);
-    }), l = I(() => t.value.activePage ? t.value.activePage.id : ""), m = () => {
-      const k = l.value;
-      return !!t.value && k + o.value.toString();
-    }, v = I(
+    const s = r, n = $(), e = $(""), o = $(1), t = S(() => {
+      const _ = s.survey ? s.survey : s.model;
+      return Re(_);
+    }), l = S(() => t.value.activePage ? t.value.activePage.id : ""), m = () => {
+      const _ = l.value;
+      return !!t.value && _ + o.value.toString();
+    }, v = S(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), c = I(() => t.value.css), q = I(() => "page" + m()), f = () => v.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
-    return B(() => t.value), M(() => {
-      if (!!t.value) {
-        var k = n.value;
-        k && t.value.afterRenderSurvey(k), t.value.renderCallback = () => {
-          var L, b;
-          o.value++, (b = (L = ie()) == null ? void 0 : L.proxy) == null || b.$forceUpdate();
-        }, t.value.startTimerFromUI();
+    ), c = S(() => t.value.css), q = S(() => "page" + m()), f = () => v.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "", k = (_) => {
+      if (!!_) {
+        var b = n.value;
+        b && _.afterRenderSurvey(b), _.renderCallback = () => {
+          var N, W;
+          o.value++, (W = (N = ie()) == null ? void 0 : N.proxy) == null || W.$forceUpdate();
+        }, _.startTimerFromUI();
+      }
+    };
+    return L(
+      () => t.value,
+      (_, b) => {
+        _ && b && k(_);
+      },
+      (_) => {
+        _.stopTimer(), _.renderCallback = void 0;
       }
+    ), M(() => {
+      k(t.value);
     }), O(() => {
       t.value.stopTimer(), t.value.renderCallback = void 0;
-    }), (k, L) => {
-      const b = y("sv-svg-bundle"), N = y("survey-popup-modal"), W = y("survey-header"), V = y("survey-page"), Q = y("sv-brand-info"), ue = y("sv-notifier");
+    }), (_, b) => {
+      const N = y("sv-svg-bundle"), W = y("survey-popup-modal"), F = y("survey-header"), Q = y("survey-page"), ue = y("sv-brand-info"), Ce = y("sv-notifier");
       return i(), u("div", {
         class: a(t.value.getRootCss()),
-        style: S(t.value.themeVariables),
+        style: I(t.value.themeVariables),
         ref_key: "root",
         ref: n
       }, [
-        t.value.needRenderIcons ? (i(), g(b, { key: 0 })) : d("", !0),
+        t.value.needRenderIcons ? (i(), g(N, { key: 0 })) : d("", !0),
         p("div", {
           class: a(t.value.wrapperFormCss)
         }, [
-          C(N),
+          C(W),
           t.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
             class: a(c.value.rootBackgroundImage),
-            style: S(t.value.backgroundImageStyle)
+            style: I(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          p("form", jt, [
-            t.value.hasLogo ? d("", !0) : (i(), u("div", Gt)),
+          p("form", Gt, [
+            t.value.hasLogo ? d("", !0) : (i(), u("div", Jt)),
             p("div", {
               class: a(c.value.container)
             }, [
-              t.value.headerView === "basic" ? (i(), g(W, {
+              t.value.headerView === "basic" ? (i(), g(F, {
                 key: 0,
                 survey: t.value
               }, null, 8, ["survey"])) : d("", !0),
@@ -4537,7 +4548,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                p("div", Jt, [
+                p("div", Xt, [
                   (i(), g(T("sv-components-container"), {
                     survey: t.value,
                     container: "center",
@@ -4545,7 +4556,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                   }, null, 8, ["survey"])),
                   p("div", {
                     class: a(t.value.bodyCss),
-                    style: S({ maxWidth: t.value.renderedWidth }),
+                    style: I({ maxWidth: t.value.renderedWidth }),
                     id: l.value
                   }, [
                     (i(), g(T("sv-components-container"), {
@@ -4553,7 +4564,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                       container: "contentTop",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"])),
-                    (i(), g(V, {
+                    (i(), g(Q, {
                       key: q.value,
                       survey: t.value,
                       page: t.value.activePage,
@@ -4564,7 +4575,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                       container: "contentBottom",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"]))
-                  ], 14, Xt)
+                  ], 14, Yt)
                 ]),
                 (i(), g(T("sv-components-container"), {
                   survey: t.value,
@@ -4577,11 +4588,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              v.value ? (i(), u("div", Yt, [
+              v.value ? (i(), u("div", Zt, [
                 p("div", {
                   innerHTML: f(),
                   class: a(t.value.completedCss)
-                }, null, 10, Zt),
+                }, null, 10, xt),
                 (i(), g(T("sv-components-container"), {
                   survey: t.value,
                   container: "completePage",
@@ -4592,39 +4603,39 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 key: 3,
                 class: a(t.value.completedBeforeCss),
                 innerHTML: t.value.processedCompletedBeforeHtml
-              }, null, 10, xt)) : d("", !0),
+              }, null, 10, ei)) : d("", !0),
               t.value.state === "loading" ? (i(), u("div", {
                 key: 4,
                 class: a(t.value.loadingBodyCss),
                 innerHTML: t.value.processedLoadingHtml
-              }, null, 10, ei)) : d("", !0),
+              }, null, 10, si)) : d("", !0),
               t.value.state === "empty" ? (i(), u("div", {
                 key: 5,
                 class: a(c.value.bodyEmpty)
               }, R(t.value.emptySurveyText), 3)) : d("", !0)
             ], 2)
           ]),
-          t.value.showBrandInfo ? (i(), g(Q, { key: 1 })) : d("", !0),
-          C(ue, {
+          t.value.showBrandInfo ? (i(), g(ue, { key: 1 })) : d("", !0),
+          C(Ce, {
             model: t.value.notifier
           }, null, 8, ["model"])
         ], 2)
       ], 6);
     };
   }
-}), si = /* @__PURE__ */ h({
+}), ni = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
   },
   setup(r) {
     const s = r;
-    return B(() => s.model), (n, e) => {
+    return L(() => s.model), (n, e) => {
       const o = y("sv-action-bar");
       return n.model.isDisplayed ? (i(), u("div", {
         key: 0,
         class: a(n.model.css),
-        style: S({ visibility: n.model.active ? "visible" : "hidden" }),
+        style: I({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
@@ -4635,7 +4646,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 6)) : d("", !0);
     };
   }
-}), ni = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], oi = { key: 1 }, ti = /* @__PURE__ */ h({
+}), oi = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], ti = { key: 1 }, ii = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4656,25 +4667,25 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
         placeholder: s.question.otherPlaceholder,
         "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
         "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
-        style: S({ resize: s.question.resizeStyle }),
+        style: I({ resize: s.question.resizeStyle }),
         onChange: n[0] || (n[0] = (e) => {
           s.question.onOtherValueChange(e);
         }),
         onInput: n[1] || (n[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
-      }, null, 46, ni)),
-      s.question.isReadOnlyRenderDiv() ? (i(), u("div", oi, R(s.question.otherValue), 1)) : d("", !0)
+      }, null, 46, oi)),
+      s.question.isReadOnlyRenderDiv() ? (i(), u("div", ti, R(s.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), ii = ["disabled", "value", "title"], ri = /* @__PURE__ */ h({
+}), ri = ["disabled", "value", "title"], li = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
   },
   setup(r) {
     const s = r, n = () => s.item.data && s.item.data.mouseDown();
-    return B(() => s.item), (e, o) => e.item.visible ? (i(), u("input", {
+    return L(() => s.item), (e, o) => e.item.visible ? (i(), u("input", {
       key: 0,
       type: "button",
       disabled: e.item.disabled,
@@ -4683,7 +4694,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       title: e.item.getTooltip(),
       onMousedown: n,
       onClick: o[0] || (o[0] = (...t) => e.item.action && e.item.action(...t))
-    }, null, 42, ii)) : d("", !0);
+    }, null, 42, ri)) : d("", !0);
   }
 }), ve = /* @__PURE__ */ h({
   __name: "PopupSurvey",
@@ -4695,11 +4706,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const s = r, n = U(), e = I(() => s.survey ? s.survey.getCss() : {});
-    I(() => {
+    const s = r, n = U(), e = S(() => s.survey ? s.survey.getCss() : {});
+    S(() => {
       var f;
       return (f = n.value) != null && f.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), I(() => {
+    }), S(() => {
       var f;
       return (f = n.value) == null ? void 0 : f.isExpanded;
     });
@@ -4715,11 +4726,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       let f = n.value.cssHeaderRoot;
       return n.value.isCollapsed && (f += " " + n.value.cssRootCollapsedMod), f;
     };
-    B(() => n.value);
+    L(() => n.value);
     const q = K(
       () => s.survey,
       (f) => {
-        const k = new He(null, f);
+        const k = new We(null, f);
         s.isExpanded !== void 0 && (k.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (k.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (k.allowClose = s.allowClose), s.allowFullScreen !== void 0 && (k.allowFullScreen = s.allowFullScreen), k.isShowing = !0, n.value = k;
       },
       {
@@ -4729,10 +4740,10 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     return O(() => {
       q();
     }), (f, k) => {
-      const L = y("sv-svg-icon");
+      const _ = y("sv-svg-icon");
       return n.value.isShowing ? (i(), u("div", {
         key: 0,
-        style: S({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
+        style: I({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
         class: a(n.value.cssRoot),
         onScroll: v
       }, [
@@ -4754,12 +4765,12 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 class: a(n.value.cssHeaderFullScreenButton),
                 onClick: l
               }, [
-                n.value.isFullScreen ? (i(), g(L, {
+                n.value.isFullScreen ? (i(), g(_, {
                   key: 0,
                   iconName: "icon-back-to-panel_16x16",
                   size: 16
                 })) : d("", !0),
-                n.value.isFullScreen ? d("", !0) : (i(), g(L, {
+                n.value.isFullScreen ? d("", !0) : (i(), g(_, {
                   key: 1,
                   iconName: "icon-full-screen_16x16",
                   size: 16
@@ -4769,12 +4780,12 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 class: a(n.value.cssHeaderCollapseButton),
                 onClick: o
               }, [
-                n.value.isExpanded ? (i(), g(L, {
+                n.value.isExpanded ? (i(), g(_, {
                   key: 0,
                   iconName: "icon-minimize_16x16",
                   size: 16
                 })) : d("", !0),
-                n.value.isCollapsed ? (i(), g(L, {
+                n.value.isCollapsed ? (i(), g(_, {
                   key: 1,
                   iconName: "icon-restore_16x16",
                   size: 16
@@ -4785,7 +4796,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                 class: a(n.value.cssHeaderCloseButton),
                 onClick: t
               }, [
-                C(L, {
+                C(_, {
                   iconName: "icon-close_16x16",
                   size: 16
                 })
@@ -4801,18 +4812,18 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 38)) : d("", !0);
     };
   }
-}), li = ["innerHTML"], ai = /* @__PURE__ */ h({
+}), ai = ["innerHTML"], ui = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = I(
+    const s = r, n = $(), e = S(
       () => s.question.customWidget.isDefaultRender
-    ), o = I(
+    ), o = S(
       () => !!s.question.customWidget.htmlTemplate
-    ), t = I(() => s.question.customWidget.htmlTemplate), l = I(() => "survey-" + s.question.getTemplate());
+    ), t = S(() => s.question.customWidget.htmlTemplate), l = S(() => "survey-" + s.question.getTemplate());
     return M(() => {
       s.question.customWidget.afterRender(s.question, n.value);
     }), G(() => {
@@ -4824,7 +4835,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       o.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, li)) : d("", !0),
+      }, null, 8, ai)) : d("", !0),
       e.value ? (i(), g(T(l.value), {
         key: 1,
         question: m.question,
@@ -4832,12 +4843,12 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), ui = /* @__PURE__ */ h({
+}), di = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(r) {
     const s = U();
     function n(o, t, l, m, v, c, q = "popup") {
-      const f = We(
+      const f = Fe(
         o,
         t,
         l,
@@ -4865,7 +4876,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       j.showDialog = void 0;
     })), (o, t) => {
       const l = y("sv-popup-container");
-      return s.value ? (i(), g(Re, {
+      return s.value ? (i(), g(Te, {
         key: 0,
         to: s.value.container
       }, [
@@ -4873,7 +4884,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), di = /* @__PURE__ */ h({
+}), mi = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4881,11 +4892,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   },
   setup(r) {
     const s = r;
-    return B(() => s.counter), (n, e) => (i(), u("div", {
+    return L(() => s.counter), (n, e) => (i(), u("div", {
       class: a(n.remainingCharacterCounter)
     }, R(n.counter.remainingCharacterCounter), 3));
   }
-}), mi = /* @__PURE__ */ h({
+}), ci = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -4895,7 +4906,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     A(s, n);
-    const e = I(() => s.question.contentPanel);
+    const e = S(() => s.question.contentPanel);
     return (o, t) => {
       const l = y("survey-panel");
       return i(), g(l, {
@@ -4906,7 +4917,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       }, null, 8, ["element", "css"]);
     };
   }
-}), ci = /* @__PURE__ */ h({
+}), pi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -4916,32 +4927,32 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     A(s, n);
-    const e = I(() => s.question.contentQuestion), o = (t) => re(t);
+    const e = S(() => s.question.contentQuestion), o = (t) => re(t);
     return (t, l) => (i(), g(T(o(e.value)), {
       ref: n.value,
       question: e.value,
       css: t.css
     }, null, 8, ["question", "css"]));
   }
-}), pi = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), vi = [
-  pi
-], qe = 440, qi = /* @__PURE__ */ h({
+}), vi = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), qi = [
+  vi
+], qe = 440, yi = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => qe * s.model.progress), e = I(() => s.model.text);
-    return B(() => s.model), (o, t) => o.model.isRunning && o.model.showTimerAsClock ? (i(), u("div", {
+    const s = r, n = S(() => qe * s.model.progress), e = S(() => s.model.text);
+    return L(() => s.model), (o, t) => o.model.isRunning && o.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
       class: a(o.model.rootCss)
     }, [
       o.model.showProgress ? (i(), u("svg", {
         key: 0,
         class: a(o.model.getProgressCss()),
-        style: S({ strokeDasharray: qe, strokeDashoffset: n.value })
-      }, vi, 6)) : d("", !0),
+        style: I({ strokeDasharray: qe, strokeDashoffset: n.value })
+      }, qi, 6)) : d("", !0),
       p("div", {
         class: a(o.model.textContainerCss)
       }, [
@@ -4960,17 +4971,17 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       [E, o.model.isRunning && !o.model.showTimerAsClock]
     ]);
   }
-}), yi = {}, gi = { class: "sd-loading-indicator" };
-function hi(r, s) {
+}), gi = {}, hi = { class: "sd-loading-indicator" };
+function Ci(r, s) {
   const n = y("sv-svg-icon");
-  return i(), u("div", gi, [
+  return i(), u("div", hi, [
     C(n, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @__PURE__ */ h({
+const bi = /* @__PURE__ */ he(gi, [["render", Ci]]), ki = { key: 2 }, fi = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -4978,40 +4989,40 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
   },
   setup(r) {
     const s = r;
-    return B(() => {
+    return L(() => {
       const n = s.model;
       return n.survey = s.survey, s.model;
     }), (n, e) => {
       const o = y("sv-header-cell"), t = y("sv-header-mobile");
       return i(), u("div", {
         class: a(n.model.headerClasses),
-        style: S({ height: n.model.renderedHeight })
+        style: I({ height: n.model.renderedHeight })
       }, [
         n.model.backgroundImage ? (i(), u("div", {
           key: 0,
           class: a(n.model.backgroundImageClasses),
-          style: S(n.model.backgroundImageStyle)
+          style: I(n.model.backgroundImageStyle)
         }, null, 6)) : d("", !0),
         n.survey.isMobile ? d("", !0) : (i(), u("div", {
           key: 1,
           class: a(n.model.contentClasses),
-          style: S({ maxWidth: n.model.maxWidth })
+          style: I({ maxWidth: n.model.maxWidth })
         }, [
-          (i(!0), u(_, null, D(n.model.cells, (l, m) => (i(), g(o, {
+          (i(!0), u(D, null, B(n.model.cells, (l, m) => (i(), g(o, {
             model: l,
             key: m
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        n.survey.isMobile ? (i(), u("div", bi, [
+        n.survey.isMobile ? (i(), u("div", ki, [
           C(t, { model: n.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), fi = {
+}), wi = {
   key: 0,
   class: "sv-header__logo"
-}, wi = ["src", "width", "height", "alt"], Ii = /* @__PURE__ */ h({
+}, Ii = ["src", "width", "height", "alt"], Si = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -5021,13 +5032,13 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       const e = y("survey-element-title"), o = y("survey-string");
       return i(), u("div", {
         class: a(s.model.css),
-        style: S(s.model.style)
+        style: I(s.model.style)
       }, [
         p("div", {
           class: "sv-header__cell-content",
-          style: S(s.model.contentStyle)
+          style: I(s.model.contentStyle)
         }, [
-          s.model.showLogo ? (i(), u("div", fi, [
+          s.model.showLogo ? (i(), u("div", wi, [
             p("div", {
               class: a(s.model.survey.logoClassNames)
             }, [
@@ -5037,14 +5048,14 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
                 width: s.model.survey.renderedLogoWidth,
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
-                style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-              }, null, 14, wi)
+                style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+              }, null, 14, Ii)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
             key: 1,
             class: "sv-header__title",
-            style: S({ maxWidth: s.model.textAreaWidth })
+            style: I({ maxWidth: s.model.textAreaWidth })
           }, [
             C(e, {
               element: s.model.survey,
@@ -5054,7 +5065,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           s.model.showDescription ? (i(), u("div", {
             key: 2,
             class: "sv-header__description",
-            style: S({ maxWidth: s.model.textAreaWidth })
+            style: I({ maxWidth: s.model.textAreaWidth })
           }, [
             s.model.survey.renderedHasDescription ? (i(), u("div", {
               key: 0,
@@ -5069,10 +5080,10 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       ], 6);
     };
   }
-}), Si = { class: "sv-header--mobile" }, Ri = {
+}), Ri = { class: "sv-header--mobile" }, Ti = {
   key: 0,
   class: "sv-header__logo"
-}, Ti = ["src", "width", "height", "alt"], $i = /* @__PURE__ */ h({
+}, $i = ["src", "width", "height", "alt"], _i = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -5080,8 +5091,8 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
   setup(r) {
     return (s, n) => {
       const e = y("survey-element-title"), o = y("survey-string");
-      return i(), u("div", Si, [
-        s.model.survey.hasLogo ? (i(), u("div", Ri, [
+      return i(), u("div", Ri, [
+        s.model.survey.hasLogo ? (i(), u("div", Ti, [
           p("div", {
             class: a(s.model.survey.logoClassNames)
           }, [
@@ -5091,14 +5102,14 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               width: s.model.survey.renderedLogoWidth,
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
-              style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-            }, null, 14, Ti)
+              style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+            }, null, 14, $i)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
           key: 1,
           class: "sv-header__title",
-          style: S({ maxWidth: s.model.renderedtextAreaWidth })
+          style: I({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           C(e, {
             element: s.model.survey,
@@ -5108,7 +5119,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         s.model.survey.renderedHasDescription ? (i(), u("div", {
           key: 2,
           class: "sv-header__description",
-          style: S({ maxWidth: s.model.renderedtextAreaWidth })
+          style: I({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           s.model.survey.renderedHasDescription ? (i(), u("div", {
             key: 0,
@@ -5122,7 +5133,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       ]);
     };
   }
-}), _i = /* @__PURE__ */ h({
+}), Di = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -5130,7 +5141,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = (v) => v.isPanel ? "survey-panel" : "survey-question", o = I(() => {
+    const s = r, n = $(), e = (v) => v.isPanel ? "survey-panel" : "survey-question", o = S(() => {
       const v = s.element.survey;
       if (v) {
         const c = v.getElementWrapperComponentName(s.element);
@@ -5138,7 +5149,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           return c;
       }
       return e(s.element);
-    }), t = (v) => v.cssClasses ? v.rootStyle : {}, l = I(() => {
+    }), t = (v) => v.cssClasses ? v.rootStyle : {}, l = S(() => {
       const v = s.element, c = v.survey;
       let q;
       return c && (q = c.getElementWrapperComponentData(v)), {
@@ -5164,7 +5175,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     }), (v, c) => (i(), u("div", {
       ref_key: "root",
       ref: n,
-      style: S(t(v.element)),
+      style: I(t(v.element)),
       class: a(v.element.cssClasses.questionWrapper)
     }, [
       v.row.isNeedRender ? (i(), g(T(o.value), z(H({ key: 0 }, l.value)), null, 16)) : v.element.skeletonComponentName ? (i(), g(T(v.element.skeletonComponentName), {
@@ -5174,17 +5185,17 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       }, null, 8, ["element", "css"])) : d("", !0)
     ], 6));
   }
-}), Di = /* @__PURE__ */ h({
+}), Bi = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(r) {
-    const s = Te(), n = I(() => !!s.default);
-    return (e, o) => n.value && !e.componentName ? $e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), z(H({ key: 1 }, e.componentData)), null, 16));
+    const s = $e(), n = S(() => !!s.default);
+    return (e, o) => n.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), z(H({ key: 1 }, e.componentData)), null, 16));
   }
-}), Bi = /* @__PURE__ */ h({
+}), Li = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5208,7 +5219,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       ], 2);
     };
   }
-}), Li = ["id"], Ni = /* @__PURE__ */ h({
+}), Ni = ["id"], Pi = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5230,21 +5241,21 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           playsinline: "",
           id: s.question.videoId,
           class: a(s.question.cssClasses.video)
-        }, null, 10, Li),
+        }, null, 10, Ni),
         C(e, {
           item: s.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), Pi = ["for", "aria-label"], Ai = /* @__PURE__ */ h({
+}), Ai = ["for", "aria-label"], Mi = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
     item: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => {
         var e;
         return ((e = s.data) == null ? void 0 : e.question) || s.item.data.question;
@@ -5266,12 +5277,12 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
         p("span", null, R(n.value.chooseButtonText), 1)
-      ], 10, Pi)), [
+      ], 10, Ai)), [
         [l]
       ]);
     };
   }
-}), Mi = ["onClick", "href", "title", "download"], Ei = ["src"], Hi = ["onClick"], Wi = ["onClick", "href", "title", "download"], Vi = /* @__PURE__ */ h({
+}), Ei = ["onClick", "href", "title", "download"], Hi = ["src"], Wi = ["onClick"], Fi = ["onClick", "href", "title", "download"], Vi = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5283,7 +5294,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         key: 0,
         class: a(s.question.cssClasses.fileList || void 0)
       }, [
-        (i(!0), u(_, null, D(s.question.previewValue, (o, t) => P((i(), u("span", {
+        (i(!0), u(D, null, B(s.question.previewValue, (o, t) => P((i(), u("span", {
           key: s.question.inputId + "_" + t,
           class: a(s.question.cssClasses.previewItem)
         }, [
@@ -5296,8 +5307,8 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               href: o.content,
               title: o.name,
               download: o.name,
-              style: S({ width: s.question.imageWidth })
-            }, R(o.name), 13, Mi)
+              style: I({ width: s.question.imageWidth })
+            }, R(o.name), 13, Ei)
           ], 2)) : d("", !0),
           p("div", {
             class: a(s.question.getImageWrapperCss(o))
@@ -5305,12 +5316,12 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
             s.question.canPreviewImage(o) ? (i(), u("img", {
               key: 0,
               src: o.content,
-              style: S({
+              style: I({
                 height: s.question.imageHeight,
                 width: s.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Ei)) : d("", !0),
+            }, null, 12, Hi)) : d("", !0),
             s.question.defaultImage(o) ? (i(), g(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
@@ -5332,7 +5343,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
                 iconName: s.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, Hi)) : d("", !0)
+            ], 10, Wi)) : d("", !0)
           ], 2),
           o.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
@@ -5343,8 +5354,8 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               href: o.content,
               title: o.name,
               download: o.name,
-              style: S({ width: s.question.imageWidth })
-            }, R(o.name), 13, Wi)
+              style: I({ width: s.question.imageWidth })
+            }, R(o.name), 13, Fi)
           ], 2)) : d("", !0)
         ], 2)), [
           [E, o && s.question.isPreviewVisible(t)]
@@ -5352,7 +5363,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       ], 2)) : d("", !0);
     };
   }
-}), Fi = /* @__PURE__ */ h({
+}), Oi = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -5367,7 +5378,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         ref_key: "root",
         ref: n
       }, [
-        (i(!0), u(_, null, D(e.question.visibleChoices, (l, m) => (i(), g(t, {
+        (i(!0), u(D, null, B(e.question.visibleChoices, (l, m) => (i(), g(t, {
           question: e.question,
           key: m,
           item: l,
@@ -5376,7 +5387,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       ], 2);
     };
   }
-}), Oi = ["title"], zi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Ui = ["title"], Ki = /* @__PURE__ */ h({
+}), zi = ["title"], Ui = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Ki = ["title"], Qi = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5384,9 +5395,9 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     index: {}
   },
   setup(r) {
-    const s = r, n = I(
-      () => new Fe(s.question, s.item, s.index)
-    ), e = I({
+    const s = r, n = S(
+      () => new Oe(s.question, s.item, s.index)
+    ), e = S({
       get: () => s.question.renderedValue,
       set: (o) => {
         const t = s.question;
@@ -5413,7 +5424,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           class: a(n.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (v) => e.value = v),
           value: n.value.value
-        }, null, 10, zi), [
+        }, null, 10, Ui), [
           [x, e.value]
         ]),
         p("div", {
@@ -5433,19 +5444,19 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
             C(m, {
               locString: n.value.caption
             }, null, 8, ["locString"])
-          ], 10, Ui)) : d("", !0)
+          ], 10, Ki)) : d("", !0)
         ], 2)
-      ], 10, Oi);
+      ], 10, zi);
     };
   }
-}), Qi = ["src", "width", "height", "alt"], ji = /* @__PURE__ */ h({
+}), ji = ["src", "width", "height", "alt"], Gi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
     data: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.data), e = J(() => n.value.locLogo);
+    const s = r, n = S(() => s.data), e = J(() => n.value.locLogo);
     return (o, t) => (i(), u("div", {
       class: a(n.value.logoClassNames)
     }, [
@@ -5455,20 +5466,20 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         width: n.value.renderedLogoWidth,
         height: n.value.renderedLogoHeight,
         alt: n.value.locTitle.renderedHtml,
-        style: S({
+        style: I({
           objectFit: n.value.logoFit,
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight
         })
-      }, null, 14, Qi)
+      }, null, 14, ji)
     ], 2));
   }
-}), Gi = /* @__PURE__ */ h({
+}), Ji = /* @__PURE__ */ h({
   __name: "SvgBundle",
   setup(r) {
     const s = $();
     return M(() => {
-      s.value.innerHTML = Oe.iconsRenderedHtml();
+      s.value.innerHTML = ze.iconsRenderedHtml();
     }), (n, e) => P((i(), u("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
@@ -5478,9 +5489,9 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     ]);
   }
 });
-ze.platform = "vue3";
-function Ji(r) {
-  r.component("SurveyComponent", pe), r.component("sv-svg-bundle", Gi), r.component("PopupSurveyComponent", ve), r.component("survey", pe), r.component("popup-survey", ve), r.component("survey-header", Ge), r.component("sv-logo-image", ji), r.component("survey-page", je), r.component("survey-row", Je), r.component("survey-question", xe), r.component("survey-panel", os), r.component("survey-element-header", is), r.component("survey-string", rs), r.component("sv-string-viewer", as), r.component("sv-string-editor", ds), r.component("sv-skeleton", cs), r.component("survey-text", qs), r.component("survey-text-input", hs), r.component("survey-checkbox", ws), r.component("survey-checkbox-item", Rs), r.component("survey-radiogroup", Ts), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ps), r.component("survey-html", Ms), r.component("survey-image", Vs), r.component("survey-expression", Fs), r.component("survey-file", Us), r.component("sv-file-choose-btn", Ai), r.component("sv-file-clean-btn", Bi), r.component("sv-file-preview", Vi), r.component("sv-file-video", Ni), r.component("survey-imagepicker", Qs), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", en), r.component("survey-dropdown", sn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", an), r.component("sv-dropdown", pn), r.component("survey-tagbox", vn), r.component("sv-tagbox", gn), r.component("sv-tagbox-item", fn), r.component("sv-tagbox-filter", bn), r.component("survey-ranking", wn), r.component("survey-ranking-item", _n), r.component("survey-rating", Ln), r.component("sv-rating-item", Pn), r.component("sv-rating-item-smiley", Mn), r.component("sv-rating-item-star", Hn), r.component("sv-rating-dropdown", zn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", Qn), r.component("sv-boolean-radio-item", Jn), r.component("sv-boolean-checkbox", so), r.component("survey-multipletext", no), r.component("survey-multipletext-item", to), r.component("survey-matrix", mo), r.component("survey-matrix-row", po), r.component("survey-matrix-cell", yo), r.component("survey-matrixdropdown", go), r.component("survey-matrixtable", bo), r.component("survey-matrixheaderrequired", fo), r.component("survey-matrixdropdown-cell", Io), r.component("survey-matrixdynamic", So), r.component("sv-matrix-remove-button", To), r.component("sv-matrix-drag-drop-icon", _o), r.component("sv-matrix-detail-button", Bo), r.component("survey-paneldynamic", Lo), r.component("survey-paneldynamicprogress", No), r.component("survey-paneldynamicprogress-v2", Po), r.component("sv-paneldynamic-add-btn", Ao), r.component("sv-paneldynamic-next-btn", Eo), r.component("sv-paneldynamic-prev-btn", Wo), r.component("sv-paneldynamic-remove-btn", Vo), r.component("sv-paneldynamic-progress-text", Fo), r.component("sv-components-container", Wt), r.component("sv-progress-buttons", Kt), r.component("sv-navigation-toc", Qt), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", zo), r.component("survey-question-comment", Qo), r.component("survey-element-title", jo), r.component("survey-element-title-content", Yo), r.component("sv-title-actions", et), r.component("sv-brand-info", rt), r.component("sv-question-error", dt), r.component("sv-svg-icon", ut), r.component("sv-action-bar", mt), r.component("sv-action", vt), r.component("sv-action-bar-item", gt), r.component("sv-action-bar-item-dropdown", bt), r.component("sv-action-bar-separator", kt), r.component("sv-list", St), r.component("sv-list-item", $t), r.component("sv-popup", _t), r.component("sv-popup-container", Mt), r.component("popup-pointer", Et), r.component("sv-notifier", si), r.component("survey-other-choice", ti), r.component("sv-nav-btn", ri), r.component("survey-customwidget", ai), r.component("survey-popup-modal", ui), r.component("sv-character-counter", di), r.component("survey-composite", mi), r.component("survey-custom", ci), r.component("sv-timerpanel", qi), r.component("sv-loading-indicator", Ci), r.component("sv-header", ki), r.component("sv-header-cell", Ii), r.component("sv-header-mobile", $i), r.component("sv-template-renderer", Di), r.component("survey-element", _i), r.component("survey-buttongroup", Fi), r.component("sv-button-group-item", Ki), r.directive("key2click", {
+Ue.platform = "vue3";
+function Xi(r) {
+  r.component("SurveyComponent", pe), r.component("sv-svg-bundle", Ji), r.component("PopupSurveyComponent", ve), r.component("survey", pe), r.component("popup-survey", ve), r.component("survey-header", Je), r.component("sv-logo-image", Gi), r.component("survey-page", Ge), r.component("survey-row", Xe), r.component("survey-question", es), r.component("survey-panel", ts), r.component("survey-element-header", rs), r.component("survey-string", ls), r.component("sv-string-viewer", us), r.component("sv-string-editor", ms), r.component("sv-skeleton", ps), r.component("survey-text", ys), r.component("survey-text-input", Cs), r.component("survey-checkbox", Is), r.component("survey-checkbox-item", Ts), r.component("survey-radiogroup", $s), r.component("survey-radiogroup-item", Bs), r.component("survey-signaturepad", As), r.component("survey-html", Es), r.component("survey-image", Vs), r.component("survey-expression", Os), r.component("survey-file", Ks), r.component("sv-file-choose-btn", Mi), r.component("sv-file-clean-btn", Li), r.component("sv-file-preview", Vi), r.component("sv-file-video", Pi), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Zs), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", ln), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", qn), r.component("sv-tagbox", hn), r.component("sv-tagbox-item", wn), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", In), r.component("survey-ranking-item", Dn), r.component("survey-rating", Nn), r.component("sv-rating-item", An), r.component("sv-rating-item-smiley", En), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", Un), r.component("sv-rating-dropdown-item", zn), r.component("survey-boolean", Qn), r.component("sv-boolean-radio", jn), r.component("sv-boolean-radio-item", Xn), r.component("sv-boolean-checkbox", no), r.component("survey-multipletext", oo), r.component("survey-multipletext-item", io), r.component("survey-matrix", co), r.component("survey-matrix-row", vo), r.component("survey-matrix-cell", go), r.component("survey-matrixdropdown", ho), r.component("survey-matrixtable", ko), r.component("survey-matrixheaderrequired", wo), r.component("survey-matrixdropdown-cell", So), r.component("survey-matrixdynamic", Ro), r.component("sv-matrix-remove-button", $o), r.component("sv-matrix-drag-drop-icon", Do), r.component("sv-matrix-detail-button", Lo), r.component("survey-paneldynamic", No), r.component("survey-paneldynamicprogress", Po), r.component("survey-paneldynamicprogress-v2", Ao), r.component("sv-paneldynamic-add-btn", Mo), r.component("sv-paneldynamic-next-btn", Ho), r.component("sv-paneldynamic-prev-btn", Fo), r.component("sv-paneldynamic-remove-btn", Vo), r.component("sv-paneldynamic-progress-text", Oo), r.component("sv-components-container", Ft), r.component("sv-progress-buttons", Qt), r.component("sv-navigation-toc", jt), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Uo), r.component("survey-question-comment", jo), r.component("survey-element-title", Go), r.component("survey-element-title-content", Zo), r.component("sv-title-actions", st), r.component("sv-brand-info", lt), r.component("sv-question-error", mt), r.component("sv-svg-icon", dt), r.component("sv-action-bar", ct), r.component("sv-action", qt), r.component("sv-action-bar-item", ht), r.component("sv-action-bar-item-dropdown", kt), r.component("sv-action-bar-separator", ft), r.component("sv-list", Rt), r.component("sv-list-item", _t), r.component("sv-popup", Dt), r.component("sv-popup-container", Et), r.component("popup-pointer", Ht), r.component("sv-notifier", ni), r.component("survey-other-choice", ii), r.component("sv-nav-btn", li), r.component("survey-customwidget", ui), r.component("survey-popup-modal", di), r.component("sv-character-counter", mi), r.component("survey-composite", ci), r.component("survey-custom", pi), r.component("sv-timerpanel", yi), r.component("sv-loading-indicator", bi), r.component("sv-header", fi), r.component("sv-header-cell", Si), r.component("sv-header-mobile", _i), r.component("sv-template-renderer", Bi), r.component("survey-element", Di), r.component("survey-buttongroup", Oi), r.component("sv-button-group-item", Qi), r.directive("key2click", {
     mounted: function(s, n) {
       const e = { ...n.value };
       if (e.disableTabStop) {
@@ -5488,21 +5499,21 @@ function Ji(r) {
         return;
       }
       e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (o) => (o.preventDefault(), o.stopPropagation(), ye(o, e), !1)), s.addEventListener("keydown", (o) => {
-        Ue(o, e);
+        Ke(o, e);
       }), s.addEventListener("blur", (o) => {
-        Ke(o);
+        Qe(o);
       });
     }
   });
 }
-const Zi = {
+const xi = {
   install(r) {
-    Ji(r);
+    Xi(r);
   }
 };
 export {
-  Zi as surveyPlugin,
-  B as useBase,
+  xi as surveyPlugin,
+  L as useBase,
   le as useComputedArray,
   J as useLocString,
   A as useQuestion