survey-vue3-ui 1.9.124 → 1.9.126

package/survey-vue3-ui.es.js

@@ -1,17 +1,17 @@
-import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as H, ref as _, shallowRef as z, watchEffect as ke, triggerRef as ne, unref as f, isRef as fe, defineComponent as h, computed as w, onUpdated as x, resolveComponent as p, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as $, renderList as B, createBlock as q, resolveDynamicComponent as T, normalizeProps as F, mergeProps as W, withCtx as O, normalizeStyle as S, createElementVNode as c, onUnmounted as U, guardReactiveProps as oe, withDirectives as P, vShow as M, toDisplayString as R, vModelRadio as ee, vModelCheckbox as te, vModelSelect as Ie, vModelText as we, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
-import { Base as De, RendererFactory as se, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ge, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as de, SurveyProgressModel as me, SurveyProgressButtonsModel as He, TOCModel as We, PopupSurveyModel as Ee, settings as j, createDialogOptions as Ve, createPopupModalViewModel as Oe, ButtonGroupItemModel as Fe, SvgRegistry as ze, SurveyModel as Ue, doKey2ClickDown as Ke, doKey2ClickBlur as je } from "survey-core";
+import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as H, ref as _, shallowRef as z, watchEffect as ke, triggerRef as se, unref as f, isRef as fe, defineComponent as h, computed as w, resolveComponent as p, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as $, renderList as B, createBlock as g, resolveDynamicComponent as R, normalizeProps as O, mergeProps as W, withCtx as F, normalizeStyle as S, createElementVNode as c, onUnmounted as U, guardReactiveProps as ne, withDirectives as P, vShow as M, toDisplayString as T, vModelRadio as x, vModelCheckbox as oe, vModelSelect as Ie, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
+import { Base as De, RendererFactory as ee, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ge, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as de, SurveyProgressModel as me, SurveyProgressButtonsModel as He, PopupSurveyModel as We, settings as j, createDialogOptions as Ee, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
 De.createPropertiesHash = () => be({});
-function Qe(r) {
+function je(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (s, o) => {
     const e = [], n = z(e);
     return e.onArrayChanged = () => {
-      ne(n);
+      se(n);
     }, s[o] = n, f(s[o]);
   }, r.iteratePropertiesHash((s, o) => {
     if (Array.isArray(s[o])) {
       const e = z(s[o]);
       s[o].onArrayChanged = () => {
-        ne(e);
+        se(e);
       }, s[o] = e;
     }
   }), r.getPropertyValueCoreHandler = (s, o) => f(s[o]), r.setPropertyValueCoreHandler = (s, o, e) => {
@@ -28,7 +28,7 @@ function L(r, s, o) {
   const n = J(
     r,
     (t, a) => {
-      t && s && s(t, a), a && (ce(a, e), o && o(a)), e = Qe(t);
+      t && s && s(t, a), a && (ce(a, e), o && o(a)), e = je(t);
     },
     {
       immediate: !0
@@ -68,13 +68,13 @@ function re(r) {
 }
 function le(r) {
   const s = z(), o = ke(() => {
-    s.value = r(), ne(s);
+    s.value = r(), se(s);
   });
   return Q(() => {
     o();
   }), s;
 }
-const Ge = /* @__PURE__ */ h({
+const Qe = /* @__PURE__ */ h({
   __name: "Page",
   props: {
     survey: {},
@@ -82,44 +82,49 @@ const Ge = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    L(() => s.page);
-    const e = w(() => s.page._showDescription);
+    const s = r, o = _(null), e = () => {
+      s.survey && o.value && s.survey.afterRenderPage(o.value);
+    };
+    L(
+      () => s.page,
+      () => {
+        e();
+      }
+    );
+    const n = w(() => s.page._showDescription);
     return H(() => {
-      s.survey && s.survey.afterRenderPage(o.value);
-    }), x(() => {
-      s.survey.afterRenderPage(o.value);
-    }), (n, t) => {
-      const a = p("survey-element-title"), y = p("survey-string"), m = p("survey-errors"), v = p("survey-row");
+      e();
+    }), (t, a) => {
+      const y = p("survey-element-title"), m = p("survey-string"), q = p("survey-errors"), v = p("survey-row");
       return i(), u("div", {
-        class: l(n.page.cssRoot),
+        class: l(t.page.cssRoot),
         ref_key: "root",
         ref: o
       }, [
-        C(a, {
-          element: n.page,
-          css: n.css
+        C(y, {
+          element: t.page,
+          css: t.css
         }, null, 8, ["element", "css"]),
-        e.value ? (i(), u("div", {
+        n.value ? (i(), u("div", {
           key: 0,
-          class: l(n.page.cssClasses.page.description)
+          class: l(t.page.cssClasses.page.description)
         }, [
-          C(y, {
-            locString: n.page.locDescription
+          C(m, {
+            locString: t.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : d("", !0),
-        C(m, { element: n.page }, null, 8, ["element"]),
-        (i(!0), u($, null, B(n.page.rows, (g, I) => (i(), q(T(n.page.getSurvey().getRowWrapperComponentName(g)), F(W({
-          key: n.page.id + "_" + I
+        C(q, { element: t.page }, null, 8, ["element"]),
+        (i(!0), u($, null, B(t.page.rows, (I, b) => (i(), g(R(t.page.getSurvey().getRowWrapperComponentName(I)), O(W({
+          key: t.page.id + "_" + b
         }, {
-          componentData: n.page.getSurvey().getRowWrapperComponentData(g)
+          componentData: t.page.getSurvey().getRowWrapperComponentData(I)
         })), {
-          default: O(() => [
-            g.visible ? (i(), q(v, {
+          default: F(() => [
+            I.visible ? (i(), g(v, {
               key: 0,
-              row: g,
-              survey: n.survey,
-              css: n.css
+              row: I,
+              survey: t.survey,
+              css: t.css
             }, null, 8, ["row", "survey", "css"])) : d("", !0)
           ]),
           _: 2
@@ -127,7 +132,7 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Je = /* @__PURE__ */ h({
+}), Ge = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     survey: {}
@@ -145,7 +150,7 @@ const Ge = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        e.survey.isLogoBefore ? (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
+        e.survey.isLogoBefore ? (i(), g(R(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 0,
           data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
         }, null, 8, ["data"])) : d("", !0),
@@ -167,7 +172,7 @@ const Ge = /* @__PURE__ */ h({
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
         ], 6)) : d("", !0),
-        e.survey.isLogoAfter ? (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
+        e.survey.isLogoAfter ? (i(), g(R(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 2,
           data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
         }, null, 8, ["data"])) : d("", !0),
@@ -177,7 +182,7 @@ const Ge = /* @__PURE__ */ h({
       ], 2)) : d("", !0);
     };
   }
-}), Xe = /* @__PURE__ */ h({
+}), Je = /* @__PURE__ */ h({
   __name: "Row",
   props: {
     row: {},
@@ -210,7 +215,7 @@ const Ge = /* @__PURE__ */ h({
         ref_key: "root",
         ref: e
       }, [
-        (i(!0), u($, null, B(o.value, (y) => (i(), q(a, {
+        (i(!0), u($, null, B(o.value, (y) => (i(), g(a, {
           row: n.row,
           css: n.css,
           element: y,
@@ -219,10 +224,10 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ye = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-expanded", "data-name"], Ze = {
+}), Xe = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-expanded", "data-name"], Ye = {
   inheritAttrs: !1
-}, xe = /* @__PURE__ */ h({
-  ...Ze,
+}, Ze = /* @__PURE__ */ h({
+  ...Ye,
   __name: "Question",
   props: {
     survey: {},
@@ -239,7 +244,7 @@ const Ge = /* @__PURE__ */ h({
       () => {
         y();
       }
-    ), v = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), g = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), I = w(() => ({
+    ), q = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), v = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), I = w(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
@@ -263,28 +268,28 @@ const Ge = /* @__PURE__ */ h({
         "aria-expanded": b.element.ariaExpanded === null ? void 0 : b.element.ariaExpanded === "true",
         "data-name": b.element.name
       }, [
-        b.element.showErrorsAboveQuestion ? (i(), q(k, {
+        b.element.showErrorsAboveQuestion ? (i(), g(k, {
           key: 0,
           element: b.element,
           location: "top"
         }, null, 8, ["element"])) : d("", !0),
-        b.element.hasTitleOnLeftTop ? (i(), q(D, {
+        b.element.hasTitleOnLeftTop ? (i(), g(D, {
           key: 1,
           element: b.element,
           css: b.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        (i(), q(T(g.value), F(oe(I.value)), {
-          default: O(() => [
+        (i(), g(R(v.value), O(ne(I.value)), {
+          default: F(() => [
             P(c("div", {
               class: l(t(b.element) || void 0),
               role: "presentation"
             }, [
-              e.value ? (i(), q(k, {
+              e.value ? (i(), g(k, {
                 key: 0,
                 element: b.element,
                 location: "top"
               }, null, 8, ["element"])) : d("", !0),
-              b.element.isCollapsed ? d("", !0) : (i(), q(T(v.value), {
+              b.element.isCollapsed ? d("", !0) : (i(), g(R(q.value), {
                 key: 1,
                 question: b.element
               }, null, 8, ["question"])),
@@ -299,7 +304,7 @@ const Ge = /* @__PURE__ */ h({
                 ]),
                 C(V, { question: b.element }, null, 8, ["question"])
               ], 2)) : d("", !0),
-              n.value ? (i(), q(k, {
+              n.value ? (i(), g(k, {
                 key: 3,
                 element: b.element,
                 location: "bottom"
@@ -318,23 +323,23 @@ const Ge = /* @__PURE__ */ h({
           ]),
           _: 1
         }, 16)),
-        b.element.hasTitleOnBottom ? (i(), q(D, {
+        b.element.hasTitleOnBottom ? (i(), g(D, {
           key: 2,
           element: b.element,
           css: b.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        b.element.showErrorsBelowQuestion ? (i(), q(k, {
+        b.element.showErrorsBelowQuestion ? (i(), g(k, {
           key: 3,
           element: b.element,
           location: "bottom"
         }, null, 8, ["element"])) : d("", !0)
-      ], 46, Ye);
+      ], 46, Xe);
     };
   }
-}), es = ["id"], ss = ["id"], ns = {
+}), xe = ["id"], es = ["id"], ss = {
   inheritAttrs: !1
-}, os = /* @__PURE__ */ h({
-  ...ns,
+}, ns = /* @__PURE__ */ h({
+  ...ss,
   inheritAttrs: !1,
   __name: "Panel",
   props: {
@@ -347,25 +352,25 @@ const Ge = /* @__PURE__ */ h({
     return L(() => s.element), H(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, o.value);
     }), (n, t) => {
-      const a = p("survey-errors"), y = p("survey-element-header"), m = p("survey-row"), v = p("sv-action-bar");
+      const a = p("survey-errors"), y = p("survey-element-header"), m = p("survey-row"), q = p("sv-action-bar");
       return n.element.isVisible ? (i(), u("div", {
         key: 0,
         class: l(n.element.getContainerCss()),
         id: n.element.id,
-        onFocusin: t[0] || (t[0] = (g) => n.element.focusIn()),
+        onFocusin: t[0] || (t[0] = (v) => n.element.focusIn()),
         ref_key: "root",
         ref: o
       }, [
-        n.element.showErrorsAbovePanel ? (i(), q(a, {
+        n.element.showErrorsAbovePanel ? (i(), g(a, {
           key: 0,
           element: n.element
         }, null, 8, ["element"])) : d("", !0),
-        n.element.hasTitle || n.element.hasDescription ? (i(), q(y, {
+        n.element.hasTitle || n.element.hasDescription ? (i(), g(y, {
           key: 1,
           element: n.element,
           css: n.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        n.element.showErrorsAbovePanel ? d("", !0) : (i(), q(a, {
+        n.element.showErrorsAbovePanel ? d("", !0) : (i(), g(a, {
           key: 2,
           element: n.element
         }, null, 8, ["element"])),
@@ -375,29 +380,29 @@ const Ge = /* @__PURE__ */ h({
           style: S({ paddingLeft: n.element.innerPaddingLeft }),
           class: l(n.element.cssClasses.panel.content)
         }, [
-          (i(!0), u($, null, B(n.element.rows, (g, I) => (i(), q(T(n.element.getSurvey().getRowWrapperComponentName(g)), F(W({
+          (i(!0), u($, null, B(n.element.rows, (v, I) => (i(), g(R(n.element.getSurvey().getRowWrapperComponentName(v)), O(W({
             key: n.element.id + "_" + I
           }, {
-            componentData: n.element.getSurvey().getRowWrapperComponentData(g)
+            componentData: n.element.getSurvey().getRowWrapperComponentData(v)
           })), {
-            default: O(() => [
-              g.visible ? (i(), q(m, {
+            default: F(() => [
+              v.visible ? (i(), g(m, {
                 key: 0,
-                row: g,
+                row: v,
                 survey: e.value,
                 css: n.css
               }, null, 8, ["row", "survey", "css"])) : d("", !0)
             ]),
             _: 2
           }, 1040))), 128)),
-          C(v, {
+          C(q, {
             model: n.element.getFooterToolbar()
           }, null, 8, ["model"])
-        ], 14, ss))
-      ], 42, es)) : d("", !0);
+        ], 14, es))
+      ], 42, xe)) : d("", !0);
     };
   }
-}), ts = /* @__PURE__ */ h({
+}), os = /* @__PURE__ */ h({
   __name: "ElementHeader",
   props: {
     element: {},
@@ -427,27 +432,27 @@ const Ge = /* @__PURE__ */ h({
         ], 2)), [
           [M, e.element.hasDescription]
         ]) : d("", !0),
-        e.element.additionalTitleToolbar ? (i(), q(y, {
+        e.element.additionalTitleToolbar ? (i(), g(y, {
           key: 1,
           model: e.element.additionalTitleToolbar
         }, null, 8, ["model"])) : d("", !0)
       ], 2);
     };
   }
-}), is = /* @__PURE__ */ h({
+}), ts = /* @__PURE__ */ h({
   __name: "String",
   props: {
     locString: {}
   },
   setup(r) {
-    return (s, o) => (i(), q(T(s.locString.renderAs), {
+    return (s, o) => (i(), g(R(s.locString.renderAs), {
       locString: s.locString.renderAsData
     }, null, 8, ["locString"]));
   }
-}), rs = ["innerHTML"], ls = {
+}), is = ["innerHTML"], rs = {
   key: 1,
   class: "sv-string-viewer"
-}, as = /* @__PURE__ */ h({
+}, ls = /* @__PURE__ */ h({
   __name: "StringViewer",
   props: {
     locString: {}
@@ -458,9 +463,9 @@ const Ge = /* @__PURE__ */ h({
       key: 0,
       class: "sv-string-viewer",
       innerHTML: f(o)
-    }, null, 8, rs)) : (i(), u("span", ls, R(f(o)), 1));
+    }, null, 8, is)) : (i(), u("span", rs, T(f(o)), 1));
   }
-}), us = ["innerHTML"], ds = /* @__PURE__ */ h({
+}), as = ["innerHTML"], us = /* @__PURE__ */ h({
   __name: "StringEditor",
   props: {
     locString: {}
@@ -479,15 +484,15 @@ const Ge = /* @__PURE__ */ h({
       innerHTML: n.locString.renderedHtml,
       onBlur: o,
       onClick: e
-    }, null, 40, us)) : (i(), u("span", {
+    }, null, 40, as)) : (i(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
       onBlur: o,
       onClick: e
-    }, R(n.locString.renderedHtml), 33));
+    }, T(n.locString.renderedHtml), 33));
   }
-}), ms = ["id"], cs = /* @__PURE__ */ h({
+}), ds = ["id"], ms = /* @__PURE__ */ h({
   __name: "Skeleton",
   props: {
     element: {}
@@ -497,9 +502,9 @@ const Ge = /* @__PURE__ */ h({
     return L(() => s.element), (o, e) => (i(), u("div", {
       class: "sv-skeleton-element",
       id: o.element.id
-    }, null, 8, ms));
+    }, null, 8, ds));
   }
-}), ps = ["id"], vs = ["value"], ys = /* @__PURE__ */ h({
+}), cs = ["id"], ps = ["value"], vs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Text",
   props: {
@@ -513,7 +518,7 @@ const Ge = /* @__PURE__ */ h({
         key: 0,
         ref_key: "root",
         ref: o
-      }, R(e.question.value), 513)) : e.question.dataListId ? (i(), u("div", {
+      }, T(e.question.value), 513)) : e.question.dataListId ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: o
@@ -522,9 +527,9 @@ const Ge = /* @__PURE__ */ h({
         c("datalist", {
           id: e.question.dataListId
         }, [
-          (i(!0), u($, null, B(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, vs))), 256))
-        ], 8, ps)
-      ], 512)) : (i(), q(t, {
+          (i(!0), u($, null, B(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, ps))), 256))
+        ], 8, cs)
+      ], 512)) : (i(), g(t, {
         key: 2,
         question: e.question,
         ref_key: "root",
@@ -532,7 +537,7 @@ const Ge = /* @__PURE__ */ h({
       }, null, 8, ["question"]));
     };
   }
-}), qs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], gs = { key: 1 }, hs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Cs = /* @__PURE__ */ h({
+}), ys = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], qs = { key: 1 }, gs = ["disabled", "type", "maxlength", "min", "max", "step", "size", "id", "list", "placeholder", "autocomplete", "value", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], hs = /* @__PURE__ */ h({
   __name: "TextInput",
   props: {
     question: {}
@@ -543,7 +548,7 @@ const Ge = /* @__PURE__ */ h({
     const o = w(() => s.question.inputStyle);
     return (e, n) => {
       const t = p("sv-character-counter");
-      return e.question.getMaxLength() ? (i(), u("div", gs, [
+      return e.question.getMaxLength() ? (i(), u("div", qs, [
         c("input", {
           disabled: e.question.isInputReadOnly,
           class: l(e.question.getControlClass()),
@@ -570,7 +575,7 @@ const Ge = /* @__PURE__ */ h({
           "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
           "aria-invalid": e.question.a11y_input_ariaInvalid,
           "aria-describedby": e.question.a11y_input_ariaDescribedBy
-        }, null, 46, hs),
+        }, null, 46, gs),
         C(t, {
           counter: e.question.characterCounter,
           remainingCharacterCounter: e.question.cssClasses.remainingCharacterCounter
@@ -602,13 +607,13 @@ const Ge = /* @__PURE__ */ h({
         "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
-      }, null, 46, qs));
+      }, null, 46, ys));
     };
   }
-}), bs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], ks = {
+}), Cs = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], bs = {
   key: 0,
   class: "sv-hidden"
-}, fs = { key: 7 }, Is = ["value"], he = /* @__PURE__ */ h({
+}, ks = { key: 7 }, fs = ["value"], he = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "SelectBase",
   props: {
@@ -639,18 +644,18 @@ const Ge = /* @__PURE__ */ h({
         "aria-invalid": t.question.a11y_input_ariaInvalid,
         "aria-describedby": t.question.a11y_input_ariaDescribedBy
       }, [
-        t.showLegend ? (i(), u("legend", ks, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
-        t.question.hasHeadItems ? (i(!0), u($, { key: 1 }, B(t.question.headItems, (m) => (i(), q(T(e(m)), W({
+        t.showLegend ? (i(), u("legend", bs, T(t.question.locTitle.renderedHtml), 1)) : d("", !0),
+        t.question.hasHeadItems ? (i(!0), u($, { key: 1 }, B(t.question.headItems, (m) => (i(), g(R(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
-        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u($, { key: 2 }, B(t.question.bodyItems, (m) => (i(), q(T(e(m)), W({
+        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u($, { key: 2 }, B(t.question.bodyItems, (m) => (i(), g(R(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
         t.question.blockedRow ? (i(), u("div", {
           key: 3,
           class: l(t.question.cssClasses.rootRow)
         }, [
-          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u($, { key: 0 }, B(t.question.dataChoices, (m) => (i(), q(T(e(m)), W({
+          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u($, { key: 0 }, B(t.question.dataChoices, (m) => (i(), g(R(e(m)), W({
             key: m.value
           }, n(m)), null, 16))), 128)) : d("", !0)
         ], 2)) : d("", !0),
@@ -658,24 +663,24 @@ const Ge = /* @__PURE__ */ h({
           key: 4,
           class: l(t.question.cssClasses.rootMultiColumn)
         }, [
-          t.question.hasColumns ? (i(!0), u($, { key: 0 }, B(t.question.columns, (m, v) => (i(), u("div", {
-            key: v,
+          t.question.hasColumns ? (i(!0), u($, { key: 0 }, B(t.question.columns, (m, q) => (i(), u("div", {
+            key: q,
             class: l(t.question.getColumnClass()),
             role: "presentation"
           }, [
-            (i(!0), u($, null, B(m, (g) => (i(), q(T(e(g)), W({
-              key: g.value
-            }, n(g)), null, 16))), 128))
+            (i(!0), u($, null, B(m, (v) => (i(), g(R(e(v)), W({
+              key: v.value
+            }, n(v)), null, 16))), 128))
           ], 2))), 128)) : d("", !0)
         ], 2)) : d("", !0),
-        t.question.hasFootItems ? (i(!0), u($, { key: 5 }, B(t.question.footItems, (m) => (i(), q(T(e(m)), W({
+        t.question.hasFootItems ? (i(!0), u($, { key: 5 }, B(t.question.footItems, (m) => (i(), g(R(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
-        t.question.renderedValue && t.question.isOtherSelected ? (i(), q(y, {
+        t.question.renderedValue && t.question.isOtherSelected ? (i(), g(y, {
           key: 6,
           question: t.question
         }, null, 8, ["question"])) : d("", !0),
-        t.question.showClearButtonInContent ? (i(), u("div", fs, [
+        t.question.showClearButtonInContent ? (i(), u("div", ks, [
           c("input", {
             type: "button",
             class: l(t.question.cssClasses.clearButton),
@@ -683,24 +688,24 @@ const Ge = /* @__PURE__ */ h({
               t.question.clearValue();
             }),
             value: t.question.clearButtonCaption
-          }, null, 10, Is)
+          }, null, 10, fs)
         ])) : d("", !0)
-      ], 10, bs);
+      ], 10, Cs);
     };
   }
-}), ws = /* @__PURE__ */ h({
+}), Is = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Checkbox",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => (i(), q(he, {
+    return (s, o) => (i(), g(he, {
       question: s.question,
       "show-legend": !0
     }, null, 8, ["question"]));
   }
-}), Ss = ["name", "checked", "value", "id", "disabled"], Rs = ["xlink:href"], Ts = /* @__PURE__ */ h({
+}), ws = ["name", "checked", "value", "id", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "CheckboxItem",
   props: {
@@ -735,7 +740,7 @@ const Ge = /* @__PURE__ */ h({
             id: e.question.getItemId(e.item),
             disabled: !e.question.getItemEnabled(e.item),
             class: l(e.question.cssClasses.itemControl)
-          }, null, 42, Ss),
+          }, null, 42, ws),
           e.question.cssClasses.materialDecorator ? (i(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialDecorator)
@@ -746,7 +751,7 @@ const Ge = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Rs)
+              }, null, 8, Ss)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           e.hideLabel ? d("", !0) : (i(), u("span", {
@@ -761,16 +766,16 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), $s = /* @__PURE__ */ h({
+}), Ts = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Radiogroup",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => (i(), q(he, { question: s.question }, null, 8, ["question"]));
+    return (s, o) => (i(), g(he, { question: s.question }, null, 8, ["question"]));
   }
-}), _s = ["name", "value", "id", "aria-describedby", "disabled"], Ds = ["xlink:href"], Bs = /* @__PURE__ */ h({
+}), $s = ["name", "value", "id", "aria-describedby", "disabled"], _s = ["xlink:href"], Ds = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RadiogroupItem",
   props: {
@@ -805,8 +810,8 @@ const Ge = /* @__PURE__ */ h({
             "onUpdate:modelValue": a[0] || (a[0] = (m) => n.value = m),
             disabled: !t.question.getItemEnabled(t.item),
             class: l(t.question.cssClasses.itemControl)
-          }, null, 10, _s), [
-            [ee, n.value]
+          }, null, 10, $s), [
+            [x, n.value]
           ]),
           t.question.cssClasses.materialDecorator ? (i(), u("span", {
             key: 0,
@@ -818,7 +823,7 @@ const Ge = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": t.question.itemSvgIcon
-              }, null, 8, Ds)
+              }, null, 8, _s)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           t.hideLabel ? d("", !0) : (i(), u("span", {
@@ -833,7 +838,7 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Ls = ["src"], Ns = ["title"], Ps = { key: 0 }, As = /* @__PURE__ */ h({
+}), Bs = ["src"], Ls = ["title"], Ns = { key: 0 }, Ps = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Signaturepad",
   props: {
@@ -868,7 +873,7 @@ const Ge = /* @__PURE__ */ h({
             style: S({
               width: e.question.renderedCanvasWidth
             })
-          }, null, 14, Ls)) : d("", !0),
+          }, null, 14, Bs)) : d("", !0),
           c("canvas", {
             tabindex: "0",
             class: l(e.question.cssClasses.canvas),
@@ -887,13 +892,13 @@ const Ge = /* @__PURE__ */ h({
               e.question.clearValue();
             })
           }, [
-            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ps, "\u2716")),
-            e.question.cssClasses.clearButtonIconId ? (i(), q(a, {
+            e.question.cssClasses.clearButtonIconId ? d("", !0) : (i(), u("span", Ns, "\u2716")),
+            e.question.cssClasses.clearButtonIconId ? (i(), g(a, {
               key: 1,
               iconName: e.question.cssClasses.clearButtonIconId,
               size: "auto"
             }, null, 8, ["iconName"])) : d("", !0)
-          ], 10, Ns)
+          ], 10, Ls)
         ], 2)) : d("", !0),
         e.question.showLoadingIndicator ? (i(), u("div", {
           key: 1,
@@ -904,7 +909,7 @@ const Ge = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), Ms = ["innerHTML"], Hs = /* @__PURE__ */ h({
+}), As = ["innerHTML"], Ms = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Html",
   props: {
@@ -919,9 +924,9 @@ const Ge = /* @__PURE__ */ h({
       ref: o,
       class: l(n.question.renderCssRoot),
       innerHTML: f(e)
-    }, null, 10, Ms));
+    }, null, 10, As));
   }
-}), Ws = ["src", "alt", "width", "height"], Es = ["src", "width", "height"], Vs = ["src", "width", "height"], Os = /* @__PURE__ */ h({
+}), Hs = ["src", "alt", "width", "height"], Ws = ["src", "width", "height"], Es = ["src", "width", "height"], Vs = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Image",
   props: {
@@ -956,7 +961,7 @@ const Ge = /* @__PURE__ */ h({
           onError: t[1] || (t[1] = (y) => {
             n.question.onErrorHandler();
           })
-        }, null, 46, Ws)), [
+        }, null, 46, Hs)), [
           [M, f(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
         n.question.renderedMode === "video" ? P((i(), u("video", {
@@ -977,7 +982,7 @@ const Ge = /* @__PURE__ */ h({
           onError: t[3] || (t[3] = (y) => {
             n.question.onErrorHandler();
           })
-        }, null, 46, Es)), [
+        }, null, 46, Ws)), [
           [M, f(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
         n.question.renderedMode === "youtube" ? (i(), u("iframe", {
@@ -991,7 +996,7 @@ const Ge = /* @__PURE__ */ h({
             width: n.question.renderedStyleWidth,
             height: n.question.renderedStyleHeight
           })
-        }, null, 14, Vs)) : d("", !0),
+        }, null, 14, Es)) : d("", !0),
         !f(e) || n.question.contentNotLoaded ? (i(), u("div", {
           key: 3,
           class: l(n.question.cssClasses.noImage)
@@ -1016,9 +1021,9 @@ const Ge = /* @__PURE__ */ h({
       class: l(e.question.cssClasses.root),
       ref_key: "root",
       ref: o
-    }, R(e.question.formatedValue), 3));
+    }, T(e.question.formatedValue), 3));
   }
-}), zs = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Us = ["id", "multiple", "placeholder"], Ks = /* @__PURE__ */ h({
+}), Os = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], zs = ["id", "multiple", "placeholder"], Us = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "File",
   props: {
@@ -1027,7 +1032,7 @@ const Ge = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = _(null);
     return A(s, o), (e, n) => {
-      const t = p("survey-string"), a = p("sv-file-choose-btn"), y = p("sv-action-bar"), m = p("sv-file-clean-btn"), v = p("sv-loading-indicator"), g = p("sv-file-video"), I = p("sv-file-preview");
+      const t = p("survey-string"), a = p("sv-file-choose-btn"), y = p("sv-action-bar"), m = p("sv-file-clean-btn"), q = p("sv-loading-indicator"), v = p("sv-file-video"), I = p("sv-file-preview");
       return i(), u("div", {
         class: l(e.question.fileRootCss),
         ref_key: "root",
@@ -1048,7 +1053,7 @@ const Ge = /* @__PURE__ */ h({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 42, zs)) : d("", !0),
+        }, null, 42, Os)) : d("", !0),
         e.question.isReadOnly ? (i(), u("input", {
           key: 1,
           type: "file",
@@ -1058,7 +1063,7 @@ const Ge = /* @__PURE__ */ h({
           multiple: e.question.allowMultiple,
           placeholder: e.question.title,
           style: { color: "transparent" }
-        }, null, 10, Us)) : d("", !0),
+        }, null, 10, zs)) : d("", !0),
         c("div", {
           class: l(e.question.cssClasses.dragArea),
           onDrop: n[1] || (n[1] = (...b) => e.question.onDrop && e.question.onDrop(...b)),
@@ -1080,21 +1085,21 @@ const Ge = /* @__PURE__ */ h({
             c("div", {
               class: l(e.question.cssClasses.wrapper)
             }, [
-              e.question.showChooseButton ? (i(), q(a, {
+              e.question.showChooseButton ? (i(), g(a, {
                 key: 0,
                 data: { question: e.question }
               }, null, 8, ["data"])) : d("", !0),
-              e.question.actionsContainerVisible ? (i(), q(y, {
+              e.question.actionsContainerVisible ? (i(), g(y, {
                 key: 1,
                 model: e.question.actionsContainer
               }, null, 8, ["model"])) : d("", !0),
               e.question.isEmpty() ? (i(), u("span", {
                 key: 2,
                 class: l(e.question.cssClasses.noFileChosen)
-              }, R(e.question.noFileChosenCaption), 3)) : d("", !0)
+              }, T(e.question.noFileChosenCaption), 3)) : d("", !0)
             ], 2)
           ], 2)) : d("", !0),
-          e.question.showRemoveButton ? (i(), q(m, {
+          e.question.showRemoveButton ? (i(), g(m, {
             key: 1,
             question: e.question,
             css: e.question.showRemoveButton
@@ -1103,22 +1108,22 @@ const Ge = /* @__PURE__ */ h({
             key: 2,
             class: l(e.question.cssClasses.loadingIndicator)
           }, [
-            C(v)
+            C(q)
           ], 2)) : d("", !0),
-          e.question.isPlayingVideo ? (i(), q(g, {
+          e.question.isPlayingVideo ? (i(), g(v, {
             key: 3,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
-          e.question.allowShowPreview ? (i(), q(I, {
+          e.question.allowShowPreview ? (i(), g(I, {
             key: 4,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
-          e.question.showRemoveButtonBottom ? (i(), q(m, {
+          e.question.showRemoveButtonBottom ? (i(), g(m, {
             key: 5,
             question: e.question,
             css: e.question.showRemoveButtonBottom
           }, null, 8, ["question", "css"])) : d("", !0),
-          e.question.fileNavigatorVisible ? (i(), q(y, {
+          e.question.fileNavigatorVisible ? (i(), g(y, {
             key: 6,
             model: e.question.fileNavigator
           }, null, 8, ["model"])) : d("", !0)
@@ -1126,7 +1131,7 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), js = { class: "sv-hidden" }, pe = "survey-imagepicker-item", Qs = /* @__PURE__ */ h({
+}), Ks = { class: "sv-hidden" }, pe = "survey-imagepicker-item", js = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Imagepicker",
   props: {
@@ -1148,8 +1153,8 @@ const Ge = /* @__PURE__ */ h({
       ref_key: "root",
       ref: o
     }, [
-      c("legend", js, R(t.question.locTitle.renderedHtml), 1),
-      t.question.hasColumns ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.visibleChoices, (y) => (i(), q(T(e(y)), W({
+      c("legend", Ks, T(t.question.locTitle.renderedHtml), 1),
+      t.question.hasColumns ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.visibleChoices, (y) => (i(), g(R(e(y)), W({
         key: y.value
       }, n(y)), null, 16))), 128)),
       t.question.hasColumns ? (i(!0), u($, { key: 1 }, B(t.question.columns, (y, m) => (i(), u("div", {
@@ -1157,13 +1162,13 @@ const Ge = /* @__PURE__ */ h({
         key: m,
         role: "presentation"
       }, [
-        (i(!0), u($, null, B(y, (v) => (i(), q(T(e(v)), W({
-          key: v.value
-        }, n(v)), null, 16))), 128))
+        (i(!0), u($, null, B(y, (q) => (i(), g(R(e(q)), W({
+          key: q.value
+        }, n(q)), null, 16))), 128))
       ], 2))), 128)) : d("", !0)
     ], 2));
   }
-}), Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Js = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Xs = ["src", "width", "height", "alt"], Ys = ["src", "width", "height"], Zs = /* @__PURE__ */ h({
+}), Qs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Gs = ["name", "value", "id", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Js = ["src", "width", "height", "alt"], Xs = ["src", "width", "height"], Ys = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "ImagepickerItem",
   props: {
@@ -1195,8 +1200,8 @@ const Ge = /* @__PURE__ */ h({
             "aria-invalid": n.question.ariaInvalid,
             "aria-describedby": n.question.ariaDescribedBy,
             class: l(n.question.cssClasses.itemControl)
-          }, null, 10, Gs)), [
-            [te, n.question.value]
+          }, null, 10, Qs)), [
+            [oe, n.question.value]
           ]) : P((i(), u("input", {
             key: 1,
             type: "radio",
@@ -1210,8 +1215,8 @@ const Ge = /* @__PURE__ */ h({
             "aria-invalid": n.question.ariaInvalid,
             "aria-describedby": n.question.ariaDescribedBy,
             class: l(n.question.cssClasses.itemControl)
-          }, null, 10, Js)), [
-            [ee, n.question.value]
+          }, null, 10, Gs)), [
+            [x, n.question.value]
           ]),
           c("div", {
             class: l(n.question.cssClasses.itemDecorator)
@@ -1223,7 +1228,7 @@ const Ge = /* @__PURE__ */ h({
                 key: 0,
                 class: l(n.question.cssClasses.checkedItemDecorator)
               }, [
-                n.question.cssClasses.checkedItemSvgIconId ? (i(), q(a, {
+                n.question.cssClasses.checkedItemSvgIconId ? (i(), g(a, {
                   key: 0,
                   class: l(n.question.cssClasses.checkedItemSvgIcon),
                   size: "auto",
@@ -1244,7 +1249,7 @@ const Ge = /* @__PURE__ */ h({
                 onError: t[3] || (t[3] = (m) => {
                   n.item.onErrorHandler();
                 })
-              }, null, 46, Xs)) : d("", !0),
+              }, null, 46, Js)) : d("", !0),
               f(e) && !n.item.contentNotLoaded && n.question.contentMode === "video" ? (i(), u("video", {
                 key: 2,
                 controls: "",
@@ -1259,7 +1264,7 @@ const Ge = /* @__PURE__ */ h({
                 onError: t[5] || (t[5] = (m) => {
                   n.item.onErrorHandler();
                 })
-              }, null, 46, Ys)) : d("", !0),
+              }, null, 46, Xs)) : d("", !0),
               !f(e) || n.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: l(n.question.cssClasses.itemNoImage),
@@ -1289,7 +1294,7 @@ const Ge = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], en = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], sn = /* @__PURE__ */ h({
+}), Zs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], xs = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], en = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Comment",
   props: {
@@ -1331,7 +1336,7 @@ const Ge = /* @__PURE__ */ h({
         "aria-invalid": n.question.a11y_input_ariaInvalid,
         "aria-describedby": n.question.a11y_input_ariaDescribedBy,
         style: S({ resize: n.question.resizeStyle })
-      }, null, 46, xs)) : !n.question.isReadOnlyRenderDiv() && n.question.getMaxLength() ? (i(), u("div", {
+      }, null, 46, Zs)) : !n.question.isReadOnlyRenderDiv() && n.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: o
@@ -1359,7 +1364,7 @@ const Ge = /* @__PURE__ */ h({
           "aria-invalid": n.question.a11y_input_ariaInvalid,
           "aria-describedby": n.question.a11y_input_ariaDescribedBy,
           style: S({ resize: n.question.resizeStyle })
-        }, null, 46, en),
+        }, null, 46, xs),
         C(a, {
           counter: n.question.characterCounter,
           remainingCharacterCounter: n.question.cssClasses.remainingCharacterCounter
@@ -1368,10 +1373,10 @@ const Ge = /* @__PURE__ */ h({
         key: 2,
         ref_key: "root",
         ref: o
-      }, R(n.question.value), 513));
+      }, T(n.question.value), 513));
     };
   }
-}), nn = /* @__PURE__ */ h({
+}), sn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Dropdown",
   props: {
@@ -1387,23 +1392,23 @@ const Ge = /* @__PURE__ */ h({
         ref: o
       }, [
         C(t, { question: e.question }, null, 8, ["question"]),
-        e.question.isOtherSelected ? (i(), q(a, {
+        e.question.isOtherSelected ? (i(), g(a, {
           key: 0,
           question: e.question
         }, null, 8, ["question"])) : d("", !0)
       ], 2);
     };
   }
-}), on = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], tn = {
+}), nn = ["id", "autocomplete", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "required"], on = {
   key: 0,
   value: ""
-}, rn = ["id"];
-se.Instance.registerRenderer(
+}, tn = ["id"];
+ee.Instance.registerRenderer(
   "dropdown",
   "select",
   "sv-dropdown-select"
 );
-const ln = /* @__PURE__ */ h({
+const rn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "DropdownSelect",
   props: {
@@ -1427,7 +1432,7 @@ const ln = /* @__PURE__ */ h({
       }
     });
     return (a, y) => {
-      const m = p("sv-dropdown-option-item"), v = p("sv-svg-icon"), g = p("survey-other-choice");
+      const m = p("sv-dropdown-option-item"), q = p("sv-svg-icon"), v = p("survey-other-choice");
       return i(), u("div", {
         class: l(a.question.renderCssRoot),
         ref_key: "root",
@@ -1441,7 +1446,7 @@ const ln = /* @__PURE__ */ h({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, R(a.question.readOnlyText), 11, rn)) : P((i(), u("select", {
+          }, T(a.question.readOnlyText), 11, tn)) : P((i(), u("select", {
             key: 0,
             id: a.question.inputId,
             "onUpdate:modelValue": y[0] || (y[0] = (I) => t.value = I),
@@ -1455,33 +1460,33 @@ const ln = /* @__PURE__ */ h({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (i(), u("option", tn, R(a.question.placeholder), 1)) : d("", !0),
-            (i(!0), u($, null, B(a.question.visibleChoices, (I) => (i(), q(m, {
+            a.question.allowClear ? (i(), u("option", on, T(a.question.placeholder), 1)) : d("", !0),
+            (i(!0), u($, null, B(a.question.visibleChoices, (I) => (i(), g(m, {
               item: I,
               key: I.id
             }, null, 8, ["item"]))), 128))
-          ], 42, on)), [
+          ], 42, nn)), [
             [Ie, t.value]
           ]),
           a.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
             key: 2,
             class: l(a.question.cssClasses.chevronButton)
           }, [
-            C(v, {
+            C(q, {
               class: l(a.question.cssClasses.chevronButtonSvg),
               iconName: a.question.cssClasses.chevronButtonIconId,
               size: "auto"
             }, null, 8, ["class", "iconName"])
           ], 2)) : d("", !0)
         ], 2),
-        a.question.isOtherSelected ? (i(), q(g, {
+        a.question.isOtherSelected ? (i(), g(v, {
           key: 0,
           question: a.question
         }, null, 8, ["question"])) : d("", !0)
       ], 2);
     };
   }
-}), an = ["value", "disabled"], un = /* @__PURE__ */ h({
+}), ln = ["value", "disabled"], an = /* @__PURE__ */ h({
   __name: "OptionItem",
   props: {
     item: {}
@@ -1491,9 +1496,9 @@ const ln = /* @__PURE__ */ h({
     return L(() => s.item), (e, n) => (i(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, R(f(o)), 9, an));
+    }, T(f(o)), 9, ln));
   }
-}), dn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], mn = { style: { visibility: "hidden" } }, cn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], pn = ["id"], vn = /* @__PURE__ */ h({
+}), un = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], dn = { style: { visibility: "hidden" } }, mn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], cn = ["id"], pn = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1519,10 +1524,10 @@ const ln = /* @__PURE__ */ h({
         const k = o.value, D = e.value.inputStringRendered;
         Le.isTwoValueEquals(D, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
       }
-    }, v = (k) => {
+    }, q = (k) => {
       var D;
       (D = e.value) == null || D.onBlur(k), m();
-    }, g = (k) => {
+    }, v = (k) => {
       var D;
       (D = e.value) == null || D.onFocus(k);
     }, I = (k) => {
@@ -1530,7 +1535,7 @@ const ln = /* @__PURE__ */ h({
     }, b = w(
       () => s.question.showSelectedItemLocText
     ), N = w(() => s.question.selectedItemLocText);
-    return L(() => e.value), x(m), H(m), (k, D) => {
+    return L(() => e.value), te(m), H(m), (k, D) => {
       const E = p("survey-string"), V = p("sv-svg-icon"), K = p("sv-popup");
       return i(), u("div", {
         class: l(k.question.cssClasses.selectWrapper),
@@ -1542,7 +1547,7 @@ const ln = /* @__PURE__ */ h({
           disabled: k.question.isInputReadOnly ? !0 : null,
           tabindex: e.value.noTabIndex ? void 0 : 0,
           onKeydown: y,
-          onBlur: v,
+          onBlur: q,
           class: l(k.question.getControlClass()),
           role: k.question.ariaRole,
           "aria-required": k.question.ariaRequired,
@@ -1558,12 +1563,12 @@ const ln = /* @__PURE__ */ h({
             key: 0,
             class: l(k.question.cssClasses.hintPrefix)
           }, [
-            c("span", null, R(e.value.hintStringPrefix), 1)
+            c("span", null, T(e.value.hintStringPrefix), 1)
           ], 2)) : d("", !0),
           c("div", {
             class: l(k.question.cssClasses.controlValue)
           }, [
-            b.value ? (i(), q(E, {
+            b.value ? (i(), g(E, {
               key: 0,
               locString: N.value
             }, null, 8, ["locString"])) : d("", !0),
@@ -1571,10 +1576,10 @@ const ln = /* @__PURE__ */ h({
               key: 1,
               class: l(k.question.cssClasses.hintSuffix)
             }, [
-              c("span", mn, R(e.value.inputStringRendered), 1),
-              c("span", null, R(e.value.hintStringSuffix), 1)
+              c("span", dn, T(e.value.inputStringRendered), 1),
+              c("span", null, T(e.value.hintStringSuffix), 1)
             ], 2)) : d("", !0),
-            k.question.showInputFieldComponent ? (i(), q(T(k.question.inputFieldComponentName), {
+            k.question.showInputFieldComponent ? (i(), g(R(k.question.inputFieldComponentName), {
               key: 2,
               item: e.value.getSelectedAction(),
               question: k.question
@@ -1598,9 +1603,9 @@ const ln = /* @__PURE__ */ h({
               "aria-activedescendant": e.value.ariaActivedescendant,
               placeholder: e.value.placeholderRendered,
               onInput: I,
-              onBlur: v,
-              onFocus: g
-            }, null, 42, cn)
+              onBlur: q,
+              onFocus: v
+            }, null, 42, mn)
           ], 2),
           k.question.allowClear && k.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
             key: 1,
@@ -1617,19 +1622,19 @@ const ln = /* @__PURE__ */ h({
           ], 2)), [
             [M, k.question.showClearButton]
           ]) : d("", !0)
-        ], 42, dn)),
+        ], 42, un)),
         k.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
           id: k.question.inputId,
           class: l(k.question.getControlClass())
         }, [
-          k.question.selectedItemLocText ? (i(), q(E, {
+          k.question.selectedItemLocText ? (i(), g(E, {
             key: 0,
             locString: k.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
-          c("div", null, R(k.question.readOnlyText), 1)
-        ], 10, pn)) : (i(), q(K, {
+          c("div", null, T(k.question.readOnlyText), 1)
+        ], 10, cn)) : (i(), g(K, {
           key: 1,
           model: k.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1648,7 +1653,7 @@ const ln = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), yn = /* @__PURE__ */ h({
+}), vn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
@@ -1664,121 +1669,121 @@ const ln = /* @__PURE__ */ h({
         ref: o
       }, [
         C(t, { question: e.question }, null, 8, ["question"]),
-        e.question.isOtherSelected ? (i(), q(a, {
+        e.question.isOtherSelected ? (i(), g(a, {
           key: 0,
           question: e.question
         }, null, 8, ["question"])) : d("", !0)
       ], 2);
     };
   }
-}), qn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], gn = ["id"], hn = /* @__PURE__ */ h({
+}), yn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], qn = ["id"], gn = /* @__PURE__ */ h({
   __name: "Tagbox",
   props: {
     question: {}
   },
   setup(r) {
     const s = r, o = w(() => {
-      const v = s.question;
-      return v.dropdownListModel || (v.dropdownListModel = new Ne(v)), s.question.dropdownListModel;
-    }), e = (v) => {
-      var g;
-      (g = o.value) == null || g.onClick(v);
-    }, n = (v) => {
-      var g;
-      (g = o.value) == null || g.chevronPointerDown(v);
-    }, t = (v) => {
-      var g;
-      (g = o.value) == null || g.onClear(v);
-    }, a = (v) => {
-      var g;
-      (g = o.value) == null || g.keyHandler(v);
-    }, y = (v) => {
-      var g;
-      (g = o.value) == null || g.onBlur(v);
+      const q = s.question;
+      return q.dropdownListModel || (q.dropdownListModel = new Ne(q)), s.question.dropdownListModel;
+    }), e = (q) => {
+      var v;
+      (v = o.value) == null || v.onClick(q);
+    }, n = (q) => {
+      var v;
+      (v = o.value) == null || v.chevronPointerDown(q);
+    }, t = (q) => {
+      var v;
+      (v = o.value) == null || v.onClear(q);
+    }, a = (q) => {
+      var v;
+      (v = o.value) == null || v.keyHandler(q);
+    }, y = (q) => {
+      var v;
+      (v = o.value) == null || v.onBlur(q);
     }, m = le(() => s.question.selectedChoices);
-    return L(() => o.value), (v, g) => {
+    return L(() => o.value), (q, v) => {
       const I = p("sv-tagbox-item"), b = p("sv-tagbox-filter"), N = p("sv-svg-icon"), k = p("sv-popup"), D = p("survey-string");
       return i(), u("div", {
-        class: l(v.question.cssClasses.selectWrapper),
+        class: l(q.question.cssClasses.selectWrapper),
         onClick: e
       }, [
-        v.question.isReadOnly ? d("", !0) : (i(), u("div", {
+        q.question.isReadOnly ? d("", !0) : (i(), u("div", {
           key: 0,
-          id: v.question.inputId,
+          id: q.question.inputId,
           tabindex: o.value.noTabIndex ? void 0 : 0,
-          disabled: v.question.isInputReadOnly ? !0 : null,
+          disabled: q.question.isInputReadOnly ? !0 : null,
           onKeydown: a,
           onBlur: y,
-          class: l(v.question.getControlClass()),
-          role: v.question.ariaRole,
-          "aria-required": v.question.ariaRequired,
-          "aria-label": v.question.ariaLabel,
-          "aria-invalid": v.question.ariaInvalid,
-          "aria-describedby": v.question.ariaDescribedBy,
-          "aria-expanded": v.question.ariaExpanded === null ? void 0 : v.question.ariaExpanded === "true",
+          class: l(q.question.getControlClass()),
+          role: q.question.ariaRole,
+          "aria-required": q.question.ariaRequired,
+          "aria-label": q.question.ariaLabel,
+          "aria-invalid": q.question.ariaInvalid,
+          "aria-describedby": q.question.ariaDescribedBy,
+          "aria-expanded": q.question.ariaExpanded === null ? void 0 : q.question.ariaExpanded === "true",
           "aria-controls": o.value.listElementId,
           "aria-activedescendant": o.value.ariaActivedescendant,
-          required: v.question.isRequired ? !0 : null
+          required: q.question.isRequired ? !0 : null
         }, [
           c("div", {
-            class: l(v.question.cssClasses.controlValue)
+            class: l(q.question.cssClasses.controlValue)
           }, [
-            (i(!0), u($, null, B(f(m), (E, V) => (i(), q(I, {
+            (i(!0), u($, null, B(f(m), (E, V) => (i(), g(I, {
               item: E,
-              question: v.question,
+              question: q.question,
               key: "item" + V
             }, null, 8, ["item", "question"]))), 128)),
             C(b, {
               model: o.value,
-              question: v.question
+              question: q.question
             }, null, 8, ["model", "question"])
           ], 2),
-          v.question.allowClear && v.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
+          q.question.allowClear && q.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
             key: 0,
-            class: l(v.question.cssClasses.cleanButton),
+            class: l(q.question.cssClasses.cleanButton),
             onClick: t,
             "aria-hidden": "true"
           }, [
             C(N, {
-              class: l(v.question.cssClasses.cleanButtonSvg),
-              iconName: v.question.cssClasses.cleanButtonIconId,
-              title: v.question.clearCaption,
+              class: l(q.question.cssClasses.cleanButtonSvg),
+              iconName: q.question.cssClasses.cleanButtonIconId,
+              title: q.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [M, v.question.showClearButton]
+            [M, q.question.showClearButton]
           ]) : d("", !0)
-        ], 42, qn)),
-        v.question.isReadOnly ? (i(), u("div", {
+        ], 42, yn)),
+        q.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
-          id: v.question.inputId,
-          class: l(v.question.getControlClass())
+          id: q.question.inputId,
+          class: l(q.question.getControlClass())
         }, [
-          v.question.locReadOnlyText ? (i(), q(D, {
+          q.question.locReadOnlyText ? (i(), g(D, {
             key: 0,
-            locString: v.question.locReadOnlyText
+            locString: q.question.locReadOnlyText
           }, null, 8, ["locString"])) : d("", !0)
-        ], 10, gn)) : (i(), q(k, {
+        ], 10, qn)) : (i(), g(k, {
           key: 1,
           model: o.value.popupModel
         }, null, 8, ["model"])),
-        v.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
+        q.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
           key: 3,
-          class: l(v.question.cssClasses.chevronButton),
+          class: l(q.question.cssClasses.chevronButton),
           onPointerdown: n,
           "aria-hidden": "true"
         }, [
           C(N, {
-            class: l(v.question.cssClasses.chevronButtonSvg),
-            iconName: v.question.cssClasses.chevronButtonIconId,
+            class: l(q.question.cssClasses.chevronButtonSvg),
+            iconName: q.question.cssClasses.chevronButtonIconId,
             size: "auto"
           }, null, 8, ["class", "iconName"])
         ], 34)) : d("", !0)
       ], 2);
     };
   }
-}), Cn = { style: { visibility: "hidden" } }, bn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], kn = /* @__PURE__ */ h({
+}), hn = { style: { visibility: "hidden" } }, Cn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], bn = /* @__PURE__ */ h({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1804,12 +1809,12 @@ const ln = /* @__PURE__ */ h({
           key: 0,
           class: l(a.question.cssClasses.hintPrefix)
         }, [
-          c("span", null, R(a.model.hintStringPrefix), 1)
+          c("span", null, T(a.model.hintStringPrefix), 1)
         ], 2)) : d("", !0),
         c("div", {
           class: l(a.question.cssClasses.hintSuffixWrapper)
         }, [
-          a.question.showSelectedItemLocText ? (i(), q(m, {
+          a.question.showSelectedItemLocText ? (i(), g(m, {
             key: 0,
             locString: a.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
@@ -1817,13 +1822,13 @@ const ln = /* @__PURE__ */ h({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            c("span", Cn, R(a.model.inputStringRendered), 1),
-            c("span", null, R(a.model.hintStringSuffix), 1)
+            c("span", hn, T(a.model.inputStringRendered), 1),
+            c("span", null, T(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(c("input", {
             type: "text",
             autocomplete: "off",
-            "onUpdate:modelValue": y[0] || (y[0] = (v) => a.model.inputStringRendered = v),
+            "onUpdate:modelValue": y[0] || (y[0] = (q) => a.model.inputStringRendered = q),
             class: l(a.question.cssClasses.filterStringInput),
             placeholder: a.model.filterStringPlaceholder,
             disabled: a.question.isInputReadOnly,
@@ -1841,14 +1846,14 @@ const ln = /* @__PURE__ */ h({
             onKeydown: e,
             onBlur: n,
             onFocus: t
-          }, null, 42, bn), [
+          }, null, 42, Cn), [
             [we, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), fn = { class: "sv-tagbox__item-text" }, In = /* @__PURE__ */ h({
+}), kn = { class: "sv-tagbox__item-text" }, fn = /* @__PURE__ */ h({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1864,7 +1869,7 @@ const ln = /* @__PURE__ */ h({
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        c("div", fn, [
+        c("div", kn, [
           C(t, {
             locString: e.item.locText
           }, null, 8, ["locString"])
@@ -1882,7 +1887,7 @@ const ln = /* @__PURE__ */ h({
       ]);
     };
   }
-}), wn = /* @__PURE__ */ h({
+}), In = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
@@ -1910,17 +1915,17 @@ const ln = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.rankingChoices, (m, v) => (i(), q(T(e(m)), W({
-          key: m.value + "-" + v + "-item"
-        }, n(m, v)), null, 16))), 128)),
+        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.rankingChoices, (m, q) => (i(), g(R(e(m)), W({
+          key: m.value + "-" + q + "-item"
+        }, n(m, q)), null, 16))), 128)),
         t.question.selectToRankEnabled ? (i(), u("div", {
           key: 1,
           class: l(t.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (i(!0), u($, null, B(t.question.unRankingChoices, (m, v) => (i(), q(T(e(m)), W({
-            key: m.value + "-" + v + "-item"
-          }, n(m, v, !0)), null, 16))), 128)),
+          (i(!0), u($, null, B(t.question.unRankingChoices, (m, q) => (i(), g(R(e(m)), W({
+            key: m.value + "-" + q + "-item"
+          }, n(m, q, !0)), null, 16))), 128)),
           t.question.unRankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: l(t.question.cssClasses.containerPlaceholder)
@@ -1939,9 +1944,9 @@ const ln = /* @__PURE__ */ h({
           class: l(t.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (i(!0), u($, null, B(t.question.rankingChoices, (m, v) => (i(), q(T(e(m)), W({
-            key: m.value + "-" + v + "-item"
-          }, n(m, v)), null, 16))), 128)),
+          (i(!0), u($, null, B(t.question.rankingChoices, (m, q) => (i(), g(R(e(m)), W({
+            key: m.value + "-" + q + "-item"
+          }, n(m, q)), null, 16))), 128)),
           t.question.rankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: l(t.question.cssClasses.containerPlaceholder)
@@ -1954,10 +1959,10 @@ const ln = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
+}), wn = ["tabindex", "data-sv-drop-target-ranking-item"], Sn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Tn = ["xlink:href"], $n = ["xlink:href"], _n = ["xlink:href"], Dn = /* @__PURE__ */ h({
+}, Rn = ["xlink:href"], Tn = ["xlink:href"], $n = ["xlink:href"], _n = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -1986,7 +1991,7 @@ const ln = /* @__PURE__ */ h({
           );
         })
       }, [
-        c("div", Rn, [
+        c("div", Sn, [
           c("div", {
             class: l(e.question.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2001,27 +2006,27 @@ const ln = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.dragDropSvgIcon
-                }, null, 8, Tn)
+                }, null, 8, Rn)
               ], 2)),
               (i(), u("svg", {
                 class: l(e.question.getIconFocusCss())
               }, [
                 c("use", {
                   "xlink:href": e.question.arrowsSvgIcon
-                }, null, 8, $n)
+                }, null, 8, Tn)
               ], 2))
             ], 2),
             !e.unrankedItem && o.value ? (i(), u("div", {
               key: 0,
               class: l(e.question.getItemIndexClasses(e.item))
-            }, R(o.value), 3)) : (i(), u("div", {
+            }, T(o.value), 3)) : (i(), u("div", {
               key: 1,
               class: l(e.question.getItemIndexClasses(e.item))
             }, [
               (i(), u("svg", null, [
                 c("use", {
                   "xlink:href": e.question.dashSvgIcon
-                }, null, 8, _n)
+                }, null, 8, $n)
               ]))
             ], 2)),
             c("div", {
@@ -2033,13 +2038,13 @@ const ln = /* @__PURE__ */ h({
             ], 2)
           ], 2)
         ])
-      ], 42, Sn);
+      ], 42, wn);
     };
   }
-}), Bn = { role: "radiogroup" }, Ln = /* @__PURE__ */ c("legend", {
+}), Dn = { role: "radiogroup" }, Bn = /* @__PURE__ */ c("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Nn = /* @__PURE__ */ h({
+}, null, -1), Ln = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
@@ -2056,8 +2061,8 @@ const ln = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        c("fieldset", Bn, [
-          Ln,
+        c("fieldset", Dn, [
+          Bn,
           n.question.hasMinLabel ? (i(), u("span", {
             key: 0,
             class: l(n.question.cssClasses.minText)
@@ -2066,7 +2071,7 @@ const ln = /* @__PURE__ */ h({
               locString: n.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
-          (i(!0), u($, null, B(n.question.renderedRateItems, (y, m) => (i(), q(T(n.question.itemComponent), {
+          (i(!0), u($, null, B(n.question.renderedRateItems, (y, m) => (i(), g(R(n.question.itemComponent), {
             key: e(m),
             item: y,
             index: m,
@@ -2084,7 +2089,7 @@ const ln = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
+}), Nn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Pn = /* @__PURE__ */ h({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2112,7 +2117,7 @@ const ln = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Pn),
+        }, null, 8, Nn),
         c("span", {
           class: l(o.question.cssClasses.itemText)
         }, [
@@ -2123,7 +2128,7 @@ const ln = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ h({
+}), An = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Mn = /* @__PURE__ */ h({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2154,7 +2159,7 @@ const ln = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Mn),
+        }, null, 8, An),
         C(n, {
           iconName: o.question.getItemSmileyIconName(o.item.itemValue),
           size: "auto",
@@ -2163,7 +2168,7 @@ const ln = /* @__PURE__ */ h({
       ], 38);
     };
   }
-}), Wn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ h({
+}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Wn = /* @__PURE__ */ h({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2193,7 +2198,7 @@ const ln = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Wn),
+        }, null, 8, Hn),
         C(n, {
           class: l("sv-star"),
           iconName: o.question.itemStarIcon,
@@ -2209,10 +2214,10 @@ const ln = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Vn = { class: "sd-rating-dropdown-item" }, On = { class: "sd-rating-dropdown-item_text" }, Fn = {
+}), En = { class: "sd-rating-dropdown-item" }, Vn = { class: "sd-rating-dropdown-item_text" }, Fn = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, zn = /* @__PURE__ */ h({
+}, On = /* @__PURE__ */ h({
   __name: "RatingDropdownItem",
   props: {
     item: {}
@@ -2221,8 +2226,8 @@ const ln = /* @__PURE__ */ h({
     const s = r;
     return L(() => s.item), (o, e) => {
       const n = p("survey-string");
-      return i(), u("div", Vn, [
-        c("span", On, R(o.item.title), 1),
+      return i(), u("div", En, [
+        c("span", Vn, T(o.item.title), 1),
         o.item.description ? (i(), u("div", Fn, [
           C(n, {
             locString: o.item.description
@@ -2232,12 +2237,12 @@ const ln = /* @__PURE__ */ h({
     };
   }
 });
-se.Instance.registerRenderer(
+ee.Instance.registerRenderer(
   "rating",
   "dropdown",
   "sv-rating-dropdown"
 );
-const Un = /* @__PURE__ */ h({
+const zn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
@@ -2256,7 +2261,7 @@ const Un = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Kn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], jn = /* @__PURE__ */ h({
+}), Un = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Kn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -2277,7 +2282,7 @@ const Un = /* @__PURE__ */ h({
         class: l(t.question.cssClasses.root),
         ref_key: "root",
         ref: o,
-        onKeydown: a[4] || (a[4] = (v) => t.question.onKeyDownCore(v))
+        onKeydown: a[4] || (a[4] = (q) => t.question.onKeyDownCore(q))
       }, [
         c("label", {
           class: l(t.question.getItemCss())
@@ -2286,7 +2291,7 @@ const Un = /* @__PURE__ */ h({
             type: "checkbox",
             name: t.question.name,
             value: (m = t.question.booleanValue) != null ? m : "",
-            "onUpdate:modelValue": a[0] || (a[0] = (v) => t.question.booleanValue = v),
+            "onUpdate:modelValue": a[0] || (a[0] = (q) => t.question.booleanValue = q),
             class: l(t.question.cssClasses.control),
             id: t.question.inputId,
             ".indeterminate": t.question.isIndeterminate,
@@ -2295,12 +2300,12 @@ const Un = /* @__PURE__ */ h({
             "aria-label": t.question.ariaLabel,
             "aria-invalid": t.question.ariaInvalid,
             "aria-describedby": t.question.ariaDescribedBy
-          }, null, 42, Kn), [
-            [te, t.question.booleanValue]
+          }, null, 42, Un), [
+            [oe, t.question.booleanValue]
           ]),
           c("div", {
             class: l(t.question.cssClasses.sliderGhost),
-            onClick: a[1] || (a[1] = (v) => e(v, !1))
+            onClick: a[1] || (a[1] = (q) => e(q, !1))
           }, [
             c("span", {
               class: l(t.question.getLabelCss(!1))
@@ -2312,7 +2317,7 @@ const Un = /* @__PURE__ */ h({
           ], 2),
           c("div", {
             class: l(t.question.cssClasses.switch),
-            onClick: a[2] || (a[2] = (v) => n(v))
+            onClick: a[2] || (a[2] = (q) => n(q))
           }, [
             c("span", {
               class: l(t.question.cssClasses.slider)
@@ -2329,7 +2334,7 @@ const Un = /* @__PURE__ */ h({
           ], 2),
           c("div", {
             class: l(t.question.cssClasses.sliderGhost),
-            onClick: a[3] || (a[3] = (v) => e(v, !0))
+            onClick: a[3] || (a[3] = (q) => e(q, !0))
           }, [
             c("span", {
               class: l(t.question.getLabelCss(!0))
@@ -2344,12 +2349,12 @@ const Un = /* @__PURE__ */ h({
     };
   }
 });
-se.Instance.registerRenderer(
+ee.Instance.registerRenderer(
   "boolean",
   "radio",
   "sv-boolean-radio"
 );
-const Qn = /* @__PURE__ */ h({
+const jn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
@@ -2368,13 +2373,13 @@ const Qn = /* @__PURE__ */ h({
           role: "presentation",
           class: l(e.question.cssClasses.radioFieldset)
         }, [
-          (i(), q(t, {
+          (i(), g(t, {
             key: !1,
             question: e.question,
             locText: e.question.locLabelFalse,
             value: !1
           }, null, 8, ["question", "locText"])),
-          (i(), q(t, {
+          (i(), g(t, {
             key: !0,
             question: e.question,
             locText: e.question.locLabelTrue,
@@ -2384,7 +2389,7 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Gn = ["name", "value", "checked", "aria-describedby", "disabled"], Jn = ["xlink:href"], Xn = /* @__PURE__ */ h({
+}), Qn = ["name", "value", "checked", "aria-describedby", "disabled"], Gn = ["xlink:href"], Jn = /* @__PURE__ */ h({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2414,7 +2419,7 @@ const Qn = /* @__PURE__ */ h({
             disabled: e.question.isInputReadOnly,
             class: l(e.question.cssClasses.itemRadioControl),
             onChange: o
-          }, null, 42, Gn),
+          }, null, 42, Qn),
           e.question.cssClasses.materialRadioDecorator ? (i(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialRadioDecorator)
@@ -2425,7 +2430,7 @@ const Qn = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Jn)
+              }, null, 8, Gn)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           c("span", {
@@ -2437,13 +2442,13 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Yn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Zn = ["xlink:href"], xn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), eo = ["id"];
-se.Instance.registerRenderer(
+}), Xn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Yn = ["xlink:href"], Zn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), xn = ["id"];
+ee.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const so = /* @__PURE__ */ h({
+const eo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2470,7 +2475,7 @@ const so = /* @__PURE__ */ h({
               type: "checkbox",
               name: e.question.name,
               value: (m = e.question.booleanValue) != null ? m : "",
-              "onUpdate:modelValue": n[0] || (n[0] = (v) => e.question.booleanValue = v),
+              "onUpdate:modelValue": n[0] || (n[0] = (q) => e.question.booleanValue = q),
               class: l(e.question.cssClasses.controlCheckbox),
               id: e.question.inputId,
               ".indeterminate": e.question.isIndeterminate,
@@ -2479,8 +2484,8 @@ const so = /* @__PURE__ */ h({
               "aria-label": e.question.ariaLabel,
               "aria-invalid": e.question.ariaInvalid,
               "aria-describedby": e.question.ariaDescribedBy
-            }, null, 42, Yn), [
-              [te, e.question.booleanValue]
+            }, null, 42, Xn), [
+              [oe, e.question.booleanValue]
             ]),
             c("span", {
               class: l(e.question.cssClasses.checkboxMaterialDecorator)
@@ -2491,26 +2496,26 @@ const so = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.svgIcon
-                }, null, 8, Zn)
+                }, null, 8, Yn)
               ], 2)) : d("", !0),
-              xn
+              Zn
             ], 2),
             e.question.isLabelRendered ? (i(), u("span", {
               key: 0,
               id: e.question.labelRenderedAriaID,
               class: l(e.question.cssClasses.checkboxControlLabel)
             }, [
-              e.question.hasTitleActions ? d("", !0) : (i(), q(t, {
+              e.question.hasTitleActions ? d("", !0) : (i(), g(t, {
                 key: 0,
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])),
-              e.question.hasTitleActions ? (i(), q(a, {
+              e.question.hasTitleActions ? (i(), g(a, {
                 key: 1,
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])) : d("", !0)
-            ], 10, eo)) : d("", !0)
+            ], 10, xn)) : d("", !0)
           ], 2),
           e.question.canRenderLabelDescription ? (i(), u("div", {
             key: 0,
@@ -2524,7 +2529,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), no = /* @__PURE__ */ h({
+}), so = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
@@ -2547,13 +2552,13 @@ const so = /* @__PURE__ */ h({
               key: 0,
               class: l(n.question.cssClasses.row)
             }, [
-              (i(!0), u($, null, B(y.cells, (v) => (i(), u("td", {
-                key: "item" + v.item.editor.id,
-                class: l(v.className)
+              (i(!0), u($, null, B(y.cells, (q) => (i(), u("td", {
+                key: "item" + q.item.editor.id,
+                class: l(q.className)
               }, [
                 C(a, {
                   question: n.question,
-                  cell: v
+                  cell: q
                 }, null, 8, ["question", "cell"])
               ], 2))), 128))
             ], 2)) : d("", !0)
@@ -2562,7 +2567,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), oo = { key: 1 }, to = /* @__PURE__ */ h({
+}), no = { key: 1 }, oo = /* @__PURE__ */ h({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2574,7 +2579,7 @@ const so = /* @__PURE__ */ h({
     const e = w(() => s.cell.item);
     return (n, t) => {
       const a = p("survey-string"), y = p("survey-errors");
-      return n.cell.isErrorsCell ? (i(), q(y, {
+      return n.cell.isErrorsCell ? (i(), g(y, {
         key: 1,
         element: e.value.editor
       }, null, 8, ["element"])) : (i(), u("label", {
@@ -2588,30 +2593,30 @@ const so = /* @__PURE__ */ h({
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
             class: l(n.question.cssClasses.requiredText)
-          }, R(e.value.editor.requiredText), 3)) : d("", !0),
+          }, T(e.value.editor.requiredText), 3)) : d("", !0),
           C(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
-          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", oo, "\xA0")) : d("", !0),
+          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", no, "\xA0")) : d("", !0),
           e.value.editor.isRequireTextAfterTitle ? (i(), u("span", {
             key: 2,
             "aria-hidden": "true",
             class: l(n.question.cssClasses.requiredText)
-          }, R(e.value.editor.requiredText), 3)) : d("", !0)
+          }, T(e.value.editor.requiredText), 3)) : d("", !0)
         ], 6),
         (i(), u("div", {
           key: e.value.editor.id,
           class: l(n.question.getItemCss()),
           onFocusin: t[0] || (t[0] = (m) => e.value.focusIn())
         }, [
-          (i(), q(T(o(e.value.editor)), {
+          (i(), g(R(o(e.value.editor)), {
             question: e.value.editor
           }, null, 8, ["question"]))
         ], 34))
       ], 2));
     };
   }
-}), io = { class: "sv-hidden" }, ro = { key: 0 }, lo = { key: 0 }, ao = ["onClick"], uo = ["data-responsive-title", "onClick"], mo = /* @__PURE__ */ h({
+}), to = { class: "sv-hidden" }, io = { key: 0 }, ro = { key: 0 }, lo = ["onClick"], ao = ["data-responsive-title", "onClick"], uo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
@@ -2633,7 +2638,7 @@ const so = /* @__PURE__ */ h({
       }
     );
     const n = (t, a) => {
-      s.question.isInputReadOnly || (t.value = a.value);
+      t.value = a.value;
     };
     return (t, a) => {
       const y = p("survey-string");
@@ -2643,25 +2648,25 @@ const so = /* @__PURE__ */ h({
         ref: o
       }, [
         c("fieldset", null, [
-          c("legend", io, R(t.question.locTitle.renderedHtml), 1),
+          c("legend", to, T(t.question.locTitle.renderedHtml), 1),
           c("table", {
             class: l(t.question.getTableCss())
           }, [
-            t.question.showHeader ? (i(), u("thead", ro, [
+            t.question.showHeader ? (i(), u("thead", io, [
               c("tr", null, [
-                t.question.hasRows ? (i(), u("td", lo)) : d("", !0),
-                (i(!0), u($, null, B(t.question.visibleColumns, (m, v) => (i(), u("th", {
-                  key: v,
+                t.question.hasRows ? (i(), u("td", ro)) : d("", !0),
+                (i(!0), u($, null, B(t.question.visibleColumns, (m, q) => (i(), u("th", {
+                  key: q,
                   class: l(t.question.cssClasses.headerCell),
                   style: S({
                     minWidth: t.question.columnMinWidth,
                     width: t.question.columnMinWidth
                   })
                 }, [
-                  (i(), q(T(t.question.getColumnHeaderWrapperComponentName(m)), {
+                  (i(), g(R(t.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: t.question.getColumnHeaderWrapperComponentData(m)
                   }, {
-                    default: O(() => [
+                    default: F(() => [
                       C(y, {
                         locString: m.locText
                       }, null, 8, ["locString"])
@@ -2672,21 +2677,21 @@ const so = /* @__PURE__ */ h({
               ])
             ])) : d("", !0),
             c("tbody", null, [
-              (i(!0), u($, null, B(e.value, (m, v) => (i(), u("tr", {
-                key: "row_" + m.name + "_" + v,
+              (i(!0), u($, null, B(e.value, (m, q) => (i(), u("tr", {
+                key: "row_" + m.name + "_" + q,
                 class: l(m.rowClasses || void 0)
               }, [
                 P(c("td", {
-                  class: l(t.question.cssClasses.rowTextCell),
+                  class: l(m.rowTextClasses),
                   style: S({
                     minWidth: t.question.rowTitleWidth,
                     width: t.question.rowTitleWidth
                   })
                 }, [
-                  (i(), q(T(t.question.getRowHeaderWrapperComponentName(m)), {
+                  (i(), g(R(t.question.getRowHeaderWrapperComponentName(m)), {
                     componentData: t.question.getRowHeaderWrapperComponentData(m)
                   }, {
-                    default: O(() => [
+                    default: F(() => [
                       C(y, {
                         locString: m.locText
                       }, null, 8, ["locString"])
@@ -2696,28 +2701,28 @@ const so = /* @__PURE__ */ h({
                 ], 6), [
                   [M, t.question.hasRows]
                 ]),
-                t.question.hasCellText ? (i(!0), u($, { key: 0 }, B(t.question.visibleColumns, (g, I) => (i(), u("td", {
+                t.question.hasCellText ? (i(!0), u($, { key: 0 }, B(t.question.visibleColumns, (v, I) => (i(), u("td", {
                   key: I,
-                  class: l(t.question.getItemClass(m, g)),
-                  onClick: (b) => n(m, g)
+                  class: l(t.question.getItemClass(m, v)),
+                  onClick: (b) => n(m, v)
                 }, [
                   C(y, {
-                    locString: t.question.getCellDisplayLocText(m.name, g)
+                    locString: t.question.getCellDisplayLocText(m.name, v)
                   }, null, 8, ["locString"])
-                ], 10, ao))), 128)) : d("", !0),
-                t.question.hasCellText ? d("", !0) : (i(!0), u($, { key: 1 }, B(t.question.visibleColumns, (g, I) => (i(), u("td", {
+                ], 10, lo))), 128)) : d("", !0),
+                t.question.hasCellText ? d("", !0) : (i(!0), u($, { key: 1 }, B(t.question.visibleColumns, (v, I) => (i(), u("td", {
                   key: I,
-                  "data-responsive-title": g.locText.renderedHtml,
+                  "data-responsive-title": v.locText.renderedHtml,
                   class: l(t.question.cssClasses.cell),
-                  onClick: (b) => n(m, g)
+                  onClick: (b) => n(m, v)
                 }, [
-                  (i(), q(T(t.question.cellComponent), {
+                  (i(), g(R(t.question.cellComponent), {
                     question: t.question,
                     row: m,
-                    column: g,
+                    column: v,
                     columnIndex: I
                   }, null, 8, ["question", "row", "column", "columnIndex"]))
-                ], 10, uo))), 128))
+                ], 10, ao))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2725,7 +2730,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), co = ["name", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], po = ["xlink:href"], vo = /* @__PURE__ */ h({
+}), mo = ["name", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], co = ["xlink:href"], po = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixCell",
   props: {
@@ -2747,7 +2752,7 @@ const so = /* @__PURE__ */ h({
           name: s.row.fullName,
           "onUpdate:modelValue": o[0] || (o[0] = (n) => s.row.value = n),
           value: s.column.value,
-          disabled: s.question.isInputReadOnly,
+          disabled: s.row.isReadOnly,
           id: s.question.inputId + "_" + s.row.name + "_" + s.columnIndex,
           "aria-required": s.question.a11y_input_ariaRequired,
           "aria-label": s.question.getCellAriaLabel(
@@ -2756,8 +2761,8 @@ const so = /* @__PURE__ */ h({
           ),
           "aria-invalid": s.question.a11y_input_ariaInvalid,
           "aria-describedby": s.question.a11y_input_ariaDescribedBy
-        }, null, 10, co), [
-          [ee, s.row.value]
+        }, null, 10, mo), [
+          [x, s.row.value]
         ]),
         c("span", {
           class: l(s.question.cssClasses.materialDecorator)
@@ -2768,7 +2773,7 @@ const so = /* @__PURE__ */ h({
           }, [
             c("use", {
               "xlink:href": s.question.itemSvgIcon
-            }, null, 8, po)
+            }, null, 8, co)
           ], 2)) : d("", !0)
         ], 2),
         s.question.isMobile ? (i(), u("span", {
@@ -2782,7 +2787,7 @@ const so = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), yo = /* @__PURE__ */ h({
+}), vo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
@@ -2792,14 +2797,14 @@ const so = /* @__PURE__ */ h({
     const s = r, o = _(null);
     return A(s, o), (e, n) => {
       const t = p("survey-matrixtable");
-      return i(), q(t, {
+      return i(), g(t, {
         question: e.question,
         ref_key: "root",
         ref: o
       }, null, 8, ["question"]);
     };
   }
-}), qo = { key: 0 }, go = ["data-sv-drop-target-matrix-row", "onPointerdown"], ho = { key: 1 }, Co = /* @__PURE__ */ h({
+}), yo = { key: 0 }, qo = ["data-sv-drop-target-matrix-row", "onPointerdown"], go = { key: 1 }, ho = /* @__PURE__ */ h({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2828,7 +2833,7 @@ const so = /* @__PURE__ */ h({
         c("table", {
           class: l(e.question.getTableCss())
         }, [
-          o.value.showHeader ? (i(), u("thead", qo, [
+          o.value.showHeader ? (i(), u("thead", yo, [
             c("tr", null, [
               (i(!0), u($, null, B(o.value.headerRow.cells, (m) => (i(), u($, null, [
                 m.hasTitle ? (i(), u("th", {
@@ -2836,14 +2841,14 @@ const so = /* @__PURE__ */ h({
                   class: l(m.className),
                   style: S({ minWidth: m.minWidth, width: m.width })
                 }, [
-                  (i(), q(T(e.question.getColumnHeaderWrapperComponentName(m)), {
+                  (i(), g(R(e.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(m)
                   }, {
-                    default: O(() => [
+                    default: F(() => [
                       C(t, {
                         locString: m.locTitle
                       }, null, 8, ["locString"]),
-                      m.column ? (i(), q(a, {
+                      m.column ? (i(), g(a, {
                         key: 0,
                         column: m.column,
                         question: e.question
@@ -2867,23 +2872,23 @@ const so = /* @__PURE__ */ h({
               m.visible ? (i(), u("tr", {
                 key: 0,
                 "data-sv-drop-target-matrix-row": m.row && m.row.id,
-                onPointerdown: (v) => e.question.onPointerDown(v, m.row),
+                onPointerdown: (q) => e.question.onPointerDown(q, m.row),
                 class: l(m.className)
               }, [
-                (i(!0), u($, null, B(m.cells, (v, g) => (i(), q(y, {
-                  cell: v,
+                (i(!0), u($, null, B(m.cells, (q, v) => (i(), g(y, {
+                  cell: q,
                   question: e.question,
-                  key: m.id + "_" + g
+                  key: m.id + "_" + v
                 }, null, 8, ["cell", "question"]))), 128))
-              ], 42, go)) : d("", !0)
+              ], 42, qo)) : d("", !0)
             ], 64))), 128))
           ]),
-          o.value.showFooter ? (i(), u("tfoot", ho, [
+          o.value.showFooter ? (i(), u("tfoot", go, [
             c("tr", null, [
-              (i(!0), u($, null, B(o.value.footerRow.cells, (m, v) => (i(), q(y, {
+              (i(!0), u($, null, B(o.value.footerRow.cells, (m, q) => (i(), g(y, {
                 cell: m,
                 question: e.question,
-                key: "footer_" + v
+                key: "footer_" + q
               }, null, 8, ["cell", "question"]))), 128))
             ])
           ])) : d("", !0)
@@ -2891,7 +2896,7 @@ const so = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), bo = /* @__PURE__ */ c("span", null, "\xA0", -1), ko = /* @__PURE__ */ h({
+}), Co = /* @__PURE__ */ c("span", null, "\xA0", -1), bo = /* @__PURE__ */ h({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2900,40 +2905,40 @@ const so = /* @__PURE__ */ h({
   setup(r) {
     const s = r;
     return L(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u($, { key: 0 }, [
-      bo,
+      Co,
       o.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
-      }, R(o.column.requiredText), 3)) : d("", !0)
+      }, T(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
-}), fo = ["data-responsive-title", "title", "colspan"], Io = /* @__PURE__ */ h({
+}), ko = ["data-responsive-title", "title", "colspan"], fo = /* @__PURE__ */ h({
   __name: "MatrixDropdownCellComp",
   props: {
     question: {},
     cell: {}
   },
   setup(r) {
-    const s = r, o = _(!1), e = _(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (g) => re(g);
+    const s = r, o = _(!1), e = _(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (v) => re(v);
     H(() => {
       if (!s.cell.hasQuestion || !s.question || !s.question.survey)
         return;
       a(), s.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
         a();
       });
-      const g = e.value, I = s.cell.question, b = {
+      const v = e.value, I = s.cell.question, b = {
         cell: s.cell.cell,
         cellQuestion: I,
-        htmlElement: g,
+        htmlElement: v,
         row: s.cell.row,
         column: s.cell.cell.column
       };
-      s.question.survey.matrixAfterCellRender(s.question, b), I && I.afterRenderCore(g);
+      s.question.survey.matrixAfterCellRender(s.question, b), I && I.afterRenderCore(v);
     });
     const m = w(() => {
-      const g = s.cell;
-      if (g.hasPanel) {
-        const I = g.panel, b = I.survey;
+      const v = s.cell;
+      if (v.hasPanel) {
+        const I = v.panel, b = I.survey;
         if (b) {
           const N = b.getElementWrapperComponentName(I);
           if (N)
@@ -2941,7 +2946,7 @@ const so = /* @__PURE__ */ h({
         }
         return "survey-panel";
       }
-    }), v = w(() => {
+    }), q = w(() => {
       if (s.cell.hasPanel) {
         const I = s.cell.panel, b = I.survey;
         let N;
@@ -2955,98 +2960,98 @@ const so = /* @__PURE__ */ h({
         };
       }
     });
-    return (g, I) => {
+    return (v, I) => {
       const b = p("survey-errors"), N = p("sv-matrix-drag-drop-icon"), k = p("sv-action-bar"), D = p("survey-radiogroup-item"), E = p("survey-checkbox-item"), V = p("survey-other-choice"), K = p("survey-string");
       return i(), u("td", {
-        class: l(g.cell.className),
+        class: l(v.cell.className),
         "data-responsive-title": n(),
-        title: g.cell.getTitle(),
+        title: v.cell.getTitle(),
         style: S(t()),
-        colspan: g.cell.colSpans,
-        onFocusin: I[0] || (I[0] = (ue) => g.cell.focusIn()),
+        colspan: v.cell.colSpans,
+        onFocusin: I[0] || (I[0] = (ue) => v.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
-        g.cell.isErrorsCell ? (i(), q(b, {
+        v.cell.isErrorsCell ? (i(), g(b, {
           key: 0,
-          element: g.cell.question
+          element: v.cell.question
         }, null, 8, ["element"])) : d("", !0),
-        g.cell.isDragHandlerCell ? (i(), q(N, {
+        v.cell.isDragHandlerCell ? (i(), g(N, {
           key: 1,
-          item: { data: { row: g.cell.row, question: g.question } }
+          item: { data: { row: v.cell.row, question: v.question } }
         }, null, 8, ["item"])) : d("", !0),
-        g.cell.isActionsCell ? (i(), q(k, {
+        v.cell.isActionsCell ? (i(), g(k, {
           key: 2,
-          model: g.cell.item.getData(),
+          model: v.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : d("", !0),
-        g.cell.hasPanel ? (i(), q(T(m.value), F(W({ key: 3 }, v.value)), null, 16)) : d("", !0),
-        g.cell.hasQuestion ? P((i(), u("div", {
+        v.cell.hasPanel ? (i(), g(R(m.value), O(W({ key: 3 }, q.value)), null, 16)) : d("", !0),
+        v.cell.hasQuestion ? P((i(), u("div", {
           key: 4,
-          class: l(g.question.cssClasses.cellQuestionWrapper)
+          class: l(v.question.cssClasses.cellQuestionWrapper)
         }, [
-          !g.cell.isChoice && g.cell.question.isDefaultRendering() ? (i(), q(T(g.question.getCellWrapperComponentName(g.cell.cell)), {
+          !v.cell.isChoice && v.cell.question.isDefaultRendering() ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell.cell)), {
             key: 0,
-            componentData: g.question.getCellWrapperComponentData(g.cell.cell)
+            componentData: v.question.getCellWrapperComponentData(v.cell.cell)
           }, {
-            default: O(() => [
-              (i(), q(T(y(g.cell.question)), {
-                question: g.cell.question
+            default: F(() => [
+              (i(), g(R(y(v.cell.question)), {
+                question: v.cell.question
               }, null, 8, ["question"]))
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          !g.cell.isChoice && !g.cell.question.isDefaultRendering() ? (i(), q(T(g.cell.question.getComponentName()), {
+          !v.cell.isChoice && !v.cell.question.isDefaultRendering() ? (i(), g(R(v.cell.question.getComponentName()), {
             key: 1,
-            question: g.cell.question
+            question: v.cell.question
           }, null, 8, ["question"])) : d("", !0),
-          g.cell.isItemChoice ? (i(), q(T(g.question.getCellWrapperComponentName(g.cell.cell)), {
+          v.cell.isItemChoice ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell.cell)), {
             key: 2,
-            componentData: g.question.getCellWrapperComponentData(g.cell.cell)
+            componentData: v.question.getCellWrapperComponentData(v.cell.cell)
           }, {
-            default: O(() => [
-              g.cell.isRadio ? (i(), q(D, {
-                key: g.cell.item.value,
-                question: g.cell.question,
-                item: g.cell.item,
+            default: F(() => [
+              v.cell.isRadio ? (i(), g(D, {
+                key: v.cell.item.value,
+                question: v.cell.question,
+                item: v.cell.item,
                 hideLabel: !0
               }, null, 8, ["question", "item"])) : d("", !0),
-              g.cell.isCheckbox ? (i(), q(E, {
-                key: g.cell.item.value,
-                question: g.cell.question,
-                item: g.cell.item,
+              v.cell.isCheckbox ? (i(), g(E, {
+                key: v.cell.item.value,
+                question: v.cell.question,
+                item: v.cell.item,
                 hideLabel: !0
               }, null, 8, ["question", "item"])) : d("", !0)
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          g.cell.isOtherChoice ? (i(), q(V, {
+          v.cell.isOtherChoice ? (i(), g(V, {
             key: 3,
-            question: g.cell.question
+            question: v.cell.question
           }, null, 8, ["question"])) : d("", !0)
         ], 2)), [
           [M, o.value]
         ]) : d("", !0),
-        g.cell.hasTitle ? (i(), q(T(g.question.getCellWrapperComponentName(g.cell)), {
+        v.cell.hasTitle ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell)), {
           key: 5,
-          componentData: g.question.getCellWrapperComponentData(g.cell)
+          componentData: v.question.getCellWrapperComponentData(v.cell)
         }, {
-          default: O(() => [
-            g.cell.hasTitle ? (i(), q(K, {
+          default: F(() => [
+            v.cell.hasTitle ? (i(), g(K, {
               key: 0,
-              locString: g.cell.locTitle
+              locString: v.cell.locTitle
             }, null, 8, ["locString"])) : d("", !0),
-            g.cell.requiredText ? (i(), u("span", {
+            v.cell.requiredText ? (i(), u("span", {
               key: 1,
-              class: l(g.question.cssClasses.cellRequiredText)
-            }, R(g.cell.requiredText), 3)) : d("", !0)
+              class: l(v.question.cssClasses.cellRequiredText)
+            }, T(v.cell.requiredText), 3)) : d("", !0)
           ]),
           _: 1
         }, 8, ["componentData"])) : d("", !0)
-      ], 46, fo);
+      ], 46, ko);
     };
   }
-}), wo = /* @__PURE__ */ h({
+}), Io = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3081,7 +3086,7 @@ const so = /* @__PURE__ */ h({
             }, null, 2)
           ], 2)
         ], 2)) : d("", !0),
-        n.question.renderedTable.showTable ? (i(), q(y, {
+        n.question.renderedTable.showTable ? (i(), g(y, {
           key: 1,
           question: n.question
         }, null, 8, ["question"])) : d("", !0),
@@ -3137,7 +3142,7 @@ function ae(r, s = !0) {
     row: s ? w(() => r.item.data.row) : void 0
   };
 }
-const So = ["disabled"], Ro = /* @__PURE__ */ h({
+const wo = ["disabled"], So = /* @__PURE__ */ h({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3158,10 +3163,10 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
         c("span", {
           class: l(f(o).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, So);
+      ], 10, wo);
     };
   }
-}), To = ["xlink:href"], $o = /* @__PURE__ */ h({
+}), Ro = ["xlink:href"], To = /* @__PURE__ */ h({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3174,13 +3179,13 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     }, [
       c("use", {
         "xlink:href": f(o).iconDragElement
-      }, null, 8, To)
+      }, null, 8, Ro)
     ], 2)) : (i(), u("span", {
       key: 1,
       class: l(f(o).cssClasses.iconDrag)
     }, null, 2));
   }
-}), _o = ["aria-expanded", "aria-controls"], Do = /* @__PURE__ */ h({
+}), $o = ["aria-expanded", "aria-controls"], _o = /* @__PURE__ */ h({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3201,10 +3206,10 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
           iconName: f(o).getDetailPanelIconId(f(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, _o);
+      ], 10, $o);
     };
   }
-}), Bo = /* @__PURE__ */ h({
+}), Do = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3218,14 +3223,14 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
       o,
       (m) => {
         m.panelCountChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var q;
+          (q = e == null ? void 0 : e.proxy) == null || q.$forceUpdate();
         }, m.currentIndexChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var q;
+          (q = e == null ? void 0 : e.proxy) == null || q.$forceUpdate();
         }, m.renderModeChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var q;
+          (q = e == null ? void 0 : e.proxy) == null || q.$forceUpdate();
         };
       },
       (m) => {
@@ -3241,26 +3246,26 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
       const m = [];
       return s.question.currentPanel && m.push(s.question.currentPanel), m;
     }), t = () => s.question.showLegacyNavigation, a = (m) => {
-      const v = s.question.getSurvey();
-      if (v) {
-        const g = v.getElementWrapperComponentName(m);
-        if (g)
-          return g;
+      const q = s.question.getSurvey();
+      if (q) {
+        const v = q.getElementWrapperComponentName(m);
+        if (v)
+          return v;
       }
       return "panel";
     }, y = (m) => {
-      const v = s.question.getSurvey();
-      let g;
-      return v && (g = v.getElementWrapperComponentData(m)), {
+      const q = s.question.getSurvey();
+      let v;
+      return q && (v = q.getElementWrapperComponentData(m)), {
         componentName: "survey-panel",
         componentData: {
           element: m,
-          data: g
+          data: v
         }
       };
     };
-    return (m, v) => {
-      const g = p("survey-string"), I = p("sv-paneldynamic-add-btn"), b = p("survey-paneldynamicprogress"), N = p("sv-paneldynamic-remove-btn"), k = p("survey-paneldynamicprogress-v2");
+    return (m, q) => {
+      const v = p("survey-string"), I = p("sv-paneldynamic-add-btn"), b = p("survey-paneldynamicprogress"), N = p("sv-paneldynamic-remove-btn"), k = p("survey-paneldynamicprogress-v2");
       return i(), u("div", {
         class: l(m.question.cssClasses.root),
         ref_key: "root",
@@ -3271,7 +3276,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
           class: l(m.question.cssClasses.noEntriesPlaceholder)
         }, [
           c("span", null, [
-            C(g, {
+            C(v, {
               locString: m.question.locNoEntriesText
             }, null, 8, ["locString"])
           ]),
@@ -3289,7 +3294,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
-        t() && m.question.isProgressTopShowing ? (i(), q(b, {
+        t() && m.question.isProgressTopShowing ? (i(), g(b, {
           key: 2,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
@@ -3299,8 +3304,8 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
           c("div", {
             class: l(m.question.getPanelWrapperCss())
           }, [
-            (i(), q(T(a(D)), F(oe(y(D))), null, 16)),
-            m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && D.state !== "collapsed" ? (i(), q(N, {
+            (i(), g(R(a(D)), O(ne(y(D))), null, 16)),
+            m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && D.state !== "collapsed" ? (i(), g(N, {
               key: 0,
               data: { question: m.question, panel: D }
             }, null, 8, ["data"])) : d("", !0)
@@ -3310,22 +3315,22 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
             key: "separator" + D.id
           }, null, 2)) : d("", !0)
         ], 64))), 128)),
-        t() && m.question.isProgressBottomShowing ? (i(), q(b, {
+        t() && m.question.isProgressBottomShowing ? (i(), g(b, {
           key: 3,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
-        t() && m.question.isRenderModeList ? (i(), q(I, {
+        t() && m.question.isRenderModeList ? (i(), g(I, {
           key: 4,
           data: { question: m.question }
         }, null, 8, ["data"])) : d("", !0),
-        m.question.showNavigation ? (i(), q(k, {
+        m.question.showNavigation ? (i(), g(k, {
           key: 5,
           question: m.question
         }, null, 8, ["question"])) : d("", !0)
       ], 2);
     };
   }
-}), Lo = /* @__PURE__ */ h({
+}), Bo = /* @__PURE__ */ h({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3371,7 +3376,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), No = /* @__PURE__ */ h({
+}), Lo = /* @__PURE__ */ h({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3413,7 +3418,7 @@ function Y(r) {
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const Po = /* @__PURE__ */ h({
+const No = /* @__PURE__ */ h({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3423,18 +3428,25 @@ const Po = /* @__PURE__ */ h({
     const o = Y(r), e = () => {
       o.value.addPanelUI();
     };
-    return (n, t) => f(o).canAddPanel ? (i(), u("button", {
-      key: 0,
-      type: "button",
-      class: l(f(o).getAddButtonCss()),
-      onClick: e
-    }, [
-      c("span", {
-        class: l(f(o).cssClasses.buttonAddText)
-      }, R(f(o).panelAddText), 3)
-    ], 2)) : d("", !0);
+    return (n, t) => {
+      const a = p("survey-string");
+      return f(o).canAddPanel ? (i(), u("button", {
+        key: 0,
+        type: "button",
+        class: l(f(o).getAddButtonCss()),
+        onClick: e
+      }, [
+        c("span", {
+          class: l(f(o).cssClasses.buttonAddText)
+        }, [
+          C(a, {
+            locString: f(o).locPanelAddText
+          }, null, 8, ["locString"])
+        ], 2)
+      ], 2)) : d("", !0);
+    };
   }
-}), Ao = ["title"], Mo = /* @__PURE__ */ h({
+}), Po = ["title"], Ao = /* @__PURE__ */ h({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3455,10 +3467,10 @@ const Po = /* @__PURE__ */ h({
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Ao);
+      ], 10, Po);
     };
   }
-}), Ho = ["title"], Wo = /* @__PURE__ */ h({
+}), Mo = ["title"], Ho = /* @__PURE__ */ h({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3479,10 +3491,10 @@ const Po = /* @__PURE__ */ h({
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Ho);
+      ], 10, Mo);
     };
   }
-}), Eo = /* @__PURE__ */ h({
+}), Wo = /* @__PURE__ */ h({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
@@ -3494,20 +3506,27 @@ const Po = /* @__PURE__ */ h({
     ), n = (t) => {
       o.value.isInputReadOnly || o.value.removePanelUI(t);
     };
-    return (t, a) => (i(), u("button", {
-      type: "button",
-      class: l(f(o).getPanelRemoveButtonCss()),
-      onClick: a[0] || (a[0] = (y) => n(e.value))
-    }, [
-      c("span", {
-        class: l(f(o).cssClasses.buttonRemoveText)
-      }, R(f(o).panelRemoveText), 3),
-      c("span", {
-        class: l(f(o).cssClasses.iconRemove)
-      }, null, 2)
-    ], 2));
+    return (t, a) => {
+      const y = p("survey-string");
+      return i(), u("button", {
+        type: "button",
+        class: l(f(o).getPanelRemoveButtonCss()),
+        onClick: a[0] || (a[0] = (m) => n(e.value))
+      }, [
+        c("span", {
+          class: l(f(o).cssClasses.buttonRemoveText)
+        }, [
+          C(y, {
+            locString: f(o).locPanelRemoveText
+          }, null, 8, ["locString"])
+        ], 2),
+        c("span", {
+          class: l(f(o).cssClasses.iconRemove)
+        }, null, 2)
+      ], 2);
+    };
   }
-}), Vo = /* @__PURE__ */ h({
+}), Eo = /* @__PURE__ */ h({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3517,9 +3536,9 @@ const Po = /* @__PURE__ */ h({
     const o = Y(r);
     return (e, n) => (i(), u("div", {
       class: l(f(o).cssClasses.progressText)
-    }, R(f(o).progressText), 3));
+    }, T(f(o).progressText), 3));
   }
-}), Oo = ["id"], Fo = /* @__PURE__ */ h({
+}), Vo = ["id"], Fo = /* @__PURE__ */ h({
   __name: "Errors",
   props: {
     element: {},
@@ -3557,16 +3576,16 @@ const Po = /* @__PURE__ */ h({
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, Oo)) : d("", !0);
+      ], 10, Vo)) : d("", !0);
     };
   }
-}), zo = { key: 0 }, Uo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ko = /* @__PURE__ */ h({
+}), Oo = { key: 0 }, zo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Uo = /* @__PURE__ */ h({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", zo, R(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Oo, T(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3584,9 +3603,9 @@ const Po = /* @__PURE__ */ h({
       onInput: o[1] || (o[1] = (e) => {
         s.question.onCommentInput(e);
       })
-    }, null, 46, Uo));
+    }, null, 46, zo));
   }
-}), jo = /* @__PURE__ */ h({
+}), Ko = /* @__PURE__ */ h({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3598,7 +3617,7 @@ const Po = /* @__PURE__ */ h({
     };
     return (o, e) => {
       const n = p("survey-element-title-content"), t = p("sv-title-actions");
-      return o.element.hasTitle ? (i(), q(T(o.element.titleTagName), {
+      return o.element.hasTitle ? (i(), g(R(o.element.titleTagName), {
         key: 0,
         class: l(o.element.cssTitle),
         "aria-label": o.element.titleAriaLabel,
@@ -3610,13 +3629,13 @@ const Po = /* @__PURE__ */ h({
           s(a);
         })
       }, {
-        default: O(() => [
-          o.element.hasTitleActions ? d("", !0) : (i(), q(n, {
+        default: F(() => [
+          o.element.hasTitleActions ? d("", !0) : (i(), g(n, {
             key: 0,
             element: o.element,
             css: o.css
           }, null, 8, ["element", "css"])),
-          o.element.hasTitleActions ? (i(), q(t, {
+          o.element.hasTitleActions ? (i(), g(t, {
             key: 1,
             element: o.element,
             css: o.css
@@ -3626,7 +3645,7 @@ const Po = /* @__PURE__ */ h({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : d("", !0);
     };
   }
-}), Qo = { key: 3 }, Go = { key: 5 }, Jo = { key: 7 }, Xo = /* @__PURE__ */ h({
+}), jo = { key: 3 }, Qo = { key: 5 }, Go = { key: 7 }, Jo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3637,7 +3656,7 @@ const Po = /* @__PURE__ */ h({
     return (s, o) => {
       const e = p("survey-string");
       return i(), u($, null, [
-        s.element.isTitleRenderedAsString ? (i(), q(e, {
+        s.element.isTitleRenderedAsString ? (i(), g(e, {
           key: 0,
           locString: s.element.locTitle
         }, null, 8, ["locString"])) : d("", !0),
@@ -3645,34 +3664,34 @@ const Po = /* @__PURE__ */ h({
           key: 1,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, R(s.element.requiredText), 3)) : d("", !0),
+        }, T(s.element.requiredText), 3)) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", {
           key: 2,
           style: { position: "static" },
           class: l(s.element.cssTitleNumber),
           "aria-hidden": !0
-        }, R(s.element.no), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", Qo, "\xA0")) : d("", !0),
+        }, T(s.element.no), 3)) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", jo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, R(s.element.requiredText), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Go, "\xA0")) : d("", !0),
-        s.element.isTitleRenderedAsString ? d("", !0) : (i(), q(e, {
+        }, T(s.element.requiredText), 3)) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Qo, "\xA0")) : d("", !0),
+        s.element.isTitleRenderedAsString ? d("", !0) : (i(), g(e, {
           key: 6,
           locString: s.element.locTitle
         }, null, 8, ["locString"])),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", Jo, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", Go, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", {
           key: 8,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, R(s.element.requiredText), 3)) : d("", !0)
+        }, T(s.element.requiredText), 3)) : d("", !0)
       ], 64);
     };
   }
-}), Yo = { class: "sv-title-actions" }, Zo = { class: "sv-title-actions__title" }, xo = /* @__PURE__ */ h({
+}), Xo = { class: "sv-title-actions" }, Yo = { class: "sv-title-actions__title" }, Zo = /* @__PURE__ */ h({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3682,13 +3701,13 @@ const Po = /* @__PURE__ */ h({
     const s = r, o = w(() => s.element.getTitleToolbar());
     return (e, n) => {
       const t = p("survey-string"), a = p("survey-element-title-content"), y = p("sv-action-bar");
-      return i(), u("div", Yo, [
-        c("span", Zo, [
-          e.element.isPage ? (i(), q(t, {
+      return i(), u("div", Xo, [
+        c("span", Yo, [
+          e.element.isPage ? (i(), g(t, {
             key: 0,
             locString: e.element.locTitle
           }, null, 8, ["locString"])) : d("", !0),
-          e.element.isPage ? d("", !0) : (i(), q(a, {
+          e.element.isPage ? d("", !0) : (i(), g(a, {
             key: 1,
             element: e.element,
             css: e.css
@@ -3703,15 +3722,15 @@ const Po = /* @__PURE__ */ h({
   for (const [e, n] of s)
     o[e] = n;
   return o;
-}, et = {}, st = { class: "sv-brand-info" }, nt = /* @__PURE__ */ Se('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), ot = [
-  nt
+}, xo = {}, et = { class: "sv-brand-info" }, st = /* @__PURE__ */ Se('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), nt = [
+  st
 ];
-function tt(r, s) {
-  return i(), u("div", st, ot);
+function ot(r, s) {
+  return i(), u("div", et, nt);
 }
-const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use", null, null, -1), lt = [
-  rt
-], at = /* @__PURE__ */ h({
+const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use", null, null, -1), rt = [
+  it
+], lt = /* @__PURE__ */ h({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3731,7 +3750,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         s.title
       );
     };
-    return x(() => {
+    return te(() => {
       e();
     }), H(() => {
       e();
@@ -3740,9 +3759,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ref: o,
       class: "sv-svg-icon",
       role: "img"
-    }, lt, 512));
+    }, rt, 512));
   }
-}), ut = /* @__PURE__ */ h({
+}), at = /* @__PURE__ */ h({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3768,14 +3787,14 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         class: l(t.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u($, null, B(f(n), (m) => (i(), q(y, {
+        (i(!0), u($, null, B(f(n), (m) => (i(), g(y, {
           key: m.id,
           item: m
         }, null, 8, ["item"]))), 128))
       ], 2)) : d("", !0);
     };
   }
-}), dt = ["id"], mt = { class: "sv-action__content" }, ct = /* @__PURE__ */ h({
+}), ut = ["id"], dt = { class: "sv-action__content" }, mt = /* @__PURE__ */ h({
   __name: "Action",
   props: {
     item: {}
@@ -3790,17 +3809,17 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        c("div", mt, [
-          e.item.needSeparator ? (i(), q(t, { key: 0 })) : d("", !0),
-          (i(), q(T(o.value), { item: e.item }, null, 8, ["item"]))
+        c("div", dt, [
+          e.item.needSeparator ? (i(), g(t, { key: 0 })) : d("", !0),
+          (i(), g(R(o.value), { item: e.item }, null, 8, ["item"]))
         ])
-      ], 10, dt);
+      ], 10, ut);
     };
   }
-}), pt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], vt = {
+}), ct = ["disabled", "title", "aria-checked", "aria-expanded", "role"], pt = {
   inheritAttrs: !1
-}, yt = /* @__PURE__ */ h({
-  ...vt,
+}, vt = /* @__PURE__ */ h({
+  ...pt,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3824,7 +3843,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         "aria-expanded": o.item.ariaExpanded,
         role: o.item.ariaRole
       }, [
-        o.item.iconName ? (i(), q(n, {
+        o.item.iconName ? (i(), g(n, {
           key: 0,
           class: l(o.item.cssClasses.itemIcon),
           iconName: o.item.iconName,
@@ -3834,16 +3853,16 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         o.item.hasTitle ? (i(), u("span", {
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
-        }, R(o.item.title), 3)) : d("", !0)
-      ], 42, pt)), [
+        }, T(o.item.title), 3)) : d("", !0)
+      ], 42, ct)), [
         [t, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
     };
   }
-}), qt = ["disabled", "title", "role"], gt = {
+}), yt = ["disabled", "title", "role"], qt = {
   inheritAttrs: !1
-}, ht = /* @__PURE__ */ h({
-  ...gt,
+}, gt = /* @__PURE__ */ h({
+  ...qt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -3865,17 +3884,17 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         P((i(), u("button", {
           type: "button",
           class: l(n.item.getActionBarItemCss()),
-          onClick: t[0] || (t[0] = (v) => {
-            n.item.action(n.item, !!v.pointerType);
+          onClick: t[0] || (t[0] = (q) => {
+            n.item.action(n.item, !!q.pointerType);
           }),
-          onKeyup: t[1] || (t[1] = (v) => {
-            v.stopPropagation();
+          onKeyup: t[1] || (t[1] = (q) => {
+            q.stopPropagation();
           }),
           disabled: n.item.disabled,
           title: n.item.tooltip || n.item.title,
           role: n.item.ariaRole
         }, [
-          n.item.iconName ? (i(), q(a, {
+          n.item.iconName ? (i(), g(a, {
             key: 0,
             class: l(n.item.cssClasses.itemIcon),
             iconName: n.item.iconName,
@@ -3885,8 +3904,8 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
           n.item.hasTitle ? (i(), u("span", {
             key: 1,
             class: l(n.item.getActionBarItemTitleCss())
-          }, R(n.item.title), 3)) : d("", !0)
-        ], 42, qt)), [
+          }, T(n.item.title), 3)) : d("", !0)
+        ], 42, yt)), [
           [m, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
         ]),
         C(y, {
@@ -3896,7 +3915,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ], 64);
     };
   }
-}), Ct = /* @__PURE__ */ h({
+}), ht = /* @__PURE__ */ h({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -3907,7 +3926,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       class: l(["sv-action-bar-separator", o.value])
     }, null, 2));
   }
-}), bt = ["aria-label", "placeholder", "value"], kt = ["aria-label"], ft = ["id"], It = /* @__PURE__ */ h({
+}), Ct = ["aria-label", "placeholder", "value"], bt = ["aria-label"], kt = ["id"], ft = /* @__PURE__ */ h({
   __name: "List",
   props: {
     model: {}
@@ -3925,7 +3944,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
     return L(() => s.model), H(() => {
       s.model.initListContainerHtmlElement(o.value);
     }), (a, y) => {
-      const m = p("sv-svg-icon"), v = p("sv-list-item");
+      const m = p("sv-svg-icon"), q = p("sv-list-item");
       return i(), u("div", {
         class: l(a.model.cssClasses.root),
         ref_key: "listContainerElement",
@@ -3951,11 +3970,11 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
             value: a.model.filterString,
             onChange: e,
             onKeyup: n
-          }, null, 42, bt),
+          }, null, 42, Ct),
           a.model.showSearchClearButton && !!a.model.filterString ? (i(), u("button", {
             key: 0,
-            onClick: y[0] || (y[0] = (g) => {
-              a.model.onClickSearchClearButton(g);
+            onClick: y[0] || (y[0] = (v) => {
+              a.model.onClickSearchClearButton(v);
             }),
             class: l(a.model.cssClasses.searchClearButtonIcon)
           }, [
@@ -3971,7 +3990,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
           c("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, R(a.model.emptyMessage), 11, kt)
+          }, T(a.model.emptyMessage), 11, bt)
         ], 2), [
           [M, a.model.isEmpty]
         ]),
@@ -3980,26 +3999,26 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
           class: l(a.model.getListClass()),
           role: "listbox",
           id: a.model.elementId,
-          onMousedown: y[1] || (y[1] = (g) => {
-            g.preventDefault();
+          onMousedown: y[1] || (y[1] = (v) => {
+            v.preventDefault();
           }),
           onMousemove: t,
-          onKeydown: y[2] || (y[2] = (g) => {
-            a.model.onKeyDown(g);
+          onKeydown: y[2] || (y[2] = (v) => {
+            a.model.onKeyDown(v);
           })
         }, [
-          (i(!0), u($, null, B(a.model.renderedActions, (g) => (i(), q(v, {
-            item: g,
+          (i(!0), u($, null, B(a.model.renderedActions, (v) => (i(), g(q, {
+            item: v,
             model: a.model,
-            key: g.id
+            key: v.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, ft)), [
+        ], 42, kt)), [
           [M, !a.model.isEmpty]
         ]) : d("", !0)
       ], 2);
     };
   }
-}), wt = ["aria-selected", "id"], St = ["title"], Rt = /* @__PURE__ */ h({
+}), It = ["aria-selected", "id"], wt = ["title"], St = /* @__PURE__ */ h({
   __name: "ListItem",
   props: {
     model: {},
@@ -4021,7 +4040,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         "aria-selected": n.model.isItemSelected(n.item),
         key: n.item.id,
         id: o.value,
-        onPointerdown: t[0] || (t[0] = (v) => n.model.onPointerDown(v, n.item)),
+        onPointerdown: t[0] || (t[0] = (q) => n.model.onPointerDown(q, n.item)),
         class: l(n.model.getItemClass(n.item)),
         onClick: e
       }, [
@@ -4034,28 +4053,28 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
           class: l(n.model.cssClasses.itemBody),
           title: n.item.locTitle.calculatedText
         }, [
-          n.item.iconName && !n.item.component ? (i(), q(a, {
+          n.item.iconName && !n.item.component ? (i(), g(a, {
             key: 0,
             class: l(n.model.cssClasses.itemIcon),
             iconName: n.item.iconName,
             size: n.item.iconSize
           }, null, 8, ["class", "iconName", "size"])) : d("", !0),
-          n.item.component ? d("", !0) : (i(), q(y, {
+          n.item.component ? d("", !0) : (i(), g(y, {
             key: 1,
             locString: n.item.locTitle
           }, null, 8, ["locString"])),
-          n.item.component ? (i(), q(T(n.item.component), {
+          n.item.component ? (i(), g(R(n.item.component), {
             key: 2,
             item: n.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 14, St)
-      ], 42, wt)), [
+        ], 14, wt)
+      ], 42, It)), [
         [M, n.model.isItemVisible(n.item)],
         [m]
       ]);
     };
   }
-}), Tt = /* @__PURE__ */ h({
+}), Rt = /* @__PURE__ */ h({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4089,13 +4108,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ], 512);
     };
   }
-}), $t = { class: "sv-popup__shadow" }, _t = { class: "sv-popup__body-content" }, Dt = {
+}), Tt = { class: "sv-popup__shadow" }, $t = { class: "sv-popup__body-content" }, _t = {
   key: 0,
   class: "sv-popup__body-header"
-}, Bt = { class: "sv-popup__scrolling-content" }, Lt = { class: "sv-popup__content" }, Nt = {
+}, Dt = { class: "sv-popup__scrolling-content" }, Bt = { class: "sv-popup__content" }, Lt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Pt = /* @__PURE__ */ h({
+}, Nt = /* @__PURE__ */ h({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4106,7 +4125,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
     const e = (n) => {
       n.stopPropagation();
     };
-    return L(() => s.model), x(() => {
+    return L(() => s.model), te(() => {
       const n = s.model;
       !o && n.isVisible && s.model.updateOnShowing(), o = n.isVisible;
     }), H(() => {
@@ -4134,19 +4153,19 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
           }),
           onClick: e
         }, [
-          c("div", $t, [
-            n.model.showHeader ? (i(), q(T(n.model.popupHeaderTemplate), {
+          c("div", Tt, [
+            n.model.showHeader ? (i(), g(R(n.model.popupHeaderTemplate), {
               key: 0,
               model: n.model
             }, null, 8, ["model"])) : d("", !0),
-            c("div", _t, [
-              n.model.title ? (i(), u("div", Dt, R(n.model.title), 1)) : d("", !0),
-              c("div", Bt, [
-                c("div", Lt, [
-                  (i(), q(T(n.model.contentComponentName), F(oe(n.model.contentComponentData)), null, 16))
+            c("div", $t, [
+              n.model.title ? (i(), u("div", _t, T(n.model.title), 1)) : d("", !0),
+              c("div", Dt, [
+                c("div", Bt, [
+                  (i(), g(R(n.model.contentComponentName), O(ne(n.model.contentComponentData)), null, 16))
                 ])
               ]),
-              n.model.showFooter ? (i(), u("div", Nt, [
+              n.model.showFooter ? (i(), u("div", Lt, [
                 C(a, {
                   model: n.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4159,7 +4178,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), At = /* @__PURE__ */ h({
+}), Pt = /* @__PURE__ */ h({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4173,10 +4192,10 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       })
     }, null, 4));
   }
-}), Mt = {
+}), At = {
   key: 0,
   class: "sv-components-column"
-}, Ht = /* @__PURE__ */ h({
+}, Mt = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     survey: {},
@@ -4188,13 +4207,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       () => s.survey.getContainerContent(s.container)
     );
     return (e, n) => o.value.length > 0 ? (i(), u($, { key: 0 }, [
-      e.needRenderWrapper ? (i(), u("div", Mt, [
-        (i(!0), u($, null, B(o.value, (t, a) => (i(), q(T(t.component), {
+      e.needRenderWrapper ? (i(), u("div", At, [
+        (i(!0), u($, null, B(o.value, (t, a) => (i(), g(R(t.component), {
           survey: e.survey,
           container: e.container,
           model: t.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (i(!0), u($, { key: 1 }, B(o.value, (t, a) => (i(), q(T(t.component), {
+      ])) : (i(!0), u($, { key: 1 }, B(o.value, (t, a) => (i(), g(R(t.component), {
         survey: e.survey,
         model: t.data
       }, null, 8, ["survey", "model"]))), 256))
@@ -4222,14 +4241,14 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       }, [
         c("span", {
           class: l(e(t.survey.css))
-        }, R(t.survey.progressText), 3)
+        }, T(t.survey.progressText), 3)
       ], 6),
       c("span", {
         class: l(n(t.survey.css))
-      }, R(t.survey.progressText), 3)
+      }, T(t.survey.progressText), 3)
     ], 2));
   }
-}), Wt = ["onClick"], Et = ["title"], Vt = ["title"], Ot = /* @__PURE__ */ h({
+}), Ht = ["onClick"], Wt = ["title"], Et = ["title"], Vt = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
     survey: {}
@@ -4237,9 +4256,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
   setup(r) {
     const s = r, o = new He(s.survey), e = _(!1), n = _(), t = w(() => s.survey.css);
     let a;
-    const y = (b) => o.isListElementClickable(b), m = (b) => o.getListElementCss(b), v = (b) => {
+    const y = (b) => o.isListElementClickable(b), m = (b) => o.getListElementCss(b), q = (b) => {
       o.clickListElement(b);
-    }, g = (b, N) => o.getScrollButtonCss(b, N), I = (b) => {
+    }, v = (b, N) => o.getScrollButtonCss(b, N), I = (b) => {
       let N = n.value;
       N.scrollLeft += (b ? -1 : 1) * 70;
     };
@@ -4257,7 +4276,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         class: l(t.value.progressButtonsContainer)
       }, [
         c("div", {
-          class: l(g(e.value, !0)),
+          class: l(v(e.value, !0)),
           onClick: N[0] || (N[0] = (k) => I(!0)),
           role: "button"
         }, null, 2),
@@ -4272,21 +4291,21 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
             (i(!0), u($, null, B(b.survey.visiblePages, (k, D) => (i(), u("li", {
               key: "listelement" + D,
               class: l(m(D)),
-              onClick: (E) => y(D) ? v(D) : null
+              onClick: (E) => y(D) ? q(D) : null
             }, [
               c("div", {
                 class: l(t.value.progressButtonsPageTitle),
                 title: k.renderedNavigationTitle
-              }, R(k.renderedNavigationTitle), 11, Et),
+              }, T(k.renderedNavigationTitle), 11, Wt),
               c("div", {
                 class: l(t.value.progressButtonsPageDescription),
                 title: k.locNavigationDescription.renderedHtml
-              }, R(k.locNavigationDescription.renderedHtml), 11, Vt)
-            ], 10, Wt))), 128))
+              }, T(k.locNavigationDescription.renderedHtml), 11, Et)
+            ], 10, Ht))), 128))
           ], 2)
         ], 2),
         c("div", {
-          class: l(g(e.value, !1)),
+          class: l(v(e.value, !1)),
           onClick: N[1] || (N[1] = (k) => I(!1)),
           role: "button"
         }, null, 2)
@@ -4296,39 +4315,39 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
 }), Ft = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
-    survey: {}
+    survey: {},
+    model: {}
   },
   setup(r) {
-    const s = r, o = new We(s.survey);
-    return (e, n) => {
-      const t = p("sv-svg-icon"), a = p("sv-popup"), y = p("sv-list"), m = X("key2click");
+    return (s, o) => {
+      const e = p("sv-svg-icon"), n = p("sv-popup"), t = p("sv-list"), a = X("key2click");
       return i(), u("div", {
-        class: l(f(o).containerCss)
+        class: l(s.model.containerCss)
       }, [
-        f(o).isMobile ? P((i(), u("div", {
+        s.model.isMobile ? P((i(), u("div", {
           key: 0,
-          onClick: n[0] || (n[0] = (...v) => f(o).togglePopup && f(o).togglePopup(...v))
+          onClick: o[0] || (o[0] = (...y) => s.model.togglePopup && s.model.togglePopup(...y))
         }, [
-          C(t, {
-            iconName: f(o).icon,
+          C(e, {
+            iconName: s.model.icon,
             size: 24
           }, null, 8, ["iconName"]),
-          C(a, {
-            model: f(o).popupModel
+          C(n, {
+            model: s.model.popupModel
           }, null, 8, ["model"])
         ])), [
-          [m]
-        ]) : (i(), q(y, {
+          [a]
+        ]) : (i(), g(t, {
           key: 1,
-          model: f(o).listModel
+          model: s.model.listModel
         }, null, 8, ["model"]))
       ], 2);
     };
   }
-}), zt = { onsubmit: "return false;" }, Ut = {
+}), Ot = { onsubmit: "return false;" }, zt = {
   key: 0,
   class: "sv_custom_header"
-}, Kt = { class: "sv-components-column sv-components-column--expandable" }, jt = ["id"], Qt = { key: 2 }, Gt = ["innerHTML"], Jt = ["innerHTML"], Xt = ["innerHTML"], ve = /* @__PURE__ */ h({
+}, Ut = { class: "sv-components-column sv-components-column--expandable" }, Kt = ["id"], jt = { key: 2 }, Qt = ["innerHTML"], Gt = ["innerHTML"], Jt = ["innerHTML"], ve = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
@@ -4343,7 +4362,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       return !!t.value && b + n.value.toString();
     }, m = w(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), v = w(() => t.value.css), g = w(() => "page" + y()), I = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
+    ), q = w(() => t.value.css), v = w(() => "page" + y()), I = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
     return L(() => t.value), H(() => {
       if (!!t.value) {
         var b = o.value;
@@ -4362,26 +4381,26 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         ref_key: "root",
         ref: o
       }, [
-        t.value.needRenderIcons ? (i(), q(k, { key: 0 })) : d("", !0),
+        t.value.needRenderIcons ? (i(), g(k, { key: 0 })) : d("", !0),
         c("div", {
           class: l(t.value.wrapperFormCss)
         }, [
           C(D),
           t.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
-            class: l(v.value.rootBackgroundImage),
+            class: l(q.value.rootBackgroundImage),
             style: S(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          c("form", zt, [
-            t.value.hasLogo ? d("", !0) : (i(), u("div", Ut)),
+          c("form", Ot, [
+            t.value.hasLogo ? d("", !0) : (i(), u("div", zt)),
             c("div", {
-              class: l(v.value.container)
+              class: l(q.value.container)
             }, [
-              t.value.headerView === "basic" ? (i(), q(E, {
+              t.value.headerView === "basic" ? (i(), g(E, {
                 key: 0,
                 survey: t.value
               }, null, 8, ["survey"])) : d("", !0),
-              (i(), q(T("sv-components-container"), {
+              (i(), g(R("sv-components-container"), {
                 survey: t.value,
                 container: "header",
                 needRenderWrapper: !1
@@ -4390,13 +4409,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
                 key: 1,
                 class: l(t.value.bodyContainerCss)
               }, [
-                (i(), q(T("sv-components-container"), {
+                (i(), g(R("sv-components-container"), {
                   survey: t.value,
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                c("div", Kt, [
-                  (i(), q(T("sv-components-container"), {
+                c("div", Ut, [
+                  (i(), g(R("sv-components-container"), {
                     survey: t.value,
                     container: "center",
                     needRenderWrapper: !0
@@ -4406,41 +4425,41 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
                     style: S({ maxWidth: t.value.renderedWidth }),
                     id: a.value
                   }, [
-                    (i(), q(T("sv-components-container"), {
+                    (i(), g(R("sv-components-container"), {
                       survey: t.value,
                       container: "contentTop",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"])),
-                    (i(), q(V, {
-                      key: g.value,
+                    (i(), g(V, {
+                      key: v.value,
                       survey: t.value,
                       page: t.value.activePage,
-                      css: v.value
+                      css: q.value
                     }, null, 8, ["survey", "page", "css"])),
-                    (i(), q(T("sv-components-container"), {
+                    (i(), g(R("sv-components-container"), {
                       survey: t.value,
                       container: "contentBottom",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"]))
-                  ], 14, jt)
+                  ], 14, Kt)
                 ]),
-                (i(), q(T("sv-components-container"), {
+                (i(), g(R("sv-components-container"), {
                   survey: t.value,
                   container: "right",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"]))
               ], 2)) : d("", !0),
-              (i(), q(T("sv-components-container"), {
+              (i(), g(R("sv-components-container"), {
                 survey: t.value,
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              m.value ? (i(), u("div", Qt, [
+              m.value ? (i(), u("div", jt, [
                 c("div", {
                   innerHTML: I(),
                   class: l(t.value.completedCss)
-                }, null, 10, Gt),
-                (i(), q(T("sv-components-container"), {
+                }, null, 10, Qt),
+                (i(), g(R("sv-components-container"), {
                   survey: t.value,
                   container: "completePage",
                   needRenderWrapper: !0
@@ -4450,19 +4469,19 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
                 key: 3,
                 class: l(t.value.completedBeforeCss),
                 innerHTML: t.value.processedCompletedBeforeHtml
-              }, null, 10, Jt)) : d("", !0),
+              }, null, 10, Gt)) : d("", !0),
               t.value.state === "loading" ? (i(), u("div", {
                 key: 4,
                 class: l(t.value.loadingBodyCss),
                 innerHTML: t.value.processedLoadingHtml
-              }, null, 10, Xt)) : d("", !0),
+              }, null, 10, Jt)) : d("", !0),
               t.value.state === "empty" ? (i(), u("div", {
                 key: 5,
-                class: l(v.value.bodyEmpty)
-              }, R(t.value.emptySurveyText), 3)) : d("", !0)
+                class: l(q.value.bodyEmpty)
+              }, T(t.value.emptySurveyText), 3)) : d("", !0)
             ], 2)
           ]),
-          t.value.showBrandInfo ? (i(), q(K, { key: 1 })) : d("", !0),
+          t.value.showBrandInfo ? (i(), g(K, { key: 1 })) : d("", !0),
           C(ue, {
             model: t.value.notifier
           }, null, 8, ["model"])
@@ -4470,7 +4489,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ], 6);
     };
   }
-}), Yt = /* @__PURE__ */ h({
+}), Xt = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
@@ -4485,7 +4504,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         role: "alert",
         "aria-live": "polite"
       }, [
-        c("span", null, R(o.model.message), 1),
+        c("span", null, T(o.model.message), 1),
         C(n, {
           model: o.model.actionBar
         }, null, 8, ["model"])
@@ -4494,7 +4513,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Zt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], xt = { key: 1 }, ei = /* @__PURE__ */ h({
+}), Yt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Zt = { key: 1 }, xt = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4522,11 +4541,11 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         onInput: o[1] || (o[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
-      }, null, 46, Zt)),
-      s.question.isReadOnlyRenderDiv() ? (i(), u("div", xt, R(s.question.otherValue), 1)) : d("", !0)
+      }, null, 46, Yt)),
+      s.question.isReadOnlyRenderDiv() ? (i(), u("div", Zt, T(s.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), si = ["disabled", "value", "title"], ni = /* @__PURE__ */ h({
+}), ei = ["disabled", "value", "title"], si = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4542,106 +4561,106 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: n[0] || (n[0] = (...t) => e.item.action && e.item.action(...t))
-    }, null, 42, si)) : d("", !0);
+    }, null, 42, ei)) : d("", !0);
   }
 }), ye = /* @__PURE__ */ h({
   __name: "PopupSurvey",
   props: {
     survey: {},
     isExpanded: { type: Boolean },
+    allowClose: { type: Boolean },
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const s = r, o = z(), e = w(() => s.survey ? s.survey.getCss() : {}), n = w(() => {
-      var I;
-      return (I = o.value) != null && I.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), t = w(() => {
-      var I;
-      return (I = o.value) == null ? void 0 : I.isExpanded;
-    }), a = () => {
+    const s = r, o = z(), e = w(() => s.survey ? s.survey.getCss() : {});
+    w(() => {
+      var v;
+      return (v = o.value) != null && v.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
+    }), w(() => {
+      var v;
+      return (v = o.value) == null ? void 0 : v.isExpanded;
+    });
+    const n = () => {
       o.value.changeExpandCollapse();
-    }, y = () => {
+    }, t = () => {
       o.value.hide();
-    }, m = () => "SurveyComponent", v = () => {
+    }, a = () => "SurveyComponent", y = () => {
       o.value.onScroll();
+    }, m = () => {
+      let v = o.value.cssHeaderRoot;
+      return o.value.isCollapsed && (v += " " + o.value.cssRootCollapsedMod), v;
     };
     L(() => o.value);
-    const g = J(
+    const q = J(
       () => s.survey,
-      (I) => {
-        const b = new Ee(null, I);
-        s.isExpanded !== void 0 && (b.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (b.closeOnCompleteTimeout = s.closeOnCompleteTimeout), b.isShowing = !0, o.value = b;
+      (v) => {
+        const I = new We(null, v);
+        s.isExpanded !== void 0 && (I.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (I.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (I.allowClose = s.allowClose), I.isShowing = !0, o.value = I;
       },
       {
         immediate: !0
       }
     );
     return U(() => {
-      g();
-    }), (I, b) => {
-      const N = p("survey-string"), k = p("sv-svg-icon");
+      q();
+    }), (v, I) => {
+      const b = p("sv-svg-icon");
       return o.value.isShowing ? (i(), u("div", {
         key: 0,
-        style: S([{ position: "fixed", bottom: "3px", right: "10px" }, {
-          maxWidth: o.value.renderedWidth,
-          width: o.value.renderedWidth
-        }]),
-        class: l(o.value.cssRoot)
+        style: S({ maxWidth: o.value.renderedWidth, width: o.value.renderedWidth }),
+        class: l(o.value.cssRoot),
+        onScroll: y
       }, [
         c("div", {
-          class: l(o.value.cssHeaderRoot)
+          class: l(o.value.cssRootContent)
         }, [
-          c("span", {
-            onClick: a,
-            style: { width: "100%", cursor: "pointer", "user-select": "none" }
+          c("div", {
+            class: l(m())
           }, [
-            c("span", {
-              style: { "padding-right": "10px" },
-              class: l(o.value.cssHeaderTitle)
+            o.value.isCollapsed && !!o.value.locTitle ? (i(), u("div", {
+              key: 0,
+              class: l(o.value.cssHeaderTitleCollapsed)
+            }, T(o.value.locTitle.renderedHtml), 3)) : d("", !0),
+            c("div", {
+              class: l(o.value.cssHeaderButtonsContainer)
             }, [
-              C(N, {
-                locString: I.survey.locTitle
-              }, null, 8, ["locString"])
-            ], 2),
-            c("span", {
-              "aria-hidden": "true",
-              class: l(n.value)
-            }, null, 2)
-          ]),
-          o.value.allowClose ? (i(), u("span", {
-            key: 0,
-            class: l(o.value.cssHeaderButton),
-            onClick: y,
-            style: { transform: "rotate(45deg)", float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
-          }, [
-            C(k, {
-              iconName: "icon-expanddetail",
-              size: 16
-            })
-          ], 2)) : d("", !0),
-          t.value ? (i(), u("span", {
-            key: 1,
-            class: l(o.value.cssHeaderButton),
-            onClick: a,
-            style: { float: "right", cursor: "pointer", "user-select": "none", width: "24px", height: "24px" }
+              c("div", {
+                class: l(o.value.cssHeaderCollapseButton),
+                onClick: n
+              }, [
+                o.value.isExpanded ? (i(), g(b, {
+                  key: 0,
+                  iconName: "icon-minimize_16x16",
+                  size: 16
+                })) : d("", !0),
+                o.value.isCollapsed ? (i(), g(b, {
+                  key: 1,
+                  iconName: "icon-restore_16x16",
+                  size: 16
+                })) : d("", !0)
+              ], 2),
+              o.value.allowClose ? (i(), u("div", {
+                key: 0,
+                class: l(o.value.cssHeaderCloseButton),
+                onClick: t
+              }, [
+                C(b, {
+                  iconName: "icon-close_16x16",
+                  size: 16
+                })
+              ], 2)) : d("", !0)
+            ], 2)
+          ], 2),
+          c("div", {
+            class: l(o.value.cssBody)
           }, [
-            C(k, {
-              iconName: "icon-collapsedetail",
-              size: 16
-            })
-          ], 2)) : d("", !0)
-        ], 2),
-        t.value ? (i(), u("div", {
-          key: 0,
-          class: l(o.value.cssBody),
-          onScroll: v
-        }, [
-          (i(), q(T(m()), { survey: I.survey }, null, 8, ["survey"]))
-        ], 34)) : d("", !0)
-      ], 6)) : d("", !0);
+            (i(), g(R(a()), { survey: v.survey }, null, 8, ["survey"]))
+          ], 2)
+        ], 2)
+      ], 38)) : d("", !0);
     };
   }
-}), oi = ["innerHTML"], ti = /* @__PURE__ */ h({
+}), ni = ["innerHTML"], oi = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -4664,20 +4683,20 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       n.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, oi)) : d("", !0),
-      e.value ? (i(), q(T(a.value), {
+      }, null, 8, ni)) : d("", !0),
+      e.value ? (i(), g(R(a.value), {
         key: 1,
         question: y.question,
         css: y.css
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), ii = /* @__PURE__ */ h({
+}), ti = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(r) {
     const s = z();
-    function o(n, t, a, y, m, v, g = "popup") {
-      const I = Ve(
+    function o(n, t, a, y, m, q, v = "popup") {
+      const I = Ee(
         n,
         t,
         a,
@@ -4685,8 +4704,8 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         void 0,
         void 0,
         m,
-        v,
-        g
+        q,
+        v
       );
       return e(I);
     }
@@ -4694,7 +4713,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       n.onHide = () => {
         s.value = void 0, a.dispose();
       };
-      const a = Oe(
+      const a = Ve(
         n,
         t
       );
@@ -4706,7 +4725,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       j.showDialog = void 0;
     })), (n, t) => {
       const a = p("sv-popup-container");
-      return s.value ? (i(), q(Te, {
+      return s.value ? (i(), g(Te, {
         key: 0,
         to: s.value.container
       }, [
@@ -4714,7 +4733,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), ri = /* @__PURE__ */ h({
+}), ii = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4724,9 +4743,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
     const s = r;
     return L(() => s.counter), (o, e) => (i(), u("div", {
       class: l(o.remainingCharacterCounter)
-    }, R(o.counter.remainingCharacterCounter), 3));
+    }, T(o.counter.remainingCharacterCounter), 3));
   }
-}), li = /* @__PURE__ */ h({
+}), ri = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -4739,7 +4758,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
     const e = w(() => s.question.contentPanel);
     return (n, t) => {
       const a = p("survey-panel");
-      return i(), q(a, {
+      return i(), g(a, {
         ref_key: "root",
         ref: o,
         element: e.value,
@@ -4747,7 +4766,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
       }, null, 8, ["element", "css"]);
     };
   }
-}), ai = /* @__PURE__ */ h({
+}), li = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -4758,15 +4777,15 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
     const s = r, o = _(null);
     A(s, o);
     const e = w(() => s.question.contentQuestion), n = (t) => re(t);
-    return (t, a) => (i(), q(T(n(e.value)), {
+    return (t, a) => (i(), g(R(n(e.value)), {
       ref: o.value,
       question: e.value,
       css: t.css
     }, null, 8, ["question", "css"]));
   }
-}), ui = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), di = [
-  ui
-], qe = 440, mi = /* @__PURE__ */ h({
+}), ai = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), ui = [
+  ai
+], qe = 440, di = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -4782,36 +4801,36 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ c("use
         key: 0,
         class: l(n.model.getProgressCss()),
         style: S({ strokeDasharray: qe, strokeDashoffset: o.value })
-      }, di, 6)) : d("", !0),
+      }, ui, 6)) : d("", !0),
       c("div", {
         class: l(n.model.textContainerCss)
       }, [
         c("span", {
           class: l(n.model.majorTextCss)
-        }, R(n.model.clockMajorText), 3),
+        }, T(n.model.clockMajorText), 3),
         n.model.clockMinorText ? (i(), u("span", {
           key: 0,
           class: l(n.model.minorTextCss)
-        }, R(n.model.clockMinorText), 3)) : d("", !0)
+        }, T(n.model.clockMinorText), 3)) : d("", !0)
       ], 2)
     ], 2)) : P((i(), u("div", {
       key: 1,
       class: l(n.model.survey.getCss().timerRoot)
-    }, R(e.value), 3)), [
+    }, T(e.value), 3)), [
       [M, n.model.isRunning && !n.model.showTimerAsClock]
     ]);
   }
-}), ci = {}, pi = { class: "sd-loading-indicator" };
-function vi(r, s) {
+}), mi = {}, ci = { class: "sd-loading-indicator" };
+function pi(r, s) {
   const o = p("sv-svg-icon");
-  return i(), u("div", pi, [
+  return i(), u("div", ci, [
     C(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @__PURE__ */ h({
+const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -4838,21 +4857,21 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
           class: l(o.model.contentClasses),
           style: S({ maxWidth: o.model.maxWidth })
         }, [
-          (i(!0), u($, null, B(o.model.cells, (a, y) => (i(), q(n, {
+          (i(!0), u($, null, B(o.model.cells, (a, y) => (i(), g(n, {
             model: a,
             key: y
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        o.survey.isMobile ? (i(), u("div", qi, [
+        o.survey.isMobile ? (i(), u("div", yi, [
           C(t, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), hi = {
+}), gi = {
   key: 0,
   class: "sv-header__logo"
-}, Ci = ["src", "width", "height", "alt"], bi = /* @__PURE__ */ h({
+}, hi = ["src", "width", "height", "alt"], Ci = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -4868,7 +4887,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
           class: "sv-header__cell-content",
           style: S(s.model.contentStyle)
         }, [
-          s.model.showLogo ? (i(), u("div", hi, [
+          s.model.showLogo ? (i(), u("div", gi, [
             c("div", {
               class: l(s.model.survey.logoClassNames)
             }, [
@@ -4879,7 +4898,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
                 style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-              }, null, 14, Ci)
+              }, null, 14, hi)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
@@ -4910,10 +4929,10 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       ], 6);
     };
   }
-}), ki = { class: "sv-header--mobile" }, fi = {
+}), bi = { class: "sv-header--mobile" }, ki = {
   key: 0,
   class: "sv-header__logo"
-}, Ii = ["src", "width", "height", "alt"], wi = /* @__PURE__ */ h({
+}, fi = ["src", "width", "height", "alt"], Ii = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -4921,8 +4940,8 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
   setup(r) {
     return (s, o) => {
       const e = p("survey-element-title"), n = p("survey-string");
-      return i(), u("div", ki, [
-        s.model.survey.hasLogo ? (i(), u("div", fi, [
+      return i(), u("div", bi, [
+        s.model.survey.hasLogo ? (i(), u("div", ki, [
           c("div", {
             class: l(s.model.survey.logoClassNames)
           }, [
@@ -4933,7 +4952,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
               style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-            }, null, 14, Ii)
+            }, null, 14, fi)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
@@ -4963,7 +4982,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       ]);
     };
   }
-}), Si = /* @__PURE__ */ h({
+}), wi = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -4997,14 +5016,14 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       style: S(n(a.element)),
       class: l(a.element.cssClasses.questionWrapper)
     }, [
-      a.row.isNeedRender ? (i(), q(T(e.value), F(W({ key: 0 }, t.value)), null, 16)) : a.element.skeletonComponentName ? (i(), q(T(a.element.skeletonComponentName), {
+      a.row.isNeedRender ? (i(), g(R(e.value), O(W({ key: 0 }, t.value)), null, 16)) : a.element.skeletonComponentName ? (i(), g(R(a.element.skeletonComponentName), {
         key: 1,
         element: a.element,
         css: a.css
       }, null, 8, ["element", "css"])) : d("", !0)
     ], 6));
   }
-}), Ri = /* @__PURE__ */ h({
+}), Si = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
@@ -5012,9 +5031,9 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
   },
   setup(r) {
     const s = $e(), o = w(() => !!s.default);
-    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), q(T(e.componentName), F(W({ key: 1 }, e.componentData)), null, 16));
+    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(R(e.componentName), O(W({ key: 1 }, e.componentData)), null, 16));
   }
-}), Ti = /* @__PURE__ */ h({
+}), Ri = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5028,8 +5047,8 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
         class: l(s.css),
         onClick: o[0] || (o[0] = (...n) => s.question.doClean && s.question.doClean(...n))
       }, [
-        c("span", null, R(s.question.clearButtonCaption), 1),
-        s.question.cssClasses.removeButtonIconId ? (i(), q(e, {
+        c("span", null, T(s.question.clearButtonCaption), 1),
+        s.question.cssClasses.removeButtonIconId ? (i(), g(e, {
           key: 0,
           iconName: s.question.cssClasses.removeButtonIconId,
           size: "auto",
@@ -5038,7 +5057,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       ], 2);
     };
   }
-}), $i = ["id"], _i = /* @__PURE__ */ h({
+}), Ti = ["id"], $i = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5060,14 +5079,14 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
           playsinline: "",
           id: s.question.videoId,
           class: l(s.question.cssClasses.video)
-        }, null, 10, $i),
+        }, null, 10, Ti),
         C(e, {
           item: s.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), Di = ["for", "aria-label"], Bi = /* @__PURE__ */ h({
+}), _i = ["for", "aria-label"], Di = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -5088,19 +5107,19 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
         for: o.value.inputId,
         "aria-label": o.value.chooseButtonText
       }, [
-        o.value.cssClasses.chooseFileIconId ? (i(), q(t, {
+        o.value.cssClasses.chooseFileIconId ? (i(), g(t, {
           key: 0,
           title: o.value.chooseButtonText,
           iconName: o.value.cssClasses.chooseFileIconId,
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
-        c("span", null, R(o.value.chooseButtonText), 1)
-      ], 10, Di)), [
+        c("span", null, T(o.value.chooseButtonText), 1)
+      ], 10, _i)), [
         [a]
       ]);
     };
   }
-}), Li = ["onClick", "href", "title", "download"], Ni = ["src"], Pi = ["onClick"], Ai = ["onClick", "href", "title", "download"], Mi = /* @__PURE__ */ h({
+}), Bi = ["onClick", "href", "title", "download"], Li = ["src"], Ni = ["onClick"], Pi = ["onClick", "href", "title", "download"], Ai = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5126,7 +5145,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, Li)
+            }, T(n.name), 13, Bi)
           ], 2)) : d("", !0),
           c("div", {
             class: l(s.question.getImageWrapperCss(n))
@@ -5139,8 +5158,8 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
                 width: s.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Ni)) : d("", !0),
-            s.question.defaultImage(n) ? (i(), q(e, {
+            }, null, 12, Li)) : d("", !0),
+            s.question.defaultImage(n) ? (i(), g(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
               class: l(s.question.cssClasses.defaultImage),
@@ -5153,15 +5172,15 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
             }, [
               c("span", {
                 class: l(s.question.cssClasses.removeFile)
-              }, R(s.question.removeFileCaption), 3),
-              s.question.cssClasses.removeFileSvgIconId ? (i(), q(e, {
+              }, T(s.question.removeFileCaption), 3),
+              s.question.cssClasses.removeFileSvgIconId ? (i(), g(e, {
                 key: 0,
                 title: s.question.removeFileCaption,
                 class: l(s.question.cssClasses.removeFileSvg),
                 iconName: s.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, Pi)) : d("", !0)
+            ], 10, Ni)) : d("", !0)
           ], 2),
           n.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
@@ -5173,7 +5192,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, Ai)
+            }, T(n.name), 13, Pi)
           ], 2)) : d("", !0)
         ], 2)), [
           [M, n && s.question.isPreviewVisible(t)]
@@ -5181,7 +5200,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       ], 2)) : d("", !0);
     };
   }
-}), Hi = /* @__PURE__ */ h({
+}), Mi = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -5196,7 +5215,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
         ref_key: "root",
         ref: o
       }, [
-        (i(!0), u($, null, B(e.question.visibleChoices, (a, y) => (i(), q(t, {
+        (i(!0), u($, null, B(e.question.visibleChoices, (a, y) => (i(), g(t, {
           question: e.question,
           key: y,
           item: a,
@@ -5205,7 +5224,7 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       ], 2);
     };
   }
-}), Wi = ["title"], Ei = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Vi = ["title"], Oi = /* @__PURE__ */ h({
+}), Hi = ["title"], Wi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Ei = ["title"], Vi = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5242,13 +5261,13 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
           class: l(o.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (m) => e.value = m),
           value: o.value.value
-        }, null, 10, Ei), [
-          [ee, e.value]
+        }, null, 10, Wi), [
+          [x, e.value]
         ]),
         c("div", {
           class: l(o.value.css.decorator)
         }, [
-          o.value.iconName ? (i(), q(a, {
+          o.value.iconName ? (i(), g(a, {
             key: 0,
             iconName: o.value.iconName,
             size: o.value.iconSize,
@@ -5262,12 +5281,12 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
             C(y, {
               locString: o.value.caption
             }, null, 8, ["locString"])
-          ], 10, Vi)) : d("", !0)
+          ], 10, Ei)) : d("", !0)
         ], 2)
-      ], 10, Wi);
+      ], 10, Hi);
     };
   }
-}), Fi = ["src", "width", "height", "alt"], zi = /* @__PURE__ */ h({
+}), Fi = ["src", "width", "height", "alt"], Oi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
@@ -5292,12 +5311,12 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
       }, null, 14, Fi)
     ], 2));
   }
-}), Ui = /* @__PURE__ */ h({
+}), zi = /* @__PURE__ */ h({
   __name: "SvgBundle",
   setup(r) {
     const s = _();
     return H(() => {
-      s.value.innerHTML = ze.iconsRenderedHtml();
+      s.value.innerHTML = Oe.iconsRenderedHtml();
     }), (o, e) => P((i(), u("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
@@ -5307,9 +5326,9 @@ const yi = /* @__PURE__ */ Ce(ci, [["render", vi]]), qi = { key: 2 }, gi = /* @_
     ]);
   }
 });
-Ue.platform = "vue3";
-function Ki(r) {
-  r.component("SurveyComponent", ve), r.component("sv-svg-bundle", Ui), r.component("PopupSurveyComponent", ye), r.component("survey", ve), r.component("popup-survey", ye), r.component("survey-header", Je), r.component("sv-logo-image", zi), r.component("survey-page", Ge), r.component("survey-row", Xe), r.component("survey-question", xe), r.component("survey-panel", os), r.component("survey-element-header", ts), r.component("survey-string", is), r.component("sv-string-viewer", as), r.component("sv-string-editor", ds), r.component("sv-skeleton", cs), r.component("survey-text", ys), r.component("survey-text-input", Cs), r.component("survey-checkbox", ws), r.component("survey-checkbox-item", Ts), r.component("survey-radiogroup", $s), r.component("survey-radiogroup-item", Bs), r.component("survey-signaturepad", As), r.component("survey-html", Hs), r.component("survey-image", Os), r.component("survey-expression", Fs), r.component("survey-file", Ks), r.component("sv-file-choose-btn", Bi), r.component("sv-file-clean-btn", Ti), r.component("sv-file-preview", Mi), r.component("sv-file-video", _i), r.component("survey-imagepicker", Qs), r.component("survey-imagepicker-item", Zs), r.component("survey-comment", sn), r.component("survey-dropdown", nn), r.component("sv-dropdown-select", ln), r.component("sv-dropdown-option-item", un), r.component("sv-dropdown", vn), r.component("survey-tagbox", yn), r.component("sv-tagbox", hn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", Dn), r.component("survey-rating", Nn), r.component("sv-rating-item", An), r.component("sv-rating-item-smiley", Hn), r.component("sv-rating-item-star", En), r.component("sv-rating-dropdown", Un), r.component("sv-rating-dropdown-item", zn), r.component("survey-boolean", jn), r.component("sv-boolean-radio", Qn), r.component("sv-boolean-radio-item", Xn), r.component("sv-boolean-checkbox", so), r.component("survey-multipletext", no), r.component("survey-multipletext-item", to), r.component("survey-matrix", mo), r.component("survey-matrix-cell", vo), r.component("survey-matrixdropdown", yo), r.component("survey-matrixtable", Co), r.component("survey-matrixheaderrequired", ko), r.component("survey-matrixdropdown-cell", Io), r.component("survey-matrixdynamic", wo), r.component("sv-matrix-remove-button", Ro), r.component("sv-matrix-drag-drop-icon", $o), r.component("sv-matrix-detail-button", Do), r.component("survey-paneldynamic", Bo), r.component("survey-paneldynamicprogress", Lo), r.component("survey-paneldynamicprogress-v2", No), r.component("sv-paneldynamic-add-btn", Po), r.component("sv-paneldynamic-next-btn", Mo), r.component("sv-paneldynamic-prev-btn", Wo), r.component("sv-paneldynamic-remove-btn", Eo), r.component("sv-paneldynamic-progress-text", Vo), r.component("sv-components-container", Ht), r.component("sv-progress-buttons", Ot), r.component("sv-progress-toc", Ft), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Fo), r.component("survey-question-comment", Ko), r.component("survey-element-title", jo), r.component("survey-element-title-content", Xo), r.component("sv-title-actions", xo), r.component("sv-brand-info", it), r.component("sv-svg-icon", at), r.component("sv-action-bar", ut), r.component("sv-action", ct), r.component("sv-action-bar-item", yt), r.component("sv-action-bar-item-dropdown", ht), r.component("sv-action-bar-separator", Ct), r.component("sv-list", It), r.component("sv-list-item", Rt), r.component("sv-popup", Tt), r.component("sv-popup-container", Pt), r.component("popup-pointer", At), r.component("sv-notifier", Yt), r.component("survey-other-choice", ei), r.component("sv-nav-btn", ni), r.component("survey-customwidget", ti), r.component("survey-popup-modal", ii), r.component("sv-character-counter", ri), r.component("survey-composite", li), r.component("survey-custom", ai), r.component("sv-timerpanel", mi), r.component("sv-loading-indicator", yi), r.component("sv-header", gi), r.component("sv-header-cell", bi), r.component("sv-header-mobile", wi), r.component("sv-template-renderer", Ri), r.component("survey-element", Si), r.component("survey-buttongroup", Hi), r.component("sv-button-group-item", Oi), r.directive("key2click", {
+ze.platform = "vue3";
+function Ui(r) {
+  r.component("SurveyComponent", ve), r.component("sv-svg-bundle", zi), r.component("PopupSurveyComponent", ye), r.component("survey", ve), r.component("popup-survey", ye), r.component("survey-header", Ge), r.component("sv-logo-image", Oi), r.component("survey-page", Qe), r.component("survey-row", Je), r.component("survey-question", Ze), r.component("survey-panel", ns), r.component("survey-element-header", os), r.component("survey-string", ts), r.component("sv-string-viewer", ls), r.component("sv-string-editor", us), r.component("sv-skeleton", ms), r.component("survey-text", vs), r.component("survey-text-input", hs), r.component("survey-checkbox", Is), r.component("survey-checkbox-item", Rs), r.component("survey-radiogroup", Ts), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ps), r.component("survey-html", Ms), r.component("survey-image", Vs), r.component("survey-expression", Fs), r.component("survey-file", Us), r.component("sv-file-choose-btn", Di), r.component("sv-file-clean-btn", Ri), r.component("sv-file-preview", Ai), r.component("sv-file-video", $i), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", en), r.component("survey-dropdown", sn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", an), r.component("sv-dropdown", pn), r.component("survey-tagbox", vn), r.component("sv-tagbox", gn), r.component("sv-tagbox-item", fn), r.component("sv-tagbox-filter", bn), r.component("survey-ranking", In), r.component("survey-ranking-item", _n), r.component("survey-rating", Ln), r.component("sv-rating-item", Pn), r.component("sv-rating-item-smiley", Mn), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", jn), r.component("sv-boolean-radio-item", Jn), r.component("sv-boolean-checkbox", eo), r.component("survey-multipletext", so), r.component("survey-multipletext-item", oo), r.component("survey-matrix", uo), r.component("survey-matrix-cell", po), r.component("survey-matrixdropdown", vo), r.component("survey-matrixtable", ho), r.component("survey-matrixheaderrequired", bo), r.component("survey-matrixdropdown-cell", fo), r.component("survey-matrixdynamic", Io), r.component("sv-matrix-remove-button", So), r.component("sv-matrix-drag-drop-icon", To), r.component("sv-matrix-detail-button", _o), r.component("survey-paneldynamic", Do), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", No), r.component("sv-paneldynamic-next-btn", Ao), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Wo), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Vt), r.component("sv-navigation-toc", Ft), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Fo), r.component("survey-question-comment", Uo), r.component("survey-element-title", Ko), r.component("survey-element-title-content", Jo), r.component("sv-title-actions", Zo), r.component("sv-brand-info", tt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", vt), r.component("sv-action-bar-item-dropdown", gt), r.component("sv-action-bar-separator", ht), r.component("sv-list", ft), r.component("sv-list-item", St), r.component("sv-popup", Rt), r.component("sv-popup-container", Nt), r.component("popup-pointer", Pt), r.component("sv-notifier", Xt), r.component("survey-other-choice", xt), r.component("sv-nav-btn", si), r.component("survey-customwidget", oi), r.component("survey-popup-modal", ti), r.component("sv-character-counter", ii), r.component("survey-composite", ri), r.component("survey-custom", li), r.component("sv-timerpanel", di), r.component("sv-loading-indicator", vi), r.component("sv-header", qi), r.component("sv-header-cell", Ci), r.component("sv-header-mobile", Ii), r.component("sv-template-renderer", Si), r.component("survey-element", wi), r.component("survey-buttongroup", Mi), r.component("sv-button-group-item", Vi), r.directive("key2click", {
     mounted: function(s, o) {
       const e = { ...o.value };
       if (e.disableTabStop) {
@@ -5317,20 +5336,20 @@ function Ki(r) {
         return;
       }
       e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (n) => (n.preventDefault(), n.stopPropagation(), ge(n, e), !1)), s.addEventListener("keydown", (n) => {
-        Ke(n, e);
+        Ue(n, e);
       }), s.addEventListener("blur", (n) => {
-        je(n);
+        Ke(n);
       });
     }
   });
 }
-const Gi = {
+const Qi = {
   install(r) {
-    Ki(r);
+    Ui(r);
   }
 };
 export {
-  Gi as surveyPlugin,
+  Qi as surveyPlugin,
   L as useBase,
   le as useComputedArray,
   G as useLocString,