survey-vue3-ui 1.12.4 → 1.12.5

package/survey-vue3-ui.es.js

@@ -1,11 +1,11 @@
 var ke = Object.defineProperty;
 var fe = (u, e, n) => e in u ? ke(u, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : u[e] = n;
-var x = (u, e, n) => (fe(u, typeof e != "symbol" ? e + "" : e, n), n);
-import { defineComponent as h, computed as w, openBlock as i, createBlock as g, resolveDynamicComponent as ce, normalizeProps as le, guardReactiveProps as ae, createSlots as we, renderList as $, withCtx as W, renderSlot as ve, shallowReactive as Ie, watch as O, onUpdated as G, onBeforeUnmount as K, onMounted as P, ref as I, shallowRef as V, watchEffect as Se, triggerRef as ee, unref as k, isRef as Re, createElementBlock as l, normalizeClass as r, createVNode as y, createCommentVNode as m, Fragment as T, mergeProps as M, normalizeStyle as S, createElementVNode as v, onUnmounted as F, withDirectives as A, vShow as E, toDisplayString as R, vModelRadio as Y, vModelCheckbox as se, vModelSelect as Te, vModelText as $e, getCurrentInstance as qe, createStaticVNode as De, toRaw as Be, Teleport as Ae, useSlots as Le } from "vue";
-import { Base as Ne, RendererFactory as Z, Helpers as Pe, DropdownMultiSelectListModel as Me, doKey2ClickUp as ye, createSvg as He, doKey2ClickDown as Ee, doKey2ClickBlur as We, ActionDropdownViewModel as Fe, getActionDropdownButtonTarget as Ve, createPopupViewModel as Oe, SurveyProgressModel as ue, ProgressButtonsResponsivityManager as ze, PopupSurveyModel as Ue, settings as z, createDialogOptions as Ke, createPopupModalViewModel as Qe, ButtonGroupItemModel as je, SvgRegistry as Ge, SurveyModel as Je } from "survey-core";
+var J = (u, e, n) => (fe(u, typeof e != "symbol" ? e + "" : e, n), n);
+import { defineComponent as h, computed as w, openBlock as i, createBlock as g, resolveDynamicComponent as ce, normalizeProps as le, guardReactiveProps as ae, createSlots as we, renderList as $, withCtx as W, renderSlot as ve, shallowReactive as Ie, watch as O, onBeforeUnmount as K, onMounted as P, ref as I, shallowRef as V, watchEffect as Se, triggerRef as ee, unref as k, isRef as Te, nextTick as Re, createElementBlock as l, normalizeClass as r, createVNode as y, createCommentVNode as m, Fragment as R, mergeProps as M, normalizeStyle as S, createElementVNode as v, onUnmounted as F, withDirectives as A, vShow as E, toDisplayString as T, vModelRadio as Y, vModelCheckbox as se, vModelSelect as $e, onUpdated as Z, vModelText as De, getCurrentInstance as qe, createStaticVNode as Be, toRaw as Ae, Teleport as Le, useSlots as Ne } from "vue";
+import { Base as Pe, RendererFactory as _, Helpers as Me, DropdownMultiSelectListModel as He, doKey2ClickUp as ge, createSvg as Ee, doKey2ClickDown as We, doKey2ClickBlur as Fe, ActionDropdownViewModel as Ve, getActionDropdownButtonTarget as Oe, createPopupViewModel as ze, SurveyProgressModel as ue, ProgressButtonsResponsivityManager as Ue, PopupSurveyModel as Ke, settings as z, createDialogOptions as Qe, createPopupModalViewModel as je, ButtonGroupItemModel as Ge, SvgRegistry as Je, SurveyModel as Xe } from "survey-core";
 const ie = class {
   constructor() {
-    x(this, "creatorHash", {});
+    J(this, "creatorHash", {});
   }
   registerComponent(e, n) {
     this.creatorHash[e] = n;
@@ -24,7 +24,7 @@ const ie = class {
   }
 };
 let U = ie;
-x(U, "Instance", new ie());
+J(U, "Instance", new ie());
 const d = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SvComponent",
@@ -45,44 +45,58 @@ const d = /* @__PURE__ */ h({
     ]), 1040));
   }
 });
-Ne.createPropertiesHash = () => Ie({});
-function Xe(u) {
+Pe.createPropertiesHash = () => Ie({});
+class Ye {
+  constructor(e) {
+    J(this, "currentNextTickPromise");
+    this.element = e;
+  }
+  async add() {
+    const e = Re();
+    this.currentNextTickPromise !== e && (this.currentNextTickPromise = e, await e, e == this.currentNextTickPromise && this.element.afterRerender());
+  }
+}
+function Ze(u) {
   var e;
-  !u || (u.__vueImplemented = (e = u.__vueImplemented) != null ? e : 0, u.__vueImplemented <= 0 && (u.createArrayCoreHandler = (n, s) => {
-    const t = [], o = V(t);
-    return t.onArrayChanged = () => {
-      ee(o);
-    }, n[s] = o, k(n[s]);
-  }, u.iteratePropertiesHash((n, s) => {
-    if (Array.isArray(n[s])) {
-      const t = V(n[s]);
-      n[s].onArrayChanged = () => {
-        ee(t);
-      }, n[s] = t;
+  if (!!u) {
+    if (u.__vueImplemented = (e = u.__vueImplemented) != null ? e : 0, u.__vueImplemented <= 0) {
+      const n = new Ye(u);
+      u.createArrayCoreHandler = (s, t) => {
+        const o = [], a = V(o);
+        return o.onArrayChanged = () => {
+          ee(a), n.add();
+        }, s[t] = a, k(s[t]);
+      }, u.iteratePropertiesHash((s, t) => {
+        if (Array.isArray(s[t])) {
+          const o = V(s[t]);
+          s[t].onArrayChanged = () => {
+            ee(o), n.add();
+          }, s[t] = o;
+        }
+      }), u.getPropertyValueCoreHandler = (s, t) => k(s[t]), u.setPropertyValueCoreHandler = (s, t, o) => {
+        Te(s[t]) ? s[t].value = o : s[t] = o, n.add();
+      };
     }
-  }), u.getPropertyValueCoreHandler = (n, s) => k(n[s]), u.setPropertyValueCoreHandler = (n, s, t) => {
-    Re(n[s]) ? n[s].value = t : n[s] = t;
-  }), u.enableOnElementRenderedEvent(), u.__vueImplemented++);
+    u.enableOnElementRerenderedEvent(), u.__vueImplemented++;
+  }
 }
 function de(u) {
   var e;
   !u || (u.__vueImplemented = (e = u.__vueImplemented) != null ? e : 0, u.__vueImplemented--, u.__vueImplemented <= 0 && (u.iteratePropertiesHash((n, s) => {
     n[s] = k(n[s]), Array.isArray(n[s]) && (n[s].onArrayChanged = void 0);
-  }), delete u.__vueImplemented, u.disableOnElementRenderedEvent(), u.createArrayCoreHandler = void 0, u.getPropertyValueCoreHandler = void 0, u.setPropertyValueCoreHandler = void 0));
+  }), delete u.__vueImplemented, u.disableOnElementRerenderedEvent(), u.createArrayCoreHandler = void 0, u.getPropertyValueCoreHandler = void 0, u.setPropertyValueCoreHandler = void 0));
 }
 function D(u, e, n) {
   const s = O(
     u,
     (t, o) => {
-      t && e && e(t, o), o && (de(o), n && n(o)), Xe(t);
+      t && e && e(t, o), o && (de(o), n && n(o)), Ze(t);
     },
     {
       immediate: !0
     }
   );
-  G(() => {
-    u().afterRerender();
-  }), K(() => {
+  K(() => {
     const t = u();
     t && (de(t), n && n(t), s());
   });
@@ -114,7 +128,7 @@ function Q(u) {
 function ne(u) {
   return u.customWidget ? "survey-customwidget" : u.isDefaultRendering && u.isDefaultRendering() || u.isPanel ? "survey-" + u.getTemplate() : u.getComponentName();
 }
-function _(u) {
+function x(u) {
   const e = V(), n = Se(() => {
     e.value = u(), ee(e);
   });
@@ -122,7 +136,7 @@ function _(u) {
     n();
   }), e;
 }
-const Ye = /* @__PURE__ */ h({
+const _e = /* @__PURE__ */ h({
   __name: "Page",
   props: {
     survey: {},
@@ -163,7 +177,7 @@ const Ye = /* @__PURE__ */ h({
         is: "survey-errors",
         element: o.page
       }, null, 8, ["element"]),
-      (i(!0), l(T, null, $(o.page.visibleRows, (p) => (i(), g(d, M({
+      (i(!0), l(R, null, $(o.page.visibleRows, (p) => (i(), g(d, M({
         key: p.id,
         is: o.page.getSurvey().getRowWrapperComponentName(p)
       }, {
@@ -181,7 +195,7 @@ const Ye = /* @__PURE__ */ h({
       }, 1040, ["is"]))), 128))
     ], 2));
   }
-}), Ze = /* @__PURE__ */ h({
+}), xe = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     survey: {}
@@ -232,7 +246,7 @@ const Ye = /* @__PURE__ */ h({
       }, null, 2)
     ], 2)) : m("", !0);
   }
-}), _e = /* @__PURE__ */ h({
+}), es = /* @__PURE__ */ h({
   __name: "Row",
   props: {
     row: {},
@@ -261,7 +275,7 @@ const Ye = /* @__PURE__ */ h({
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), l(T, null, $(s.row.visibleElements, (o) => (i(), g(d, {
+      (i(!0), l(R, null, $(s.row.visibleElements, (o) => (i(), g(d, {
         is: "survey-element",
         row: s.row,
         css: s.css,
@@ -270,10 +284,10 @@ const Ye = /* @__PURE__ */ h({
       }, null, 8, ["row", "css", "element"]))), 128))
     ], 2));
   }
-}), xe = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], es = ["id"], ss = {
+}), ss = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], ns = ["id"], os = {
   inheritAttrs: !1
-}, ns = /* @__PURE__ */ h({
-  ...ss,
+}, ts = /* @__PURE__ */ h({
+  ...os,
   __name: "Question",
   props: {
     survey: {},
@@ -372,7 +386,7 @@ const Ye = /* @__PURE__ */ h({
                 is: "survey-string",
                 locString: f.element.locDescription
               }, null, 8, ["locString"])
-            ], 10, es)) : m("", !0)
+            ], 10, ns)) : m("", !0)
           ], 6)
         ]),
         _: 1
@@ -389,12 +403,12 @@ const Ye = /* @__PURE__ */ h({
         element: f.element,
         location: "bottom"
       }, null, 8, ["element"])) : m("", !0)
-    ], 46, xe));
+    ], 46, ss));
   }
-}), os = ["id"], ts = ["id"], is = {
+}), is = ["id"], rs = ["id"], ls = {
   inheritAttrs: !1
-}, rs = /* @__PURE__ */ h({
-  ...is,
+}, as = /* @__PURE__ */ h({
+  ...ls,
   inheritAttrs: !1,
   __name: "Panel",
   props: {
@@ -405,7 +419,7 @@ const Ye = /* @__PURE__ */ h({
   setup(u) {
     const e = u, n = I(null), s = w(() => e.element.survey);
     return D(() => e.element), P(() => {
-      e.element.survey && e.element.survey.afterRenderPanel(e.element, n.value);
+      e.element.survey && e.element.afterRender(n.value);
     }), (t, o) => t.element.getIsContentVisible() ? (i(), l("div", {
       key: 0,
       class: r(t.element.getContainerCss()),
@@ -436,7 +450,7 @@ const Ye = /* @__PURE__ */ h({
         style: S({ paddingLeft: t.element.innerPaddingLeft }),
         class: r(t.element.cssClasses.panel.content)
       }, [
-        (i(!0), l(T, null, $(t.element.visibleRows, (a) => (i(), g(d, M({
+        (i(!0), l(R, null, $(t.element.visibleRows, (a) => (i(), g(d, M({
           key: a.id,
           is: t.element.getSurvey().getRowWrapperComponentName(a)
         }, {
@@ -456,10 +470,10 @@ const Ye = /* @__PURE__ */ h({
           is: "sv-action-bar",
           model: t.element.getFooterToolbar()
         }, null, 8, ["model"])
-      ], 14, ts)) : m("", !0)
-    ], 42, os)) : m("", !0);
+      ], 14, rs)) : m("", !0)
+    ], 42, is)) : m("", !0);
   }
-}), ls = ["id"], as = /* @__PURE__ */ h({
+}), us = ["id"], ds = /* @__PURE__ */ h({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -491,7 +505,7 @@ const Ye = /* @__PURE__ */ h({
           is: "survey-string",
           locString: t.element.locDescription
         }, null, 8, ["locString"])
-      ], 10, ls)), [
+      ], 10, us)), [
         [E, t.element.hasDescription]
       ]) : m("", !0),
       t.element.hasAdditionalTitleToolbar ? (i(), g(d, {
@@ -501,7 +515,7 @@ const Ye = /* @__PURE__ */ h({
       }, null, 8, ["model"])) : m("", !0)
     ], 6));
   }
-}), us = /* @__PURE__ */ h({
+}), ms = /* @__PURE__ */ h({
   __name: "String",
   props: {
     locString: {}
@@ -512,7 +526,7 @@ const Ye = /* @__PURE__ */ h({
       locString: e.locString.renderAsData
     }, null, 8, ["is", "locString"]));
   }
-}), ds = ["innerHTML"], ms = /* @__PURE__ */ h({
+}), ps = ["innerHTML"], cs = /* @__PURE__ */ h({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -523,12 +537,12 @@ const Ye = /* @__PURE__ */ h({
       key: 0,
       class: r(k(s)),
       innerHTML: k(n)
-    }, null, 10, ds)) : (i(), l("span", {
+    }, null, 10, ps)) : (i(), l("span", {
       key: 1,
       class: r(k(s))
-    }, R(k(n)), 3));
+    }, T(k(n)), 3));
   }
-}), ps = ["innerHTML"], cs = /* @__PURE__ */ h({
+}), vs = ["innerHTML"], qs = /* @__PURE__ */ h({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -547,15 +561,15 @@ const Ye = /* @__PURE__ */ h({
       innerHTML: t.locString.renderedHtml,
       onBlur: n,
       onClick: s
-    }, null, 40, ps)) : (i(), l("span", {
+    }, null, 40, vs)) : (i(), l("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
       onBlur: n,
       onClick: s
-    }, R(t.locString.renderedHtml), 33));
+    }, T(t.locString.renderedHtml), 33));
   }
-}), vs = ["id"], qs = /* @__PURE__ */ h({
+}), gs = ["id"], ys = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     element: {}
@@ -566,9 +580,9 @@ const Ye = /* @__PURE__ */ h({
       class: "sv-skeleton-element",
       id: n.element.id,
       style: S({ height: n.element.skeletonHeight })
-    }, null, 12, vs));
+    }, null, 12, gs));
   }
-}), ys = ["id"], gs = ["value"], hs = /* @__PURE__ */ h({
+}), hs = ["id"], Cs = ["value"], bs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -580,7 +594,7 @@ const Ye = /* @__PURE__ */ h({
       key: 0,
       ref_key: "root",
       ref: n
-    }, R(s.question.value), 513)) : s.question.dataListId ? (i(), l("div", {
+    }, T(s.question.value), 513)) : s.question.dataListId ? (i(), l("div", {
       key: 1,
       ref_key: "root",
       ref: n
@@ -592,11 +606,11 @@ const Ye = /* @__PURE__ */ h({
       v("datalist", {
         id: s.question.dataListId
       }, [
-        (i(!0), l(T, null, $(s.question.dataList, (o, a) => (i(), l("option", {
+        (i(!0), l(R, null, $(s.question.dataList, (o, a) => (i(), l("option", {
           key: a,
           value: o
-        }, null, 8, gs))), 128))
-      ], 8, ys)
+        }, null, 8, Cs))), 128))
+      ], 8, hs)
     ], 512)) : (i(), g(d, {
       key: 2,
       is: "survey-text-input",
@@ -606,7 +620,7 @@ const Ye = /* @__PURE__ */ h({
       }
     }, null, 8, ["question", "get-ref"]));
   }
-}), Cs = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], bs = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], ks = /* @__PURE__ */ h({
+}), ks = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], fs = ["disabled", "readonly", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], ws = /* @__PURE__ */ h({
   __name: "TextInput",
   props: {
     question: {},
@@ -650,7 +664,7 @@ const Ye = /* @__PURE__ */ h({
         "aria-describedby": a.question.a11y_input_ariaDescribedBy,
         "aria-invalid": a.question.a11y_input_ariaInvalid,
         "aria-errormessage": a.question.a11y_input_ariaErrormessage
-      }, null, 46, bs),
+      }, null, 46, fs),
       y(d, {
         is: "sv-character-counter",
         counter: a.question.characterCounter,
@@ -686,12 +700,12 @@ const Ye = /* @__PURE__ */ h({
       "aria-describedby": a.question.a11y_input_ariaDescribedBy,
       "aria-invalid": a.question.a11y_input_ariaInvalid,
       "aria-errormessage": a.question.a11y_input_ariaErrormessage
-    }, null, 46, Cs));
+    }, null, 46, ks));
   }
-}), fs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], ws = {
+}), Is = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Ss = {
   key: 0,
   class: "sv-hidden"
-}, Is = { key: 7 }, Ss = ["value"], ge = /* @__PURE__ */ h({
+}, Ts = { key: 7 }, Rs = ["value"], ye = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SelectBase",
   props: {
@@ -721,12 +735,12 @@ const Ye = /* @__PURE__ */ h({
       "aria-invalid": o.question.a11y_input_ariaInvalid,
       "aria-errormessage": o.question.a11y_input_ariaErrormessage
     }, [
-      o.showLegend ? (i(), l("legend", ws, R(o.question.locTitle.renderedHtml), 1)) : m("", !0),
-      o.question.hasHeadItems ? (i(!0), l(T, { key: 1 }, $(o.question.headItems, (p) => (i(), g(d, M({
+      o.showLegend ? (i(), l("legend", Ss, T(o.question.locTitle.renderedHtml), 1)) : m("", !0),
+      o.question.hasHeadItems ? (i(!0), l(R, { key: 1 }, $(o.question.headItems, (p) => (i(), g(d, M({
         key: p.value,
         is: s(p)
       }, t(p)), null, 16, ["is"]))), 128)) : m("", !0),
-      !o.question.hasColumns && !o.question.blockedRow ? (i(!0), l(T, { key: 2 }, $(o.question.bodyItems, (p) => (i(), g(d, M({
+      !o.question.hasColumns && !o.question.blockedRow ? (i(!0), l(R, { key: 2 }, $(o.question.bodyItems, (p) => (i(), g(d, M({
         key: p.value,
         is: s(p)
       }, t(p)), null, 16, ["is"]))), 128)) : m("", !0),
@@ -734,7 +748,7 @@ const Ye = /* @__PURE__ */ h({
         key: 3,
         class: r(o.question.cssClasses.rootRow)
       }, [
-        !o.question.hasColumns && o.question.blockedRow ? (i(!0), l(T, { key: 0 }, $(o.question.dataChoices, (p) => (i(), g(d, M({
+        !o.question.hasColumns && o.question.blockedRow ? (i(!0), l(R, { key: 0 }, $(o.question.dataChoices, (p) => (i(), g(d, M({
           key: p.value,
           is: s(p)
         }, t(p)), null, 16, ["is"]))), 128)) : m("", !0)
@@ -743,18 +757,18 @@ const Ye = /* @__PURE__ */ h({
         key: 4,
         class: r(o.question.cssClasses.rootMultiColumn)
       }, [
-        o.question.hasColumns ? (i(!0), l(T, { key: 0 }, $(o.question.columns, (p, q) => (i(), l("div", {
+        o.question.hasColumns ? (i(!0), l(R, { key: 0 }, $(o.question.columns, (p, q) => (i(), l("div", {
           key: q,
           class: r(o.question.getColumnClass()),
           role: "presentation"
         }, [
-          (i(!0), l(T, null, $(p, (c) => (i(), g(d, M({
+          (i(!0), l(R, null, $(p, (c) => (i(), g(d, M({
             key: c.value,
             is: s(c)
           }, t(c)), null, 16, ["is"]))), 128))
         ], 2))), 128)) : m("", !0)
       ], 2)) : m("", !0),
-      o.question.hasFootItems ? (i(!0), l(T, { key: 5 }, $(o.question.footItems, (p) => (i(), g(d, M({
+      o.question.hasFootItems ? (i(!0), l(R, { key: 5 }, $(o.question.footItems, (p) => (i(), g(d, M({
         key: p.value,
         is: s(p)
       }, t(p)), null, 16, ["is"]))), 128)) : m("", !0),
@@ -763,7 +777,7 @@ const Ye = /* @__PURE__ */ h({
         is: "survey-other-choice",
         question: o.question
       }, null, 8, ["question"])) : m("", !0),
-      o.question.showClearButtonInContent ? (i(), l("div", Is, [
+      o.question.showClearButtonInContent ? (i(), l("div", Ts, [
         v("input", {
           type: "button",
           class: r(o.question.cssClasses.clearButton),
@@ -771,18 +785,18 @@ const Ye = /* @__PURE__ */ h({
             o.question.clearValue(!0);
           }),
           value: o.question.clearButtonCaption
-        }, null, 10, Ss)
+        }, null, 10, Rs)
       ])) : m("", !0)
-    ], 10, fs));
+    ], 10, Is));
   }
-}), Rs = /* @__PURE__ */ h({
+}), $s = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
     question: {}
   },
   setup(u) {
-    return (e, n) => (i(), g(ge, {
+    return (e, n) => (i(), g(ye, {
       question: e.question,
       "show-legend": !0
     }, null, 8, ["question"]));
@@ -802,7 +816,7 @@ function he(u, e, n) {
     }
   );
 }
-const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"], $s = ["xlink:href"], Ds = /* @__PURE__ */ h({
+const Ds = ["name", "checked", "value", "id", "disabled", "readonly", "required"], Bs = ["xlink:href"], As = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "CheckboxItem",
   props: {
@@ -842,7 +856,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           readonly: t.question.isReadOnlyAttr,
           class: r(t.question.cssClasses.itemControl),
           required: t.question.hasRequiredError()
-        }, null, 42, Ts),
+        }, null, 42, Ds),
         t.question.cssClasses.materialDecorator ? (i(), l("span", {
           key: 0,
           class: r(t.question.cssClasses.materialDecorator)
@@ -853,7 +867,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           }, [
             v("use", {
               "xlink:href": t.question.itemSvgIcon
-            }, null, 8, $s)
+            }, null, 8, Bs)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         t.hideLabel ? m("", !0) : (i(), l("span", {
@@ -868,16 +882,16 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)
     ], 2));
   }
-}), Bs = /* @__PURE__ */ h({
+}), Ls = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Radiogroup",
   props: {
     question: {}
   },
   setup(u) {
-    return (e, n) => (i(), g(ge, { question: e.question }, null, 8, ["question"]));
+    return (e, n) => (i(), g(ye, { question: e.question }, null, 8, ["question"]));
   }
-}), As = ["name", "value", "id", "aria-errormessage", "disabled", "readonly"], Ls = ["xlink:href"], Ns = /* @__PURE__ */ h({
+}), Ns = ["name", "value", "id", "aria-errormessage", "disabled", "readonly"], Ps = ["xlink:href"], Ms = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RadiogroupItem",
   props: {
@@ -917,7 +931,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           disabled: !a.question.getItemEnabled(a.item),
           readonly: a.question.isReadOnlyAttr,
           class: r(a.question.cssClasses.itemControl)
-        }, null, 10, As), [
+        }, null, 10, Ns), [
           [Y, o.value]
         ]),
         a.question.cssClasses.materialDecorator ? (i(), l("span", {
@@ -930,7 +944,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           }, [
             v("use", {
               "xlink:href": a.question.itemSvgIcon
-            }, null, 8, Ls)
+            }, null, 8, Ps)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         a.hideLabel ? m("", !0) : (i(), l("span", {
@@ -945,7 +959,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 34)
     ], 2));
   }
-}), Ps = ["src"], Ms = ["title"], Hs = { key: 0 }, Es = /* @__PURE__ */ h({
+}), Hs = ["src"], Es = ["title"], Ws = { key: 0 }, Fs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Signaturepad",
   props: {
@@ -979,7 +993,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           style: S({
             width: s.question.renderedCanvasWidth
           })
-        }, null, 14, Ps)) : m("", !0),
+        }, null, 14, Hs)) : m("", !0),
         v("canvas", {
           tabindex: "-1",
           class: r(s.question.cssClasses.canvas),
@@ -998,14 +1012,14 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             s.question.clearValue(!0);
           })
         }, [
-          s.question.cssClasses.clearButtonIconId ? m("", !0) : (i(), l("span", Hs, "\u2716")),
+          s.question.cssClasses.clearButtonIconId ? m("", !0) : (i(), l("span", Ws, "\u2716")),
           s.question.cssClasses.clearButtonIconId ? (i(), g(d, {
             key: 1,
             is: "sv-svg-icon",
             iconName: s.question.cssClasses.clearButtonIconId,
             size: "auto"
           }, null, 8, ["iconName"])) : m("", !0)
-        ], 10, Ms)
+        ], 10, Es)
       ], 2)) : m("", !0),
       s.question.showLoadingIndicator ? (i(), l("div", {
         key: 1,
@@ -1015,7 +1029,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)) : m("", !0)
     ], 6));
   }
-}), Ws = ["innerHTML"], Fs = /* @__PURE__ */ h({
+}), Vs = ["innerHTML"], Os = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Html",
   props: {
@@ -1030,9 +1044,9 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref: n,
       class: r(t.question.renderCssRoot),
       innerHTML: k(s)
-    }, null, 10, Ws));
+    }, null, 10, Vs));
   }
-}), Vs = ["src", "alt", "width", "height"], Os = ["src", "width", "height"], zs = ["src", "width", "height"], Us = /* @__PURE__ */ h({
+}), zs = ["src", "alt", "width", "height"], Us = ["src", "width", "height"], Ks = ["src", "width", "height"], Qs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Image",
   props: {
@@ -1065,7 +1079,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         onError: o[1] || (o[1] = (a) => {
           t.question.onErrorHandler();
         })
-      }, null, 46, Vs)), [
+      }, null, 46, zs)), [
         [E, k(s) && !t.question.contentNotLoaded]
       ]) : m("", !0),
       t.question.renderedMode === "video" ? A((i(), l("video", {
@@ -1086,7 +1100,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         onError: o[3] || (o[3] = (a) => {
           t.question.onErrorHandler();
         })
-      }, null, 46, Os)), [
+      }, null, 46, Us)), [
         [E, k(s) && !t.question.contentNotLoaded]
       ]) : m("", !0),
       t.question.renderedMode === "youtube" ? (i(), l("iframe", {
@@ -1100,7 +1114,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           width: t.question.renderedStyleWidth,
           height: t.question.renderedStyleHeight
         })
-      }, null, 14, zs)) : m("", !0),
+      }, null, 14, Ks)) : m("", !0),
       !k(s) || t.question.contentNotLoaded ? (i(), l("div", {
         key: 3,
         class: r(t.question.cssClasses.noImage)
@@ -1113,7 +1127,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)) : m("", !0)
     ], 2));
   }
-}), Ks = /* @__PURE__ */ h({
+}), js = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Expression",
   props: {
@@ -1125,9 +1139,9 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       class: r(s.question.cssClasses.root),
       ref_key: "root",
       ref: n
-    }, R(s.question.formatedValue), 3));
+    }, T(s.question.formatedValue), 3));
   }
-}), Qs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], js = ["id", "multiple", "placeholder"], Gs = ["id", "multiple", "placeholder"], Js = /* @__PURE__ */ h({
+}), Gs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], Js = ["id", "multiple", "placeholder"], Xs = ["id", "multiple", "placeholder"], Ys = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "File",
   props: {
@@ -1154,7 +1168,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         title: s.question.inputTitle,
         accept: s.question.acceptedTypes,
         capture: s.question.renderCapture
-      }, null, 10, Qs)) : m("", !0),
+      }, null, 10, Gs)) : m("", !0),
       s.question.isReadOnlyAttr ? (i(), l("input", {
         key: 1,
         type: "file",
@@ -1164,7 +1178,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         multiple: s.question.allowMultiple,
         placeholder: s.question.title,
         style: { color: "transparent" }
-      }, null, 10, js)) : m("", !0),
+      }, null, 10, Js)) : m("", !0),
       s.question.isDisabledAttr ? (i(), l("input", {
         key: 2,
         type: "file",
@@ -1174,7 +1188,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         multiple: s.question.allowMultiple,
         placeholder: s.question.title,
         style: { color: "transparent" }
-      }, null, 10, Gs)) : m("", !0),
+      }, null, 10, Xs)) : m("", !0),
       v("div", {
         class: r(s.question.cssClasses.dragArea),
         onDrop: t[0] || (t[0] = (...o) => s.question.onDrop && s.question.onDrop(...o)),
@@ -1210,7 +1224,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             s.question.isEmpty() ? (i(), l("span", {
               key: 2,
               class: r(s.question.cssClasses.noFileChosen)
-            }, R(s.question.noFileChosenCaption), 3)) : m("", !0)
+            }, T(s.question.noFileChosenCaption), 3)) : m("", !0)
           ], 2)
         ], 2)) : m("", !0),
         s.question.showRemoveButton ? (i(), g(d, {
@@ -1249,7 +1263,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 34)
     ], 2));
   }
-}), Xs = { class: "sv-hidden" }, me = "survey-imagepicker-item", Ys = /* @__PURE__ */ h({
+}), Zs = { class: "sv-hidden" }, me = "survey-imagepicker-item", _s = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Imagepicker",
   props: {
@@ -1271,24 +1285,24 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref_key: "root",
       ref: n
     }, [
-      v("legend", Xs, R(o.question.locTitle.renderedHtml), 1),
-      o.question.hasColumns ? m("", !0) : (i(!0), l(T, { key: 0 }, $(o.question.visibleChoices, (p) => (i(), g(d, M({
+      v("legend", Zs, T(o.question.locTitle.renderedHtml), 1),
+      o.question.hasColumns ? m("", !0) : (i(!0), l(R, { key: 0 }, $(o.question.visibleChoices, (p) => (i(), g(d, M({
         key: p.value,
         is: s(p)
       }, t(p)), null, 16, ["is"]))), 128)),
-      o.question.hasColumns ? (i(!0), l(T, { key: 1 }, $(o.question.columns, (p, q) => (i(), l("div", {
+      o.question.hasColumns ? (i(!0), l(R, { key: 1 }, $(o.question.columns, (p, q) => (i(), l("div", {
         class: r(o.question.getColumnClass()),
         key: q,
         role: "presentation"
       }, [
-        (i(!0), l(T, null, $(p, (c) => (i(), g(d, M({
+        (i(!0), l(R, null, $(p, (c) => (i(), g(d, M({
           key: c.value,
           is: s(c)
         }, t(c)), null, 16, ["is"]))), 128))
       ], 2))), 128)) : m("", !0)
     ], 2));
   }
-}), Zs = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], _s = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], xs = ["src", "width", "height", "alt"], en = ["src", "width", "height"], sn = /* @__PURE__ */ h({
+}), xs = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], en = ["name", "value", "id", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], sn = ["src", "width", "height", "alt"], nn = ["src", "width", "height"], on = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ImagepickerItem",
   props: {
@@ -1327,7 +1341,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           "aria-invalid": o.question.ariaInvalid,
           "aria-errormessage": o.question.ariaErrormessage,
           class: r(o.question.cssClasses.itemControl)
-        }, null, 10, Zs)), [
+        }, null, 10, xs)), [
           [se, s.value]
         ]) : A((i(), l("input", {
           key: 1,
@@ -1343,7 +1357,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           "aria-invalid": o.question.ariaInvalid,
           "aria-errormessage": o.question.ariaErrormessage,
           class: r(o.question.cssClasses.itemControl)
-        }, null, 10, _s)), [
+        }, null, 10, en)), [
           [Y, s.value]
         ]),
         v("div", {
@@ -1378,7 +1392,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               onError: a[3] || (a[3] = (p) => {
                 o.item.onErrorHandler();
               })
-            }, null, 46, xs)) : m("", !0),
+            }, null, 46, sn)) : m("", !0),
             k(t) && !o.item.contentNotLoaded && o.question.contentMode === "video" ? (i(), l("video", {
               key: 2,
               controls: "",
@@ -1393,7 +1407,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               onError: a[5] || (a[5] = (p) => {
                 o.item.onErrorHandler();
               })
-            }, null, 46, en)) : m("", !0),
+            }, null, 46, nn)) : m("", !0),
             !k(t) || o.item.contentNotLoaded ? (i(), l("div", {
               key: 3,
               class: r(o.question.cssClasses.itemNoImage),
@@ -1424,7 +1438,7 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ], 2)
     ], 2));
   }
-}), nn = /* @__PURE__ */ h({
+}), tn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Comment",
   props: {
@@ -1456,9 +1470,9 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       key: 2,
       ref_key: "root",
       ref: n
-    }, R(s.question.value), 513));
+    }, T(s.question.value), 513));
   }
-}), on = /* @__PURE__ */ h({
+}), rn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Dropdown",
   props: {
@@ -1482,16 +1496,16 @@ const Ts = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), tn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], rn = {
+}), ln = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "required"], an = {
   key: 0,
   value: ""
-}, ln = ["id"];
-Z.Instance.registerRenderer(
+}, un = ["id"];
+_.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const an = /* @__PURE__ */ h({
+const dn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DropdownSelect",
   props: {
@@ -1527,7 +1541,7 @@ const an = /* @__PURE__ */ h({
           disabled: "",
           id: a.question.inputId,
           class: r(a.question.getControlClass())
-        }, R(a.question.readOnlyText), 11, ln)) : A((i(), l("select", {
+        }, T(a.question.readOnlyText), 11, un)) : A((i(), l("select", {
           key: 0,
           id: a.question.inputId,
           "onUpdate:modelValue": p[0] || (p[0] = (q) => o.value = q),
@@ -1541,14 +1555,14 @@ const an = /* @__PURE__ */ h({
           "aria-errormessage": a.question.ariaErrormessage,
           required: a.question.isRequired
         }, [
-          a.question.allowClear ? (i(), l("option", rn, R(a.question.placeholder), 1)) : m("", !0),
-          (i(!0), l(T, null, $(a.question.visibleChoices, (q) => (i(), g(d, {
+          a.question.allowClear ? (i(), l("option", an, T(a.question.placeholder), 1)) : m("", !0),
+          (i(!0), l(R, null, $(a.question.visibleChoices, (q) => (i(), g(d, {
             is: "sv-dropdown-option-item",
             item: q,
             key: q.id
           }, null, 8, ["item"]))), 128))
-        ], 42, tn)), [
-          [Te, o.value]
+        ], 42, ln)), [
+          [$e, o.value]
         ]),
         a.question.cssClasses.chevronButtonIconId ? (i(), l("div", {
           key: 2,
@@ -1569,7 +1583,7 @@ const an = /* @__PURE__ */ h({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), un = ["value", "disabled"], dn = /* @__PURE__ */ h({
+}), mn = ["value", "disabled"], pn = /* @__PURE__ */ h({
   __name: "OptionItem",
   props: {
     item: {}
@@ -1579,9 +1593,9 @@ const an = /* @__PURE__ */ h({
     return D(() => e.item), (s, t) => (i(), l("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
-    }, R(k(n)), 9, un));
+    }, T(k(n)), 9, mn));
   }
-}), mn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], pn = { style: { visibility: "hidden" } }, cn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], vn = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], qn = /* @__PURE__ */ h({
+}), cn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], vn = { style: { visibility: "hidden" } }, qn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], gn = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], yn = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1602,7 +1616,7 @@ const an = /* @__PURE__ */ h({
     }, q = () => {
       if (n.value) {
         const b = n.value, H = s.value.inputStringRendered;
-        Pe.isTwoValueEquals(H, b.value, !1, !0, !1) || (b.value = s.value.inputStringRendered);
+        Me.isTwoValueEquals(H, b.value, !1, !0, !1) || (b.value = s.value.inputStringRendered);
       }
     }, c = (b) => {
       e.question.onBlur(b), q();
@@ -1613,7 +1627,7 @@ const an = /* @__PURE__ */ h({
     }, f = w(
       () => e.question.showSelectedItemLocText
     ), N = w(() => e.question.selectedItemLocText);
-    return D(() => s.value), G(q), P(q), (b, H) => (i(), l("div", {
+    return D(() => s.value), Z(q), P(q), (b, H) => (i(), l("div", {
       class: r(b.question.cssClasses.selectWrapper),
       onClick: t
     }, [
@@ -1639,7 +1653,7 @@ const an = /* @__PURE__ */ h({
           key: 0,
           class: r(b.question.cssClasses.hintPrefix)
         }, [
-          v("span", null, R(s.value.hintStringPrefix), 1)
+          v("span", null, T(s.value.hintStringPrefix), 1)
         ], 2)) : m("", !0),
         v("div", {
           class: r(b.question.cssClasses.controlValue)
@@ -1653,8 +1667,8 @@ const an = /* @__PURE__ */ h({
             key: 1,
             class: r(b.question.cssClasses.hintSuffix)
           }, [
-            v("span", pn, R(s.value.inputStringRendered), 1),
-            v("span", null, R(s.value.hintStringSuffix), 1)
+            v("span", vn, T(s.value.inputStringRendered), 1),
+            v("span", null, T(s.value.hintStringSuffix), 1)
           ], 2)) : m("", !0),
           b.question.showInputFieldComponent ? (i(), g(d, {
             key: 2,
@@ -1684,7 +1698,7 @@ const an = /* @__PURE__ */ h({
             onInput: B,
             onBlur: c,
             onFocus: C
-          }, null, 42, cn)
+          }, null, 42, qn)
         ], 2),
         b.question.allowClear && b.question.cssClasses.cleanButtonIconId ? A((i(), l("div", {
           key: 1,
@@ -1702,7 +1716,7 @@ const an = /* @__PURE__ */ h({
         ], 2)), [
           [E, b.question.showClearButton]
         ]) : m("", !0)
-      ], 42, mn)),
+      ], 42, cn)),
       b.question.isReadOnly ? (i(), l("div", {
         key: 2,
         id: b.question.inputId,
@@ -1717,8 +1731,8 @@ const an = /* @__PURE__ */ h({
           is: "survey-string",
           locString: b.question.selectedItemLocText
         }, null, 8, ["locString"])) : m("", !0),
-        v("div", null, R(b.question.readOnlyText), 1)
-      ], 10, vn)) : (i(), g(d, {
+        v("div", null, T(b.question.readOnlyText), 1)
+      ], 10, gn)) : (i(), g(d, {
         key: 1,
         is: "sv-popup",
         model: b.question.dropdownListModel.popupModel
@@ -1738,7 +1752,7 @@ const an = /* @__PURE__ */ h({
       ], 34)) : m("", !0)
     ], 2));
   }
-}), yn = /* @__PURE__ */ h({
+}), hn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
@@ -1762,7 +1776,7 @@ const an = /* @__PURE__ */ h({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), gn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], hn = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], Cn = /* @__PURE__ */ h({
+}), Cn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], bn = ["id", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], kn = /* @__PURE__ */ h({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1770,7 +1784,7 @@ const an = /* @__PURE__ */ h({
   setup(u) {
     const e = u, n = w(() => {
       const c = e.question;
-      return c.dropdownListModel || (c.dropdownListModel = new Me(c)), e.question.dropdownListModel;
+      return c.dropdownListModel || (c.dropdownListModel = new He(c)), e.question.dropdownListModel;
     }), s = (c) => {
       var C;
       (C = n.value) == null || C.onClick(c);
@@ -1786,7 +1800,7 @@ const an = /* @__PURE__ */ h({
     }, p = (c) => {
       var C;
       (C = n.value) == null || C.onBlur(c);
-    }, q = _(() => e.question.selectedChoices);
+    }, q = x(() => e.question.selectedChoices);
     return D(() => n.value), (c, C) => (i(), l("div", {
       class: r(c.question.cssClasses.selectWrapper),
       onClick: s
@@ -1812,7 +1826,7 @@ const an = /* @__PURE__ */ h({
         v("div", {
           class: r(c.question.cssClasses.controlValue)
         }, [
-          (i(!0), l(T, null, $(k(q), (B, f) => (i(), g(d, {
+          (i(!0), l(R, null, $(k(q), (B, f) => (i(), g(d, {
             is: "sv-tagbox-item",
             item: B,
             question: c.question,
@@ -1840,7 +1854,7 @@ const an = /* @__PURE__ */ h({
         ], 2)), [
           [E, c.question.showClearButton]
         ]) : m("", !0)
-      ], 42, gn)),
+      ], 42, Cn)),
       c.question.isReadOnly ? (i(), l("div", {
         key: 2,
         id: c.question.inputId,
@@ -1855,7 +1869,7 @@ const an = /* @__PURE__ */ h({
           is: "survey-string",
           locString: c.question.locReadOnlyText
         }, null, 8, ["locString"])) : m("", !0)
-      ], 10, hn)) : (i(), g(d, {
+      ], 10, bn)) : (i(), g(d, {
         key: 1,
         is: "sv-popup",
         model: n.value.popupModel
@@ -1875,7 +1889,7 @@ const an = /* @__PURE__ */ h({
       ], 34)) : m("", !0)
     ], 2));
   }
-}), bn = { style: { visibility: "hidden" } }, kn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], fn = /* @__PURE__ */ h({
+}), fn = { style: { visibility: "hidden" } }, wn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "id", "readonly", "size"], In = /* @__PURE__ */ h({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1899,7 +1913,7 @@ const an = /* @__PURE__ */ h({
         key: 0,
         class: r(a.question.cssClasses.hintPrefix)
       }, [
-        v("span", null, R(a.model.hintStringPrefix), 1)
+        v("span", null, T(a.model.hintStringPrefix), 1)
       ], 2)) : m("", !0),
       v("div", {
         class: r(a.question.cssClasses.hintSuffixWrapper)
@@ -1913,8 +1927,8 @@ const an = /* @__PURE__ */ h({
           key: 1,
           class: r(a.question.cssClasses.hintSuffix)
         }, [
-          v("span", bn, R(a.model.inputStringRendered), 1),
-          v("span", null, R(a.model.hintStringSuffix), 1)
+          v("span", fn, T(a.model.inputStringRendered), 1),
+          v("span", null, T(a.model.hintStringSuffix), 1)
         ], 2)) : m("", !0),
         A(v("input", {
           type: "text",
@@ -1938,13 +1952,13 @@ const an = /* @__PURE__ */ h({
           onKeydown: s,
           onBlur: t,
           onFocus: o
-        }, null, 42, kn), [
-          [$e, a.model.inputStringRendered]
+        }, null, 42, wn), [
+          [De, a.model.inputStringRendered]
         ])
       ], 2)
     ], 2));
   }
-}), wn = { class: "sv-tagbox__item-text" }, In = /* @__PURE__ */ h({
+}), Sn = { class: "sv-tagbox__item-text" }, Tn = /* @__PURE__ */ h({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1958,7 +1972,7 @@ const an = /* @__PURE__ */ h({
       class: "sv-tagbox__item",
       key: s.item.key
     }, [
-      v("div", wn, [
+      v("div", Sn, [
         y(d, {
           is: "survey-string",
           locString: s.item.locText
@@ -1977,7 +1991,7 @@ const an = /* @__PURE__ */ h({
       ], 2)
     ]));
   }
-}), Sn = /* @__PURE__ */ h({
+}), Rn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
@@ -2001,7 +2015,7 @@ const an = /* @__PURE__ */ h({
       ref_key: "root",
       ref: n
     }, [
-      o.question.selectToRankEnabled ? m("", !0) : (i(!0), l(T, { key: 0 }, $(o.question.renderedRankingChoices, (p, q) => (i(), g(d, M({
+      o.question.selectToRankEnabled ? m("", !0) : (i(!0), l(R, { key: 0 }, $(o.question.renderedRankingChoices, (p, q) => (i(), g(d, M({
         key: p.value + "-" + q + "-item",
         is: s(p)
       }, t(p, q)), null, 16, ["is"]))), 128)),
@@ -2010,7 +2024,7 @@ const an = /* @__PURE__ */ h({
         class: r(o.question.getContainerClasses("from")),
         "data-ranking": "from-container"
       }, [
-        (i(!0), l(T, null, $(o.question.renderedUnRankingChoices, (p, q) => (i(), g(d, M({
+        (i(!0), l(R, null, $(o.question.renderedUnRankingChoices, (p, q) => (i(), g(d, M({
           key: p.value + "-" + q + "-item",
           is: s(p)
         }, t(p, q, !0)), null, 16, ["is"]))), 128)),
@@ -2033,7 +2047,7 @@ const an = /* @__PURE__ */ h({
         class: r(o.question.getContainerClasses("to")),
         "data-ranking": "to-container"
       }, [
-        (i(!0), l(T, null, $(o.question.renderedRankingChoices, (p, q) => (i(), g(d, M({
+        (i(!0), l(R, null, $(o.question.renderedRankingChoices, (p, q) => (i(), g(d, M({
           key: p.value + "-" + q + "-item",
           is: s(p)
         }, t(p, q)), null, 16, ["is"]))), 128)),
@@ -2049,10 +2063,10 @@ const an = /* @__PURE__ */ h({
       ], 2)) : m("", !0)
     ], 2));
   }
-}), Rn = ["tabindex", "data-sv-drop-target-ranking-item"], Tn = {
+}), $n = ["tabindex", "data-sv-drop-target-ranking-item"], Dn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, $n = ["xlink:href"], Dn = ["xlink:href"], Bn = ["xlink:href"], An = /* @__PURE__ */ h({
+}, Bn = ["xlink:href"], An = ["xlink:href"], Ln = ["xlink:href"], Nn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -2087,7 +2101,7 @@ const an = /* @__PURE__ */ h({
         );
       })
     }, [
-      v("div", Tn, [
+      v("div", Dn, [
         v("div", {
           class: r(s.question.cssClasses.itemGhostNode)
         }, null, 2),
@@ -2102,27 +2116,27 @@ const an = /* @__PURE__ */ h({
             }, [
               v("use", {
                 "xlink:href": s.question.dragDropSvgIcon
-              }, null, 8, $n)
+              }, null, 8, Bn)
             ], 2)),
             (i(), l("svg", {
               class: r(s.question.getIconFocusCss())
             }, [
               v("use", {
                 "xlink:href": s.question.arrowsSvgIcon
-              }, null, 8, Dn)
+              }, null, 8, An)
             ], 2))
           ], 2),
           !s.unrankedItem && n.value ? (i(), l("div", {
             key: 0,
             class: r(s.question.getItemIndexClasses(s.item))
-          }, R(n.value), 3)) : (i(), l("div", {
+          }, T(n.value), 3)) : (i(), l("div", {
             key: 1,
             class: r(s.question.getItemIndexClasses(s.item))
           }, [
             (i(), l("svg", null, [
               v("use", {
                 "xlink:href": s.question.dashSvgIcon
-              }, null, 8, Bn)
+              }, null, 8, Ln)
             ]))
           ], 2)),
           y(d, {
@@ -2132,9 +2146,9 @@ const an = /* @__PURE__ */ h({
           }, null, 8, ["is", "item", "cssClasses"])
         ], 2)
       ])
-    ], 42, Rn));
+    ], 42, $n));
   }
-}), Ln = /* @__PURE__ */ h({
+}), Pn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItemContent",
   props: {
@@ -2151,10 +2165,10 @@ const an = /* @__PURE__ */ h({
       }, null, 8, ["locString"])
     ], 2));
   }
-}), Nn = { role: "radiogroup" }, Pn = /* @__PURE__ */ v("legend", {
+}), Mn = { role: "radiogroup" }, Hn = /* @__PURE__ */ v("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Mn = /* @__PURE__ */ h({
+}, null, -1), En = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
@@ -2169,8 +2183,8 @@ const an = /* @__PURE__ */ h({
       ref_key: "root",
       ref: n
     }, [
-      v("fieldset", Nn, [
-        Pn,
+      v("fieldset", Mn, [
+        Hn,
         t.question.hasMinLabel ? (i(), l("span", {
           key: 0,
           class: r(t.question.cssClasses.minText)
@@ -2180,7 +2194,7 @@ const an = /* @__PURE__ */ h({
             locString: t.question.locMinRateDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
-        (i(!0), l(T, null, $(t.question.renderedRateItems, (a, p) => (i(), g(d, {
+        (i(!0), l(R, null, $(t.question.renderedRateItems, (a, p) => (i(), g(d, {
           key: s(p),
           is: t.question.itemComponent,
           item: a,
@@ -2199,7 +2213,7 @@ const an = /* @__PURE__ */ h({
       ])
     ], 2));
   }
-}), Hn = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], En = ["data-text"], Wn = /* @__PURE__ */ h({
+}), Wn = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Fn = ["data-text"], Vn = /* @__PURE__ */ h({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2226,7 +2240,7 @@ const an = /* @__PURE__ */ h({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, Hn),
+      }, null, 8, Wn),
       v("span", {
         class: r(n.question.cssClasses.itemText),
         "data-text": n.item.text
@@ -2235,10 +2249,10 @@ const an = /* @__PURE__ */ h({
           is: "survey-string",
           locString: n.item.locText
         }, null, 8, ["locString"])
-      ], 10, En)
+      ], 10, Fn)
     ], 34));
   }
-}), Fn = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Vn = /* @__PURE__ */ h({
+}), On = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], zn = /* @__PURE__ */ h({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2268,7 +2282,7 @@ const an = /* @__PURE__ */ h({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, Fn),
+      }, null, 8, On),
       y(d, {
         is: "sv-svg-icon",
         iconName: n.question.getItemSmileyIconName(n.item.itemValue),
@@ -2277,7 +2291,7 @@ const an = /* @__PURE__ */ h({
       }, null, 8, ["iconName", "title"])
     ], 38));
   }
-}), On = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], zn = /* @__PURE__ */ h({
+}), Un = ["name", "id", "value", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Kn = /* @__PURE__ */ h({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2306,7 +2320,7 @@ const an = /* @__PURE__ */ h({
         "aria-label": n.question.ariaLabel,
         "aria-invalid": n.question.ariaInvalid,
         "aria-errormessage": n.question.ariaErrormessage
-      }, null, 8, On),
+      }, null, 8, Un),
       y(d, {
         is: "sv-svg-icon",
         class: r("sv-star"),
@@ -2323,10 +2337,10 @@ const an = /* @__PURE__ */ h({
       }, null, 8, ["iconName", "title"])
     ], 34));
   }
-}), Un = { class: "sd-rating-dropdown-item" }, Kn = { class: "sd-rating-dropdown-item_text" }, Qn = {
+}), Qn = { class: "sd-rating-dropdown-item" }, jn = { class: "sd-rating-dropdown-item_text" }, Gn = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, jn = /* @__PURE__ */ h({
+}, Jn = /* @__PURE__ */ h({
   __name: "RatingDropdownItem",
   props: {
     item: {},
@@ -2334,9 +2348,9 @@ const an = /* @__PURE__ */ h({
   },
   setup(u) {
     const e = u;
-    return D(() => e.item), (n, s) => (i(), l("div", Un, [
-      v("span", Kn, R(n.item.title), 1),
-      n.item.description ? (i(), l("div", Qn, [
+    return D(() => e.item), (n, s) => (i(), l("div", Qn, [
+      v("span", jn, T(n.item.title), 1),
+      n.item.description ? (i(), l("div", Gn, [
         y(d, {
           is: "survey-string",
           locString: n.item.description
@@ -2345,12 +2359,12 @@ const an = /* @__PURE__ */ h({
     ]));
   }
 });
-Z.Instance.registerRenderer(
+_.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const Gn = /* @__PURE__ */ h({
+const Xn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
@@ -2369,7 +2383,7 @@ const Gn = /* @__PURE__ */ h({
       }, null, 8, ["question"])
     ], 2));
   }
-}), Jn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Xn = /* @__PURE__ */ h({
+}), Yn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "role", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], Zn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -2411,7 +2425,7 @@ const Gn = /* @__PURE__ */ h({
             "aria-describedby": o.question.a11y_input_ariaDescribedBy,
             "aria-invalid": o.question.a11y_input_ariaInvalid,
             "aria-errormessage": o.question.a11y_input_ariaErrormessage
-          }, null, 42, Jn), [
+          }, null, 42, Yn), [
             [se, o.question.booleanValue]
           ]),
           v("div", {
@@ -2463,12 +2477,12 @@ const Gn = /* @__PURE__ */ h({
     };
   }
 });
-Z.Instance.registerRenderer(
+_.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const Yn = /* @__PURE__ */ h({
+const _n = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
@@ -2509,7 +2523,7 @@ const Yn = /* @__PURE__ */ h({
       ], 2)
     ], 2));
   }
-}), Zn = ["name", "value", "checked", "aria-errormessage", "disabled", "readonly"], _n = ["xlink:href"], xn = /* @__PURE__ */ h({
+}), xn = ["name", "value", "checked", "aria-errormessage", "disabled", "readonly"], eo = ["xlink:href"], so = /* @__PURE__ */ h({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2538,7 +2552,7 @@ const Yn = /* @__PURE__ */ h({
           readonly: s.question.isReadOnlyAttr,
           class: r(s.question.cssClasses.itemRadioControl),
           onChange: n
-        }, null, 42, Zn),
+        }, null, 42, xn),
         s.question.cssClasses.materialRadioDecorator ? (i(), l("span", {
           key: 0,
           class: r(s.question.cssClasses.materialRadioDecorator)
@@ -2549,7 +2563,7 @@ const Yn = /* @__PURE__ */ h({
           }, [
             v("use", {
               "xlink:href": s.question.itemSvgIcon
-            }, null, 8, _n)
+            }, null, 8, eo)
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
         v("span", {
@@ -2563,13 +2577,13 @@ const Yn = /* @__PURE__ */ h({
       ], 2)
     ], 2));
   }
-}), eo = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], so = ["xlink:href"], no = /* @__PURE__ */ v("span", { class: "check" }, null, -1), oo = ["id"], to = ["id"];
-Z.Instance.registerRenderer(
+}), no = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], oo = ["xlink:href"], to = /* @__PURE__ */ v("span", { class: "check" }, null, -1), io = ["id"], ro = ["id"];
+_.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const io = /* @__PURE__ */ h({
+const lo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2605,7 +2619,7 @@ const io = /* @__PURE__ */ h({
               "aria-label": s.question.ariaLabel,
               "aria-invalid": s.question.ariaInvalid,
               "aria-errormessage": s.question.ariaErrormessage
-            }, null, 42, eo), [
+            }, null, 42, no), [
               [se, s.question.booleanValue]
             ]),
             v("span", {
@@ -2617,9 +2631,9 @@ const io = /* @__PURE__ */ h({
               }, [
                 v("use", {
                   "xlink:href": s.question.svgIcon
-                }, null, 8, so)
+                }, null, 8, oo)
               ], 2)) : m("", !0),
-              no
+              to
             ], 2),
             s.question.isLabelRendered ? (i(), l("span", {
               key: 0,
@@ -2638,7 +2652,7 @@ const io = /* @__PURE__ */ h({
                 element: s.question,
                 css: s.css
               }, null, 8, ["element", "css"])) : m("", !0)
-            ], 10, oo)) : m("", !0)
+            ], 10, io)) : m("", !0)
           ], 2),
           s.question.canRenderLabelDescription ? (i(), l("div", {
             key: 0,
@@ -2649,33 +2663,33 @@ const io = /* @__PURE__ */ h({
               is: "survey-string",
               locString: s.question.locDescription
             }, null, 8, ["locString"])
-          ], 10, to)) : m("", !0)
+          ], 10, ro)) : m("", !0)
         ], 2)
       ], 2);
     };
   }
-}), ro = /* @__PURE__ */ h({
+}), ao = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
     question: {}
   },
   setup(u) {
-    const e = u, n = I(null), s = _(() => e.question.getRows());
+    const e = u, n = I(null), s = x(() => e.question.getRows());
     return L(e, n), (t, o) => (i(), l("table", {
       class: r(t.question.getQuestionRootCss()),
       ref_key: "root",
       ref: n
     }, [
       v("tbody", null, [
-        (i(!0), l(T, null, $(k(s), (a, p) => (i(), l(T, {
+        (i(!0), l(R, null, $(k(s), (a, p) => (i(), l(R, {
           key: t.question.inputId + "rowkey" + p
         }, [
           a.isVisible ? (i(), l("tr", {
             key: 0,
             class: r(t.question.cssClasses.row)
           }, [
-            (i(!0), l(T, null, $(a.cells, (q) => (i(), l("td", {
+            (i(!0), l(R, null, $(a.cells, (q) => (i(), l("td", {
               key: "item" + q.item.editor.id,
               class: r(q.className)
             }, [
@@ -2690,7 +2704,7 @@ const io = /* @__PURE__ */ h({
       ])
     ], 2));
   }
-}), lo = { key: 1 }, ao = /* @__PURE__ */ h({
+}), uo = { key: 1 }, mo = /* @__PURE__ */ h({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2718,17 +2732,17 @@ const io = /* @__PURE__ */ h({
         s.value.editor.isRequireTextBeforeTitle || s.value.editor.isRequireTextOnStart ? (i(), l("span", {
           key: 0,
           class: r(t.question.cssClasses.requiredText)
-        }, R(s.value.editor.requiredText), 3)) : m("", !0),
+        }, T(s.value.editor.requiredText), 3)) : m("", !0),
         y(d, {
           is: "survey-string",
           locString: s.value.locTitle
         }, null, 8, ["locString"]),
-        s.value.editor.isRequireTextAfterTitle ? (i(), l("span", lo, "\xA0")) : m("", !0),
+        s.value.editor.isRequireTextAfterTitle ? (i(), l("span", uo, "\xA0")) : m("", !0),
         s.value.editor.isRequireTextAfterTitle ? (i(), l("span", {
           key: 2,
           "aria-hidden": "true",
           class: r(t.question.cssClasses.requiredText)
-        }, R(s.value.editor.requiredText), 3)) : m("", !0)
+        }, T(s.value.editor.requiredText), 3)) : m("", !0)
       ], 6),
       (i(), l("div", {
         key: s.value.editor.id,
@@ -2742,7 +2756,7 @@ const io = /* @__PURE__ */ h({
       ], 34))
     ], 2));
   }
-}), uo = { class: "sv-hidden" }, mo = { key: 0 }, po = { key: 0 }, co = ["onClick"], vo = ["data-responsive-title", "onClick"], qo = /* @__PURE__ */ h({
+}), po = { class: "sv-hidden" }, co = { key: 0 }, vo = { key: 0 }, qo = ["onClick"], go = ["data-responsive-title", "onClick"], yo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
@@ -2772,14 +2786,14 @@ const io = /* @__PURE__ */ h({
       ref: n
     }, [
       v("fieldset", null, [
-        v("legend", uo, R(o.question.locTitle.renderedHtml), 1),
+        v("legend", po, T(o.question.locTitle.renderedHtml), 1),
         v("table", {
           class: r(o.question.getTableCss())
         }, [
-          o.question.showHeader ? (i(), l("thead", mo, [
+          o.question.showHeader ? (i(), l("thead", co, [
             v("tr", null, [
-              o.question.hasRows ? (i(), l("td", po)) : m("", !0),
-              (i(!0), l(T, null, $(o.question.visibleColumns, (p, q) => (i(), l("th", {
+              o.question.hasRows ? (i(), l("td", vo)) : m("", !0),
+              (i(!0), l(R, null, $(o.question.visibleColumns, (p, q) => (i(), l("th", {
                 key: q,
                 class: r(o.question.cssClasses.headerCell),
                 style: S({
@@ -2803,7 +2817,7 @@ const io = /* @__PURE__ */ h({
             ])
           ])) : m("", !0),
           v("tbody", null, [
-            (i(!0), l(T, null, $(s.value, (p, q) => (i(), l("tr", {
+            (i(!0), l(R, null, $(s.value, (p, q) => (i(), l("tr", {
               key: "row_" + p.name + "_" + q,
               class: r(p.rowClasses || void 0)
             }, [
@@ -2829,7 +2843,7 @@ const io = /* @__PURE__ */ h({
               ], 6), [
                 [E, o.question.hasRows]
               ]),
-              o.question.hasCellText ? (i(!0), l(T, { key: 0 }, $(o.question.visibleColumns, (c, C) => (i(), l("td", {
+              o.question.hasCellText ? (i(!0), l(R, { key: 0 }, $(o.question.visibleColumns, (c, C) => (i(), l("td", {
                 key: C,
                 class: r(o.question.getItemClass(p, c)),
                 onClick: (B) => t(p, c)
@@ -2838,8 +2852,8 @@ const io = /* @__PURE__ */ h({
                   is: "survey-string",
                   locString: o.question.getCellDisplayLocText(p.name, c)
                 }, null, 8, ["locString"])
-              ], 10, co))), 128)) : m("", !0),
-              o.question.hasCellText ? m("", !0) : (i(!0), l(T, { key: 1 }, $(o.question.visibleColumns, (c, C) => (i(), l("td", {
+              ], 10, qo))), 128)) : m("", !0),
+              o.question.hasCellText ? m("", !0) : (i(!0), l(R, { key: 1 }, $(o.question.visibleColumns, (c, C) => (i(), l("td", {
                 key: C,
                 "data-responsive-title": c.locText.renderedHtml,
                 class: r(o.question.cssClasses.cell),
@@ -2852,14 +2866,14 @@ const io = /* @__PURE__ */ h({
                   column: c,
                   columnIndex: C
                 }, null, 8, ["is", "question", "row", "column", "columnIndex"])
-              ], 10, vo))), 128))
+              ], 10, go))), 128))
             ], 2))), 128))
           ])
         ], 2)
       ])
     ], 2));
   }
-}), yo = ["data-sv-drop-target-matrix-row"], go = /* @__PURE__ */ h({
+}), ho = ["data-sv-drop-target-matrix-row"], Co = /* @__PURE__ */ h({
   __name: "MatrixRow",
   props: {
     question: {},
@@ -2886,15 +2900,15 @@ const io = /* @__PURE__ */ h({
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), l(T, null, $(t.row.cells, (a, p) => (i(), g(d, {
+      (i(!0), l(R, null, $(t.row.cells, (a, p) => (i(), g(d, {
         is: "survey-matrixdropdown-cell",
         cell: a,
         question: t.question,
         key: t.row.id + "_" + p
       }, null, 8, ["cell", "question"]))), 128))
-    ], 42, yo)) : m("", !0);
+    ], 42, ho)) : m("", !0);
   }
-}), ho = ["name", "value", "readonly", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], Co = ["xlink:href"], bo = /* @__PURE__ */ h({
+}), bo = ["name", "value", "readonly", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], ko = ["xlink:href"], fo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixCell",
   props: {
@@ -2924,7 +2938,7 @@ const io = /* @__PURE__ */ h({
         ),
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-errormessage": e.question.a11y_input_ariaErrormessage
-      }, null, 10, ho), [
+      }, null, 10, bo), [
         [Y, e.row.value]
       ]),
       v("span", {
@@ -2936,7 +2950,7 @@ const io = /* @__PURE__ */ h({
         }, [
           v("use", {
             "xlink:href": e.question.itemSvgIcon
-          }, null, 8, Co)
+          }, null, 8, ko)
         ], 2)) : m("", !0)
       ], 2),
       e.question.isMobile ? (i(), l("span", {
@@ -2950,7 +2964,7 @@ const io = /* @__PURE__ */ h({
       ], 2)) : m("", !0)
     ], 34));
   }
-}), ko = /* @__PURE__ */ h({
+}), wo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
@@ -2965,7 +2979,7 @@ const io = /* @__PURE__ */ h({
       ref: n
     }, null, 8, ["question"]));
   }
-}), fo = { key: 0 }, wo = { key: 1 }, Io = /* @__PURE__ */ h({
+}), Io = { key: 0 }, So = { key: 1 }, To = /* @__PURE__ */ h({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2979,9 +2993,9 @@ const io = /* @__PURE__ */ h({
       v("table", {
         class: r(s.question.getTableCss())
       }, [
-        n.value.showHeader ? (i(), l("thead", fo, [
+        n.value.showHeader ? (i(), l("thead", Io, [
           v("tr", null, [
-            (i(!0), l(T, null, $(n.value.headerRow.cells, (o) => (i(), l(T, null, [
+            (i(!0), l(R, null, $(n.value.headerRow.cells, (o) => (i(), l(R, null, [
               o.hasTitle ? (i(), l("th", {
                 key: "header_" + o.id,
                 class: r(o.className),
@@ -3015,16 +3029,16 @@ const io = /* @__PURE__ */ h({
           ])
         ])) : m("", !0),
         v("tbody", null, [
-          (i(!0), l(T, null, $(n.value.renderedRows, (o) => (i(), g(d, {
+          (i(!0), l(R, null, $(n.value.renderedRows, (o) => (i(), g(d, {
             key: s.question.inputId + "_" + o.id,
             is: "survey-matrix-row",
             row: o,
             question: s.question
           }, null, 8, ["row", "question"]))), 128))
         ]),
-        n.value.showFooter ? (i(), l("tfoot", wo, [
+        n.value.showFooter ? (i(), l("tfoot", So, [
           v("tr", null, [
-            (i(!0), l(T, null, $(n.value.footerRow.cells, (o, a) => (i(), g(d, {
+            (i(!0), l(R, null, $(n.value.footerRow.cells, (o, a) => (i(), g(d, {
               is: "survey-matrixdropdown-cell",
               cell: o,
               question: s.question,
@@ -3035,7 +3049,7 @@ const io = /* @__PURE__ */ h({
       ], 2)
     ], 6));
   }
-}), So = /* @__PURE__ */ v("span", null, "\xA0", -1), Ro = /* @__PURE__ */ h({
+}), Ro = /* @__PURE__ */ v("span", null, "\xA0", -1), $o = /* @__PURE__ */ h({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -3043,15 +3057,15 @@ const io = /* @__PURE__ */ h({
   },
   setup(u) {
     const e = u;
-    return D(() => e.column), (n, s) => n.column.isRenderedRequired ? (i(), l(T, { key: 0 }, [
-      So,
+    return D(() => e.column), (n, s) => n.column.isRenderedRequired ? (i(), l(R, { key: 0 }, [
+      Ro,
       n.column.isRenderedRequired ? (i(), l("span", {
         key: 0,
         class: r(n.question.cssClasses.cellRequiredText)
-      }, R(n.column.requiredText), 3)) : m("", !0)
+      }, T(n.column.requiredText), 3)) : m("", !0)
     ], 64)) : m("", !0);
   }
-}), To = ["title", "colspan"], $o = /* @__PURE__ */ h({
+}), Do = ["title", "colspan"], Bo = /* @__PURE__ */ h({
   __name: "MatrixDropdownCellComp",
   props: {
     question: {},
@@ -3207,13 +3221,13 @@ const io = /* @__PURE__ */ h({
           c.cell.requiredText ? (i(), l("span", {
             key: 1,
             class: r(c.question.cssClasses.cellRequiredText)
-          }, R(c.cell.requiredText), 3)) : m("", !0)
+          }, T(c.cell.requiredText), 3)) : m("", !0)
         ]),
         _: 1
       }, 8, ["is", "componentData"])) : m("", !0)
-    ], 46, To)) : m("", !0);
+    ], 46, Do)) : m("", !0);
   }
-}), Do = /* @__PURE__ */ h({
+}), Ao = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3306,7 +3320,7 @@ function oe(u, e = !0) {
     row: e ? w(() => u.item.data.row) : void 0
   };
 }
-const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
+const Lo = ["disabled"], No = /* @__PURE__ */ h({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3326,9 +3340,9 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
       v("span", {
         class: r(k(n).cssClasses.iconRemove)
       }, null, 2)
-    ], 10, Bo));
+    ], 10, Lo));
   }
-}), Lo = ["xlink:href"], No = /* @__PURE__ */ h({
+}), Po = ["xlink:href"], Mo = /* @__PURE__ */ h({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3342,14 +3356,14 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
       }, [
         v("use", {
           "xlink:href": k(n).iconDragElement
-        }, null, 8, Lo)
+        }, null, 8, Po)
       ], 2)) : (i(), l("span", {
         key: 1,
         class: r(k(n).cssClasses.iconDrag)
       }, null, 2))
     ]));
   }
-}), Po = ["aria-expanded", "aria-controls"], Mo = /* @__PURE__ */ h({
+}), Ho = ["aria-expanded", "aria-controls"], Eo = /* @__PURE__ */ h({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3369,9 +3383,9 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
         iconName: k(n).getDetailPanelIconId(k(s)),
         size: "auto"
       }, null, 8, ["class", "iconName"])
-    ], 10, Po));
+    ], 10, Ho));
   }
-}), Ho = /* @__PURE__ */ h({
+}), Wo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3459,7 +3473,7 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
       v("div", {
         class: r(p.question.cssClasses.panelsContainer)
       }, [
-        (i(!0), l(T, null, $(p.question.renderedPanels, (c, C) => (i(), l(T, {
+        (i(!0), l(R, null, $(p.question.renderedPanels, (c, C) => (i(), l(R, {
           key: c.id
         }, [
           v("div", {
@@ -3497,7 +3511,7 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
       }, null, 8, ["question"])) : m("", !0)
     ], 2));
   }
-}), Eo = /* @__PURE__ */ h({
+}), Fo = /* @__PURE__ */ h({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3544,7 +3558,7 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
       ], 2)
     ], 2));
   }
-}), Wo = /* @__PURE__ */ h({
+}), Vo = /* @__PURE__ */ h({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3579,19 +3593,19 @@ const Bo = ["disabled"], Ao = /* @__PURE__ */ h({
     ], 2)) : m("", !0);
   }
 });
-function J(u) {
+function G(u) {
   return w(
     () => u.item && u.item.data.question || u.data.question
   );
 }
-const Fo = ["id"], Vo = /* @__PURE__ */ h({
+const Oo = ["id"], zo = /* @__PURE__ */ h({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const n = J(u), s = () => {
+    const n = G(u), s = () => {
       n.value.addPanelUI();
     };
     return (t, o) => k(n).canAddPanel ? (i(), l("button", {
@@ -3609,16 +3623,16 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
           locString: k(n).locPanelAddText
         }, null, 8, ["locString"])
       ], 2)
-    ], 10, Fo)) : m("", !0);
+    ], 10, Oo)) : m("", !0);
   }
-}), Oo = ["title"], zo = /* @__PURE__ */ h({
+}), Uo = ["title"], Ko = /* @__PURE__ */ h({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const n = J(u), s = () => {
+    const n = G(u), s = () => {
       n.value.goToNextPanel();
     };
     return (t, o) => (i(), l("div", {
@@ -3631,16 +3645,16 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
         iconName: k(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, Oo));
+    ], 10, Uo));
   }
-}), Uo = ["title"], Ko = /* @__PURE__ */ h({
+}), Qo = ["title"], jo = /* @__PURE__ */ h({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const n = J(u), s = () => {
+    const n = G(u), s = () => {
       n.value.goToPrevPanel();
     };
     return (t, o) => (i(), l("div", {
@@ -3653,16 +3667,16 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
         iconName: k(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, Uo));
+    ], 10, Qo));
   }
-}), Qo = /* @__PURE__ */ h({
+}), Go = /* @__PURE__ */ h({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const e = u, n = J(e), s = w(
+    const e = u, n = G(e), s = w(
       () => e.item && e.item.data.panel || e.data.panel
     ), t = (o) => {
       n.value.isInputReadOnly || n.value.removePanelUI(o);
@@ -3685,19 +3699,19 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
       }, null, 2)
     ], 2));
   }
-}), jo = /* @__PURE__ */ h({
+}), Jo = /* @__PURE__ */ h({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
     data: {}
   },
   setup(u) {
-    const n = J(u);
+    const n = G(u);
     return (s, t) => (i(), l("div", {
       class: r(k(n).cssClasses.progressText)
-    }, R(k(n).progressText), 3));
+    }, T(k(n).progressText), 3));
   }
-}), Go = ["id"], Jo = /* @__PURE__ */ h({
+}), Xo = ["id"], Yo = /* @__PURE__ */ h({
   __name: "Errors",
   props: {
     element: {},
@@ -3714,7 +3728,7 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
       ref_key: "root",
       ref: e
     }, [
-      (i(!0), l(T, null, $(n.element.errors, (t, o) => (i(), g(d, {
+      (i(!0), l(R, null, $(n.element.errors, (t, o) => (i(), g(d, {
         is: n.element.survey.questionErrorComponent,
         element: n.element,
         key: "error_" + o,
@@ -3722,21 +3736,21 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
         error: t,
         cssClasses: n.element.cssClasses
       }, null, 8, ["is", "element", "errorKey", "error", "cssClasses"]))), 128))
-    ], 10, Go)) : m("", !0);
+    ], 10, Xo)) : m("", !0);
   }
-}), Xo = { key: 0 }, Yo = /* @__PURE__ */ h({
+}), Zo = { key: 0 }, _o = /* @__PURE__ */ h({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(u) {
-    return (e, n) => e.question.isReadOnlyRenderDiv() ? (i(), l("div", Xo, R(e.question.comment), 1)) : (i(), g(d, {
+    return (e, n) => e.question.isReadOnlyRenderDiv() ? (i(), l("div", Zo, T(e.question.comment), 1)) : (i(), g(d, {
       key: 1,
       is: "sv-text-area",
       model: e.question.commentTextAreaModel
     }, null, 8, ["model"]));
   }
-}), Zo = /* @__PURE__ */ h({
+}), xo = /* @__PURE__ */ h({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3744,7 +3758,7 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
   },
   setup(u) {
     const e = (n) => {
-      ye(n);
+      ge(n);
     };
     return (n, s) => n.element.hasTitle ? (i(), g(ce(n.element.titleTagName), {
       key: 0,
@@ -3775,7 +3789,7 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
       _: 1
     }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : m("", !0);
   }
-}), _o = { key: 3 }, xo = { key: 5 }, et = { key: 7 }, st = /* @__PURE__ */ h({
+}), et = { key: 3 }, st = { key: 5 }, nt = { key: 7 }, ot = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3786,7 +3800,7 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
     const e = u;
     return w(
       () => (e.element.isPanel ? e.element.cssClasses.panel : e.element.cssClasses) || {}
-    ), (n, s) => (i(), l(T, null, [
+    ), (n, s) => (i(), l(R, null, [
       n.element.isTitleRenderedAsString ? (i(), g(d, {
         key: 0,
         is: "survey-string",
@@ -3796,34 +3810,34 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
         key: 1,
         class: r(n.element.cssRequiredText),
         "aria-hidden": !0
-      }, R(n.element.requiredText), 3)) : m("", !0),
+      }, T(n.element.requiredText), 3)) : m("", !0),
       !n.element.isTitleRenderedAsString && n.element.no ? (i(), l("span", {
         key: 2,
         style: { position: "static" },
         class: r(n.element.cssTitleNumber),
         "aria-hidden": !0
-      }, R(n.element.no), 3)) : m("", !0),
-      !n.element.isTitleRenderedAsString && n.element.no ? (i(), l("span", _o, "\xA0")) : m("", !0),
+      }, T(n.element.no), 3)) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.no ? (i(), l("span", et, "\xA0")) : m("", !0),
       !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (i(), l("span", {
         key: 4,
         class: r(n.element.cssRequiredText),
         "aria-hidden": !0
-      }, R(n.element.requiredText), 3)) : m("", !0),
-      !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (i(), l("span", xo, "\xA0")) : m("", !0),
+      }, T(n.element.requiredText), 3)) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (i(), l("span", st, "\xA0")) : m("", !0),
       n.element.isTitleRenderedAsString ? m("", !0) : (i(), g(d, {
         key: 6,
         is: "survey-string",
         locString: n.element.locTitle
       }, null, 8, ["locString"])),
-      !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (i(), l("span", et, "\xA0")) : m("", !0),
+      !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (i(), l("span", nt, "\xA0")) : m("", !0),
       !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (i(), l("span", {
         key: 8,
         class: r(n.element.cssRequiredText),
         "aria-hidden": !0
-      }, R(n.element.requiredText), 3)) : m("", !0)
+      }, T(n.element.requiredText), 3)) : m("", !0)
     ], 64));
   }
-}), nt = { class: "sv-title-actions" }, ot = { class: "sv-title-actions__title" }, tt = /* @__PURE__ */ h({
+}), tt = { class: "sv-title-actions" }, it = { class: "sv-title-actions__title" }, rt = /* @__PURE__ */ h({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3831,8 +3845,8 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
   },
   setup(u) {
     const e = u, n = w(() => e.element.getTitleToolbar());
-    return (s, t) => (i(), l("div", nt, [
-      v("span", ot, [
+    return (s, t) => (i(), l("div", tt, [
+      v("span", it, [
         s.element.isPage ? (i(), g(d, {
           key: 0,
           is: "survey-string",
@@ -3851,20 +3865,20 @@ const Fo = ["id"], Vo = /* @__PURE__ */ h({
       }, null, 8, ["model"])
     ]));
   }
-}), it = (u, e) => {
+}), lt = (u, e) => {
   const n = u.__vccOpts || u;
   for (const [s, t] of e)
     n[s] = t;
   return n;
-}, rt = {}, lt = { class: "sv-brand-info" }, at = /* @__PURE__ */ De('<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), ut = [
-  at
+}, at = {}, ut = { class: "sv-brand-info" }, dt = /* @__PURE__ */ Be('<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), mt = [
+  dt
 ];
-function dt(u, e) {
-  return i(), l("div", lt, ut);
+function pt(u, e) {
+  return i(), l("div", ut, mt);
 }
-const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use", null, null, -1), ct = [
-  pt
-], vt = /* @__PURE__ */ h({
+const ct = /* @__PURE__ */ lt(at, [["render", pt]]), vt = /* @__PURE__ */ v("use", null, null, -1), qt = [
+  vt
+], gt = /* @__PURE__ */ h({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3875,7 +3889,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u, n = I(), s = () => {
-      He(
+      Ee(
         e.size,
         e.width,
         e.height,
@@ -3884,7 +3898,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         e.title
       );
     };
-    return G(() => {
+    return Z(() => {
       s();
     }), P(() => {
       s();
@@ -3893,9 +3907,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ref: n,
       class: "sv-svg-icon",
       role: "img"
-    }, ct, 512));
+    }, qt, 512));
   }
-}), qt = /* @__PURE__ */ h({
+}), yt = /* @__PURE__ */ h({
   __name: "QuestionError",
   props: {
     errorKey: {},
@@ -3923,7 +3937,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ], 2)
     ]));
   }
-}), yt = /* @__PURE__ */ h({
+}), ht = /* @__PURE__ */ h({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3935,7 +3949,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       e.handleClick && o.stopPropagation();
     };
     D(() => e.model);
-    const t = _(() => e.model.renderedActions);
+    const t = x(() => e.model.renderedActions);
     return P(() => {
       !e.model.hasActions || e.model.initResponsivityManager(n.value);
     }), F(() => {
@@ -3947,14 +3961,14 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       class: r(o.model.getRootCss()),
       onClick: s
     }, [
-      (i(!0), l(T, null, $(k(t), (p) => (i(), g(d, {
+      (i(!0), l(R, null, $(k(t), (p) => (i(), g(d, {
         is: "sv-action",
         key: p.id,
         item: p
       }, null, 8, ["item"]))), 128))
     ], 2)) : m("", !0);
   }
-}), gt = ["id"], ht = { class: "sv-action__content" }, Ct = /* @__PURE__ */ h({
+}), Ct = ["id"], bt = { class: "sv-action__content" }, kt = /* @__PURE__ */ h({
   __name: "Action",
   props: {
     item: {}
@@ -3967,7 +3981,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       class: r(s.item.getActionRootCss()),
       id: s.item.id
     }, [
-      v("div", ht, [
+      v("div", bt, [
         s.item.needSeparator ? (i(), g(d, {
           key: 0,
           is: "sv-action-bar-separator"
@@ -3977,7 +3991,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           item: s.item
         }, null, 8, ["is", "item"])
       ])
-    ], 10, gt));
+    ], 10, Ct));
   }
 }), j = {
   mounted: function(u, e) {
@@ -3986,16 +4000,16 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       u.tabIndex = -1;
       return;
     }
-    n.disableTabStop || (u.tabIndex = 0), u.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), ye(s, n), !1)), u.addEventListener("keydown", (s) => {
-      Ee(s, n);
+    n.disableTabStop || (u.tabIndex = 0), u.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), ge(s, n), !1)), u.addEventListener("keydown", (s) => {
+      We(s, n);
     }), u.addEventListener("blur", (s) => {
-      We(s);
+      Fe(s);
     });
   }
-}, bt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], kt = {
+}, ft = ["disabled", "title", "aria-checked", "aria-expanded", "role"], wt = {
   inheritAttrs: !1
-}, ft = /* @__PURE__ */ h({
-  ...kt,
+}, It = /* @__PURE__ */ h({
+  ...wt,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -4034,31 +4048,31 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       n.item.hasTitle ? (i(), l("span", {
         key: 1,
         class: r(n.item.getActionBarItemTitleCss())
-      }, R(n.item.title), 3)) : m("", !0)
-    ], 42, bt)), [
+      }, T(n.item.title), 3)) : m("", !0)
+    ], 42, ft)), [
       [k(j), { processEsc: !1, disableTabStop: n.item.disableTabStop }]
     ]);
   }
-}), wt = ["disabled", "title", "role"], It = {
+}), St = ["disabled", "title", "role"], Tt = {
   inheritAttrs: !1
-}, St = /* @__PURE__ */ h({
-  ...It,
+}, Rt = /* @__PURE__ */ h({
+  ...Tt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
   },
   setup(u) {
-    const e = u, n = Ve;
+    const e = u, n = Oe;
     let s;
     return D(
       () => e.item,
       (t) => {
-        s = new Fe(t);
+        s = new Ve(t);
       },
       () => {
         s.dispose();
       }
-    ), (t, o) => (i(), l(T, null, [
+    ), (t, o) => (i(), l(R, null, [
       A((i(), l("button", {
         type: "button",
         class: r(t.item.getActionBarItemCss()),
@@ -4083,8 +4097,8 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         t.item.hasTitle ? (i(), l("span", {
           key: 1,
           class: r(t.item.getActionBarItemTitleCss())
-        }, R(t.item.title), 3)) : m("", !0)
-      ], 42, wt)), [
+        }, T(t.item.title), 3)) : m("", !0)
+      ], 42, St)), [
         [k(j), { processEsc: !1, disableTabStop: t.item.disableTabStop }]
       ]),
       y(d, {
@@ -4094,7 +4108,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["model", "getTarget"])
     ], 64));
   }
-}), Rt = /* @__PURE__ */ h({
+}), $t = /* @__PURE__ */ h({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -4105,7 +4119,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       class: r(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), Tt = ["aria-label", "placeholder", "value"], $t = ["aria-label"], Dt = ["id"], Bt = /* @__PURE__ */ h({
+}), Dt = ["aria-label", "placeholder", "value"], Bt = ["aria-label"], At = ["id"], Lt = /* @__PURE__ */ h({
   __name: "List",
   props: {
     model: {}
@@ -4119,7 +4133,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       q.filterString = p.target.value, e.model.goToItems(p);
     }, o = (p) => {
       e.model.onMouseMove(p);
-    }, a = _(() => e.model.renderedActions);
+    }, a = x(() => e.model.renderedActions);
     return D(() => e.model), P(() => {
       e.model.initListContainerHtmlElement(n.value);
     }), (p, q) => (i(), l("div", {
@@ -4148,7 +4162,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           value: p.model.filterString,
           onChange: s,
           onKeyup: t
-        }, null, 42, Tt),
+        }, null, 42, Dt),
         p.model.showSearchClearButton && !!p.model.filterString ? (i(), l("button", {
           key: 0,
           onClick: q[0] || (q[0] = (c) => {
@@ -4169,7 +4183,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         v("div", {
           class: r(p.model.cssClasses.emptyText),
           "aria-label": p.model.emptyMessage
-        }, R(p.model.emptyMessage), 11, $t)
+        }, T(p.model.emptyMessage), 11, Bt)
       ], 2), [
         [E, p.model.isEmpty]
       ]),
@@ -4186,18 +4200,18 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           p.model.onKeyDown(c);
         })
       }, [
-        (i(!0), l(T, null, $(k(a), (c) => (i(), g(d, {
+        (i(!0), l(R, null, $(k(a), (c) => (i(), g(d, {
           is: "sv-list-item",
           item: c,
           model: p.model,
           key: c.id
         }, null, 8, ["item", "model"]))), 128))
-      ], 42, Dt)), [
+      ], 42, At)), [
         [E, !p.model.isEmpty]
       ]) : m("", !0)
     ], 2));
   }
-}), At = ["aria-selected", "id", "tabindex"], Lt = ["title"], Nt = /* @__PURE__ */ h({
+}), Nt = ["aria-selected", "id", "tabindex"], Pt = ["title"], Mt = /* @__PURE__ */ h({
   __name: "ListItem",
   props: {
     model: {},
@@ -4241,13 +4255,13 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           item: o.item,
           model: o.model
         }, null, 8, ["is", "item", "model"])
-      ], 46, Lt)
-    ], 42, At)), [
+      ], 46, Pt)
+    ], 42, Nt)), [
       [E, o.model.isItemVisible(o.item)],
       [k(j), { processEsc: !1, disableTabStop: o.item.disableTabStop }]
     ]);
   }
-}), Pt = /* @__PURE__ */ h({
+}), Ht = /* @__PURE__ */ h({
   __name: "ListItemContent",
   props: {
     model: {},
@@ -4255,7 +4269,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u;
-    return D(() => e.item), (n, s) => (i(), l(T, null, [
+    return D(() => e.item), (n, s) => (i(), l(R, null, [
       n.item.iconName ? (i(), g(d, {
         key: 0,
         is: "sv-svg-icon",
@@ -4276,7 +4290,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["class", "iconName", "size"])) : m("", !0)
     ], 64));
   }
-}), Mt = /* @__PURE__ */ h({
+}), Et = /* @__PURE__ */ h({
   __name: "ListItemGroup",
   props: {
     model: {},
@@ -4284,7 +4298,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u;
-    return D(() => e.item), (n, s) => (i(), l(T, null, [
+    return D(() => e.item), (n, s) => (i(), l(R, null, [
       y(d, {
         is: "sv-list-item-content",
         item: n.item,
@@ -4296,7 +4310,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["model"])
     ], 64));
   }
-}), Ht = /* @__PURE__ */ h({
+}), Wt = /* @__PURE__ */ h({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4315,7 +4329,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     return O(
       () => e.model,
       (o) => {
-        n.value && n.value.dispose(), n.value = Oe(o, void 0), t();
+        n.value && n.value.dispose(), n.value = ze(o, void 0), t();
       },
       { immediate: !0 }
     ), D(() => n.value), P(() => {
@@ -4332,13 +4346,13 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["model"])
     ], 512));
   }
-}), Et = { class: "sv-popup__body-content" }, Wt = {
+}), Ft = { class: "sv-popup__body-content" }, Vt = {
   key: 0,
   class: "sv-popup__body-header"
-}, Ft = { class: "sv-popup__scrolling-content" }, Vt = { class: "sv-popup__content" }, Ot = {
+}, Ot = { class: "sv-popup__scrolling-content" }, zt = { class: "sv-popup__content" }, Ut = {
   key: 1,
   class: "sv-popup__body-footer"
-}, zt = /* @__PURE__ */ h({
+}, Kt = /* @__PURE__ */ h({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4347,7 +4361,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     const e = u, n = (s) => {
       s.stopPropagation();
     };
-    return D(() => e.model), G(() => {
+    return D(() => e.model), Z(() => {
       const s = e.model;
       s.isVisible && !s.isPositionSet && e.model.updateOnShowing();
     }), P(() => {
@@ -4378,16 +4392,16 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           is: s.model.popupHeaderTemplate,
           model: s.model
         }, null, 8, ["is", "model"])) : m("", !0),
-        v("div", Et, [
-          s.model.title ? (i(), l("div", Wt, R(s.model.title), 1)) : m("", !0),
-          v("div", Ft, [
-            v("div", Vt, [
+        v("div", Ft, [
+          s.model.title ? (i(), l("div", Vt, T(s.model.title), 1)) : m("", !0),
+          v("div", Ot, [
+            v("div", zt, [
               y(d, M({
                 is: s.model.contentComponentName
               }, s.model.contentComponentData), null, 16, ["is"])
             ])
           ]),
-          s.model.showFooter ? (i(), l("div", Ot, [
+          s.model.showFooter ? (i(), l("div", Ut, [
             y(d, {
               is: "sv-action-bar",
               model: s.model.footerToolbar
@@ -4399,7 +4413,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       [E, s.model.isVisible]
     ]);
   }
-}), Ut = /* @__PURE__ */ h({
+}), Qt = /* @__PURE__ */ h({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4413,7 +4427,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       })
     }, null, 4));
   }
-}), Kt = /* @__PURE__ */ h({
+}), jt = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     survey: {},
@@ -4424,19 +4438,19 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     const e = u, n = w(
       () => e.survey.getContainerContent(e.container)
     );
-    return (s, t) => n.value.length > 0 ? (i(), l(T, { key: 0 }, [
+    return (s, t) => n.value.length > 0 ? (i(), l(R, { key: 0 }, [
       s.needRenderWrapper ? (i(), l("div", {
         key: 0,
         class: r(["sv-components-column", "sv-components-container-" + s.container])
       }, [
-        (i(!0), l(T, null, $(n.value, (o) => (i(), g(d, {
+        (i(!0), l(R, null, $(n.value, (o) => (i(), g(d, {
           key: o.id,
           is: o.component,
           survey: s.survey,
           container: s.container,
           model: o.data
         }, null, 8, ["is", "survey", "container", "model"]))), 128))
-      ], 2)) : (i(!0), l(T, { key: 1 }, $(n.value, (o) => (i(), g(d, {
+      ], 2)) : (i(!0), l(R, { key: 1 }, $(n.value, (o) => (i(), g(d, {
         key: o.id,
         is: o.component,
         survey: s.survey,
@@ -4467,14 +4481,14 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, [
         v("span", {
           class: r(s(o.survey.css))
-        }, R(o.survey.progressText), 3)
+        }, T(o.survey.progressText), 3)
       ], 6),
       v("span", {
         class: r(t(o.survey.css))
-      }, R(o.survey.progressText), 3)
+      }, T(o.survey.progressText), 3)
     ], 2));
   }
-}), Qt = ["title"], jt = ["onClick", "data-page-number"], Gt = ["title"], Jt = ["title"], Xt = ["title"], Yt = /* @__PURE__ */ h({
+}), Gt = ["title"], Jt = ["onClick", "data-page-number"], Xt = ["title"], Yt = ["title"], Zt = ["title"], _t = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
     survey: {},
@@ -4490,7 +4504,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     };
     return P(() => {
       const C = a.value;
-      q = new ze(e.model, C, {
+      q = new Ue(e.model, C, {
         onResize: (B) => {
           o.value = B, s.value = !B;
         },
@@ -4519,7 +4533,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         v("div", {
           class: r(C.survey.css.progressButtonsPageTitle),
           title: C.model.headerText
-        }, R(C.model.headerText), 11, Qt)
+        }, T(C.model.headerText), 11, Gt)
       ], 2)) : m("", !0),
       v("div", {
         class: r(p.value.progressButtonsContainer)
@@ -4537,7 +4551,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           v("ul", {
             class: r(p.value.progressButtonsList)
           }, [
-            (i(!0), l(T, null, $(C.survey.visiblePages, (f, N) => (i(), l("li", {
+            (i(!0), l(R, null, $(C.survey.visiblePages, (f, N) => (i(), l("li", {
               key: "listelement" + N,
               class: r(C.model.getListElementCss(N)),
               onClick: (b) => C.model.isListElementClickable(N) ? C.model.clickListElement(f) : null,
@@ -4555,12 +4569,12 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
                   is: "survey-string",
                   locString: f.locNavigationTitle
                 }, null, 8, ["locString"])
-              ], 10, Gt)) : m("", !0),
+              ], 10, Xt)) : m("", !0),
               o.value ? (i(), l("div", {
                 key: 1,
                 class: r(p.value.progressButtonsPageDescription),
                 title: f.locNavigationDescription.renderedHtml
-              }, R(f.locNavigationDescription.renderedHtml), 11, Jt)) : m("", !0),
+              }, T(f.locNavigationDescription.renderedHtml), 11, Yt)) : m("", !0),
               v("div", {
                 class: r(p.value.progressButtonsButton)
               }, [
@@ -4570,9 +4584,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
                 v("div", {
                   class: r(p.value.progressButtonsButtonContent)
                 }, null, 2),
-                v("span", null, R(C.model.getItemNumber(f)), 1)
+                v("span", null, T(C.model.getItemNumber(f)), 1)
               ], 2)
-            ], 10, jt))), 128))
+            ], 10, Jt))), 128))
           ], 2)
         ], 2),
         v("div", {
@@ -4588,11 +4602,11 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         v("div", {
           class: r(C.survey.css.progressButtonsPageTitle),
           title: C.model.footerText
-        }, R(C.model.footerText), 11, Xt)
+        }, T(C.model.footerText), 11, Zt)
       ], 2)) : m("", !0)
     ], 6));
   }
-}), Zt = /* @__PURE__ */ h({
+}), xt = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
     survey: {},
@@ -4624,10 +4638,10 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["model"]))
     ], 2));
   }
-}), _t = ["lang", "dir"], xt = { onsubmit: "return false;" }, ei = {
+}), ei = ["lang", "dir"], si = { onsubmit: "return false;" }, ni = {
   key: 0,
   class: "sv_custom_header"
-}, si = { class: "sv-components-column sv-components-column--expandable" }, ni = ["id"], oi = { key: 2 }, ti = ["innerHTML"], ii = ["innerHTML"], ri = ["innerHTML"], te = /* @__PURE__ */ h({
+}, oi = { class: "sv-components-column sv-components-column--expandable" }, ti = ["id"], ii = { key: 2 }, ri = ["innerHTML"], li = ["innerHTML"], ai = ["innerHTML"], te = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
@@ -4636,7 +4650,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
   setup(u) {
     const e = u, n = I(), s = I(""), t = I(1), o = w(() => {
       const N = e.survey ? e.survey : e.model;
-      return Be(N);
+      return Ae(N);
     }), a = w(() => o.value.activePage ? o.value.activePage.id : ""), p = () => {
       const N = a.value;
       return !!o.value && N + t.value.toString();
@@ -4684,8 +4698,8 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           class: r(c.value.rootBackgroundImage),
           style: S(o.value.backgroundImageStyle)
         }, null, 6)) : m("", !0),
-        v("form", xt, [
-          o.value.hasLogo ? m("", !0) : (i(), l("div", ei)),
+        v("form", si, [
+          o.value.hasLogo ? m("", !0) : (i(), l("div", ni)),
           v("div", {
             class: r(c.value.container)
           }, [
@@ -4710,7 +4724,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
                 container: "left",
                 needRenderWrapper: !0
               }, null, 8, ["survey"]),
-              v("div", si, [
+              v("div", oi, [
                 y(d, {
                   is: "sv-components-container",
                   survey: o.value,
@@ -4745,7 +4759,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
                     key: 0,
                     is: "sv-brand-info"
                   })) : m("", !0)
-                ], 14, ni)
+                ], 14, ti)
               ]),
               y(d, {
                 is: "sv-components-container",
@@ -4760,11 +4774,11 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
               container: "footer",
               needRenderWrapper: !1
             }, null, 8, ["survey"]),
-            q.value ? (i(), l("div", oi, [
+            q.value ? (i(), l("div", ii, [
               v("div", {
                 innerHTML: B(),
                 class: r(o.value.completedCss)
-              }, null, 10, ti),
+              }, null, 10, ri),
               y(d, {
                 is: "sv-components-container",
                 survey: o.value,
@@ -4776,16 +4790,16 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
               key: 3,
               class: r(o.value.completedBeforeCss),
               innerHTML: o.value.processedCompletedBeforeHtml
-            }, null, 10, ii)) : m("", !0),
+            }, null, 10, li)) : m("", !0),
             o.value.state === "loading" ? (i(), l("div", {
               key: 4,
               class: r(o.value.loadingBodyCss),
               innerHTML: o.value.processedLoadingHtml
-            }, null, 10, ri)) : m("", !0),
+            }, null, 10, ai)) : m("", !0),
             o.value.state === "empty" ? (i(), l("div", {
               key: 5,
               class: r(c.value.bodyEmpty)
-            }, R(o.value.emptySurveyText), 3)) : m("", !0)
+            }, T(o.value.emptySurveyText), 3)) : m("", !0)
           ], 2)
         ]),
         y(d, {
@@ -4793,9 +4807,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           model: o.value.notifier
         }, null, 8, ["model"])
       ], 2)
-    ], 14, _t));
+    ], 14, ei));
   }
-}), li = /* @__PURE__ */ h({
+}), ui = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
@@ -4809,14 +4823,14 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       role: "alert",
       "aria-live": "polite"
     }, [
-      v("span", null, R(n.model.message), 1),
+      v("span", null, T(n.model.message), 1),
       y(d, {
         is: "sv-action-bar",
         model: n.model.actionBar
       }, null, 8, ["model"])
     ], 6)) : m("", !0);
   }
-}), ai = { key: 0 }, ui = /* @__PURE__ */ h({
+}), di = { key: 0 }, mi = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {}
@@ -4825,14 +4839,14 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     return (e, n) => (i(), l("div", {
       class: r(e.question.getCommentAreaCss(!0))
     }, [
-      e.question.isReadOnlyRenderDiv() ? (i(), l("div", ai, R(e.question.otherValue), 1)) : (i(), g(d, {
+      e.question.isReadOnlyRenderDiv() ? (i(), l("div", di, T(e.question.otherValue), 1)) : (i(), g(d, {
         key: 1,
         is: "sv-text-area",
         model: e.question.otherTextAreaModel
       }, null, 8, ["model"]))
     ], 2));
   }
-}), di = ["disabled", "value", "title"], mi = /* @__PURE__ */ h({
+}), pi = ["disabled", "value", "title"], ci = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4848,7 +4862,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       title: s.item.getTooltip(),
       onMousedown: n,
       onClick: t[0] || (t[0] = (...o) => s.item.action && s.item.action(...o))
-    }, null, 42, di)) : m("", !0);
+    }, null, 42, pi)) : m("", !0);
   }
 }), Ce = /* @__PURE__ */ h({
   __name: "PopupSurvey",
@@ -4877,7 +4891,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     const q = O(
       () => e.survey,
       (c) => {
-        const C = new Ue(null, c);
+        const C = new Ke(null, c);
         e.isExpanded !== void 0 && (C.isExpanded = e.isExpanded), e.closeOnCompleteTimeout !== void 0 && (C.closeOnCompleteTimeout = e.closeOnCompleteTimeout), e.allowClose !== void 0 && (C.allowClose = e.allowClose), e.allowFullScreen !== void 0 && (C.allowFullScreen = e.allowFullScreen), C.isShowing = !0, n.value = C;
       },
       {
@@ -4904,7 +4918,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           n.value.isCollapsed && !!n.value.locTitle ? (i(), l("div", {
             key: 0,
             class: r(n.value.cssHeaderTitleCollapsed)
-          }, R(n.value.locTitle.renderedHtml), 3)) : m("", !0),
+          }, T(n.value.locTitle.renderedHtml), 3)) : m("", !0),
           v("div", {
             class: r(n.value.cssHeaderButtonsContainer)
           }, [
@@ -4964,7 +4978,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ], 2)
     ], 38)) : m("", !0);
   }
-}), pi = ["innerHTML"], ci = /* @__PURE__ */ h({
+}), vi = ["innerHTML"], qi = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -4987,7 +5001,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       t.value ? (i(), l("div", {
         key: 0,
         innerHTML: o.value
-      }, null, 8, pi)) : m("", !0),
+      }, null, 8, vi)) : m("", !0),
       s.value ? (i(), g(d, {
         key: 1,
         is: a.value,
@@ -4996,12 +5010,12 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["is", "question", "css"])) : m("", !0)
     ], 512));
   }
-}), vi = /* @__PURE__ */ h({
+}), gi = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(u) {
     const e = V();
     function n(t, o, a, p, q, c, C = "popup") {
-      const B = Ke(
+      const B = Qe(
         t,
         o,
         a,
@@ -5015,7 +5029,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       return s(B);
     }
     function s(t, o) {
-      const a = Qe(
+      const a = je(
         t,
         o
       ), p = (q, c) => {
@@ -5027,7 +5041,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       z.showModal = void 0;
     })), z.showDialog || (z.showDialog = s, F(() => {
       z.showDialog = void 0;
-    })), (t, o) => e.value ? (i(), g(Ae, {
+    })), (t, o) => e.value ? (i(), g(Le, {
       key: 0,
       to: e.value.container
     }, [
@@ -5037,7 +5051,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["model"])
     ], 8, ["to"])) : m("", !0);
   }
-}), qi = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], yi = /* @__PURE__ */ h({
+}), yi = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], hi = /* @__PURE__ */ h({
   __name: "TextArea",
   props: {
     model: {}
@@ -5048,7 +5062,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     ), s = w(() => e.model.getTextValue() || "");
     return P(() => {
       e.model.setElement(n.value);
-    }), G(() => {
+    }), Z(() => {
       e.model.setElement(n.value);
     }), F(() => {
       e.model.dispose();
@@ -5086,9 +5100,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       "aria-invalid": t.model.ariaInvalid,
       "aria-errormessage": t.model.ariaErrormessage,
       style: S({ resize: t.model.question.resizeStyle })
-    }, null, 46, qi));
+    }, null, 46, yi));
   }
-}), gi = /* @__PURE__ */ h({
+}), Ci = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -5098,9 +5112,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
     const e = u;
     return D(() => e.counter), (n, s) => (i(), l("div", {
       class: r(n.remainingCharacterCounter)
-    }, R(n.counter.remainingCharacterCounter), 3));
+    }, T(n.counter.remainingCharacterCounter), 3));
   }
-}), hi = /* @__PURE__ */ h({
+}), bi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -5119,7 +5133,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       css: t.css
     }, null, 8, ["element", "css"]));
   }
-}), Ci = /* @__PURE__ */ h({
+}), ki = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -5137,9 +5151,9 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       css: o.css
     }, null, 8, ["is", "question", "css"]));
   }
-}), bi = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), ki = [
-  bi
-], pe = 440, fi = /* @__PURE__ */ h({
+}), fi = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), wi = [
+  fi
+], pe = 440, Ii = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -5155,29 +5169,29 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         key: 0,
         class: r(t.model.getProgressCss()),
         style: S({ strokeDasharray: pe, strokeDashoffset: n.value })
-      }, ki, 6)) : m("", !0),
+      }, wi, 6)) : m("", !0),
       v("div", {
         class: r(t.model.textContainerCss)
       }, [
         v("span", {
           class: r(t.model.majorTextCss)
-        }, R(t.model.clockMajorText), 3),
+        }, T(t.model.clockMajorText), 3),
         t.model.clockMinorText ? (i(), l("span", {
           key: 0,
           class: r(t.model.minorTextCss)
-        }, R(t.model.clockMinorText), 3)) : m("", !0)
+        }, T(t.model.clockMinorText), 3)) : m("", !0)
       ], 2)
     ], 2)) : A((i(), l("div", {
       key: 1,
       class: r(t.model.survey.getCss().timerRoot)
-    }, R(s.value), 3)), [
+    }, T(s.value), 3)), [
       [E, t.model.isRunning && !t.model.showTimerAsClock]
     ]);
   }
-}), wi = { class: "sd-loading-indicator" }, Ii = /* @__PURE__ */ h({
+}), Si = { class: "sd-loading-indicator" }, Ti = /* @__PURE__ */ h({
   __name: "LoadingIndicator",
   setup(u) {
-    return (e, n) => (i(), l("div", wi, [
+    return (e, n) => (i(), l("div", Si, [
       y(d, {
         is: "sv-svg-icon",
         iconName: "icon-loading",
@@ -5185,7 +5199,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       })
     ]));
   }
-}), Si = { key: 2 }, Ri = /* @__PURE__ */ h({
+}), Ri = { key: 2 }, $i = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -5211,13 +5225,13 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         class: r(n.model.contentClasses),
         style: S({ maxWidth: n.model.maxWidth })
       }, [
-        (i(!0), l(T, null, $(n.model.cells, (t, o) => (i(), g(d, {
+        (i(!0), l(R, null, $(n.model.cells, (t, o) => (i(), g(d, {
           is: "sv-header-cell",
           model: t,
           key: o
         }, null, 8, ["model"]))), 128))
       ], 6)),
-      n.survey.isMobile ? (i(), l("div", Si, [
+      n.survey.isMobile ? (i(), l("div", Ri, [
         y(d, {
           is: "sv-header-mobile",
           model: n.model
@@ -5225,10 +5239,10 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ])) : m("", !0)
     ], 6)) : m("", !0);
   }
-}), Ti = {
+}), Di = {
   key: 0,
   class: "sv-header__logo"
-}, $i = ["src", "width", "height", "alt"], Di = /* @__PURE__ */ h({
+}, Bi = ["src", "width", "height", "alt"], Ai = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -5242,7 +5256,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         class: "sv-header__cell-content",
         style: S(e.model.contentStyle)
       }, [
-        e.model.showLogo ? (i(), l("div", Ti, [
+        e.model.showLogo ? (i(), l("div", Di, [
           v("div", {
             class: r(e.model.survey.logoClassNames)
           }, [
@@ -5253,7 +5267,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
               height: e.model.survey.renderedLogoHeight,
               alt: e.model.survey.locTitle.renderedHtml,
               style: S({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-            }, null, 14, $i)
+            }, null, 14, Bi)
           ], 2)
         ])) : m("", !0),
         e.model.showTitle ? (i(), l("div", {
@@ -5285,17 +5299,17 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ], 4)
     ], 6));
   }
-}), Bi = { class: "sv-header--mobile" }, Ai = {
+}), Li = { class: "sv-header--mobile" }, Ni = {
   key: 0,
   class: "sv-header__logo"
-}, Li = ["src", "width", "height", "alt"], Ni = /* @__PURE__ */ h({
+}, Pi = ["src", "width", "height", "alt"], Mi = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
   },
   setup(u) {
-    return (e, n) => (i(), l("div", Bi, [
-      e.model.survey.hasLogo ? (i(), l("div", Ai, [
+    return (e, n) => (i(), l("div", Li, [
+      e.model.survey.hasLogo ? (i(), l("div", Ni, [
         v("div", {
           class: r(e.model.survey.logoClassNames)
         }, [
@@ -5306,7 +5320,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
             height: e.model.survey.renderedLogoHeight,
             alt: e.model.survey.locTitle.renderedHtml,
             style: S({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-          }, null, 14, Li)
+          }, null, 14, Pi)
         ], 2)
       ])) : m("", !0),
       e.model.survey.hasTitle ? (i(), l("div", {
@@ -5337,7 +5351,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ], 4)) : m("", !0)
     ]));
   }
-}), Pi = /* @__PURE__ */ h({
+}), Hi = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -5393,20 +5407,20 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["is", "element", "css"])) : m("", !0)
     ], 6));
   }
-}), Mi = /* @__PURE__ */ h({
+}), Ei = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
     componentData: {}
   },
   setup(u) {
-    const e = Le(), n = w(() => !!e.default);
+    const e = Ne(), n = w(() => !!e.default);
     return (s, t) => n.value && !s.componentName ? ve(s.$slots, "default", { key: 0 }) : (i(), g(d, M({
       key: 1,
       is: s.componentName
     }, s.componentData), null, 16, ["is"]));
   }
-}), Hi = /* @__PURE__ */ h({
+}), Wi = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5418,7 +5432,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       class: r(e.css),
       onClick: n[0] || (n[0] = (...s) => e.question.doClean && e.question.doClean(...s))
     }, [
-      v("span", null, R(e.question.clearButtonCaption), 1),
+      v("span", null, T(e.question.clearButtonCaption), 1),
       e.question.cssClasses.removeButtonIconId ? (i(), g(d, {
         key: 0,
         is: "sv-svg-icon",
@@ -5428,7 +5442,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["iconName", "title"])) : m("", !0)
     ], 2));
   }
-}), Ei = ["id"], Wi = /* @__PURE__ */ h({
+}), Fi = ["id"], Vi = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5450,14 +5464,14 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         playsinline: "",
         id: e.question.videoId,
         class: r(e.question.cssClasses.video)
-      }, null, 10, Ei),
+      }, null, 10, Fi),
       y(d, {
         is: "sv-action",
         item: e.question.takePictureAction
       }, null, 8, ["item"])
     ], 2));
   }
-}), Fi = ["for", "aria-label"], Vi = /* @__PURE__ */ h({
+}), Oi = ["for", "aria-label"], zi = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -5484,12 +5498,12 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         iconName: n.value.cssClasses.chooseFileIconId,
         size: "auto"
       }, null, 8, ["title", "iconName"])) : m("", !0),
-      v("span", null, R(n.value.chooseButtonText), 1)
-    ], 10, Fi)), [
+      v("span", null, T(n.value.chooseButtonText), 1)
+    ], 10, Oi)), [
       [k(j)]
     ]);
   }
-}), Oi = ["onClick", "href", "title", "download"], zi = ["src"], Ui = ["onClick"], Ki = ["onClick", "href", "title", "download"], Qi = /* @__PURE__ */ h({
+}), Ui = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5499,78 +5513,21 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       key: 0,
       class: r(e.question.cssClasses.fileList || void 0)
     }, [
-      (i(!0), l(T, null, $(e.question.previewValue, (s, t) => A((i(), l("span", {
-        key: e.question.inputId + "_" + t,
-        class: r(e.question.cssClasses.previewItem),
-        onClick: n[0] || (n[0] = (o) => e.question.doDownloadFileFromContainer(o))
-      }, [
-        s.name && e.question.cssClasses.fileSign ? (i(), l("div", {
-          key: 0,
-          class: r(e.question.cssClasses.fileSign)
-        }, [
-          v("a", {
-            onClick: (o) => e.question.doDownloadFile(o, s),
-            href: s.content,
-            title: s.name,
-            download: s.name,
-            style: S({ width: e.question.imageWidth })
-          }, R(s.name), 13, Oi)
-        ], 2)) : m("", !0),
-        v("div", {
-          class: r(e.question.getImageWrapperCss(s))
-        }, [
-          e.question.canPreviewImage(s) ? (i(), l("img", {
-            key: 0,
-            src: s.content,
-            style: S({
-              height: e.question.imageHeight,
-              width: e.question.imageWidth
-            }),
-            alt: "File preview"
-          }, null, 12, zi)) : m("", !0),
-          e.question.defaultImage(s) ? (i(), g(d, {
-            key: 1,
-            is: "sv-svg-icon",
-            iconName: e.question.cssClasses.defaultImageIconId,
-            class: r(e.question.cssClasses.defaultImage),
-            size: "auto"
-          }, null, 8, ["iconName", "class"])) : m("", !0),
-          s.name && !e.question.isReadOnly ? (i(), l("div", {
-            key: 2,
-            class: r(e.question.getRemoveButtonCss()),
-            onClick: (o) => e.question.doRemoveFile(s, o)
-          }, [
-            v("span", {
-              class: r(e.question.cssClasses.removeFile)
-            }, R(e.question.removeFileCaption), 3),
-            e.question.cssClasses.removeFileSvgIconId ? (i(), g(d, {
-              key: 0,
-              is: "sv-svg-icon",
-              title: e.question.removeFileCaption,
-              class: r(e.question.cssClasses.removeFileSvg),
-              iconName: e.question.cssClasses.removeFileSvgIconId,
-              size: "auto"
-            }, null, 8, ["title", "class", "iconName"])) : m("", !0)
-          ], 10, Ui)) : m("", !0)
-        ], 2),
-        s.name && e.question.cssClasses.fileSignBottom ? (i(), l("div", {
-          key: 1,
-          class: r(e.question.cssClasses.fileSignBottom)
-        }, [
-          v("a", {
-            onClick: (o) => e.question.doDownloadFile(o, s),
-            href: s.content,
-            title: s.name,
-            download: s.name,
-            style: S({ width: e.question.imageWidth })
-          }, R(s.name), 13, Ki)
-        ], 2)) : m("", !0)
-      ], 2)), [
-        [E, s && e.question.isPreviewVisible(t)]
-      ])), 128))
+      e.question.supportFileNavigator ? (i(!0), l(R, { key: 0 }, $(e.question.renderedPages, (s) => (i(), g(d, {
+        is: "sv-file-page",
+        key: s.id,
+        page: s,
+        question: e.question
+      }, null, 8, ["page", "question"]))), 128)) : m("", !0),
+      e.question.supportFileNavigator ? m("", !0) : (i(!0), l(R, { key: 1 }, $(e.question.previewValue, (s) => (i(), g(d, {
+        is: "sv-file-item",
+        key: s,
+        item: s,
+        question: e.question
+      }, null, 8, ["item", "question"]))), 128))
     ], 2)) : m("", !0);
   }
-}), ji = /* @__PURE__ */ h({
+}), Ki = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -5583,7 +5540,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), l(T, null, $(s.question.visibleChoices, (o, a) => (i(), g(d, {
+      (i(!0), l(R, null, $(s.question.visibleChoices, (o, a) => (i(), g(d, {
         is: "sv-button-group-item",
         question: s.question,
         key: a,
@@ -5592,7 +5549,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       }, null, 8, ["question", "item", "index"]))), 128))
     ], 2));
   }
-}), Gi = ["title"], Ji = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Xi = ["title"], Yi = /* @__PURE__ */ h({
+}), Qi = ["title"], ji = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Gi = ["title"], Ji = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5601,7 +5558,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u, n = w(
-      () => new je(e.question, e.item, e.index)
+      () => new Ge(e.question, e.item, e.index)
     ), s = w({
       get: () => e.question.renderedValue,
       set: (t) => {
@@ -5627,7 +5584,7 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
         class: r(n.value.css.control),
         "onUpdate:modelValue": o[0] || (o[0] = (a) => s.value = a),
         value: n.value.value
-      }, null, 10, Ji), [
+      }, null, 10, ji), [
         [Y, s.value]
       ]),
       v("div", {
@@ -5649,11 +5606,11 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
             is: "survey-string",
             locString: n.value.caption
           }, null, 8, ["locString"])
-        ], 10, Xi)) : m("", !0)
+        ], 10, Gi)) : m("", !0)
       ], 2)
-    ], 10, Gi));
+    ], 10, Qi));
   }
-}), Zi = ["src", "width", "height", "alt"], _i = /* @__PURE__ */ h({
+}), Xi = ["src", "width", "height", "alt"], Yi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
@@ -5675,15 +5632,15 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight
         })
-      }, null, 14, Zi)
+      }, null, 14, Xi)
     ], 2));
   }
-}), xi = /* @__PURE__ */ h({
+}), Zi = /* @__PURE__ */ h({
   __name: "SvgBundle",
   setup(u) {
     const e = I();
     return P(() => {
-      e.value.innerHTML = Ge.iconsRenderedHtml();
+      e.value.innerHTML = Je.iconsRenderedHtml();
     }), (n, s) => A((i(), l("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
@@ -5692,22 +5649,118 @@ const mt = /* @__PURE__ */ it(rt, [["render", dt]]), pt = /* @__PURE__ */ v("use
       [E, !1]
     ]);
   }
+}), _i = ["id"], xi = /* @__PURE__ */ h({
+  __name: "FilePage",
+  props: {
+    page: {},
+    question: {}
+  },
+  setup(u) {
+    const e = u;
+    return D(() => e.page), (n, s) => (i(), l("div", {
+      class: r(n.page.css),
+      id: n.page.id
+    }, [
+      (i(!0), l(R, null, $(n.page.items, (t) => (i(), g(d, {
+        is: "sv-file-item",
+        key: t,
+        item: t,
+        question: n.question
+      }, null, 8, ["item", "question"]))), 128))
+    ], 10, _i));
+  }
+}), er = ["href", "title", "download"], sr = ["src"], nr = ["href", "title", "download"], or = /* @__PURE__ */ h({
+  __name: "FileItem",
+  props: {
+    item: {},
+    question: {}
+  },
+  setup(u) {
+    return (e, n) => A((i(), l("span", {
+      class: r(e.question.cssClasses.previewItem),
+      onClick: n[3] || (n[3] = (s) => e.question.doDownloadFileFromContainer(s))
+    }, [
+      e.item.name && e.question.cssClasses.fileSign ? (i(), l("div", {
+        key: 0,
+        class: r(e.question.cssClasses.fileSign)
+      }, [
+        v("a", {
+          onClick: n[0] || (n[0] = (s) => e.question.doDownloadFile(s, e.item)),
+          href: e.item.content,
+          title: e.item.name,
+          download: e.item.name,
+          style: S({ width: e.question.imageWidth })
+        }, T(e.item.name), 13, er)
+      ], 2)) : m("", !0),
+      v("div", {
+        class: r(e.question.getImageWrapperCss(e.item))
+      }, [
+        e.question.canPreviewImage(e.item) ? (i(), l("img", {
+          key: 0,
+          src: e.item.content,
+          style: S({
+            height: e.question.imageHeight,
+            width: e.question.imageWidth
+          }),
+          alt: "File preview"
+        }, null, 12, sr)) : m("", !0),
+        e.question.defaultImage(e.item) ? (i(), g(d, {
+          key: 1,
+          is: "sv-svg-icon",
+          iconName: e.question.cssClasses.defaultImageIconId,
+          class: r(e.question.cssClasses.defaultImage),
+          size: "auto"
+        }, null, 8, ["iconName", "class"])) : m("", !0),
+        e.item.name && !e.question.isReadOnly ? (i(), l("div", {
+          key: 2,
+          class: r(e.question.getRemoveButtonCss()),
+          onClick: n[1] || (n[1] = (s) => e.question.doRemoveFile(e.item, s))
+        }, [
+          v("span", {
+            class: r(e.question.cssClasses.removeFile)
+          }, T(e.question.removeFileCaption), 3),
+          e.question.cssClasses.removeFileSvgIconId ? (i(), g(d, {
+            key: 0,
+            is: "sv-svg-icon",
+            title: e.question.removeFileCaption,
+            class: r(e.question.cssClasses.removeFileSvg),
+            iconName: e.question.cssClasses.removeFileSvgIconId,
+            size: "auto"
+          }, null, 8, ["title", "class", "iconName"])) : m("", !0)
+        ], 2)) : m("", !0)
+      ], 2),
+      e.item.name && e.question.cssClasses.fileSignBottom ? (i(), l("div", {
+        key: 1,
+        class: r(e.question.cssClasses.fileSignBottom)
+      }, [
+        v("a", {
+          onClick: n[2] || (n[2] = (s) => e.question.doDownloadFile(s, e.item)),
+          href: e.item.content,
+          title: e.item.name,
+          download: e.item.name,
+          style: S({ width: e.question.imageWidth })
+        }, T(e.item.name), 13, nr)
+      ], 2)) : m("", !0)
+    ], 2)), [
+      [E, e.item]
+    ]);
+  }
 });
-Je.platform = "vue3";
-function er(u, e, n) {
+Xe.platform = "vue3";
+function tr(u, e, n) {
   u(e, n);
 }
 function be(u) {
-  const e = er.bind(
+  const e = tr.bind(
     void 0,
     u
   );
-  e("sv-svg-bundle", xi), e("popup-survey", Ce), e("survey-header", Ze), e("sv-logo-image", _i), e("survey-page", Ye), e("survey-row", _e), e("survey-question", ns), e("survey-panel", rs), e("survey-element-header", as), e("survey-string", us), e("sv-string-viewer", ms), e("sv-string-editor", cs), e("sv-skeleton", qs), e("survey-text", hs), e("survey-text-input", ks), e("survey-checkbox", Rs), e("survey-checkbox-item", Ds), e("survey-radiogroup", Bs), e("survey-radiogroup-item", Ns), e("survey-signaturepad", Es), e("survey-html", Fs), e("survey-image", Us), e("survey-expression", Ks), e("survey-file", Js), e("sv-file-choose-btn", Vi), e("sv-file-clean-btn", Hi), e("sv-file-preview", Qi), e("sv-file-video", Wi), e("survey-imagepicker", Ys), e("survey-imagepicker-item", sn), e("survey-comment", nn), e("survey-dropdown", on), e("sv-dropdown-select", an), e("sv-dropdown-option-item", dn), e("sv-dropdown", qn), e("survey-tagbox", yn), e("sv-tagbox", Cn), e("sv-tagbox-item", In), e("sv-tagbox-filter", fn), e("survey-ranking", Sn), e("survey-ranking-item", An), e("sv-ranking-item", Ln), e("survey-rating", Mn), e("sv-rating-item", Wn), e("sv-rating-item-smiley", Vn), e("sv-rating-item-star", zn), e("sv-rating-dropdown", Gn), e("sv-rating-dropdown-item", jn), e("survey-boolean", Xn), e("sv-boolean-radio", Yn), e("sv-boolean-radio-item", xn), e("sv-boolean-checkbox", io), e("survey-multipletext", ro), e("survey-multipletext-item", ao), e("survey-matrix", qo), e("survey-matrix-row", go), e("survey-matrix-cell", bo), e("survey-matrixdropdown", ko), e("survey-matrixtable", Io), e("survey-matrixheaderrequired", Ro), e("survey-matrixdropdown-cell", $o), e("survey-matrixdynamic", Do), e("sv-matrix-remove-button", Ao), e("sv-matrix-drag-drop-icon", No), e("sv-matrix-detail-button", Mo), e("survey-paneldynamic", Ho), e("survey-paneldynamicprogress", Eo), e("survey-paneldynamicprogress-v2", Wo), e("sv-paneldynamic-add-btn", Vo), e("sv-paneldynamic-next-btn", zo), e("sv-paneldynamic-prev-btn", Ko), e("sv-paneldynamic-remove-btn", Qo), e("sv-paneldynamic-progress-text", jo), e("sv-components-container", Kt), e("sv-progress-buttons", Yt), e("sv-navigation-toc", Zt), e("sv-progress-pages", X), e("sv-progress-questions", X), e("sv-progress-correctquestions", X), e("sv-progress-requiredquestions", X), e("survey-errors", Jo), e("survey-question-comment", Yo), e("survey-element-title", Zo), e("survey-element-title-content", st), e("sv-title-actions", tt), e("sv-brand-info", mt), e("sv-question-error", qt), e("sv-svg-icon", vt), e("sv-action-bar", yt), e("sv-action", Ct), e("sv-action-bar-item", ft), e("sv-action-bar-item-dropdown", St), e("sv-action-bar-separator", Rt), e("sv-list", Bt), e("sv-list-item-content", Pt), e("sv-list-item-group", Mt), e("sv-list-item", Nt), e("sv-popup", Ht), e("sv-popup-container", zt), e("popup-pointer", Ut), e("sv-notifier", li), e("survey-other-choice", ui), e("sv-nav-btn", mi), e("survey-customwidget", ci), e("survey-popup-modal", vi), e("survey-composite", hi), e("survey-custom", Ci), e("sv-timerpanel", fi), e("sv-loading-indicator", Ii), e("sv-header", Ri), e("sv-header-cell", Di), e("sv-header-mobile", Ni), e("sv-template-renderer", Mi), e("sv-character-counter", gi), e("sv-text-area", yi), e("survey-element", Pi), e("survey-buttongroup", ji), e("sv-button-group-item", Yi), e("survey", te);
+  e("sv-svg-bundle", Zi), e("popup-survey", Ce), e("survey-header", xe), e("sv-logo-image", Yi), e("survey-page", _e), e("survey-row", es), e("survey-question", ts), e("survey-panel", as), e("survey-element-header", ds), e("survey-string", ms), e("sv-string-viewer", cs), e("sv-string-editor", qs), e("sv-skeleton", ys), e("survey-text", bs), e("survey-text-input", ws), e("survey-checkbox", $s), e("survey-checkbox-item", As), e("survey-radiogroup", Ls), e("survey-radiogroup-item", Ms), e("survey-signaturepad", Fs), e("survey-html", Os), e("survey-image", Qs), e("survey-expression", js), e("survey-file", Ys), e("sv-file-choose-btn", zi), e("sv-file-clean-btn", Wi), e("sv-file-preview", Ui), e("sv-file-page", xi), e("sv-file-item", or), e("sv-file-video", Vi), e("survey-imagepicker", _s), e("survey-imagepicker-item", on), e("survey-comment", tn), e("survey-dropdown", rn), e("sv-dropdown-select", dn), e("sv-dropdown-option-item", pn), e("sv-dropdown", yn), e("survey-tagbox", hn), e("sv-tagbox", kn), e("sv-tagbox-item", Tn), e("sv-tagbox-filter", In), e("survey-ranking", Rn), e("survey-ranking-item", Nn), e("sv-ranking-item", Pn), e("survey-rating", En), e("sv-rating-item", Vn), e("sv-rating-item-smiley", zn), e("sv-rating-item-star", Kn), e("sv-rating-dropdown", Xn), e("sv-rating-dropdown-item", Jn), e("survey-boolean", Zn), e("sv-boolean-radio", _n), e("sv-boolean-radio-item", so), e("sv-boolean-checkbox", lo), e("survey-multipletext", ao), e("survey-multipletext-item", mo), e("survey-matrix", yo), e("survey-matrix-row", Co), e("survey-matrix-cell", fo), e("survey-matrixdropdown", wo), e("survey-matrixtable", To), e("survey-matrixheaderrequired", $o), e("survey-matrixdropdown-cell", Bo), e("survey-matrixdynamic", Ao), e("sv-matrix-remove-button", No), e("sv-matrix-drag-drop-icon", Mo), e("sv-matrix-detail-button", Eo), e("survey-paneldynamic", Wo), e("survey-paneldynamicprogress", Fo), e("survey-paneldynamicprogress-v2", Vo), e("sv-paneldynamic-add-btn", zo), e("sv-paneldynamic-next-btn", Ko), e("sv-paneldynamic-prev-btn", jo), e("sv-paneldynamic-remove-btn", Go), e("sv-paneldynamic-progress-text", Jo), e("sv-components-container", jt), e("sv-progress-buttons", _t), e("sv-navigation-toc", xt), e("sv-progress-pages", X), e("sv-progress-questions", X), e("sv-progress-correctquestions", X), e("sv-progress-requiredquestions", X), e("survey-errors", Yo), e("survey-question-comment", _o), e("survey-element-title", xo), e("survey-element-title-content", ot), e("sv-title-actions", rt), e("sv-brand-info", ct), e("sv-question-error", yt), e("sv-svg-icon", gt), e("sv-action-bar", ht), e("sv-action", kt), e("sv-action-bar-item", It), e("sv-action-bar-item-dropdown", Rt), e("sv-action-bar-separator", $t), e("sv-list", Lt), e("sv-list-item-content", Ht), e("sv-list-item-group", Et), e("sv-list-item", Mt), e("sv-popup", Wt), e("sv-popup-container", Kt), e("popup-pointer", Qt), e("sv-notifier", ui), e("survey-other-choice", mi), e("sv-nav-btn", ci), e("survey-customwidget", qi), e("survey-popup-modal", gi), e("survey-composite", bi), e("survey-custom", ki), e("sv-timerpanel", Ii), e("sv-loading-indicator", Ti), e("sv-header", $i), e("sv-header-cell", Ai), e("sv-header-mobile", Mi), e("sv-template-renderer", Ei), e("sv-character-counter", Ci), e("sv-text-area", hi), e("survey-element", Hi), e("survey-buttongroup", Ki), e("sv-button-group-item", Ji), e("survey", te);
 }
 be(
   (u, e) => U.Instance.registerComponent(u, e)
 );
-const tr = {
+const ar = {
   install(u) {
     u.component("SurveyComponent", te), u.component("PopupSurveyComponent", Ce), u.directive("key2click", j), be((e, n) => {
       u.component(e, n), U.Instance.registerComponent(e, e);
@@ -5720,9 +5773,9 @@ export {
   te as SurveyComponent,
   d as SvComponent,
   j as key2ClickDirective,
-  tr as surveyPlugin,
+  ar as surveyPlugin,
   D as useBase,
-  _ as useComputedArray,
+  x as useComputedArray,
   Q as useLocString,
   L as useQuestion
 };