survey-vue3-ui 1.9.100 → 1.9.102

package/survey-vue3-ui.es.js

@@ -1,8 +1,8 @@
-import { shallowReactive as de, watch as Z, onUnmounted as O, onMounted as E, onBeforeUnmount as J, ref as T, shallowRef as F, triggerRef as ne, unref as b, isRef as me, defineComponent as C, computed as R, onUpdated as U, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as h, createCommentVNode as m, Fragment as w, renderList as S, createBlock as y, createElementVNode as p, normalizeStyle as $, withDirectives as D, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as Y, resolveDirective as _, vModelSelect as ce, vModelText as pe, getCurrentInstance as x, withCtx as ve, createStaticVNode as qe, normalizeProps as ye, guardReactiveProps as ge, toRaw as Ce, Teleport as he } from "vue";
-import { Base as be, RendererFactory as G, DropdownListModel as ke, Helpers as fe, DropdownMultiSelectListModel as Ie, TooltipManager as we, doKey2ClickUp as ae, createSvg as Te, ActionDropdownViewModel as Se, getActionDropdownButtonTarget as Re, createPopupViewModel as oe, SurveyProgressModel as te, SurveyProgressButtonsModel as $e, TOCModel as Be, SvgRegistry as Le, PopupSurveyModel as De, settings as V, createDialogOptions as Pe, createPopupModalViewModel as Me, doKey2ClickDown as Ne, doKey2ClickBlur as He } from "survey-core";
-be.createPropertiesHash = () => de({});
-function Ee(r) {
-  !r || (r.createArrayCoreHandler = (o, n) => {
+import { shallowReactive as me, watch as G, onBeforeUnmount as U, onMounted as E, ref as S, shallowRef as F, triggerRef as ne, unref as b, isRef as ce, defineComponent as C, computed as R, onUpdated as K, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as h, createCommentVNode as m, Fragment as w, renderList as T, createBlock as y, createElementVNode as p, normalizeStyle as $, onUnmounted as O, withDirectives as D, resolveDynamicComponent as N, vShow as H, toDisplayString as I, vModelCheckbox as z, vModelRadio as Y, resolveDirective as _, vModelSelect as pe, vModelText as ve, getCurrentInstance as x, withCtx as qe, createStaticVNode as ye, normalizeProps as ge, guardReactiveProps as Ce, toRaw as he, Teleport as be } from "vue";
+import { Base as ke, RendererFactory as X, DropdownListModel as fe, Helpers as Ie, DropdownMultiSelectListModel as we, TooltipManager as Se, doKey2ClickUp as ue, createSvg as Te, ActionDropdownViewModel as Re, getActionDropdownButtonTarget as $e, createPopupViewModel as oe, SurveyProgressModel as te, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as V, createDialogOptions as Me, createPopupModalViewModel as Ne, doKey2ClickDown as He, doKey2ClickBlur as Ee } from "survey-core";
+ke.createPropertiesHash = () => me({});
+function Ae(r) {
+  return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (o, n) => {
     const s = F(o[n]);
     return o[n].onArrayChanged = () => {
       ne(s);
@@ -15,42 +15,43 @@ function Ee(r) {
       }, o[n] = s;
     }
   }), r.getPropertyValueCoreHandler = (o, n) => b(o[n]), r.setPropertyValueCoreHandler = (o, n, s) => {
-    me(o[n]) ? o[n].value = s : o[n] = s;
-  });
+    ce(o[n]) ? o[n].value = s : o[n] = s;
+  }, r.__vueImplemented = !0, !0);
 }
-function ie(r) {
-  !r || (r.iteratePropertiesHash((o, n) => {
-    o[n] = b(o[n]), Array.isArray(o[n]) && (o[n].onArrayChanged = void 0);
-  }), r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0);
+function ie(r, o) {
+  !r || !o || (r.iteratePropertiesHash((n, s) => {
+    n[s] = b(n[s]), Array.isArray(n[s]) && (n[s].onArrayChanged = void 0);
+  }), delete r.__vueImplemented, r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0);
 }
 function B(r, o, n) {
-  const s = Z(
+  let s = !1;
+  const e = G(
     r,
-    (e, i) => {
-      o && o(e), i && (ie(i), n && n(i)), Ee(e);
+    (i, a) => {
+      o && o(i), a && (ie(a, s), n && n(a)), s = Ae(i);
     },
     {
       immediate: !0
     }
   );
-  O(() => {
-    const e = r();
-    e && (n && n(r()), ie(e), s());
+  U(() => {
+    const i = r();
+    i && (n && n(r()), ie(i, s), e());
   });
 }
 function M(r, o, n, s) {
   B(() => r.question, n, s), E(() => {
     r.question && r.question.afterRenderQuestionElement(o.value);
-  }), J(() => {
+  }), U(() => {
     r.question.beforeDestroyQuestionElement(o.value);
   });
 }
 function W(r) {
-  const o = T(), n = (e) => {
+  const o = S(), n = (e) => {
     o.value = e.renderedHtml, e.onChanged = () => {
       o.value = e.renderedHtml;
     };
-  }, s = Z(
+  }, s = G(
     r,
     (e, i) => {
       i && (i.onChanged = () => {
@@ -58,14 +59,14 @@ function W(r) {
     },
     { immediate: !0 }
   );
-  return O(() => {
+  return U(() => {
     s();
   }), o;
 }
 function ee(r) {
   return r.customWidget ? "survey-customwidget" : r.isDefaultRendering && r.isDefaultRendering() || r.isPanel ? "survey-" + r.getTemplate() : r.getComponentName();
 }
-const Ae = /* @__PURE__ */ C({
+const Oe = /* @__PURE__ */ C({
   __name: "Page",
   props: {
     survey: {},
@@ -73,12 +74,12 @@ const Ae = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     B(() => o.page);
     const s = R(() => o.page._showDescription), e = R(() => o.page.rows);
     return E(() => {
       o.survey && o.survey.afterRenderPage(n.value);
-    }), U(() => {
+    }), K(() => {
       o.survey.afterRenderPage(n.value);
     }), (i, a) => {
       const d = q("survey-element-title"), c = q("survey-string"), v = q("survey-row");
@@ -99,7 +100,7 @@ const Ae = /* @__PURE__ */ C({
             locString: i.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
-        (t(!0), u(w, null, S(e.value, (f, g) => (t(), u(w, null, [
+        (t(!0), u(w, null, T(e.value, (f, g) => (t(), u(w, null, [
           f.visible ? (t(), y(v, {
             key: i.page.id + "_" + g,
             row: f,
@@ -110,13 +111,13 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Oe = ["src", "width", "height", "alt"], Ve = ["src", "width", "height", "alt"], Fe = /* @__PURE__ */ C({
+}), Ve = ["src", "width", "height", "alt"], Fe = ["src", "width", "height", "alt"], We = /* @__PURE__ */ C({
   __name: "Header",
   props: {
     survey: {}
   },
   setup(r) {
-    const o = r, n = T(), s = W(() => o.survey.locLogo);
+    const o = r, n = S(), s = W(() => o.survey.locLogo);
     return E(() => {
       var e = n.value;
       e && o.survey && o.survey.afterRenderHeader(e);
@@ -143,7 +144,7 @@ const Ae = /* @__PURE__ */ C({
               width: e.survey.renderedStyleLogoWidth,
               height: e.survey.renderedStyleLogoHeight
             })
-          }, null, 14, Oe)
+          }, null, 14, Ve)
         ], 2)) : m("", !0),
         e.survey.renderedHasTitle ? (t(), u("div", {
           key: 1,
@@ -178,7 +179,7 @@ const Ae = /* @__PURE__ */ C({
               width: e.survey.renderedStyleLogoWidth,
               height: e.survey.renderedStyleLogoHeight
             })
-          }, null, 14, Ve)
+          }, null, 14, Fe)
         ], 2)) : m("", !0),
         p("div", {
           class: l(e.survey.css.headerClose)
@@ -186,7 +187,7 @@ const Ae = /* @__PURE__ */ C({
       ], 2)) : m("", !0);
     };
   }
-}), We = /* @__PURE__ */ C({
+}), ze = /* @__PURE__ */ C({
   __name: "Row",
   props: {
     row: {},
@@ -196,7 +197,7 @@ const Ae = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = R(
       () => o.row.visibleElements
-    ), s = T();
+    ), s = S();
     return B(() => o.row), E(() => {
       if (o.row && !o.row.isNeedRender) {
         const e = s.value;
@@ -214,7 +215,7 @@ const Ae = /* @__PURE__ */ C({
         ref_key: "root",
         ref: s
       }, [
-        (t(!0), u(w, null, S(n.value, (c) => (t(), u("div", {
+        (t(!0), u(w, null, T(n.value, (c) => (t(), u("div", {
           style: $(c.rootStyle)
         }, [
           c.isPanel ? m("", !0) : (t(), y(a, {
@@ -234,7 +235,7 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), ze = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ue = /* @__PURE__ */ C({
+}), Ue = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ke = /* @__PURE__ */ C({
   __name: "Element",
   props: {
     survey: {},
@@ -243,7 +244,7 @@ const Ae = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null), s = R(() => !o.element.isPanel && o.element.showErrorOnTop), e = R(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
+    const o = r, n = S(null), s = R(() => !o.element.isPanel && o.element.showErrorOnTop), e = R(() => !o.element.isPanel && o.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
     return B(() => o.element), E(() => {
       o.element.isPanel || o.element.afterRender(n.value);
     }), (d, c) => {
@@ -329,14 +330,14 @@ const Ae = /* @__PURE__ */ C({
           element: d.element,
           location: "bottom"
         }, null, 8, ["element"])) : m("", !0)
-      ], 42, ze)) : d.element.skeletonComponentName ? (t(), y(N(d.element.skeletonComponentName), {
+      ], 42, Ue)) : d.element.skeletonComponentName ? (t(), y(N(d.element.skeletonComponentName), {
         key: 1,
         element: d.element,
         css: d.css
       }, null, 8, ["element", "css"])) : m("", !0);
     };
   }
-}), Ke = ["id"], je = ["id"], Qe = /* @__PURE__ */ C({
+}), je = ["id"], Qe = ["id"], Ze = /* @__PURE__ */ C({
   __name: "Panel",
   props: {
     question: {},
@@ -344,7 +345,7 @@ const Ae = /* @__PURE__ */ C({
     css: {}
   },
   setup(r) {
-    const o = r, n = T(!1), s = T(null), e = R(() => o.question.rows), i = R(() => o.question.survey), a = R(() => n.value);
+    const o = r, n = S(!1), s = S(null), e = R(() => o.question.rows), i = R(() => o.question.survey), a = R(() => n.value);
     return B(() => o.question), E(() => {
       o.question.survey && o.question.survey.afterRenderPanel(o.question, s.value), n.value = o.question.isCollapsed;
       const d = o.question;
@@ -382,7 +383,7 @@ const Ae = /* @__PURE__ */ C({
           style: $({ paddingLeft: d.question.innerPaddingLeft }),
           class: l(d.question.cssClasses.panel.content)
         }, [
-          (t(!0), u(w, null, S(e.value, (P, L) => (t(), u(w, null, [
+          (t(!0), u(w, null, T(e.value, (P, L) => (t(), u(w, null, [
             P.visible ? (t(), y(g, {
               key: d.question.id + "_" + L,
               row: P,
@@ -393,11 +394,11 @@ const Ae = /* @__PURE__ */ C({
           h(k, {
             model: d.question.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, je))
-      ], 10, Ke)) : m("", !0);
+        ], 14, Qe))
+      ], 10, je)) : m("", !0);
     };
   }
-}), Ze = /* @__PURE__ */ C({
+}), Ge = /* @__PURE__ */ C({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -434,7 +435,7 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ge = /* @__PURE__ */ C({
+}), Xe = /* @__PURE__ */ C({
   __name: "String",
   props: {
     locString: {}
@@ -444,10 +445,10 @@ const Ae = /* @__PURE__ */ C({
       locString: o.locString.renderAsData
     }, null, 8, ["locString"]));
   }
-}), Xe = ["innerHTML"], Je = {
+}), Je = ["innerHTML"], Ye = {
   key: 1,
   class: "sv-string-viewer"
-}, Ye = /* @__PURE__ */ C({
+}, _e = /* @__PURE__ */ C({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -458,9 +459,9 @@ const Ae = /* @__PURE__ */ C({
       key: 0,
       class: "sv-string-viewer",
       innerHTML: b(n)
-    }, null, 8, Xe)) : (t(), u("span", Je, I(b(n)), 1));
+    }, null, 8, Je)) : (t(), u("span", Ye, I(b(n)), 1));
   }
-}), _e = ["innerHTML"], xe = /* @__PURE__ */ C({
+}), xe = ["innerHTML"], es = /* @__PURE__ */ C({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -479,7 +480,7 @@ const Ae = /* @__PURE__ */ C({
       innerHTML: e.locString.renderedHtml,
       onBlur: n,
       onClick: s
-    }, null, 40, _e)) : (t(), u("span", {
+    }, null, 40, xe)) : (t(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
@@ -487,7 +488,7 @@ const Ae = /* @__PURE__ */ C({
       onClick: s
     }, I(e.locString.renderedHtml), 33));
   }
-}), es = ["id"], ss = /* @__PURE__ */ C({
+}), ss = ["id"], ns = /* @__PURE__ */ C({
   __name: "Skeleton",
   props: {
     element: {}
@@ -497,15 +498,15 @@ const Ae = /* @__PURE__ */ C({
     return B(() => o.element), (n, s) => (t(), u("div", {
       class: "sv-skeleton-element",
       id: n.element.id
-    }, null, 8, es));
+    }, null, 8, ss));
   }
-}), ns = ["id"], os = ["value"], ts = /* @__PURE__ */ C({
+}), os = ["id"], ts = ["value"], is = /* @__PURE__ */ C({
   __name: "Text",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-text-input");
       return s.question.isReadOnlyRenderDiv() ? (t(), u("div", {
@@ -521,8 +522,8 @@ const Ae = /* @__PURE__ */ C({
         p("datalist", {
           id: s.question.dataListId
         }, [
-          (t(!0), u(w, null, S(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, os))), 256))
-        ], 8, ns)
+          (t(!0), u(w, null, T(s.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, ts))), 256))
+        ], 8, os)
       ], 512)) : (t(), y(i, {
         key: 2,
         question: s.question,
@@ -531,7 +532,7 @@ const Ae = /* @__PURE__ */ C({
       }, null, 8, ["question"]));
     };
   }
-}), is = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], ls = { key: 1 }, rs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], as = /* @__PURE__ */ C({
+}), ls = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], rs = { key: 1 }, as = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], us = /* @__PURE__ */ C({
   __name: "TextInput",
   props: {
     question: {}
@@ -542,7 +543,7 @@ const Ae = /* @__PURE__ */ C({
     const n = R(() => o.question.inputStyle);
     return (s, e) => {
       const i = q("sv-character-counter");
-      return s.question.getMaxLength() ? (t(), u("div", ls, [
+      return s.question.getMaxLength() ? (t(), u("div", rs, [
         p("input", {
           disabled: s.question.isInputReadOnly,
           class: l(s.question.getControlClass()),
@@ -568,7 +569,7 @@ const Ae = /* @__PURE__ */ C({
           "aria-label": s.question.a11y_input_ariaLabel,
           "aria-invalid": s.question.a11y_input_ariaInvalid,
           "aria-describedby": s.question.a11y_input_ariaDescribedBy
-        }, null, 46, rs),
+        }, null, 46, as),
         h(i, {
           counter: s.question.characterCounter,
           remainingCharacterCounter: s.question.cssClasses.remainingCharacterCounter
@@ -600,34 +601,34 @@ const Ae = /* @__PURE__ */ C({
         "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
         "aria-invalid": s.question.a11y_input_ariaInvalid,
         "aria-describedby": s.question.a11y_input_ariaDescribedBy
-      }, null, 46, is));
+      }, null, 46, ls));
     };
   }
-}), us = /* @__PURE__ */ p("legend", {
+}), ds = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), ds = /* @__PURE__ */ C({
+}, null, -1), ms = /* @__PURE__ */ C({
   __name: "Checkbox",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-checkbox-item"), a = q("survey-other-choice");
       return t(), u("fieldset", {
         class: l(s.question.getSelectBaseRootCss()),
         role: "presentation"
       }, [
-        us,
-        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, S(s.question.headItems, (d, c) => (t(), y(i, {
+        ds,
+        s.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, T(s.question.headItems, (d, c) => (t(), y(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
           item: d,
           index: "" + c
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : m("", !0),
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, S(s.question.bodyItems, (d, c) => (t(), y(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 1 }, T(s.question.bodyItems, (d, c) => (t(), y(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -638,7 +639,7 @@ const Ae = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, S(s.question.dataChoices, (d, c) => (t(), y(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), y(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -650,12 +651,12 @@ const Ae = /* @__PURE__ */ C({
           key: 3,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          (t(!0), u(w, null, S(s.question.columns, (d, c) => (t(), u("div", {
+          (t(!0), u(w, null, T(s.question.columns, (d, c) => (t(), u("div", {
             key: c,
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, S(d, (v, f) => (t(), y(i, {
+            (t(!0), u(w, null, T(d, (v, f) => (t(), y(i, {
               key: v.value,
               class: l(s.question.getItemClass(v)),
               question: s.question,
@@ -664,7 +665,7 @@ const Ae = /* @__PURE__ */ C({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 128))
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, S(s.question.footItems, (d, c) => (t(), y(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 4 }, T(s.question.footItems, (d, c) => (t(), y(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -678,7 +679,7 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), ms = { role: "presentation" }, cs = ["aria-label"], ps = ["name", "value", "id", "disabled", "aria-describedby"], vs = ["name", "value", "id", "disabled", "aria-describedby"], qs = ["xlink:href"], ys = /* @__PURE__ */ C({
+}), cs = { role: "presentation" }, ps = ["aria-label"], vs = ["name", "value", "id", "disabled", "aria-describedby"], qs = ["name", "value", "id", "disabled", "aria-describedby"], ys = ["xlink:href"], gs = /* @__PURE__ */ C({
   __name: "CheckboxItem",
   props: {
     question: {},
@@ -698,7 +699,7 @@ const Ae = /* @__PURE__ */ C({
     });
     return B(() => o.item), (s, e) => {
       const i = q("survey-string");
-      return t(), u("div", ms, [
+      return t(), u("div", cs, [
         p("label", {
           class: l(s.question.getLabelClass(s.item)),
           "aria-label": s.question.getAriaItemLabel(s.item)
@@ -714,7 +715,7 @@ const Ae = /* @__PURE__ */ C({
             disabled: !s.question.getItemEnabled(s.item),
             "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
-          }, null, 10, ps)), [
+          }, null, 10, vs)), [
             [z, n.value]
           ]) : m("", !0),
           s.item != s.question.selectAllItem ? D((t(), u("input", {
@@ -728,7 +729,7 @@ const Ae = /* @__PURE__ */ C({
             disabled: !s.question.getItemEnabled(s.item),
             "aria-describedby": s.question.ariaDescribedBy,
             class: l(s.question.cssClasses.itemControl)
-          }, null, 10, vs)), [
+          }, null, 10, qs)), [
             [z, s.question.renderedValue]
           ]) : m("", !0),
           s.question.cssClasses.materialDecorator ? (t(), u("span", {
@@ -741,7 +742,7 @@ const Ae = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": s.question.itemSvgIcon
-              }, null, 8, qs)
+              }, null, 8, ys)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           s.hideLabel ? m("", !0) : (t(), u("span", {
@@ -752,17 +753,17 @@ const Ae = /* @__PURE__ */ C({
               locString: s.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 10, cs)
+        ], 10, ps)
       ]);
     };
   }
-}), gs = { key: 5 }, Cs = ["value"], hs = /* @__PURE__ */ C({
+}), Cs = { key: 5 }, hs = ["value"], bs = /* @__PURE__ */ C({
   __name: "Radiogroup",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-radiogroup-item"), a = q("survey-other-choice");
       return t(), u("fieldset", {
@@ -771,7 +772,7 @@ const Ae = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, S(s.question.visibleChoices, (d, c) => (t(), y(i, {
+        !s.question.hasColumns && !s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (d, c) => (t(), y(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -782,7 +783,7 @@ const Ae = /* @__PURE__ */ C({
           key: 1,
           class: l(s.question.cssClasses.rootRow)
         }, [
-          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, S(s.question.dataChoices, (d, c) => (t(), y(i, {
+          !s.question.hasColumns && s.question.blockedRow ? (t(!0), u(w, { key: 0 }, T(s.question.dataChoices, (d, c) => (t(), y(i, {
             key: d.value,
             class: l(s.question.getItemClass(d)),
             question: s.question,
@@ -794,11 +795,11 @@ const Ae = /* @__PURE__ */ C({
           key: 2,
           class: l(s.question.cssClasses.rootMultiColumn)
         }, [
-          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, S(s.question.columns, (d, c) => (t(), u("div", {
+          s.question.hasColumns ? (t(!0), u(w, { key: 0 }, T(s.question.columns, (d, c) => (t(), u("div", {
             class: l(s.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, S(d, (v, f) => (t(), y(i, {
+            (t(!0), u(w, null, T(d, (v, f) => (t(), y(i, {
               key: v.value,
               class: l(s.question.getItemClass(v)),
               question: s.question,
@@ -807,7 +808,7 @@ const Ae = /* @__PURE__ */ C({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 256)) : m("", !0)
         ], 2)) : m("", !0),
-        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, S(s.question.footItems, (d, c) => (t(), y(i, {
+        s.question.hasFootItems ? (t(!0), u(w, { key: 3 }, T(s.question.footItems, (d, c) => (t(), y(i, {
           key: d.value,
           class: l(s.question.getItemClass(d)),
           question: s.question,
@@ -818,7 +819,7 @@ const Ae = /* @__PURE__ */ C({
           key: 4,
           question: s.question
         }, null, 8, ["question"])) : m("", !0),
-        s.question.showClearButtonInContent ? (t(), u("div", gs, [
+        s.question.showClearButtonInContent ? (t(), u("div", Cs, [
           p("input", {
             type: "button",
             class: l(s.question.cssClasses.clearButton),
@@ -826,12 +827,12 @@ const Ae = /* @__PURE__ */ C({
               s.question.clearValue();
             }),
             value: s.question.clearButtonCaption
-          }, null, 10, Cs)
+          }, null, 10, hs)
         ])) : m("", !0)
       ], 2);
     };
   }
-}), bs = { role: "presentation" }, ks = ["aria-label"], fs = ["name", "value", "id", "aria-describedby", "disabled"], Is = ["xlink:href"], ws = /* @__PURE__ */ C({
+}), ks = { role: "presentation" }, fs = ["aria-label"], Is = ["name", "value", "id", "aria-describedby", "disabled"], ws = ["xlink:href"], Ss = /* @__PURE__ */ C({
   __name: "RadiogroupItem",
   props: {
     question: {},
@@ -843,7 +844,7 @@ const Ae = /* @__PURE__ */ C({
     const o = r, n = (e) => o.question.getLabelClass(e), s = (e) => o.question.getControlLabelClass(e);
     return B(() => o.item), (e, i) => {
       const a = q("survey-string");
-      return t(), u("div", bs, [
+      return t(), u("div", ks, [
         p("label", {
           onMousedown: i[1] || (i[1] = (d) => e.question.onMouseDown()),
           class: l(n(e.item)),
@@ -858,7 +859,7 @@ const Ae = /* @__PURE__ */ C({
             "onUpdate:modelValue": i[0] || (i[0] = (d) => e.question.renderedValue = d),
             disabled: !e.question.getItemEnabled(e.item),
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, fs), [
+          }, null, 10, Is), [
             [Y, e.question.renderedValue]
           ]),
           e.question.cssClasses.materialDecorator ? (t(), u("span", {
@@ -871,7 +872,7 @@ const Ae = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Is)
+              }, null, 8, ws)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           e.hideLabel ? m("", !0) : (t(), u("span", {
@@ -882,19 +883,19 @@ const Ae = /* @__PURE__ */ C({
               locString: e.item.locText
             }, null, 8, ["locString"])
           ], 2))
-        ], 42, ks)
+        ], 42, fs)
       ]);
     };
   }
 }), Ts = /* @__PURE__ */ p("div", null, [
   /* @__PURE__ */ p("canvas", { tabindex: "0" })
-], -1), Ss = ["title"], Rs = { key: 0 }, $s = /* @__PURE__ */ C({
+], -1), Rs = ["title"], $s = { key: 0 }, Bs = /* @__PURE__ */ C({
   __name: "Signaturepad",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("sv-svg-icon");
       return t(), u("div", {
@@ -924,24 +925,24 @@ const Ae = /* @__PURE__ */ C({
               s.question.clearValue();
             })
           }, [
-            s.question.cssClasses.clearButtonIconId ? m("", !0) : (t(), u("span", Rs, "\u2716")),
+            s.question.cssClasses.clearButtonIconId ? m("", !0) : (t(), u("span", $s, "\u2716")),
             s.question.cssClasses.clearButtonIconId ? (t(), y(i, {
               key: 1,
               iconName: s.question.cssClasses.clearButtonIconId,
               size: "auto"
             }, null, 8, ["iconName"])) : m("", !0)
-          ], 10, Ss)
+          ], 10, Rs)
         ], 2)) : m("", !0)
       ], 6);
     };
   }
-}), Bs = ["innerHTML"], Ls = /* @__PURE__ */ C({
+}), Ls = ["innerHTML"], Ds = /* @__PURE__ */ C({
   __name: "Html",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = W(() => o.question.locHtml);
     return (e, i) => (t(), u("div", {
@@ -949,15 +950,15 @@ const Ae = /* @__PURE__ */ C({
       ref: n,
       class: l(e.question.renderCssRoot),
       innerHTML: b(s)
-    }, null, 10, Bs));
+    }, null, 10, Ls));
   }
-}), Ds = ["src", "alt", "width", "height"], Ps = ["src", "width", "height"], Ms = ["src", "width", "height"], Ns = /* @__PURE__ */ C({
+}), Ps = ["src", "alt", "width", "height"], Ms = ["src", "width", "height"], Ns = ["src", "width", "height"], Hs = /* @__PURE__ */ C({
   __name: "Image",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = W(() => o.question.locImageLink);
     return (e, i) => {
@@ -985,7 +986,7 @@ const Ae = /* @__PURE__ */ C({
           onError: i[1] || (i[1] = (d) => {
             e.question.onErrorHandler();
           })
-        }, null, 46, Ds)), [
+        }, null, 46, Ps)), [
           [H, b(s) && !e.question.contentNotLoaded]
         ]) : m("", !0),
         e.question.renderedMode === "video" ? D((t(), u("video", {
@@ -1006,7 +1007,7 @@ const Ae = /* @__PURE__ */ C({
           onError: i[3] || (i[3] = (d) => {
             e.question.onErrorHandler();
           })
-        }, null, 46, Ps)), [
+        }, null, 46, Ms)), [
           [H, b(s) && !e.question.contentNotLoaded]
         ]) : m("", !0),
         e.question.renderedMode === "youtube" ? (t(), u("iframe", {
@@ -1020,7 +1021,7 @@ const Ae = /* @__PURE__ */ C({
             width: e.question.renderedStyleWidth,
             height: e.question.renderedStyleHeight
           })
-        }, null, 14, Ms)) : m("", !0),
+        }, null, 14, Ns)) : m("", !0),
         !b(s) || e.question.contentNotLoaded ? (t(), u("div", {
           key: 3,
           class: l(e.question.cssClasses.noImage)
@@ -1033,26 +1034,26 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Hs = /* @__PURE__ */ C({
+}), Es = /* @__PURE__ */ C({
   __name: "Expression",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => (t(), u("div", {
       class: l(s.question.cssClasses.text),
       ref_key: "root",
       ref: n
     }, I(s.question.formatedValue), 3));
   }
-}), Es = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], As = ["id", "multiple", "placeholder"], Os = ["for", "aria-label"], Vs = ["onClick", "href", "title", "download"], Fs = ["src"], Ws = ["onClick"], zs = ["onClick", "href", "title", "download"], Us = /* @__PURE__ */ C({
+}), As = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Os = ["id", "multiple", "placeholder"], Vs = ["for", "aria-label"], Fs = ["onClick", "href", "title", "download"], Ws = ["src"], zs = ["onClick"], Us = ["onClick", "href", "title", "download"], Ks = /* @__PURE__ */ C({
   __name: "File",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (e) => o.question.isPreviewVisible(e);
     return (e, i) => {
@@ -1075,7 +1076,7 @@ const Ae = /* @__PURE__ */ C({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 42, Es)),
+        }, null, 42, As)),
         e.question.isReadOnly ? (t(), u("input", {
           key: 1,
           type: "file",
@@ -1085,7 +1086,7 @@ const Ae = /* @__PURE__ */ C({
           multiple: e.question.allowMultiple,
           placeholder: e.question.title,
           style: { color: "transparent" }
-        }, null, 10, As)) : m("", !0),
+        }, null, 10, Os)) : m("", !0),
         p("div", {
           class: l(e.question.cssClasses.dragArea),
           onDrop: i[3] || (i[3] = (...v) => e.question.onDrop && e.question.onDrop(...v)),
@@ -1102,7 +1103,8 @@ const Ae = /* @__PURE__ */ C({
             p("div", {
               class: l(e.question.cssClasses.wrapper)
             }, [
-              D((t(), u("label", {
+              e.question.isReadOnly ? m("", !0) : D((t(), u("label", {
+                key: 0,
                 role: "button",
                 tabindex: "0",
                 class: l(e.question.getChooseFileCss()),
@@ -1116,11 +1118,11 @@ const Ae = /* @__PURE__ */ C({
                   iconName: e.question.cssClasses.chooseFileIconId,
                   size: "auto"
                 }, null, 8, ["title", "iconName"])) : m("", !0)
-              ], 10, Os)), [
+              ], 10, Vs)), [
                 [c]
               ]),
               e.question.isEmpty() ? (t(), u("span", {
-                key: 0,
+                key: 1,
                 class: l(e.question.cssClasses.noFileChosen)
               }, I(e.question.noFileChosenCaption), 3)) : m("", !0)
             ], 2)
@@ -1143,7 +1145,7 @@ const Ae = /* @__PURE__ */ C({
             key: 1,
             class: l(e.question.cssClasses.fileList || void 0)
           }, [
-            (t(!0), u(w, null, S(e.question.previewValue, (v, f) => D((t(), u("span", {
+            (t(!0), u(w, null, T(e.question.previewValue, (v, f) => D((t(), u("span", {
               key: e.question.inputId + "_" + f,
               class: l(e.question.cssClasses.preview)
             }, [
@@ -1157,7 +1159,7 @@ const Ae = /* @__PURE__ */ C({
                   title: v.name,
                   download: v.name,
                   style: $({ width: e.question.imageWidth })
-                }, I(v.name), 13, Vs)
+                }, I(v.name), 13, Fs)
               ], 2)) : m("", !0),
               p("div", {
                 class: l(e.question.cssClasses.imageWrapper)
@@ -1170,7 +1172,7 @@ const Ae = /* @__PURE__ */ C({
                     width: e.question.imageWidth
                   }),
                   alt: "File preview"
-                }, null, 12, Fs)) : m("", !0),
+                }, null, 12, Ws)) : m("", !0),
                 e.question.defaultImage(v) ? (t(), y(a, {
                   key: 1,
                   iconName: e.question.cssClasses.defaultImageIconId,
@@ -1192,7 +1194,7 @@ const Ae = /* @__PURE__ */ C({
                     iconName: e.question.cssClasses.removeFileSvgIconId,
                     size: "auto"
                   }, null, 8, ["title", "class", "iconName"])) : m("", !0)
-                ], 10, Ws)) : m("", !0)
+                ], 10, zs)) : m("", !0)
               ], 2),
               v.name && e.question.cssClasses.fileSignBottom ? (t(), u("div", {
                 key: 1,
@@ -1204,7 +1206,7 @@ const Ae = /* @__PURE__ */ C({
                   title: v.name,
                   download: v.name,
                   style: $({ width: e.question.imageWidth })
-                }, I(v.name), 13, zs)
+                }, I(v.name), 13, Us)
               ], 2)) : m("", !0)
             ], 2)), [
               [H, v && s(f)]
@@ -1232,13 +1234,13 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ks = ["aria-label"], js = /* @__PURE__ */ C({
+}), js = ["aria-label"], Qs = /* @__PURE__ */ C({
   __name: "Imagepicker",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-imagepicker-item");
       return t(), u("fieldset", {
@@ -1249,18 +1251,18 @@ const Ae = /* @__PURE__ */ C({
         p("legend", {
           role: "radio",
           "aria-label": s.question.locTitle.renderedHtml
-        }, null, 8, Ks),
-        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, S(s.question.visibleChoices, (a) => (t(), y(i, {
+        }, null, 8, js),
+        s.question.hasColumns ? m("", !0) : (t(!0), u(w, { key: 0 }, T(s.question.visibleChoices, (a) => (t(), y(i, {
           key: a.value,
           question: s.question,
           item: a
         }, null, 8, ["question", "item"]))), 128)),
-        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, S(s.question.columns, (a, d) => (t(), u("div", {
+        s.question.hasColumns ? (t(!0), u(w, { key: 1 }, T(s.question.columns, (a, d) => (t(), u("div", {
           class: l(s.question.getColumnClass()),
           key: d,
           role: "presentation"
         }, [
-          (t(!0), u(w, null, S(a, (c) => (t(), y(i, {
+          (t(!0), u(w, null, T(a, (c) => (t(), y(i, {
             key: c.value,
             question: s.question,
             item: c
@@ -1269,7 +1271,7 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Qs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["src", "width", "height", "alt"], Xs = ["src", "width", "height"], Js = /* @__PURE__ */ C({
+}), Zs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xs = ["src", "width", "height", "alt"], Js = ["src", "width", "height"], Ys = /* @__PURE__ */ C({
   __name: "ImagepickerItem",
   props: {
     question: {},
@@ -1300,7 +1302,7 @@ const Ae = /* @__PURE__ */ C({
             "aria-invalid": e.question.ariaInvalid,
             "aria-describedby": e.question.ariaDescribedBy,
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, Qs)), [
+          }, null, 10, Zs)), [
             [z, e.question.value]
           ]) : D((t(), u("input", {
             key: 1,
@@ -1315,7 +1317,7 @@ const Ae = /* @__PURE__ */ C({
             "aria-invalid": e.question.ariaInvalid,
             "aria-describedby": e.question.ariaDescribedBy,
             class: l(e.question.cssClasses.itemControl)
-          }, null, 10, Zs)), [
+          }, null, 10, Gs)), [
             [Y, e.question.value]
           ]),
           p("div", {
@@ -1349,7 +1351,7 @@ const Ae = /* @__PURE__ */ C({
                 onError: i[3] || (i[3] = (c) => {
                   e.item.onErrorHandler();
                 })
-              }, null, 46, Gs)) : m("", !0),
+              }, null, 46, Xs)) : m("", !0),
               b(s) && !e.item.contentNotLoaded && e.question.contentMode === "video" ? (t(), u("video", {
                 key: 2,
                 controls: "",
@@ -1364,7 +1366,7 @@ const Ae = /* @__PURE__ */ C({
                 onError: i[5] || (i[5] = (c) => {
                   e.item.onErrorHandler();
                 })
-              }, null, 46, Xs)) : m("", !0),
+              }, null, 46, Js)) : m("", !0),
               !b(s) || e.item.contentNotLoaded ? (t(), u("div", {
                 key: 3,
                 class: l(e.question.cssClasses.itemNoImage),
@@ -1394,14 +1396,14 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Ys = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], _s = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], xs = /* @__PURE__ */ C({
+}), _s = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], en = /* @__PURE__ */ C({
   __name: "Comment",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (e) => {
       const i = o.question;
@@ -1435,7 +1437,7 @@ const Ae = /* @__PURE__ */ C({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy,
         style: $({ resize: e.question.resizeStyle })
-      }, null, 46, Ys)) : !e.question.isReadOnlyRenderDiv() && e.question.getMaxLength() ? (t(), u("div", {
+      }, null, 46, _s)) : !e.question.isReadOnlyRenderDiv() && e.question.getMaxLength() ? (t(), u("div", {
         key: 1,
         ref_key: "root",
         ref: n
@@ -1463,7 +1465,7 @@ const Ae = /* @__PURE__ */ C({
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy,
           style: $({ resize: e.question.resizeStyle })
-        }, null, 46, _s),
+        }, null, 46, xs),
         h(a, {
           counter: e.question.characterCounter,
           remainingCharacterCounter: e.question.cssClasses.remainingCharacterCounter
@@ -1475,13 +1477,13 @@ const Ae = /* @__PURE__ */ C({
       }, I(e.question.value), 513));
     };
   }
-}), en = /* @__PURE__ */ C({
+}), sn = /* @__PURE__ */ C({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("sv-dropdown"), a = q("survey-other-choice");
       return t(), u("div", {
@@ -1497,22 +1499,22 @@ const Ae = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), sn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], nn = {
+}), nn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], on = {
   key: 0,
   value: ""
-}, on = ["id"];
-G.Instance.registerRenderer(
+}, tn = ["id"];
+X.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const tn = /* @__PURE__ */ C({
+const ln = /* @__PURE__ */ C({
   __name: "DropdownSelect",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (a) => {
       o.question.onClick(a);
@@ -1541,7 +1543,7 @@ const tn = /* @__PURE__ */ C({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, I(a.question.readOnlyText), 11, on)) : D((t(), u("select", {
+          }, I(a.question.readOnlyText), 11, tn)) : D((t(), u("select", {
             key: 0,
             id: a.question.inputId,
             "onUpdate:modelValue": d[0] || (d[0] = (g) => i.value = g),
@@ -1555,13 +1557,13 @@ const tn = /* @__PURE__ */ C({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (t(), u("option", nn, I(a.question.placeholder), 1)) : m("", !0),
-            (t(!0), u(w, null, S(a.question.visibleChoices, (g) => (t(), y(c, {
+            a.question.allowClear ? (t(), u("option", on, I(a.question.placeholder), 1)) : m("", !0),
+            (t(!0), u(w, null, T(a.question.visibleChoices, (g) => (t(), y(c, {
               item: g,
               key: g.id
             }, null, 8, ["item"]))), 128))
-          ], 42, sn)), [
-            [ce, i.value]
+          ], 42, nn)), [
+            [pe, i.value]
           ]),
           a.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
             key: 2,
@@ -1581,7 +1583,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), ln = ["value", "disabled"], rn = /* @__PURE__ */ C({
+}), rn = ["value", "disabled"], an = /* @__PURE__ */ C({
   __name: "OptionItem",
   props: {
     item: {}
@@ -1591,17 +1593,17 @@ const tn = /* @__PURE__ */ C({
     return B(() => o.item), (s, e) => (t(), u("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
-    }, I(b(n)), 9, ln));
+    }, I(b(n)), 9, rn));
   }
-}), an = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], un = { style: { visibility: "hidden" } }, dn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], mn = ["id"], cn = /* @__PURE__ */ C({
+}), un = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], dn = { style: { visibility: "hidden" } }, mn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], cn = ["id"], pn = /* @__PURE__ */ C({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null), s = R(() => {
+    const o = r, n = S(null), s = R(() => {
       const g = o.question;
-      return g.dropdownListModel || (g.dropdownListModel = new ke(g)), o.question.dropdownListModel;
+      return g.dropdownListModel || (g.dropdownListModel = new fe(g)), o.question.dropdownListModel;
     }), e = (g) => {
       var k;
       (k = s.value) == null || k.onClick(g);
@@ -1614,7 +1616,7 @@ const tn = /* @__PURE__ */ C({
     }, d = () => {
       if (n.value) {
         const g = n.value, k = s.value.inputStringRendered;
-        fe.isTwoValueEquals(k, g.value) || (g.value = s.value.inputStringRendered);
+        Ie.isTwoValueEquals(k, g.value) || (g.value = s.value.inputStringRendered);
       }
     }, c = (g) => {
       var k;
@@ -1625,7 +1627,7 @@ const tn = /* @__PURE__ */ C({
     }, f = (g) => {
       s.value.inputStringRendered = g.target.value;
     };
-    return B(() => s.value), U(d), E(d), (g, k) => {
+    return B(() => s.value), K(d), E(d), (g, k) => {
       const P = q("survey-string"), L = q("sv-svg-icon"), A = q("sv-popup");
       return t(), u("div", {
         class: l(g.question.cssClasses.selectWrapper),
@@ -1666,7 +1668,7 @@ const tn = /* @__PURE__ */ C({
               key: 1,
               class: l(g.question.cssClasses.hintSuffix)
             }, [
-              p("span", un, I(s.value.inputStringRendered), 1),
+              p("span", dn, I(s.value.inputStringRendered), 1),
               p("span", null, I(s.value.hintStringSuffix), 1)
             ], 2)) : m("", !0),
             g.question.showInputFieldComponent ? (t(), y(N(g.question.inputFieldComponentName), {
@@ -1694,7 +1696,7 @@ const tn = /* @__PURE__ */ C({
               onInput: f,
               onBlur: c,
               onFocus: v
-            }, null, 42, dn)
+            }, null, 42, mn)
           ], 2),
           g.question.allowClear && g.question.cssClasses.cleanButtonIconId ? D((t(), u("div", {
             key: 1,
@@ -1710,7 +1712,7 @@ const tn = /* @__PURE__ */ C({
           ], 2)), [
             [H, !g.question.isEmpty()]
           ]) : m("", !0)
-        ], 42, an)),
+        ], 42, un)),
         g.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
@@ -1722,7 +1724,7 @@ const tn = /* @__PURE__ */ C({
             locString: g.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
           p("div", null, I(g.question.readOnlyText), 1)
-        ], 10, mn)) : (t(), y(A, {
+        ], 10, cn)) : (t(), y(A, {
           key: 1,
           model: g.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1739,13 +1741,13 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), pn = /* @__PURE__ */ C({
+}), vn = /* @__PURE__ */ C({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("sv-tagbox"), a = q("survey-other-choice");
       return t(), u("div", {
@@ -1761,7 +1763,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), vn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], qn = ["id"], yn = /* @__PURE__ */ C({
+}), qn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], yn = ["id"], gn = /* @__PURE__ */ C({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1769,7 +1771,7 @@ const tn = /* @__PURE__ */ C({
   setup(r) {
     const o = r, n = R(() => {
       const d = o.question;
-      return d.dropdownListModel || (d.dropdownListModel = new Ie(d)), o.question.dropdownListModel;
+      return d.dropdownListModel || (d.dropdownListModel = new we(d)), o.question.dropdownListModel;
     }), s = (d) => {
       var c;
       (c = n.value) == null || c.onClick(d);
@@ -1810,7 +1812,7 @@ const tn = /* @__PURE__ */ C({
           p("div", {
             class: l(d.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, S(d.question.selectedChoices, (P, L) => (t(), y(v, {
+            (t(!0), u(w, null, T(d.question.selectedChoices, (P, L) => (t(), y(v, {
               item: P,
               question: d.question,
               key: "item" + L
@@ -1834,7 +1836,7 @@ const tn = /* @__PURE__ */ C({
           ], 2)), [
             [H, !d.question.isEmpty()]
           ]) : m("", !0)
-        ], 42, vn)),
+        ], 42, qn)),
         d.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
@@ -1842,7 +1844,7 @@ const tn = /* @__PURE__ */ C({
           class: l(d.question.getControlClass())
         }, [
           p("div", null, I(d.question.readOnlyText), 1)
-        ], 10, qn)) : (t(), y(k, {
+        ], 10, yn)) : (t(), y(k, {
           key: 1,
           model: n.value.popupModel
         }, null, 8, ["model"])),
@@ -1859,7 +1861,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), gn = { style: { visibility: "hidden" } }, Cn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], hn = /* @__PURE__ */ C({
+}), Cn = { style: { visibility: "hidden" } }, hn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], bn = /* @__PURE__ */ C({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1898,7 +1900,7 @@ const tn = /* @__PURE__ */ C({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            p("span", gn, I(a.model.inputStringRendered), 1),
+            p("span", Cn, I(a.model.inputStringRendered), 1),
             p("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : m("", !0),
           D(p("input", {
@@ -1921,14 +1923,14 @@ const tn = /* @__PURE__ */ C({
             onKeydown: s,
             onBlur: e,
             onFocus: i
-          }, null, 42, Cn), [
-            [pe, a.model.inputStringRendered]
+          }, null, 42, hn), [
+            [ve, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), bn = { class: "sv-tagbox__item-text" }, kn = /* @__PURE__ */ C({
+}), kn = { class: "sv-tagbox__item-text" }, fn = /* @__PURE__ */ C({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1944,7 +1946,7 @@ const tn = /* @__PURE__ */ C({
         class: "sv-tagbox__item",
         key: s.item.key
       }, [
-        p("div", bn, [
+        p("div", kn, [
           h(i, {
             locString: s.item.locText
           }, null, 8, ["locString"])
@@ -1962,13 +1964,13 @@ const tn = /* @__PURE__ */ C({
       ]);
     };
   }
-}), fn = /* @__PURE__ */ C({
+}), In = /* @__PURE__ */ C({
   __name: "Ranking",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (e) => o.question.getNumberByIndex(e);
     return (e, i) => {
@@ -1978,7 +1980,7 @@ const tn = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, S(e.question.rankingChoices, (d, c) => (t(), y(a, {
+        e.question.selectToRankEnabled ? m("", !0) : (t(!0), u(w, { key: 0 }, T(e.question.rankingChoices, (d, c) => (t(), y(a, {
           key: d.value + "-" + c + "-item",
           class: l(e.question.getItemClass(d)),
           text: d.locText,
@@ -1993,7 +1995,7 @@ const tn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (t(!0), u(w, null, S(e.question.unRankingChoices, (d, c) => (t(), y(a, {
+          (t(!0), u(w, null, T(e.question.unRankingChoices, (d, c) => (t(), y(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2018,7 +2020,7 @@ const tn = /* @__PURE__ */ C({
           class: l(e.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (t(!0), u(w, null, S(e.question.rankingChoices, (d, c) => (t(), y(a, {
+          (t(!0), u(w, null, T(e.question.rankingChoices, (d, c) => (t(), y(a, {
             key: d.value + "-" + c + "-item",
             class: l(e.question.getItemClass(d)),
             text: d.locText,
@@ -2036,15 +2038,15 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), In = ["tabindex", "data-sv-drop-target-ranking-item"], wn = {
+}), wn = ["tabindex", "data-sv-drop-target-ranking-item"], Sn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Tn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), Sn = [
+}, Tn = /* @__PURE__ */ p("path", { d: "M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z" }, null, -1), Rn = [
   Tn
-], Rn = /* @__PURE__ */ p("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), $n = /* @__PURE__ */ p("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Bn = [
-  Rn,
-  $n
-], Ln = /* @__PURE__ */ C({
+], $n = /* @__PURE__ */ p("path", { d: "M10 5L5 0L0 5H4V9H6V5H10Z" }, null, -1), Bn = /* @__PURE__ */ p("path", { d: "M6 19V15H4V19H0L5 24L10 19H6Z" }, null, -1), Ln = [
+  $n,
+  Bn
+], Dn = /* @__PURE__ */ C({
   __name: "RankingItem",
   props: {
     index: {},
@@ -2076,7 +2078,7 @@ const tn = /* @__PURE__ */ C({
           );
         })
       }, [
-        p("div", wn, [
+        p("div", Sn, [
           p("div", {
             class: l(n.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2092,14 +2094,14 @@ const tn = /* @__PURE__ */ C({
                 viewBox: "0 0 10 16",
                 class: l(n.question.getIconHoverCss()),
                 xmlns: "http://www.w3.org/2000/svg"
-              }, Sn, 2)),
+              }, Rn, 2)),
               (t(), u("svg", {
                 width: "10",
                 height: "24",
                 viewBox: "0 0 10 24",
                 class: l(n.question.getIconFocusCss()),
                 xmlns: "http://www.w3.org/2000/svg"
-              }, Bn, 2))
+              }, Ln, 2))
             ], 2),
             p("div", {
               class: l(n.question.getItemIndexClasses(n.item))
@@ -2111,19 +2113,19 @@ const tn = /* @__PURE__ */ C({
             ], 2)
           ], 2)
         ])
-      ], 42, In);
+      ], 42, wn);
     };
   }
-}), Dn = { role: "radiogroup" }, Pn = /* @__PURE__ */ p("legend", {
+}), Pn = { role: "radiogroup" }, Mn = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Mn = /* @__PURE__ */ C({
+}, null, -1), Nn = /* @__PURE__ */ C({
   __name: "Rating",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (e) => o.question.getInputId(e);
     return (e, i) => {
@@ -2133,8 +2135,8 @@ const tn = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        p("fieldset", Dn, [
-          Pn,
+        p("fieldset", Pn, [
+          Mn,
           e.question.hasMinLabel ? (t(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.minText)
@@ -2143,7 +2145,7 @@ const tn = /* @__PURE__ */ C({
               locString: e.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (t(!0), u(w, null, S(e.question.renderedRateItems, (d, c) => (t(), y(N(e.question.itemComponentName), {
+          (t(!0), u(w, null, T(e.question.renderedRateItems, (d, c) => (t(), y(N(e.question.itemComponentName), {
             key: s(c),
             item: d,
             index: c,
@@ -2161,7 +2163,7 @@ const tn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Nn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ C({
+}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ C({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2189,7 +2191,7 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, Nn),
+        }, null, 8, Hn),
         p("span", {
           class: l(n.question.cssClasses.itemText)
         }, [
@@ -2200,7 +2202,7 @@ const tn = /* @__PURE__ */ C({
       ], 34);
     };
   }
-}), En = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ C({
+}), An = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], On = /* @__PURE__ */ C({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2231,7 +2233,7 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, En),
+        }, null, 8, An),
         h(e, {
           iconName: n.question.getItemSmileyIconName(n.item.itemValue),
           size: "auto",
@@ -2240,7 +2242,7 @@ const tn = /* @__PURE__ */ C({
       ], 38);
     };
   }
-}), On = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Vn = /* @__PURE__ */ C({
+}), Vn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Fn = /* @__PURE__ */ C({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2270,7 +2272,7 @@ const tn = /* @__PURE__ */ C({
           "aria-label": n.question.ariaLabel,
           "aria-invalid": n.question.ariaInvalid,
           "aria-describedby": n.question.ariaDescribedBy
-        }, null, 8, On),
+        }, null, 8, Vn),
         h(e, {
           class: l("sv-star"),
           iconName: n.question.itemStarIcon,
@@ -2287,18 +2289,18 @@ const tn = /* @__PURE__ */ C({
     };
   }
 });
-G.Instance.registerRenderer(
+X.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const Fn = /* @__PURE__ */ C({
+const Wn = /* @__PURE__ */ C({
   __name: "RatingDropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("sv-dropdown");
       return t(), u("div", {
@@ -2310,13 +2312,13 @@ const Fn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Wn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], zn = /* @__PURE__ */ C({
+}), zn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Un = /* @__PURE__ */ C({
   __name: "BooleanSwitch",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = (i, a) => {
       o.question.onLabelClick(i, a);
@@ -2346,7 +2348,7 @@ const Fn = /* @__PURE__ */ C({
             "aria-label": i.question.ariaLabel,
             "aria-invalid": i.question.ariaInvalid,
             "aria-describedby": i.question.ariaDescribedBy
-          }, null, 10, Wn), [
+          }, null, 10, zn), [
             [z, i.question.booleanValue]
           ]),
           p("div", {
@@ -2395,18 +2397,18 @@ const Fn = /* @__PURE__ */ C({
     };
   }
 });
-G.Instance.registerRenderer(
+X.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const Un = /* @__PURE__ */ C({
+const Kn = /* @__PURE__ */ C({
   __name: "BooleanRadio",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("sv-boolean-radio-item");
       return t(), u("div", {
@@ -2434,7 +2436,7 @@ const Un = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Kn = ["name", "value", "checked", "aria-describedby", "disabled"], jn = ["xlink:href"], Qn = /* @__PURE__ */ C({
+}), jn = ["name", "value", "checked", "aria-describedby", "disabled"], Qn = ["xlink:href"], Zn = /* @__PURE__ */ C({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2464,7 +2466,7 @@ const Un = /* @__PURE__ */ C({
             disabled: s.question.isInputReadOnly,
             class: l(s.question.cssClasses.itemRadioControl),
             onChange: n
-          }, null, 42, Kn),
+          }, null, 42, jn),
           s.question.cssClasses.materialRadioDecorator ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.materialRadioDecorator)
@@ -2475,7 +2477,7 @@ const Un = /* @__PURE__ */ C({
             }, [
               p("use", {
                 "xlink:href": s.question.itemSvgIcon
-              }, null, 8, jn)
+              }, null, 8, Qn)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
           p("span", {
@@ -2487,20 +2489,20 @@ const Un = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), Zn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gn = ["xlink:href"], Xn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Jn = ["id"];
-G.Instance.registerRenderer(
+}), Gn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xn = ["xlink:href"], Jn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Yn = ["id"];
+X.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const Yn = /* @__PURE__ */ C({
+const _n = /* @__PURE__ */ C({
   __name: "BooleanCheckbox",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       var c;
       const i = q("survey-element-title-content"), a = q("sv-title-actions"), d = q("survey-string");
@@ -2528,7 +2530,7 @@ const Yn = /* @__PURE__ */ C({
               "aria-label": s.question.ariaLabel,
               "aria-invalid": s.question.ariaInvalid,
               "aria-describedby": s.question.ariaDescribedBy
-            }, null, 10, Zn), [
+            }, null, 10, Gn), [
               [z, s.question.booleanValue]
             ]),
             p("span", {
@@ -2540,9 +2542,9 @@ const Yn = /* @__PURE__ */ C({
               }, [
                 p("use", {
                   "xlink:href": s.question.svgIcon
-                }, null, 8, Gn)
+                }, null, 8, Xn)
               ], 2)) : m("", !0),
-              Xn
+              Jn
             ], 2),
             s.question.isLabelRendered ? (t(), u("span", {
               key: 0,
@@ -2559,7 +2561,7 @@ const Yn = /* @__PURE__ */ C({
                 element: s.question,
                 css: s.css
               }, null, 8, ["element", "css"])) : m("", !0)
-            ], 10, Jn)) : m("", !0)
+            ], 10, Yn)) : m("", !0)
           ], 2),
           s.question.canRenderLabelDescription ? (t(), u("div", {
             key: 0,
@@ -2573,13 +2575,13 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), _n = /* @__PURE__ */ C({
+}), xn = /* @__PURE__ */ C({
   __name: "Multipletext",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-multipletext-item");
       return t(), u("table", {
@@ -2588,11 +2590,11 @@ const Yn = /* @__PURE__ */ C({
         ref: n
       }, [
         p("tbody", null, [
-          (t(!0), u(w, null, S(s.question.getRows(), (a, d) => (t(), u("tr", {
+          (t(!0), u(w, null, T(s.question.getRows(), (a, d) => (t(), u("tr", {
             key: s.question.inputId + "rowkey" + d,
             class: l(s.question.cssClasses.row)
           }, [
-            (t(!0), u(w, null, S(a, (c) => (t(), u("td", {
+            (t(!0), u(w, null, T(a, (c) => (t(), u("td", {
               key: "item" + c.editor.id,
               class: l(s.question.cssClasses.cell)
             }, [
@@ -2606,7 +2608,7 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), xn = /* @__PURE__ */ C({
+}), eo = /* @__PURE__ */ C({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2660,13 +2662,13 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), eo = ["aria-label"], so = { key: 0 }, no = { key: 0 }, oo = ["onClick"], to = ["data-responsive-title", "onClick"], io = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], lo = ["xlink:href"], ro = /* @__PURE__ */ C({
+}), so = ["aria-label"], no = { key: 0 }, oo = { key: 0 }, to = ["onClick"], io = ["data-responsive-title", "onClick"], lo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], ro = ["xlink:href"], ao = /* @__PURE__ */ C({
   __name: "Matrix",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null), s = F();
+    const o = r, n = S(null), s = F();
     M(
       o,
       n,
@@ -2693,14 +2695,14 @@ const Yn = /* @__PURE__ */ C({
         p("fieldset", null, [
           p("legend", {
             "aria-label": i.question.locTitle.renderedHtml
-          }, null, 8, eo),
+          }, null, 8, so),
           p("table", {
             class: l(i.question.getTableCss())
           }, [
-            i.question.showHeader ? (t(), u("thead", so, [
+            i.question.showHeader ? (t(), u("thead", no, [
               p("tr", null, [
-                i.question.hasRows ? (t(), u("td", no)) : m("", !0),
-                (t(!0), u(w, null, S(i.question.visibleColumns, (c, v) => (t(), u("th", {
+                i.question.hasRows ? (t(), u("td", oo)) : m("", !0),
+                (t(!0), u(w, null, T(i.question.visibleColumns, (c, v) => (t(), u("th", {
                   key: v,
                   class: l(i.question.cssClasses.headerCell),
                   style: $({
@@ -2715,7 +2717,7 @@ const Yn = /* @__PURE__ */ C({
               ])
             ])) : m("", !0),
             p("tbody", null, [
-              (t(!0), u(w, null, S(s.value, (c, v) => (t(), u("tr", {
+              (t(!0), u(w, null, T(s.value, (c, v) => (t(), u("tr", {
                 key: "row_" + c.name + "_" + v,
                 class: l(c.rowClasses || void 0)
               }, [
@@ -2732,7 +2734,7 @@ const Yn = /* @__PURE__ */ C({
                 ], 6), [
                   [H, i.question.hasRows]
                 ]),
-                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, S(i.question.visibleColumns, (f, g) => (t(), u("td", {
+                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, T(i.question.visibleColumns, (f, g) => (t(), u("td", {
                   key: g,
                   class: l(i.question.getItemClass(c, f)),
                   onClick: (k) => e(c, f)
@@ -2740,8 +2742,8 @@ const Yn = /* @__PURE__ */ C({
                   h(d, {
                     locString: i.question.getCellDisplayLocText(c.name, f)
                   }, null, 8, ["locString"])
-                ], 10, oo))), 128)) : m("", !0),
-                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, S(i.question.visibleColumns, (f, g) => (t(), u("td", {
+                ], 10, to))), 128)) : m("", !0),
+                i.question.hasCellText ? m("", !0) : (t(!0), u(w, { key: 1 }, T(i.question.visibleColumns, (f, g) => (t(), u("td", {
                   key: g,
                   "data-responsive-title": f.locText.renderedHtml,
                   class: l(i.question.cssClasses.cell),
@@ -2763,7 +2765,7 @@ const Yn = /* @__PURE__ */ C({
                       "aria-label": f.locText.renderedHtml,
                       "aria-invalid": i.question.ariaInvalid,
                       "aria-describedby": i.question.ariaDescribedBy
-                    }, null, 10, io), [
+                    }, null, 10, lo), [
                       [Y, c.value]
                     ]),
                     p("span", {
@@ -2775,7 +2777,7 @@ const Yn = /* @__PURE__ */ C({
                       }, [
                         p("use", {
                           "xlink:href": i.question.itemSvgIcon
-                        }, null, 8, lo)
+                        }, null, 8, ro)
                       ], 2)) : m("", !0)
                     ], 2),
                     D(p("span", {
@@ -2788,7 +2790,7 @@ const Yn = /* @__PURE__ */ C({
                       [H, i.question.isMobile]
                     ])
                   ], 34)
-                ], 10, to))), 128))
+                ], 10, io))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2796,13 +2798,13 @@ const Yn = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), ao = /* @__PURE__ */ C({
+}), uo = /* @__PURE__ */ C({
   __name: "MatrixDropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return M(o, n), (s, e) => {
       const i = q("survey-matrixtable");
       return t(), y(i, {
@@ -2812,7 +2814,7 @@ const Yn = /* @__PURE__ */ C({
       }, null, 8, ["question"]);
     };
   }
-}), uo = { key: 0 }, mo = ["data-sv-drop-target-matrix-row"], co = { key: 1 }, po = /* @__PURE__ */ C({
+}), mo = { key: 0 }, co = ["data-sv-drop-target-matrix-row"], po = { key: 1 }, vo = /* @__PURE__ */ C({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2841,9 +2843,9 @@ const Yn = /* @__PURE__ */ C({
         p("table", {
           class: l(s.question.getTableCss())
         }, [
-          n.value.showHeader ? (t(), u("thead", uo, [
+          n.value.showHeader ? (t(), u("thead", mo, [
             p("tr", null, [
-              (t(!0), u(w, null, S(n.value.headerRow.cells, (c) => (t(), u(w, null, [
+              (t(!0), u(w, null, T(n.value.headerRow.cells, (c) => (t(), u(w, null, [
                 c.hasTitle ? (t(), u("th", {
                   class: l(c.className),
                   key: "header_" + c.id,
@@ -2867,21 +2869,25 @@ const Yn = /* @__PURE__ */ C({
             ])
           ])) : m("", !0),
           p("tbody", null, [
-            (t(!0), u(w, null, S(n.value.rows, (c) => (t(), u("tr", {
-              "data-sv-drop-target-matrix-row": c.row && c.row.id,
-              class: l(c.className),
+            (t(!0), u(w, null, T(n.value.rows, (c) => (t(), u(w, {
               key: s.question.inputId + "_" + c.id
             }, [
-              (t(!0), u(w, null, S(c.cells, (v, f) => (t(), y(d, {
-                cell: v,
-                question: s.question,
-                key: c.id + "_" + f
-              }, null, 8, ["cell", "question"]))), 128))
-            ], 10, mo))), 128))
+              c.visible ? (t(), u("tr", {
+                key: 0,
+                "data-sv-drop-target-matrix-row": c.row && c.row.id,
+                class: l(c.className)
+              }, [
+                (t(!0), u(w, null, T(c.cells, (v, f) => (t(), y(d, {
+                  cell: v,
+                  question: s.question,
+                  key: c.id + "_" + f
+                }, null, 8, ["cell", "question"]))), 128))
+              ], 10, co)) : m("", !0)
+            ], 64))), 128))
           ]),
-          n.value.showFooter ? (t(), u("tfoot", co, [
+          n.value.showFooter ? (t(), u("tfoot", po, [
             p("tr", null, [
-              (t(!0), u(w, null, S(n.value.footerRow.cells, (c, v) => (t(), y(d, {
+              (t(!0), u(w, null, T(n.value.footerRow.cells, (c, v) => (t(), y(d, {
                 cell: c,
                 question: s.question,
                 key: "footer_" + v
@@ -2892,7 +2898,7 @@ const Yn = /* @__PURE__ */ C({
       ], 6);
     };
   }
-}), vo = /* @__PURE__ */ C({
+}), qo = /* @__PURE__ */ p("span", null, "\xA0", -1), yo = /* @__PURE__ */ C({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2900,19 +2906,22 @@ const Yn = /* @__PURE__ */ C({
   },
   setup(r) {
     const o = r;
-    return B(() => o.column), (n, s) => n.column.isRenderedRequired ? (t(), u("span", {
-      key: 0,
-      class: l(n.question.cssClasses.cellRequiredText)
-    }, I(n.column.requiredText), 3)) : m("", !0);
+    return B(() => o.column), (n, s) => n.column.isRenderedRequired ? (t(), u(w, { key: 0 }, [
+      qo,
+      n.column.isRenderedRequired ? (t(), u("span", {
+        key: 0,
+        class: l(n.question.cssClasses.cellRequiredText)
+      }, I(n.column.requiredText), 3)) : m("", !0)
+    ], 64)) : m("", !0);
   }
-}), qo = ["data-responsive-title", "title", "colspan"], yo = /* @__PURE__ */ C({
+}), go = ["data-responsive-title", "title", "colspan"], Co = /* @__PURE__ */ C({
   __name: "MatrixCell",
   props: {
     question: {},
     cell: {}
   },
   setup(r) {
-    const o = r, n = T(!1), s = T(), e = () => o.cell.headers, i = () => !!o.cell.width || !!o.cell.minWidth ? { width: o.cell.width, minWidth: o.cell.minWidth } : null, a = () => o.cell.index || "", d = () => n.value = o.cell.question.isVisible, c = (v) => ee(v);
+    const o = r, n = S(!1), s = S(), e = () => o.cell.headers, i = () => !!o.cell.width || !!o.cell.minWidth ? { width: o.cell.width, minWidth: o.cell.minWidth } : null, a = () => o.cell.index || "", d = () => n.value = o.cell.question.isVisible, c = (v) => ee(v);
     return E(() => {
       if (!(!o.cell.hasQuestion || !o.question || !o.question.survey)) {
         d(), o.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
@@ -2928,7 +2937,7 @@ const Yn = /* @__PURE__ */ C({
         o.question.survey.matrixAfterCellRender(o.question, v);
       }
     }), (v, f) => {
-      const g = q("sv-matrix-drag-drop-icon"), k = q("sv-action-bar"), P = q("survey-errors"), L = q("survey-radiogroup-item"), A = q("survey-checkbox-item"), j = q("survey-other-choice"), X = q("survey-string");
+      const g = q("survey-errors"), k = q("sv-matrix-drag-drop-icon"), P = q("sv-action-bar"), L = q("survey-radiogroup-item"), A = q("survey-checkbox-item"), Q = q("survey-other-choice"), J = q("survey-string");
       return t(), u("td", {
         class: l(v.cell.className),
         "data-responsive-title": e(),
@@ -2938,37 +2947,36 @@ const Yn = /* @__PURE__ */ C({
         ref_key: "root",
         ref: s
       }, [
-        v.cell.isDragHandlerCell ? (t(), y(g, {
+        v.cell.isErrorsCell ? (t(), y(g, {
           key: 0,
+          element: v.cell.question
+        }, null, 8, ["element"])) : m("", !0),
+        v.cell.isDragHandlerCell ? (t(), y(k, {
+          key: 1,
           item: { data: { row: v.cell.row, question: v.question } }
         }, null, 8, ["item"])) : m("", !0),
-        v.cell.isActionsCell ? (t(), y(k, {
-          key: 1,
+        v.cell.isActionsCell ? (t(), y(P, {
+          key: 2,
           model: v.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : m("", !0),
         v.cell.hasPanel ? (t(), y(N(c(v.cell.panel)), {
-          key: 2,
+          key: 3,
           question: v.cell.panel,
           css: v.question.cssClasses
         }, null, 8, ["question", "css"])) : m("", !0),
         v.cell.hasQuestion ? (t(), u("div", {
-          key: 3,
+          key: 4,
           class: l(v.question.cssClasses.cellQuestionWrapper)
         }, [
-          v.cell.showErrorOnTop ? (t(), y(P, {
-            key: 0,
-            element: v.cell.question,
-            location: "top"
-          }, null, 8, ["element"])) : m("", !0),
           !v.cell.isChoice && v.cell.question.isDefaultRendering() ? D((t(), y(N(c(v.cell.question)), {
-            key: 1,
+            key: 0,
             question: v.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
           ]) : m("", !0),
           !v.cell.isChoice && !v.cell.question.isDefaultRendering() ? D((t(), y(N(v.cell.question.getComponentName()), {
-            key: 2,
+            key: 1,
             question: v.cell.question
           }, null, 8, ["question"])), [
             [H, n.value]
@@ -2989,39 +2997,29 @@ const Yn = /* @__PURE__ */ C({
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          v.cell.isOtherChoice ? (t(), y(j, {
-            key: 5,
+          v.cell.isOtherChoice ? (t(), y(Q, {
+            key: 4,
             question: v.cell.question
-          }, null, 8, ["question"])) : m("", !0),
-          v.cell.showErrorOnBottom ? (t(), y(P, {
-            key: 6,
-            element: v.cell.question,
-            location: "bottom"
-          }, null, 8, ["element"])) : m("", !0),
-          v.cell.question.isErrorsModeTooltip ? (t(), y(P, {
-            key: 7,
-            element: v.cell.question,
-            location: "tooltip"
-          }, null, 8, ["element"])) : m("", !0)
+          }, null, 8, ["question"])) : m("", !0)
         ], 2)) : m("", !0),
-        v.cell.hasTitle ? (t(), y(X, {
-          key: 4,
+        v.cell.hasTitle ? (t(), y(J, {
+          key: 5,
           locString: v.cell.locTitle
         }, null, 8, ["locString"])) : m("", !0),
         v.cell.requiredText ? (t(), u("span", {
-          key: 5,
+          key: 6,
           class: l(v.question.cssClasses.cellRequiredText)
         }, I(v.cell.requiredText), 3)) : m("", !0)
-      ], 14, qo);
+      ], 14, go);
     };
   }
-}), go = /* @__PURE__ */ C({
+}), ho = /* @__PURE__ */ C({
   __name: "MatrixDynamic",
   props: {
     question: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = () => {
       o.question.addRowUI();
@@ -3104,7 +3102,7 @@ function se(r, o = !0) {
     row: o ? R(() => r.item.data.row) : void 0
   };
 }
-const Co = ["disabled"], ho = /* @__PURE__ */ C({
+const bo = ["disabled"], ko = /* @__PURE__ */ C({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3125,10 +3123,10 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
         p("span", {
           class: l(b(n).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, Co);
+      ], 10, bo);
     };
   }
-}), bo = ["xlink:href"], ko = /* @__PURE__ */ C({
+}), fo = ["xlink:href"], Io = /* @__PURE__ */ C({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3141,13 +3139,13 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
     }, [
       p("use", {
         "xlink:href": b(n).iconDragElement
-      }, null, 8, bo)
+      }, null, 8, fo)
     ], 2)) : (t(), u("span", {
       key: 1,
       class: l(b(n).cssClasses.iconDrag)
     }, null, 2));
   }
-}), fo = ["aria-expanded", "aria-controls"], Io = /* @__PURE__ */ C({
+}), wo = ["aria-expanded", "aria-controls"], So = /* @__PURE__ */ C({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3168,17 +3166,17 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
           iconName: b(n).getDetailPanelIconId(b(s)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, fo);
+      ], 10, wo);
     };
   }
-}), wo = /* @__PURE__ */ C({
+}), To = /* @__PURE__ */ C({
   __name: "PanelDynamic",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null), s = x();
+    const o = r, n = S(null), s = x();
     M(
       o,
       n,
@@ -3241,7 +3239,7 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
           key: 2,
           question: a.question
         }, null, 8, ["question"])) : m("", !0),
-        (t(!0), u(w, null, S(e.value, (L, A) => (t(), u(w, {
+        (t(!0), u(w, null, T(e.value, (L, A) => (t(), u(w, {
           key: L.id
         }, [
           p("div", {
@@ -3276,7 +3274,7 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), To = /* @__PURE__ */ C({
+}), Ro = /* @__PURE__ */ C({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3322,7 +3320,7 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
       ], 2);
     };
   }
-}), So = /* @__PURE__ */ C({
+}), $o = /* @__PURE__ */ C({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3359,19 +3357,19 @@ const Co = ["disabled"], ho = /* @__PURE__ */ C({
     };
   }
 });
-function K(r) {
+function j(r) {
   return R(
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const Ro = /* @__PURE__ */ C({
+const Bo = /* @__PURE__ */ C({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const n = K(r), s = () => {
+    const n = j(r), s = () => {
       n.value.addPanelUI();
     };
     return (e, i) => b(n).canAddPanel ? (t(), u("button", {
@@ -3385,14 +3383,14 @@ const Ro = /* @__PURE__ */ C({
       }, I(b(n).panelAddText), 3)
     ], 2)) : m("", !0);
   }
-}), $o = ["title"], Bo = /* @__PURE__ */ C({
+}), Lo = ["title"], Do = /* @__PURE__ */ C({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const n = K(r), s = () => {
+    const n = j(r), s = () => {
       n.value.goToNextPanel();
     };
     return (e, i) => {
@@ -3406,17 +3404,17 @@ const Ro = /* @__PURE__ */ C({
           iconName: b(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, $o);
+      ], 10, Lo);
     };
   }
-}), Lo = ["title"], Do = /* @__PURE__ */ C({
+}), Po = ["title"], Mo = /* @__PURE__ */ C({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const n = K(r), s = () => {
+    const n = j(r), s = () => {
       n.value.goToPrevPanel();
     };
     return (e, i) => {
@@ -3430,17 +3428,17 @@ const Ro = /* @__PURE__ */ C({
           iconName: b(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Lo);
+      ], 10, Po);
     };
   }
-}), Po = /* @__PURE__ */ C({
+}), No = /* @__PURE__ */ C({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const o = r, n = K(o), s = R(
+    const o = r, n = j(o), s = R(
       () => o.item && o.item.data.panel || o.data.panel
     ), e = (i) => {
       n.value.isInputReadOnly || n.value.removePanelUI(i);
@@ -3458,29 +3456,29 @@ const Ro = /* @__PURE__ */ C({
       }, null, 2)
     ], 2));
   }
-}), Mo = /* @__PURE__ */ C({
+}), Ho = /* @__PURE__ */ C({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
     data: {}
   },
   setup(r) {
-    const n = K(r);
+    const n = j(r);
     return (s, e) => (t(), u("div", {
       class: l(b(n).cssClasses.progressText)
     }, I(b(n).progressText), 3));
   }
-}), No = ["id"], Ho = /* @__PURE__ */ C({
+}), Eo = ["id"], Ao = /* @__PURE__ */ C({
   __name: "Errors",
   props: {
     element: {},
     location: {}
   },
   setup(r) {
-    const o = r, n = T();
+    const o = r, n = S();
     let s;
-    return U(() => {
-      o.location == "tooltip" && n.value instanceof HTMLElement && (!s || n.value !== s.tooltipElement) && (s = new we(n.value)), !(n.value instanceof HTMLElement) && !!s && s.dispose();
+    return K(() => {
+      o.location == "tooltip" && n.value instanceof HTMLElement && (!s || n.value !== s.tooltipElement) && (s = new Se(n.value)), !(n.value instanceof HTMLElement) && !!s && s.dispose();
     }), O(() => {
       s && s.dispose();
     }), (e, i) => {
@@ -3494,7 +3492,7 @@ const Ro = /* @__PURE__ */ C({
         ref_key: "root",
         ref: n
       }, [
-        (t(!0), u(w, null, S(e.element.errors, (d, c) => (t(), u("div", {
+        (t(!0), u(w, null, T(e.element.errors, (d, c) => (t(), u("div", {
           key: "error_" + c
         }, [
           p("span", {
@@ -3513,17 +3511,17 @@ const Ro = /* @__PURE__ */ C({
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, No)) : m("", !0);
+      ], 10, Eo)) : m("", !0);
     };
   }
-}), Eo = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Oo = /* @__PURE__ */ C({
+}), Oo = { key: 0 }, Vo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Fo = /* @__PURE__ */ C({
   __name: "QuestionComment",
   props: {
     question: {},
     commentClass: {}
   },
   setup(r) {
-    return (o, n) => o.question.isReadOnlyRenderDiv() ? (t(), u("div", Eo, I(o.question.comment), 1)) : (t(), u("textarea", {
+    return (o, n) => o.question.isReadOnlyRenderDiv() ? (t(), u("div", Oo, I(o.question.comment), 1)) : (t(), u("textarea", {
       key: 1,
       id: o.question.commentId,
       readonly: o.question.isInputReadOnly,
@@ -3541,9 +3539,9 @@ const Ro = /* @__PURE__ */ C({
       onInput: n[1] || (n[1] = (s) => {
         o.question.onCommentInput(s);
       })
-    }, null, 46, Ao));
+    }, null, 46, Vo));
   }
-}), Vo = /* @__PURE__ */ C({
+}), Wo = /* @__PURE__ */ C({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3551,7 +3549,7 @@ const Ro = /* @__PURE__ */ C({
   },
   setup(r) {
     const o = (n) => {
-      ae(n);
+      ue(n);
     };
     return (n, s) => {
       const e = q("survey-element-title-content"), i = q("sv-title-actions");
@@ -3567,7 +3565,7 @@ const Ro = /* @__PURE__ */ C({
           o(a);
         })
       }, {
-        default: ve(() => [
+        default: qe(() => [
           n.element.hasTitleActions ? m("", !0) : (t(), y(e, {
             key: 0,
             element: n.element,
@@ -3583,7 +3581,7 @@ const Ro = /* @__PURE__ */ C({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
     };
   }
-}), Fo = { class: "sv-vue-title-additional-div" }, Wo = { key: 3 }, zo = { key: 5 }, Uo = { key: 7 }, Ko = /* @__PURE__ */ C({
+}), zo = { class: "sv-vue-title-additional-div" }, Uo = { key: 3 }, Ko = { key: 5 }, jo = { key: 7 }, Qo = /* @__PURE__ */ C({
   __name: "TitleContent",
   props: {
     element: {},
@@ -3592,7 +3590,7 @@ const Ro = /* @__PURE__ */ C({
   setup(r) {
     return (o, n) => {
       const s = q("survey-string");
-      return t(), u("div", Fo, [
+      return t(), u("div", zo, [
         o.element.isTitleRenderedAsString ? (t(), y(s, {
           key: 0,
           locString: o.element.locTitle
@@ -3608,18 +3606,18 @@ const Ro = /* @__PURE__ */ C({
           class: l(o.element.cssTitleNumber),
           "aria-hidden": !0
         }, I(o.element.no), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", Wo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.no ? (t(), u("span", Uo, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", {
           key: 4,
           class: l(o.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, I(o.element.requiredText), 3)) : m("", !0),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", zo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextBeforeTitle ? (t(), u("span", Ko, "\xA0")) : m("", !0),
         o.element.isTitleRenderedAsString ? m("", !0) : (t(), y(s, {
           key: 6,
           locString: o.element.locTitle
         }, null, 8, ["locString"])),
-        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", Uo, "\xA0")) : m("", !0),
+        !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", jo, "\xA0")) : m("", !0),
         !o.element.isTitleRenderedAsString && o.element.isRequireTextAfterTitle ? (t(), u("span", {
           key: 8,
           class: l(o.element.cssClasses.requiredText),
@@ -3628,7 +3626,7 @@ const Ro = /* @__PURE__ */ C({
       ]);
     };
   }
-}), jo = { class: "sv-title-actions" }, Qo = { class: "sv-title-actions__title" }, Zo = /* @__PURE__ */ C({
+}), Zo = { class: "sv-title-actions" }, Go = { class: "sv-title-actions__title" }, Xo = /* @__PURE__ */ C({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3638,8 +3636,8 @@ const Ro = /* @__PURE__ */ C({
     const o = r, n = R(() => o.element.getTitleToolbar());
     return (s, e) => {
       const i = q("survey-string"), a = q("survey-element-title-content"), d = q("sv-action-bar");
-      return t(), u("div", jo, [
-        p("span", Qo, [
+      return t(), u("div", Zo, [
+        p("span", Go, [
           s.element.isPage ? (t(), y(i, {
             key: 0,
             locString: s.element.locTitle
@@ -3654,20 +3652,20 @@ const Ro = /* @__PURE__ */ C({
       ]);
     };
   }
-}), Go = (r, o) => {
+}), Jo = (r, o) => {
   const n = r.__vccOpts || r;
   for (const [s, e] of o)
     n[s] = e;
   return n;
-}, Xo = {}, Jo = { class: "sv-brand-info" }, Yo = /* @__PURE__ */ qe('<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), _o = [
-  Yo
+}, Yo = {}, _o = { class: "sv-brand-info" }, xo = /* @__PURE__ */ ye('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), et = [
+  xo
 ];
-function xo(r, o) {
-  return t(), u("div", Jo, _o);
+function st(r, o) {
+  return t(), u("div", _o, et);
 }
-const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /* @__PURE__ */ p("use", null, null, -1), ot = [
-  nt
-], tt = /* @__PURE__ */ C({
+const nt = /* @__PURE__ */ Jo(Yo, [["render", st]]), ot = ["aria-label"], tt = /* @__PURE__ */ p("use", null, null, -1), it = [
+  tt
+], lt = /* @__PURE__ */ C({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3677,7 +3675,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
     title: {}
   },
   setup(r) {
-    const o = r, n = T(), s = () => {
+    const o = r, n = S(), s = () => {
       Te(
         o.size,
         o.width,
@@ -3687,7 +3685,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
         o.title
       );
     };
-    return U(() => {
+    return K(() => {
       s();
     }), E(() => {
       s();
@@ -3697,16 +3695,16 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       class: "sv-svg-icon",
       role: "img",
       "aria-label": e.title
-    }, ot, 8, st));
+    }, it, 8, ot));
   }
-}), it = /* @__PURE__ */ C({
+}), rt = /* @__PURE__ */ C({
   __name: "ActionBar",
   props: {
     model: {},
     handleClick: { type: Boolean }
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     return B(() => o.model), E(() => {
       !o.model.hasActions || o.model.initResponsivityManager(n.value);
     }), O(() => {
@@ -3722,14 +3720,14 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           a.stopPropagation();
         })
       }, [
-        (t(!0), u(w, null, S(s.model.renderedActions, (a) => (t(), y(i, {
+        (t(!0), u(w, null, T(s.model.renderedActions, (a) => (t(), y(i, {
           key: a.id,
           item: a
         }, null, 8, ["item"]))), 128))
       ], 2)) : m("", !0);
     };
   }
-}), lt = ["id"], rt = { class: "sv-action__content" }, at = /* @__PURE__ */ C({
+}), at = ["id"], ut = { class: "sv-action__content" }, dt = /* @__PURE__ */ C({
   __name: "Action",
   props: {
     item: {}
@@ -3744,14 +3742,14 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
         class: l(s.item.getActionRootCss()),
         id: s.item.id
       }, [
-        p("div", rt, [
+        p("div", ut, [
           s.item.needSeparator ? (t(), y(i, { key: 0 })) : m("", !0),
           (t(), y(N(n.value), { item: s.item }, null, 8, ["item"]))
         ])
-      ], 10, lt);
+      ], 10, at);
     };
   }
-}), ut = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], dt = /* @__PURE__ */ C({
+}), mt = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], ct = /* @__PURE__ */ C({
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3787,21 +3785,21 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           key: 1,
           class: l(n.item.getActionBarItemTitleCss())
         }, I(n.item.title), 3)) : m("", !0)
-      ], 42, ut);
+      ], 42, mt);
     };
   }
-}), mt = ["disabled", "title", "role", "tabindex"], ct = /* @__PURE__ */ C({
+}), pt = ["disabled", "title", "role", "tabindex"], vt = /* @__PURE__ */ C({
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
   },
   setup(r) {
-    const o = r, n = Re;
+    const o = r, n = $e;
     let s;
     return B(
       () => o.item,
       (e) => {
-        s = new Se(e);
+        s = new Re(e);
       },
       () => {
         s.dispose();
@@ -3834,7 +3832,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
             key: 1,
             class: l(e.item.getActionBarItemTitleCss())
           }, I(e.item.title), 3)) : m("", !0)
-        ], 42, mt),
+        ], 42, pt),
         h(d, {
           model: e.item.popupModel,
           getTarget: b(n)
@@ -3842,7 +3840,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 64);
     };
   }
-}), pt = /* @__PURE__ */ C({
+}), qt = /* @__PURE__ */ C({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -3853,13 +3851,13 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       class: l(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), vt = ["aria-label", "placeholder", "value"], qt = ["aria-label"], yt = ["id"], gt = /* @__PURE__ */ C({
+}), yt = ["aria-label", "placeholder", "value"], gt = ["aria-label"], Ct = ["id"], ht = /* @__PURE__ */ C({
   __name: "List",
   props: {
     model: {}
   },
   setup(r) {
-    const o = r, n = T(null), s = (a) => {
+    const o = r, n = S(null), s = (a) => {
       const d = o.model;
       d.filterString = a.target.value;
     }, e = (a) => {
@@ -3897,7 +3895,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
             value: a.model.filterString,
             onChange: s,
             onKeyup: e
-          }, null, 42, vt),
+          }, null, 42, yt),
           a.model.showSearchClearButton && !!a.model.filterString ? (t(), u("button", {
             key: 0,
             onClick: d[0] || (d[0] = (f) => {
@@ -3917,7 +3915,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           p("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, I(a.model.emptyMessage), 11, qt)
+          }, I(a.model.emptyMessage), 11, gt)
         ], 2), [
           [H, a.model.isEmpty]
         ]),
@@ -3934,18 +3932,18 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
             a.model.onKeyDown(f);
           })
         }, [
-          (t(!0), u(w, null, S(a.model.renderedActions, (f) => (t(), y(v, {
+          (t(!0), u(w, null, T(a.model.renderedActions, (f) => (t(), y(v, {
             item: f,
             model: a.model,
             key: f.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, yt)), [
+        ], 42, Ct)), [
           [H, !a.model.isEmpty]
         ]) : m("", !0)
       ], 2);
     };
   }
-}), Ct = ["aria-selected", "id"], ht = /* @__PURE__ */ C({
+}), bt = ["aria-selected", "id"], kt = /* @__PURE__ */ C({
   __name: "ListItem",
   props: {
     model: {},
@@ -3993,13 +3991,13 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
             item: e.item
           }, null, 8, ["item"])) : m("", !0)
         ], 6)
-      ], 10, Ct)), [
+      ], 10, bt)), [
         [H, e.model.isItemVisible(e.item)],
         [c]
       ]);
     };
   }
-}), bt = /* @__PURE__ */ C({
+}), ft = /* @__PURE__ */ C({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4008,8 +4006,8 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
   setup(r) {
     const o = r, n = F(
       oe(o.model, void 0)
-    ), s = T(null);
-    return Z(
+    ), s = S(null);
+    return G(
       () => o.model,
       (e) => {
         n.value.dispose(), n.value = oe(e, void 0);
@@ -4033,13 +4031,13 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 512);
     };
   }
-}), kt = { class: "sv-popup__shadow" }, ft = { class: "sv-popup__body-content" }, It = {
+}), It = { class: "sv-popup__shadow" }, wt = { class: "sv-popup__body-content" }, St = {
   key: 0,
   class: "sv-popup__body-header"
-}, wt = { class: "sv-popup__scrolling-content" }, Tt = { class: "sv-popup__content" }, St = {
+}, Tt = { class: "sv-popup__scrolling-content" }, Rt = { class: "sv-popup__content" }, $t = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Rt = /* @__PURE__ */ C({
+}, Bt = /* @__PURE__ */ C({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4050,7 +4048,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
     const s = (e) => {
       e.stopPropagation();
     };
-    return B(() => o.model), U(() => {
+    return B(() => o.model), K(() => {
       const e = o.model;
       !n && e.isVisible && o.model.updateOnShowing(), n = e.isVisible;
     }), (e, i) => {
@@ -4076,19 +4074,19 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           }),
           onClick: s
         }, [
-          p("div", kt, [
+          p("div", It, [
             e.model.showHeader ? (t(), y(N(e.model.popupHeaderTemplate), {
               key: 0,
               model: e.model
             }, null, 8, ["model"])) : m("", !0),
-            p("div", ft, [
-              e.model.title ? (t(), u("div", It, I(e.model.title), 1)) : m("", !0),
-              p("div", wt, [
-                p("div", Tt, [
-                  (t(), y(N(e.model.contentComponentName), ye(ge(e.model.contentComponentData)), null, 16))
+            p("div", wt, [
+              e.model.title ? (t(), u("div", St, I(e.model.title), 1)) : m("", !0),
+              p("div", Tt, [
+                p("div", Rt, [
+                  (t(), y(N(e.model.contentComponentName), ge(Ce(e.model.contentComponentData)), null, 16))
                 ])
               ]),
-              e.model.showFooter ? (t(), u("div", St, [
+              e.model.showFooter ? (t(), u("div", $t, [
                 h(a, {
                   model: e.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4101,7 +4099,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ]);
     };
   }
-}), $t = /* @__PURE__ */ C({
+}), Lt = /* @__PURE__ */ C({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4115,10 +4113,10 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       })
     }, null, 4));
   }
-}), Bt = {
+}), Dt = {
   key: 0,
   class: "sv-components-column"
-}, Lt = /* @__PURE__ */ C({
+}, Pt = /* @__PURE__ */ C({
   __name: "Container",
   props: {
     survey: {},
@@ -4130,18 +4128,18 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       () => o.survey.getContainerContent(o.container)
     );
     return (s, e) => n.value.length > 0 ? (t(), u(w, { key: 0 }, [
-      s.needRenderWrapper ? (t(), u("div", Bt, [
-        (t(!0), u(w, null, S(n.value, (i, a) => (t(), y(N(i.component), {
+      s.needRenderWrapper ? (t(), u("div", Dt, [
+        (t(!0), u(w, null, T(n.value, (i, a) => (t(), y(N(i.component), {
           survey: s.survey,
           model: i.data
         }, null, 8, ["survey", "model"]))), 256))
-      ])) : (t(!0), u(w, { key: 1 }, S(n.value, (i, a) => (t(), y(N(i.component), {
+      ])) : (t(!0), u(w, { key: 1 }, T(n.value, (i, a) => (t(), y(N(i.component), {
         survey: s.survey,
         model: i.data
       }, null, 8, ["survey", "model"]))), 256))
     ], 64)) : m("", !0);
   }
-}), Q = /* @__PURE__ */ C({
+}), Z = /* @__PURE__ */ C({
   __name: "Progress",
   props: {
     survey: {},
@@ -4168,13 +4166,13 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       }, I(i.survey.progressText), 3)
     ], 2));
   }
-}), Dt = ["onClick"], Pt = ["title"], Mt = ["title"], Nt = /* @__PURE__ */ C({
+}), Mt = ["onClick"], Nt = ["title"], Ht = ["title"], Et = /* @__PURE__ */ C({
   __name: "ProgressButtons",
   props: {
     survey: {}
   },
   setup(r) {
-    const o = r, n = new $e(o.survey), s = T(!1), e = T(), i = R(() => o.survey.css);
+    const o = r, n = new Be(o.survey), s = S(!1), e = S(), i = R(() => o.survey.css);
     let a;
     const d = (k) => n.isListElementClickable(k), c = (k) => n.getListElementCss(k), v = (k) => {
       n.clickListElement(k);
@@ -4187,7 +4185,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       a = setInterval(() => {
         s.value = k.scrollWidth > k.offsetWidth;
       }, 100);
-    }), J(() => {
+    }), U(() => {
       typeof a < "u" && (clearInterval(a), a = void 0);
     }), (k, P) => (t(), u("div", {
       class: l(i.value.progressButtonsContainerCenter)
@@ -4208,20 +4206,20 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           p("ul", {
             class: l(i.value.progressButtonsList)
           }, [
-            (t(!0), u(w, null, S(k.survey.visiblePages, (L, A) => (t(), u("li", {
+            (t(!0), u(w, null, T(k.survey.visiblePages, (L, A) => (t(), u("li", {
               key: "listelement" + A,
               class: l(c(A)),
-              onClick: (j) => d(A) ? v(A) : null
+              onClick: (Q) => d(A) ? v(A) : null
             }, [
               p("div", {
                 class: l(i.value.progressButtonsPageTitle),
                 title: L.locNavigationTitle.renderedHtml || L.name
-              }, I(L.locNavigationTitle.renderedHtml || L.name), 11, Pt),
+              }, I(L.locNavigationTitle.renderedHtml || L.name), 11, Nt),
               p("div", {
                 class: l(i.value.progressButtonsPageDescription),
                 title: L.locNavigationDescription.renderedHtml
-              }, I(L.locNavigationDescription.renderedHtml), 11, Mt)
-            ], 10, Dt))), 128))
+              }, I(L.locNavigationDescription.renderedHtml), 11, Ht)
+            ], 10, Mt))), 128))
           ], 2)
         ], 2),
         p("div", {
@@ -4232,13 +4230,13 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 2)
     ], 2));
   }
-}), Ht = /* @__PURE__ */ C({
+}), At = /* @__PURE__ */ C({
   __name: "ProgressToc",
   props: {
     survey: {}
   },
   setup(r) {
-    const o = r, n = new Be(o.survey);
+    const o = r, n = new Le(o.survey);
     return (s, e) => {
       const i = q("sv-svg-icon"), a = q("sv-popup"), d = q("sv-list"), c = _("key2click");
       return t(), u("div", {
@@ -4264,19 +4262,19 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 2);
     };
   }
-}), Et = { onsubmit: "return false;" }, At = {
+}), Ot = { onsubmit: "return false;" }, Vt = {
   key: 0,
   class: "sv_custom_header"
-}, Ot = ["id"], Vt = { key: 1 }, Ft = ["innerHTML"], Wt = ["innerHTML"], zt = ["innerHTML"], le = /* @__PURE__ */ C({
+}, Ft = ["id"], Wt = { key: 1 }, zt = ["innerHTML"], Ut = ["innerHTML"], Kt = ["innerHTML"], le = /* @__PURE__ */ C({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const o = r, n = T(), s = T(""), e = T(1), i = R(() => {
+    const o = r, n = S(), s = S(""), e = S(1), i = R(() => {
       const k = o.survey ? o.survey : o.model;
-      return Ce(k);
+      return he(k);
     }), a = R(() => i.value.activePage ? i.value.activePage.id : ""), d = () => {
       const k = a.value;
       return !!i.value && k + e.value.toString();
@@ -4285,7 +4283,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
     ), v = R(() => i.value.css), f = R(() => "page" + d()), g = () => c.value ? (s.value || (s.value = i.value.processedCompletedHtml), s.value) : "";
     return B(() => i.value), E(() => {
       if (!!i.value) {
-        i.value.needRenderIcons && Le.renderIcons();
+        i.value.needRenderIcons && De.renderIcons();
         var k = n.value;
         k && i.value.afterRenderSurvey(k), i.value.renderCallback = () => {
           var P, L;
@@ -4295,7 +4293,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
     }), O(() => {
       i.value.stopTimer(), i.value.renderCallback = void 0;
     }), (k, P) => {
-      const L = q("survey-popup-modal"), A = q("survey-header"), j = q("survey-page"), X = q("sv-brand-info"), ue = q("sv-notifier");
+      const L = q("survey-popup-modal"), A = q("survey-header"), Q = q("survey-page"), J = q("sv-brand-info"), de = q("sv-notifier");
       return t(), u("div", {
         class: l(i.value.getRootCss()),
         style: $(i.value.themeVariables),
@@ -4308,8 +4306,8 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
           class: l(v.value.rootBackgroundImage),
           style: $(i.value.backgroundImageStyle)
         }, null, 6)) : m("", !0),
-        p("form", Et, [
-          i.value.hasLogo ? m("", !0) : (t(), u("div", At)),
+        p("form", Ot, [
+          i.value.hasLogo ? m("", !0) : (t(), u("div", Vt)),
           p("div", {
             class: l(v.value.container)
           }, [
@@ -4338,7 +4336,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
                   container: "contentTop",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                (t(), y(j, {
+                (t(), y(Q, {
                   key: f.value,
                   survey: i.value,
                   page: i.value.activePage,
@@ -4349,7 +4347,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
                   container: "contentBottom",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"]))
-              ], 14, Ot),
+              ], 14, Ft),
               (t(), y(N("sv-components-container"), {
                 survey: i.value,
                 container: "right",
@@ -4361,36 +4359,36 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
               container: "footer",
               needRenderWrapper: !1
             }, null, 8, ["survey"])),
-            c.value ? (t(), u("div", Vt, [
+            c.value ? (t(), u("div", Wt, [
               p("div", {
                 innerHTML: g(),
                 class: l(i.value.completedCss)
-              }, null, 10, Ft)
+              }, null, 10, zt)
             ])) : m("", !0),
             i.value.state === "completedbefore" ? (t(), u("div", {
               key: 2,
               class: l(v.value.body),
               innerHTML: i.value.processedCompletedBeforeHtml
-            }, null, 10, Wt)) : m("", !0),
+            }, null, 10, Ut)) : m("", !0),
             i.value.state === "loading" ? (t(), u("div", {
               key: 3,
               class: l(v.value.body),
               innerHTML: i.value.processedLoadingHtml
-            }, null, 10, zt)) : m("", !0),
+            }, null, 10, Kt)) : m("", !0),
             i.value.state === "empty" ? (t(), u("div", {
               key: 4,
               class: l(v.value.bodyEmpty)
             }, I(i.value.emptySurveyText), 3)) : m("", !0)
           ], 2)
         ]),
-        i.value.showBrandInfo ? (t(), y(X, { key: 1 })) : m("", !0),
-        h(ue, {
+        i.value.showBrandInfo ? (t(), y(J, { key: 1 })) : m("", !0),
+        h(de, {
           model: i.value.notifier
         }, null, 8, ["model"])
       ], 6);
     };
   }
-}), Ut = /* @__PURE__ */ C({
+}), jt = /* @__PURE__ */ C({
   __name: "Notifier",
   props: {
     model: {}
@@ -4414,7 +4412,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ]);
     };
   }
-}), Kt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], jt = { key: 1 }, Qt = /* @__PURE__ */ C({
+}), Qt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Zt = { key: 1 }, Gt = /* @__PURE__ */ C({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4442,11 +4440,11 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
         onInput: n[1] || (n[1] = (s) => {
           o.question.onOtherValueInput(s);
         })
-      }, null, 46, Kt)),
-      o.question.isReadOnlyRenderDiv() ? (t(), u("div", jt, I(o.question.otherValue), 1)) : m("", !0)
+      }, null, 46, Qt)),
+      o.question.isReadOnlyRenderDiv() ? (t(), u("div", Zt, I(o.question.otherValue), 1)) : m("", !0)
     ], 2));
   }
-}), Zt = ["disabled", "value", "title"], Gt = /* @__PURE__ */ C({
+}), Xt = ["disabled", "value", "title"], Jt = /* @__PURE__ */ C({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4462,9 +4460,9 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       title: s.item.getTooltip(),
       onMousedown: n,
       onClick: e[0] || (e[0] = (...i) => s.item.action && s.item.action(...i))
-    }, null, 42, Zt)) : m("", !0);
+    }, null, 42, Xt)) : m("", !0);
   }
-}), Xt = /* @__PURE__ */ C({
+}), re = /* @__PURE__ */ C({
   __name: "PopupSurvey",
   props: {
     survey: {},
@@ -4482,14 +4480,14 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       n.value.changeExpandCollapse();
     }, d = () => {
       n.value.hide();
-    }, c = () => "SurveyRoot", v = () => {
+    }, c = () => "SurveyComponent", v = () => {
       n.value.onScroll();
     };
     B(() => n.value);
-    const f = Z(
+    const f = G(
       () => o.survey,
       (g) => {
-        const k = new De(null, g);
+        const k = new Pe(null, g);
         o.isExpanded !== void 0 && (k.isExpanded = o.isExpanded), o.closeOnCompleteTimeout !== void 0 && (k.closeOnCompleteTimeout = o.closeOnCompleteTimeout), k.isShowing = !0, n.value = k;
       },
       {
@@ -4561,21 +4559,21 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 6)) : m("", !0);
     };
   }
-}), Jt = ["innerHTML"], Yt = /* @__PURE__ */ C({
+}), Yt = ["innerHTML"], _t = /* @__PURE__ */ C({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(), s = R(
+    const o = r, n = S(), s = R(
       () => o.question.customWidget.isDefaultRender
     ), e = R(
       () => !!o.question.customWidget.htmlTemplate
     ), i = R(() => o.question.customWidget.htmlTemplate), a = R(() => "survey-" + o.question.getTemplate());
     return E(() => {
       o.question.customWidget.afterRender(o.question, n.value);
-    }), J(() => {
+    }), U(() => {
       o.question.customWidget.willUnmount(o.question, n.value);
     }), (d, c) => (t(), u("div", {
       ref_key: "root",
@@ -4584,7 +4582,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       e.value ? (t(), u("div", {
         key: 0,
         innerHTML: i.value
-      }, null, 8, Jt)) : m("", !0),
+      }, null, 8, Yt)) : m("", !0),
       s.value ? (t(), y(N(a.value), {
         key: 1,
         question: d.question,
@@ -4592,12 +4590,12 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       }, null, 8, ["question", "css"])) : m("", !0)
     ], 512));
   }
-}), _t = /* @__PURE__ */ C({
+}), xt = /* @__PURE__ */ C({
   __name: "PopupModal",
   setup(r) {
     const o = F();
     function n(e, i, a, d, c, v, f = "popup") {
-      const g = Pe(
+      const g = Me(
         e,
         i,
         a,
@@ -4614,7 +4612,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       e.onHide = () => {
         o.value = void 0, a.dispose();
       };
-      const a = Me(
+      const a = Ne(
         e,
         i
       );
@@ -4626,7 +4624,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       V.showDialog = void 0;
     })), (e, i) => {
       const a = q("sv-popup-container");
-      return o.value ? (t(), y(he, {
+      return o.value ? (t(), y(be, {
         key: 0,
         to: o.value.container
       }, [
@@ -4634,7 +4632,7 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       ], 8, ["to"])) : m("", !0);
     };
   }
-}), xt = /* @__PURE__ */ C({
+}), ei = /* @__PURE__ */ C({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4646,14 +4644,14 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       class: l(n.remainingCharacterCounter)
     }, I(n.counter.remainingCharacterCounter), 3));
   }
-}), ei = /* @__PURE__ */ C({
+}), si = /* @__PURE__ */ C({
   __name: "Composite",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = R(() => o.question.contentPanel);
     return (e, i) => {
@@ -4666,14 +4664,14 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       }, null, 8, ["question", "css"]);
     };
   }
-}), si = /* @__PURE__ */ C({
+}), ni = /* @__PURE__ */ C({
   __name: "Custom",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = T(null);
+    const o = r, n = S(null);
     M(o, n);
     const s = R(() => o.question.contentQuestion), e = (i) => ee(i);
     return (i, a) => (t(), y(N(e(s.value)), {
@@ -4682,16 +4680,16 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       css: i.css
     }, null, 8, ["question", "css"]));
   }
-}), ni = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), oi = [
-  ni
-], re = 440, ti = /* @__PURE__ */ C({
+}), oi = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), ti = [
+  oi
+], ae = 440, ii = /* @__PURE__ */ C({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(r) {
-    const o = r, n = R(() => re * o.model.progress), s = R(() => o.model.text);
+    const o = r, n = R(() => ae * o.model.progress), s = R(() => o.model.text);
     return B(() => o.model), (e, i) => e.model.isRunning && e.model.showTimerAsClock ? (t(), u("div", {
       key: 0,
       class: l(e.model.rootCss)
@@ -4699,8 +4697,8 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
       e.model.showProgress ? (t(), u("svg", {
         key: 0,
         class: l(e.model.getProgressCss()),
-        style: $({ strokeDasharray: re, strokeDashoffset: n.value })
-      }, oi, 6)) : m("", !0),
+        style: $({ strokeDasharray: ae, strokeDashoffset: n.value })
+      }, ti, 6)) : m("", !0),
       p("div", {
         class: l(e.model.textContainerCss)
       }, [
@@ -4720,25 +4718,25 @@ const et = /* @__PURE__ */ Go(Xo, [["render", xo]]), st = ["aria-label"], nt = /
     ]);
   }
 });
-function ii(r) {
-  r.component("SurveyRoot", le), r.component("survey", le), r.component("survey-header", Fe), r.component("survey-page", Ae), r.component("survey-row", We), r.component("survey-element", Ue), r.component("survey-panel", Qe), r.component("survey-element-header", Ze), r.component("survey-string", Ge), r.component("sv-string-viewer", Ye), r.component("sv-string-editor", xe), r.component("sv-skeleton", ss), r.component("survey-text", ts), r.component("survey-text-input", as), r.component("survey-checkbox", ds), r.component("survey-checkbox-item", ys), r.component("survey-radiogroup", hs), r.component("survey-radiogroup-item", ws), r.component("survey-signaturepad", $s), r.component("survey-html", Ls), r.component("survey-image", Ns), r.component("survey-expression", Hs), r.component("survey-file", Us), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Js), r.component("survey-comment", xs), r.component("survey-dropdown", en), r.component("sv-dropdown-select", tn), r.component("sv-dropdown-option-item", rn), r.component("sv-dropdown", cn), r.component("survey-tagbox", pn), r.component("sv-tagbox", yn), r.component("sv-tagbox-item", kn), r.component("sv-tagbox-filter", hn), r.component("survey-ranking", fn), r.component("survey-ranking-item", Ln), r.component("survey-rating", Mn), r.component("sv-rating-item", Hn), r.component("sv-rating-item-smiley", An), r.component("sv-rating-item-star", Vn), r.component("sv-rating-dropdown", Fn), r.component("survey-boolean", zn), r.component("sv-boolean-radio", Un), r.component("sv-boolean-radio-item", Qn), r.component("sv-boolean-checkbox", Yn), r.component("survey-multipletext", _n), r.component("survey-multipletext-item", xn), r.component("survey-matrix", ro), r.component("survey-matrixdropdown", ao), r.component("survey-matrixtable", po), r.component("survey-matrixheaderrequired", vo), r.component("survey-matrixcell", yo), r.component("survey-matrixdynamic", go), r.component("sv-matrix-remove-button", ho), r.component("sv-matrix-drag-drop-icon", ko), r.component("sv-matrix-detail-button", Io), r.component("survey-paneldynamic", wo), r.component("survey-paneldynamicprogress", To), r.component("survey-paneldynamicprogress-v2", So), r.component("sv-paneldynamic-add-btn", Ro), r.component("sv-paneldynamic-next-btn", Bo), r.component("sv-paneldynamic-prev-btn", Do), r.component("sv-paneldynamic-remove-btn", Po), r.component("sv-paneldynamic-progress-text", Mo), r.component("sv-components-container", Lt), r.component("sv-progress-buttons", Nt), r.component("sv-progress-toc", Ht), r.component("sv-progress-pages", Q), r.component("sv-progress-questions", Q), r.component("sv-progress-correctquestions", Q), r.component("sv-progress-requiredquestions", Q), r.component("survey-errors", Ho), r.component("survey-question-comment", Oo), r.component("survey-element-title", Vo), r.component("survey-element-title-content", Ko), r.component("sv-title-actions", Zo), r.component("sv-brand-info", et), r.component("sv-svg-icon", tt), r.component("sv-action-bar", it), r.component("sv-action", at), r.component("sv-action-bar-item", dt), r.component("sv-action-bar-item-dropdown", ct), r.component("sv-action-bar-separator", pt), r.component("sv-list", gt), r.component("sv-list-item", ht), r.component("sv-popup", bt), r.component("sv-popup-container", Rt), r.component("popup-pointer", $t), r.component("sv-notifier", Ut), r.component("survey-other-choice", Qt), r.component("sv-nav-btn", Gt), r.component("popup-survey", Xt), r.component("survey-customwidget", Yt), r.component("survey-popup-modal", _t), r.component("sv-character-counter", xt), r.component("survey-composite", ei), r.component("survey-custom", si), r.component("sv-timerpanel", ti), r.directive("key2click", {
+function li(r) {
+  r.component("SurveyComponent", le), r.component("PopupSurveyComponent", re), r.component("survey", le), r.component("popup-survey", re), r.component("survey-header", We), r.component("survey-page", Oe), r.component("survey-row", ze), r.component("survey-element", Ke), r.component("survey-panel", Ze), r.component("survey-element-header", Ge), r.component("survey-string", Xe), r.component("sv-string-viewer", _e), r.component("sv-string-editor", es), r.component("sv-skeleton", ns), r.component("survey-text", is), r.component("survey-text-input", us), r.component("survey-checkbox", ms), r.component("survey-checkbox-item", gs), r.component("survey-radiogroup", bs), r.component("survey-radiogroup-item", Ss), r.component("survey-signaturepad", Bs), r.component("survey-html", Ds), r.component("survey-image", Hs), r.component("survey-expression", Es), r.component("survey-file", Ks), 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", ln), 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", In), r.component("survey-ranking-item", Dn), r.component("survey-rating", Nn), r.component("sv-rating-item", En), r.component("sv-rating-item-smiley", On), r.component("sv-rating-item-star", Fn), r.component("sv-rating-dropdown", Wn), r.component("survey-boolean", Un), r.component("sv-boolean-radio", Kn), r.component("sv-boolean-radio-item", Zn), r.component("sv-boolean-checkbox", _n), r.component("survey-multipletext", xn), r.component("survey-multipletext-item", eo), r.component("survey-matrix", ao), r.component("survey-matrixdropdown", uo), r.component("survey-matrixtable", vo), r.component("survey-matrixheaderrequired", yo), r.component("survey-matrixcell", Co), r.component("survey-matrixdynamic", ho), r.component("sv-matrix-remove-button", ko), r.component("sv-matrix-drag-drop-icon", Io), r.component("sv-matrix-detail-button", So), r.component("survey-paneldynamic", To), r.component("survey-paneldynamicprogress", Ro), r.component("survey-paneldynamicprogress-v2", $o), r.component("sv-paneldynamic-add-btn", Bo), r.component("sv-paneldynamic-next-btn", Do), r.component("sv-paneldynamic-prev-btn", Mo), r.component("sv-paneldynamic-remove-btn", No), r.component("sv-paneldynamic-progress-text", Ho), r.component("sv-components-container", Pt), r.component("sv-progress-buttons", Et), r.component("sv-progress-toc", At), 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", Ao), r.component("survey-question-comment", Fo), r.component("survey-element-title", Wo), r.component("survey-element-title-content", Qo), r.component("sv-title-actions", Xo), r.component("sv-brand-info", nt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", rt), r.component("sv-action", dt), r.component("sv-action-bar-item", ct), r.component("sv-action-bar-item-dropdown", vt), r.component("sv-action-bar-separator", qt), r.component("sv-list", ht), r.component("sv-list-item", kt), r.component("sv-popup", ft), r.component("sv-popup-container", Bt), r.component("popup-pointer", Lt), r.component("sv-notifier", jt), r.component("survey-other-choice", Gt), r.component("sv-nav-btn", Jt), r.component("survey-customwidget", _t), r.component("survey-popup-modal", xt), r.component("sv-character-counter", ei), r.component("survey-composite", si), r.component("survey-custom", ni), r.component("sv-timerpanel", ii), r.directive("key2click", {
     mounted: function(o, n) {
       const s = { ...n.value };
-      s.disableTabStop || (o.tabIndex = 0), o.addEventListener("keyup", (e) => (e.preventDefault(), e.stopPropagation(), ae(e, s), !1)), o.addEventListener("keydown", (e) => {
-        Ne(e, s);
+      s.disableTabStop || (o.tabIndex = 0), o.addEventListener("keyup", (e) => (e.preventDefault(), e.stopPropagation(), ue(e, s), !1)), o.addEventListener("keydown", (e) => {
+        He(e, s);
       }), o.addEventListener("blur", (e) => {
-        He(e);
+        Ee(e);
       });
     }
   });
 }
-const ai = {
+const ui = {
   install(r) {
-    ii(r);
+    li(r);
   }
 };
 export {
-  ai as surveyPlugin,
+  ui as surveyPlugin,
   B as useBase,
   W as useLocString,
   M as useQuestion