npm - survey-vue3-ui - Versions diffs - 1.9.134 → 1.9.136 - Mend

survey-vue3-ui 1.9.134 → 1.9.136

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/survey-vue3-ui.es.js CHANGED Viewed

@@ -2,33 +2,33 @@ import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as M
 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, ProgressButtonsResponsivityManager as He, PopupSurveyModel as Ee, settings as j, createDialogOptions as We, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
 De.createPropertiesHash = () => be({});
 function je(l) {
-  return !l || l.__vueImplemented ? !1 : (l.createArrayCoreHandler = (s, o) => {
-    const e = [], n = z(e);
+  return !l || l.__vueImplemented ? !1 : (l.createArrayCoreHandler = (s, n) => {
+    const e = [], o = z(e);
     return e.onArrayChanged = () => {
-      se(n);
-    }, s[o] = n, I(s[o]);
-  }, l.iteratePropertiesHash((s, o) => {
-    if (Array.isArray(s[o])) {
-      const e = z(s[o]);
-      s[o].onArrayChanged = () => {
+      se(o);
+    }, s[n] = o, I(s[n]);
+  }, l.iteratePropertiesHash((s, n) => {
+    if (Array.isArray(s[n])) {
+      const e = z(s[n]);
+      s[n].onArrayChanged = () => {
         se(e);
-      }, s[o] = e;
+      }, s[n] = e;
     }
-  }), l.getPropertyValueCoreHandler = (s, o) => I(s[o]), l.setPropertyValueCoreHandler = (s, o, e) => {
-    fe(s[o]) ? s[o].value = e : s[o] = e;
+  }), l.getPropertyValueCoreHandler = (s, n) => I(s[n]), l.setPropertyValueCoreHandler = (s, n, e) => {
+    fe(s[n]) ? s[n].value = e : s[n] = e;
   }, l.__vueImplemented = !0, !0);
 }
 function ce(l, s) {
-  !l || !s || (l.iteratePropertiesHash((o, e) => {
-    o[e] = I(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
+  !l || !s || (l.iteratePropertiesHash((n, e) => {
+    n[e] = I(n[e]), Array.isArray(n[e]) && (n[e].onArrayChanged = void 0);
   }), delete l.__vueImplemented, l.createArrayCoreHandler = void 0, l.getPropertyValueCoreHandler = void 0, l.setPropertyValueCoreHandler = void 0);
 }
-function B(l, s, o) {
+function B(l, s, n) {
   let e = !1;
-  const n = J(
+  const o = J(
     l,
     (t, r) => {
-      t && s && s(t, r), r && (ce(r, e), o && o(r)), e = je(t);
+      t && s && s(t, r), r && (ce(r, e), n && n(r)), e = je(t);
     },
     {
       immediate: !0
@@ -36,26 +36,26 @@ function B(l, s, o) {
   );
   Q(() => {
     const t = l();
-    t && (ce(t, e), o && o(t), n());
+    t && (ce(t, e), n && n(t), o());
   });
 }
-function A(l, s, o, e) {
-  B(() => l.question, o, e), M(() => {
+function A(l, s, n, e) {
+  B(() => l.question, n, e), M(() => {
     l.question && l.question.afterRenderQuestionElement(s.value);
   }), Q(() => {
     l.question.beforeDestroyQuestionElement(s.value);
   });
 }
 function G(l) {
-  const s = $(), o = (n) => {
-    s.value = n.renderedHtml, n.onChanged = () => {
-      s.value = n.renderedHtml;
+  const s = $(), n = (o) => {
+    s.value = o.renderedHtml, o.onChanged = () => {
+      s.value = o.renderedHtml;
     };
   }, e = J(
     l,
-    (n, t) => {
+    (o, t) => {
       t && (t.onChanged = () => {
-      }), o(n);
+      }), n(o);
     },
     { immediate: !0 }
   );
@@ -67,11 +67,11 @@ function re(l) {
   return l.customWidget ? "survey-customwidget" : l.isDefaultRendering && l.isDefaultRendering() || l.isPanel ? "survey-" + l.getTemplate() : l.getComponentName();
 }
 function le(l) {
-  const s = z(), o = ke(() => {
+  const s = z(), n = ke(() => {
     s.value = l(), se(s);
   });
   return Q(() => {
-    o();
+    n();
   }), s;
 }
 const Qe = /* @__PURE__ */ h({
@@ -82,8 +82,8 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = () => {
-      s.survey && o.value && s.survey.afterRenderPage(o.value);
+    const s = l, n = $(null), e = () => {
+      s.survey && n.value && s.survey.afterRenderPage(n.value);
     };
     B(
       () => s.page,
@@ -91,7 +91,7 @@ const Qe = /* @__PURE__ */ h({
         e();
       }
     );
-    const n = w(() => s.page._showDescription);
+    const o = w(() => s.page._showDescription);
     return M(() => {
       e();
     }), (t, r) => {
@@ -99,13 +99,13 @@ const Qe = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(t.page.cssRoot),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         C(c, {
           element: t.page,
           css: t.css
         }, null, 8, ["element", "css"]),
-        n.value ? (i(), u("div", {
+        o.value ? (i(), u("div", {
           key: 0,
           class: a(t.page.cssClasses.page.description)
         }, [
@@ -138,17 +138,17 @@ const Qe = /* @__PURE__ */ h({
     survey: {}
   },
   setup(l) {
-    const s = l, o = $();
+    const s = l, n = $();
     return M(() => {
-      var e = o.value;
+      var e = n.value;
       e && s.survey && s.survey.afterRenderHeader(e);
-    }), (e, n) => {
+    }), (e, o) => {
       const t = q("survey-element-title"), r = q("survey-string");
       return e.survey.renderedHasHeader ? (i(), u("div", {
         key: 0,
         class: a(e.survey.css.header),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         e.survey.isLogoBefore ? (i(), g(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 0,
@@ -190,34 +190,34 @@ const Qe = /* @__PURE__ */ h({
     survey: {}
   },
   setup(l) {
-    const s = l, o = w(
+    const s = l, n = w(
       () => s.row.visibleElements
     ), e = $();
     return B(
       () => s.row,
-      (n, t) => {
-        t && (n.isNeedRender = t.isNeedRender);
+      (o, t) => {
+        t && (o.isNeedRender = t.isNeedRender);
       },
-      (n) => {
-        n.stopLazyRendering(), n.isNeedRender = !n.isLazyRendering();
+      (o) => {
+        o.stopLazyRendering(), o.isNeedRender = !o.isLazyRendering();
       }
     ), M(() => {
       if (s.row && !s.row.isNeedRender) {
-        const n = e.value;
+        const o = e.value;
         setTimeout(() => {
-          s.row.startLazyRendering(n);
+          s.row.startLazyRendering(o);
         }, 10);
       }
-    }), (n, t) => {
+    }), (o, t) => {
       const r = q("survey-element");
       return i(), u("div", {
-        class: a(n.row.getRowCss()),
+        class: a(o.row.getRowCss()),
         ref_key: "root",
         ref: e
       }, [
-        (i(!0), u(_, null, D(o.value, (c) => (i(), g(r, {
-          row: n.row,
-          css: n.css,
+        (i(!0), u(_, null, D(n.value, (c) => (i(), g(r, {
+          row: o.row,
+          css: o.css,
           element: c,
           key: c.id
         }, null, 8, ["row", "css", "element"]))), 128))
@@ -235,12 +235,12 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = w(() => s.element.showErrorOnTop), n = w(() => s.element.showErrorOnBottom), t = (b) => b.cssContent, r = () => s.element.getRootStyle();
+    const s = l, n = $(null), e = w(() => s.element.showErrorOnTop), o = w(() => s.element.showErrorOnBottom), t = (b) => b.cssContent, r = () => s.element.getRootStyle();
     B(() => s.element);
     const c = () => {
-      o.value && s.element.afterRender(o.value);
+      n.value && s.element.afterRender(n.value);
     }, m = J(
-      () => o.value,
+      () => n.value,
       () => {
         c();
       }
@@ -258,7 +258,7 @@ const Qe = /* @__PURE__ */ h({
         class: a(b.element.getRootCss()),
         style: S(r()),
         ref_key: "root",
-        ref: o,
+        ref: n,
         onFocusin: N[0] || (N[0] = (K) => b.element.focusIn()),
         id: b.element.id,
         role: b.element.ariaRole,
@@ -305,7 +305,7 @@ const Qe = /* @__PURE__ */ h({
                 ]),
                 C(V, { question: b.element }, null, 8, ["question"])
               ], 2)) : d("", !0),
-              n.value ? (i(), g(k, {
+              o.value ? (i(), g(k, {
                 key: 3,
                 element: b.element,
                 location: "bottom"
@@ -350,55 +350,55 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = w(() => s.element.survey);
+    const s = l, n = $(null), e = w(() => s.element.survey);
     return B(() => s.element), M(() => {
-      s.element.survey && s.element.survey.afterRenderPanel(s.element, o.value);
-    }), (n, t) => {
+      s.element.survey && s.element.survey.afterRenderPanel(s.element, n.value);
+    }), (o, t) => {
       const r = q("survey-errors"), c = q("survey-element-header"), m = q("survey-row"), p = q("sv-action-bar");
-      return n.element.isVisible ? (i(), u("div", {
+      return o.element.isVisible ? (i(), u("div", {
         key: 0,
-        class: a(n.element.getContainerCss()),
-        id: n.element.id,
-        onFocusin: t[0] || (t[0] = (y) => n.element.focusIn()),
+        class: a(o.element.getContainerCss()),
+        id: o.element.id,
+        onFocusin: t[0] || (t[0] = (y) => o.element.focusIn()),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
-        n.element.showErrorsAbovePanel ? (i(), g(r, {
+        o.element.showErrorsAbovePanel ? (i(), g(r, {
           key: 0,
-          element: n.element
+          element: o.element
         }, null, 8, ["element"])) : d("", !0),
-        n.element.hasTitle || n.element.hasDescription ? (i(), g(c, {
+        o.element.hasTitle || o.element.hasDescription ? (i(), g(c, {
           key: 1,
-          element: n.element,
-          css: n.css
+          element: o.element,
+          css: o.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        n.element.showErrorsAbovePanel ? d("", !0) : (i(), g(r, {
+        o.element.showErrorsAbovePanel ? d("", !0) : (i(), g(r, {
           key: 2,
-          element: n.element
+          element: o.element
         }, null, 8, ["element"])),
-        n.element.isCollapsed ? d("", !0) : (i(), u("div", {
+        o.element.isCollapsed ? d("", !0) : (i(), u("div", {
           key: 3,
-          id: n.element.contentId,
-          style: S({ paddingLeft: n.element.innerPaddingLeft }),
-          class: a(n.element.cssClasses.panel.content)
+          id: o.element.contentId,
+          style: S({ paddingLeft: o.element.innerPaddingLeft }),
+          class: a(o.element.cssClasses.panel.content)
         }, [
-          (i(!0), u(_, null, D(n.element.rows, (y) => (i(), g(T(n.element.getSurvey().getRowWrapperComponentName(y)), O(E({
+          (i(!0), u(_, null, D(o.element.rows, (y) => (i(), g(T(o.element.getSurvey().getRowWrapperComponentName(y)), O(E({
             key: y.id
           }, {
-            componentData: n.element.getSurvey().getRowWrapperComponentData(y)
+            componentData: o.element.getSurvey().getRowWrapperComponentData(y)
           })), {
             default: F(() => [
               y.visible ? (i(), g(m, {
                 key: 0,
                 row: y,
                 survey: e.value,
-                css: n.css
+                css: o.css
               }, null, 8, ["row", "survey", "css"])) : d("", !0)
             ]),
             _: 2
           }, 1040))), 128)),
           C(p, {
-            model: n.element.getFooterToolbar()
+            model: o.element.getFooterToolbar()
           }, null, 8, ["model"])
         ], 14, ss))
       ], 42, es)) : d("", !0);
@@ -411,14 +411,14 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = (e) => {
+    const s = l, n = (e) => {
       typeof s.element.clickTitleFunction == "function" && s.element.clickTitleFunction(e);
     };
-    return (e, n) => {
+    return (e, o) => {
       const t = q("survey-element-title"), r = q("survey-string"), c = q("sv-action-bar");
       return i(), u("div", {
         class: a(e.element.cssHeader),
-        onClick: o
+        onClick: n
       }, [
         C(t, {
           element: e.element,
@@ -448,7 +448,7 @@ const Qe = /* @__PURE__ */ h({
     locString: {}
   },
   setup(l) {
-    return (s, o) => (i(), g(T(s.locString.renderAs), {
+    return (s, n) => (i(), g(T(s.locString.renderAs), {
       locString: s.locString.renderAsData
     }, null, 8, ["locString"]));
   }
@@ -458,15 +458,15 @@ const Qe = /* @__PURE__ */ h({
     locString: {}
   },
   setup(l) {
-    const s = l, o = G(() => s.locString), e = s.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
-    return (n, t) => n.locString.hasHtml ? (i(), u("span", {
+    const s = l, n = G(() => s.locString), e = s.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
+    return (o, t) => o.locString.hasHtml ? (i(), u("span", {
       key: 0,
       class: a(I(e)),
-      innerHTML: I(o)
+      innerHTML: I(n)
     }, null, 10, ls)) : (i(), u("span", {
       key: 1,
       class: a(I(e))
-    }, R(I(o)), 3));
+    }, R(I(n)), 3));
   }
 }), us = ["innerHTML"], ds = /* @__PURE__ */ h({
   __name: "StringEditor",
@@ -474,26 +474,26 @@ const Qe = /* @__PURE__ */ h({
     locString: {}
   },
   setup(l) {
-    const s = l, o = (n) => {
+    const s = l, n = (o) => {
       const t = s.locString;
-      t.text = n.target.innerText;
-    }, e = (n) => {
-      n.preventDefault(), n.stopPropagation();
+      t.text = o.target.innerText;
+    }, e = (o) => {
+      o.preventDefault(), o.stopPropagation();
     };
-    return (n, t) => n.locString.hasHtml ? (i(), u("span", {
+    return (o, t) => o.locString.hasHtml ? (i(), u("span", {
       key: 0,
       class: "sv-string-editor",
       contenteditable: "true",
-      innerHTML: n.locString.renderedHtml,
-      onBlur: o,
+      innerHTML: o.locString.renderedHtml,
+      onBlur: n,
       onClick: e
     }, null, 40, us)) : (i(), u("span", {
       key: 1,
       class: "sv-string-editor",
       contenteditable: "true",
-      onBlur: o,
+      onBlur: n,
       onClick: e
-    }, R(n.locString.renderedHtml), 33));
+    }, R(o.locString.renderedHtml), 33));
   }
 }), ms = ["id"], cs = /* @__PURE__ */ h({
   __name: "Skeleton",
@@ -502,9 +502,9 @@ const Qe = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.element), (o, e) => (i(), u("div", {
+    return B(() => s.element), (n, e) => (i(), u("div", {
       class: "sv-skeleton-element",
-      id: o.element.id
+      id: n.element.id
     }, null, 8, ms));
   }
 }), ps = ["id"], vs = ["value"], ys = /* @__PURE__ */ h({
@@ -514,17 +514,17 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("survey-text-input");
       return e.question.isReadOnlyRenderDiv() ? (i(), u("div", {
         key: 0,
         ref_key: "root",
-        ref: o
+        ref: n
       }, R(e.question.value), 513)) : e.question.dataListId ? (i(), u("div", {
         key: 1,
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         C(t, { question: e.question }, null, 8, ["question"]),
         v("datalist", {
@@ -536,7 +536,7 @@ const Qe = /* @__PURE__ */ h({
         key: 2,
         question: e.question,
         "get-ref": (r) => {
-          o.value = r;
+          n.value = r;
         }
       }, null, 8, ["question", "get-ref"]));
     };
@@ -548,11 +548,11 @@ const Qe = /* @__PURE__ */ h({
     getRef: { type: Function }
   },
   setup(l, { expose: s }) {
-    const o = l, e = function(r) {
-      o.getRef && o.getRef(r);
-    }, n = $(null);
-    s({ root: n }), B(() => o.question);
-    const t = w(() => o.question.inputStyle);
+    const n = l, e = function(r) {
+      n.getRef && n.getRef(r);
+    }, o = $(null);
+    s({ root: o }), B(() => n.question);
+    const t = w(() => n.question.inputStyle);
     return (r, c) => {
       const m = q("sv-character-counter");
       return r.question.getMaxLength() ? (i(), u("div", {
@@ -634,9 +634,9 @@ const Qe = /* @__PURE__ */ h({
     showLegend: { type: Boolean }
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = (t) => s.question.getItemValueWrapperComponentName(t) || s.question.itemComponent, n = (t) => ({
+    const s = l, n = $(null);
+    A(s, n);
+    const e = (t) => s.question.getItemValueWrapperComponentName(t) || s.question.itemComponent, o = (t) => ({
       componentName: s.question.itemComponent,
       componentData: {
         question: s.question,
@@ -649,7 +649,7 @@ const Qe = /* @__PURE__ */ h({
       return i(), u("fieldset", {
         class: a(t.question.getSelectBaseRootCss()),
         ref_key: "root",
-        ref: o,
+        ref: n,
         role: t.question.a11y_input_ariaRole,
         "aria-required": t.question.a11y_input_ariaRequired,
         "aria-label": t.question.a11y_input_ariaLabel,
@@ -661,17 +661,17 @@ const Qe = /* @__PURE__ */ h({
         t.showLegend ? (i(), u("legend", bs, R(t.question.locTitle.renderedHtml), 1)) : d("", !0),
         t.question.hasHeadItems ? (i(!0), u(_, { key: 1 }, D(t.question.headItems, (m) => (i(), g(T(e(m)), E({
           key: m.value
-        }, n(m)), null, 16))), 128)) : d("", !0),
+        }, o(m)), null, 16))), 128)) : d("", !0),
         !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u(_, { key: 2 }, D(t.question.bodyItems, (m) => (i(), g(T(e(m)), E({
           key: m.value
-        }, n(m)), null, 16))), 128)) : d("", !0),
+        }, o(m)), null, 16))), 128)) : d("", !0),
         t.question.blockedRow ? (i(), u("div", {
           key: 3,
           class: a(t.question.cssClasses.rootRow)
         }, [
           !t.question.hasColumns && t.question.blockedRow ? (i(!0), u(_, { key: 0 }, D(t.question.dataChoices, (m) => (i(), g(T(e(m)), E({
             key: m.value
-          }, n(m)), null, 16))), 128)) : d("", !0)
+          }, o(m)), null, 16))), 128)) : d("", !0)
         ], 2)) : d("", !0),
         t.question.hasColumns ? (i(), u("div", {
           key: 4,
@@ -684,12 +684,12 @@ const Qe = /* @__PURE__ */ h({
           }, [
             (i(!0), u(_, null, D(m, (y) => (i(), g(T(e(y)), E({
               key: y.value
-            }, n(y)), null, 16))), 128))
+            }, o(y)), null, 16))), 128))
           ], 2))), 128)) : d("", !0)
         ], 2)) : d("", !0),
         t.question.hasFootItems ? (i(!0), u(_, { key: 5 }, D(t.question.footItems, (m) => (i(), g(T(e(m)), E({
           key: m.value
-        }, n(m)), null, 16))), 128)) : d("", !0),
+        }, o(m)), null, 16))), 128)) : d("", !0),
         t.question.renderedValue && t.question.isOtherSelected ? (i(), g(c, {
           key: 6,
           question: t.question
@@ -714,7 +714,7 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    return (s, o) => (i(), g(he, {
+    return (s, n) => (i(), g(he, {
       question: s.question,
       "show-legend": !0
     }, null, 8, ["question"]));
@@ -730,10 +730,10 @@ const Qe = /* @__PURE__ */ h({
   setup(l) {
     const s = l;
     B(() => s.item);
-    const o = (e) => {
+    const n = (e) => {
       s.question.clickItemHandler(s.item, e.target.checked);
     };
-    return (e, n) => {
+    return (e, o) => {
       const t = q("survey-string");
       return i(), u("div", {
         role: "presentation",
@@ -747,8 +747,8 @@ const Qe = /* @__PURE__ */ h({
             role: "option",
             name: e.question.name + e.item.id,
             checked: e.question.isItemSelected(e.item),
-            onInput: n[0] || (n[0] = (r) => {
-              o(r);
+            onInput: o[0] || (o[0] = (r) => {
+              n(r);
             }),
             value: e.item.value,
             id: e.question.getItemId(e.item),
@@ -787,7 +787,7 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    return (s, o) => (i(), g(he, { question: s.question }, null, 8, ["question"]));
+    return (s, n) => (i(), g(he, { question: s.question }, null, 8, ["question"]));
   }
 }), $s = ["name", "value", "id", "aria-errormessage", "disabled"], _s = ["xlink:href"], Ds = /* @__PURE__ */ h({
   inheritAttrs: !1,
@@ -798,7 +798,7 @@ const Qe = /* @__PURE__ */ h({
     hideLabel: { type: Boolean }
   },
   setup(l) {
-    const s = l, o = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), n = w({
+    const s = l, n = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), o = w({
       get: () => s.question.renderedValue,
       set: (t) => {
         const r = s.question;
@@ -813,7 +813,7 @@ const Qe = /* @__PURE__ */ h({
       }, [
         v("label", {
           onMousedown: r[1] || (r[1] = (m) => t.question.onMouseDown()),
-          class: a(o(t.item))
+          class: a(n(t.item))
         }, [
           P(v("input", {
             type: "radio",
@@ -821,11 +821,11 @@ const Qe = /* @__PURE__ */ h({
             value: t.item.value,
             id: t.question.getItemId(t.item),
             "aria-errormessage": t.question.ariaErrormessage,
-            "onUpdate:modelValue": r[0] || (r[0] = (m) => n.value = m),
+            "onUpdate:modelValue": r[0] || (r[0] = (m) => o.value = m),
             disabled: !t.question.getItemEnabled(t.item),
             class: a(t.question.cssClasses.itemControl)
           }, null, 10, $s), [
-            [x, n.value]
+            [x, o.value]
           ]),
           t.question.cssClasses.materialDecorator ? (i(), u("span", {
             key: 0,
@@ -859,13 +859,13 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("survey-string"), r = q("sv-svg-icon"), c = q("sv-loading-indicator");
       return i(), u("div", {
         class: a(e.question.cssClasses.root),
         ref_key: "root",
-        ref: o,
+        ref: n,
         style: S({
           width: e.question.renderedCanvasWidth
         })
@@ -891,7 +891,7 @@ const Qe = /* @__PURE__ */ h({
           v("canvas", {
             tabindex: "-1",
             class: a(e.question.cssClasses.canvas),
-            onBlur: n[0] || (n[0] = (...m) => e.question.onBlur && e.question.onBlur(...m))
+            onBlur: o[0] || (o[0] = (...m) => e.question.onBlur && e.question.onBlur(...m))
           }, null, 34)
         ]),
         e.question.canShowClearButton ? (i(), u("div", {
@@ -902,7 +902,7 @@ const Qe = /* @__PURE__ */ h({
             type: "button",
             class: a(e.question.cssClasses.clearButton),
             title: e.question.clearButtonCaption,
-            onClick: n[1] || (n[1] = () => {
+            onClick: o[1] || (o[1] = () => {
               e.question.clearValue();
             })
           }, [
@@ -930,13 +930,13 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = G(() => s.question.locHtml);
-    return (n, t) => (i(), u("div", {
+    return (o, t) => (i(), u("div", {
       ref_key: "root",
-      ref: o,
-      class: a(n.question.renderCssRoot),
+      ref: n,
+      class: a(o.question.renderCssRoot),
       innerHTML: I(e)
     }, null, 10, As));
   }
@@ -947,76 +947,76 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = G(() => s.question.locImageLink);
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-svg-icon");
       return i(), u("div", {
-        class: a(n.question.cssClasses.root),
+        class: a(o.question.cssClasses.root),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
-        n.question.renderedMode === "image" ? P((i(), u("img", {
+        o.question.renderedMode === "image" ? P((i(), u("img", {
           key: 0,
-          class: a(n.question.getImageCss()),
+          class: a(o.question.getImageCss()),
           src: I(e),
-          alt: n.question.altText || n.question.title,
-          width: n.question.renderedWidth,
-          height: n.question.renderedHeight,
+          alt: o.question.altText || o.question.title,
+          width: o.question.renderedWidth,
+          height: o.question.renderedHeight,
           style: S({
-            objectFit: n.question.imageFit,
-            width: n.question.renderedStyleWidth,
-            height: n.question.renderedStyleHeight
+            objectFit: o.question.imageFit,
+            width: o.question.renderedStyleWidth,
+            height: o.question.renderedStyleHeight
           }),
           onLoad: t[0] || (t[0] = (c) => {
-            n.question.onLoadHandler();
+            o.question.onLoadHandler();
           }),
           onError: t[1] || (t[1] = (c) => {
-            n.question.onErrorHandler();
+            o.question.onErrorHandler();
           })
         }, null, 46, Hs)), [
-          [H, I(e) && !n.question.contentNotLoaded]
+          [H, I(e) && !o.question.contentNotLoaded]
         ]) : d("", !0),
-        n.question.renderedMode === "video" ? P((i(), u("video", {
+        o.question.renderedMode === "video" ? P((i(), u("video", {
           key: 1,
           controls: "",
-          class: a(n.question.getImageCss()),
+          class: a(o.question.getImageCss()),
           src: I(e),
-          width: n.question.renderedWidth,
-          height: n.question.renderedHeight,
+          width: o.question.renderedWidth,
+          height: o.question.renderedHeight,
           style: S({
-            objectFit: n.question.imageFit,
-            width: n.question.renderedStyleWidth,
-            height: n.question.renderedStyleHeight
+            objectFit: o.question.imageFit,
+            width: o.question.renderedStyleWidth,
+            height: o.question.renderedStyleHeight
           }),
           onLoadedmetadata: t[2] || (t[2] = (c) => {
-            n.question.onLoadHandler();
+            o.question.onLoadHandler();
           }),
           onError: t[3] || (t[3] = (c) => {
-            n.question.onErrorHandler();
+            o.question.onErrorHandler();
           })
         }, null, 46, Es)), [
-          [H, I(e) && !n.question.contentNotLoaded]
+          [H, I(e) && !o.question.contentNotLoaded]
         ]) : d("", !0),
-        n.question.renderedMode === "youtube" ? (i(), u("iframe", {
+        o.question.renderedMode === "youtube" ? (i(), u("iframe", {
           key: 2,
-          class: a(n.question.getImageCss()),
+          class: a(o.question.getImageCss()),
           src: I(e),
-          width: n.question.renderedWidth,
-          height: n.question.renderedHeight,
+          width: o.question.renderedWidth,
+          height: o.question.renderedHeight,
           style: S({
-            objectFit: n.question.imageFit,
-            width: n.question.renderedStyleWidth,
-            height: n.question.renderedStyleHeight
+            objectFit: o.question.imageFit,
+            width: o.question.renderedStyleWidth,
+            height: o.question.renderedStyleHeight
           })
         }, null, 14, Ws)) : d("", !0),
-        !I(e) || n.question.contentNotLoaded ? (i(), u("div", {
+        !I(e) || o.question.contentNotLoaded ? (i(), u("div", {
           key: 3,
-          class: a(n.question.cssClasses.noImage)
+          class: a(o.question.cssClasses.noImage)
         }, [
           C(r, {
-            iconName: n.question.cssClasses.noImageSvgIconId,
+            iconName: o.question.cssClasses.noImageSvgIconId,
             size: 48
           }, null, 8, ["iconName"])
         ], 2)) : d("", !0)
@@ -1030,11 +1030,11 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => (i(), u("div", {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => (i(), u("div", {
       class: a(e.question.cssClasses.root),
       ref_key: "root",
-      ref: o
+      ref: n
     }, R(e.question.formatedValue), 3));
   }
 }), Os = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], zs = ["id", "multiple", "placeholder"], Us = /* @__PURE__ */ h({
@@ -1044,13 +1044,13 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("survey-string"), r = q("sv-file-choose-btn"), c = q("sv-action-bar"), m = q("sv-file-clean-btn"), p = q("sv-loading-indicator"), y = q("sv-file-video"), f = q("sv-file-preview");
       return i(), u("div", {
         class: a(e.question.fileRootCss),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         !e.question.isReadOnly && e.question.hasFileUI ? (i(), u("input", {
           key: 0,
@@ -1079,10 +1079,10 @@ const Qe = /* @__PURE__ */ h({
         }, null, 10, zs)) : d("", !0),
         v("div", {
           class: a(e.question.cssClasses.dragArea),
-          onDrop: n[0] || (n[0] = (...b) => e.question.onDrop && e.question.onDrop(...b)),
-          onDragover: n[1] || (n[1] = (...b) => e.question.onDragOver && e.question.onDragOver(...b)),
-          onDragleave: n[2] || (n[2] = (...b) => e.question.onDragLeave && e.question.onDragLeave(...b)),
-          onDragenter: n[3] || (n[3] = (...b) => e.question.onDragEnter && e.question.onDragEnter(...b))
+          onDrop: o[0] || (o[0] = (...b) => e.question.onDrop && e.question.onDrop(...b)),
+          onDragover: o[1] || (o[1] = (...b) => e.question.onDragOver && e.question.onDragOver(...b)),
+          onDragleave: o[2] || (o[2] = (...b) => e.question.onDragLeave && e.question.onDragLeave(...b)),
+          onDragenter: o[3] || (o[3] = (...b) => e.question.onDragEnter && e.question.onDragEnter(...b))
         }, [
           e.question.showFileDecorator ? (i(), u("div", {
             key: 0,
@@ -1151,9 +1151,9 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = (t) => s.question.getItemValueWrapperComponentName(t) || pe, n = (t) => ({
+    const s = l, n = $(null);
+    A(s, n);
+    const e = (t) => s.question.getItemValueWrapperComponentName(t) || pe, o = (t) => ({
       componentName: pe,
       componentData: {
         question: s.question,
@@ -1164,12 +1164,12 @@ const Qe = /* @__PURE__ */ h({
     return (t, r) => (i(), u("fieldset", {
       class: a(t.question.getSelectBaseRootCss()),
       ref_key: "root",
-      ref: o
+      ref: n
     }, [
       v("legend", Ks, R(t.question.locTitle.renderedHtml), 1),
       t.question.hasColumns ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.visibleChoices, (c) => (i(), g(T(e(c)), E({
         key: c.value
-      }, n(c)), null, 16))), 128)),
+      }, o(c)), null, 16))), 128)),
       t.question.hasColumns ? (i(!0), u(_, { key: 1 }, D(t.question.columns, (c, m) => (i(), u("div", {
         class: a(t.question.getColumnClass()),
         key: m,
@@ -1177,7 +1177,7 @@ const Qe = /* @__PURE__ */ h({
       }, [
         (i(!0), u(_, null, D(c, (p) => (i(), g(T(e(p)), E({
           key: p.value
-        }, n(p)), null, 16))), 128))
+        }, o(p)), null, 16))), 128))
       ], 2))), 128)) : d("", !0)
     ], 2));
   }
@@ -1189,117 +1189,117 @@ const Qe = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, o = (n) => s.question.getItemClass(n);
+    const s = l, n = (o) => s.question.getItemClass(o);
     B(() => s.item);
     const e = G(() => s.item.locImageLink);
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-svg-icon"), c = q("survey-string");
       return i(), u("div", {
-        class: a(o(n.item))
+        class: a(n(o.item))
       }, [
         v("label", {
-          class: a(n.question.cssClasses.label)
+          class: a(o.question.cssClasses.label)
         }, [
-          n.question.multiSelect ? P((i(), u("input", {
+          o.question.multiSelect ? P((i(), u("input", {
             key: 0,
             type: "checkbox",
-            name: n.question.questionName,
-            value: n.item.value,
-            id: n.question.getItemId(n.item),
-            "onUpdate:modelValue": t[0] || (t[0] = (m) => n.question.value = m),
-            disabled: !n.question.getItemEnabled(n.item),
-            "aria-required": n.question.ariaRequired,
-            "aria-label": n.question.ariaLabel,
-            "aria-invalid": n.question.ariaInvalid,
-            "aria-errormessage": n.question.ariaErrormessage,
-            class: a(n.question.cssClasses.itemControl)
+            name: o.question.questionName,
+            value: o.item.value,
+            id: o.question.getItemId(o.item),
+            "onUpdate:modelValue": t[0] || (t[0] = (m) => o.question.value = m),
+            disabled: !o.question.getItemEnabled(o.item),
+            "aria-required": o.question.ariaRequired,
+            "aria-label": o.question.ariaLabel,
+            "aria-invalid": o.question.ariaInvalid,
+            "aria-errormessage": o.question.ariaErrormessage,
+            class: a(o.question.cssClasses.itemControl)
           }, null, 10, Qs)), [
-            [oe, n.question.value]
+            [oe, o.question.value]
           ]) : P((i(), u("input", {
             key: 1,
             type: "radio",
-            name: n.question.questionName,
-            value: n.item.value,
-            id: n.question.getItemId(n.item),
-            "onUpdate:modelValue": t[1] || (t[1] = (m) => n.question.value = m),
-            disabled: !n.question.getItemEnabled(n.item),
-            "aria-required": n.question.ariaRequired,
-            "aria-label": n.question.ariaLabel,
-            "aria-invalid": n.question.ariaInvalid,
-            "aria-errormessage": n.question.ariaErrormessage,
-            class: a(n.question.cssClasses.itemControl)
+            name: o.question.questionName,
+            value: o.item.value,
+            id: o.question.getItemId(o.item),
+            "onUpdate:modelValue": t[1] || (t[1] = (m) => o.question.value = m),
+            disabled: !o.question.getItemEnabled(o.item),
+            "aria-required": o.question.ariaRequired,
+            "aria-label": o.question.ariaLabel,
+            "aria-invalid": o.question.ariaInvalid,
+            "aria-errormessage": o.question.ariaErrormessage,
+            class: a(o.question.cssClasses.itemControl)
           }, null, 10, Gs)), [
-            [x, n.question.value]
+            [x, o.question.value]
           ]),
           v("div", {
-            class: a(n.question.cssClasses.itemDecorator)
+            class: a(o.question.cssClasses.itemDecorator)
           }, [
             v("div", {
-              class: a(n.question.cssClasses.imageContainer)
+              class: a(o.question.cssClasses.imageContainer)
             }, [
-              n.question.cssClasses.checkedItemDecorator ? (i(), u("span", {
+              o.question.cssClasses.checkedItemDecorator ? (i(), u("span", {
                 key: 0,
-                class: a(n.question.cssClasses.checkedItemDecorator)
+                class: a(o.question.cssClasses.checkedItemDecorator)
               }, [
-                n.question.cssClasses.checkedItemSvgIconId ? (i(), g(r, {
+                o.question.cssClasses.checkedItemSvgIconId ? (i(), g(r, {
                   key: 0,
-                  class: a(n.question.cssClasses.checkedItemSvgIcon),
+                  class: a(o.question.cssClasses.checkedItemSvgIcon),
                   size: "auto",
-                  iconName: n.question.cssClasses.checkedItemSvgIconId
+                  iconName: o.question.cssClasses.checkedItemSvgIconId
                 }, null, 8, ["class", "iconName"])) : d("", !0)
               ], 2)) : d("", !0),
-              I(e) && !n.item.contentNotLoaded && n.question.contentMode === "image" ? (i(), u("img", {
+              I(e) && !o.item.contentNotLoaded && o.question.contentMode === "image" ? (i(), u("img", {
                 key: 1,
-                class: a(n.question.cssClasses.image),
+                class: a(o.question.cssClasses.image),
                 src: I(e),
-                width: n.question.renderedImageWidth,
-                height: n.question.renderedImageHeight,
-                style: S({ objectFit: n.question.imageFit }),
-                alt: n.item.locText.renderedHtml,
+                width: o.question.renderedImageWidth,
+                height: o.question.renderedImageHeight,
+                style: S({ objectFit: o.question.imageFit }),
+                alt: o.item.locText.renderedHtml,
                 onLoad: t[2] || (t[2] = (m) => {
-                  n.question.onContentLoaded(n.item, m);
+                  o.question.onContentLoaded(o.item, m);
                 }),
                 onError: t[3] || (t[3] = (m) => {
-                  n.item.onErrorHandler();
+                  o.item.onErrorHandler();
                 })
               }, null, 46, Js)) : d("", !0),
-              I(e) && !n.item.contentNotLoaded && n.question.contentMode === "video" ? (i(), u("video", {
+              I(e) && !o.item.contentNotLoaded && o.question.contentMode === "video" ? (i(), u("video", {
                 key: 2,
                 controls: "",
-                class: a(n.question.cssClasses.image),
+                class: a(o.question.cssClasses.image),
                 src: I(e),
-                width: n.question.renderedImageWidth,
-                height: n.question.renderedImageHeight,
-                style: S({ objectFit: n.question.imageFit }),
+                width: o.question.renderedImageWidth,
+                height: o.question.renderedImageHeight,
+                style: S({ objectFit: o.question.imageFit }),
                 onLoadedmetadata: t[4] || (t[4] = (m) => {
-                  n.question.onContentLoaded(n.item, m);
+                  o.question.onContentLoaded(o.item, m);
                 }),
                 onError: t[5] || (t[5] = (m) => {
-                  n.item.onErrorHandler();
+                  o.item.onErrorHandler();
                 })
               }, null, 46, Xs)) : d("", !0),
-              !I(e) || n.item.contentNotLoaded ? (i(), u("div", {
+              !I(e) || o.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
-                class: a(n.question.cssClasses.itemNoImage),
+                class: a(o.question.cssClasses.itemNoImage),
                 style: S({
-                  width: n.question.renderedImageWidth + "px",
-                  height: n.question.renderedImageHeight + "px",
-                  objectFit: n.question.imageFit
+                  width: o.question.renderedImageWidth + "px",
+                  height: o.question.renderedImageHeight + "px",
+                  objectFit: o.question.imageFit
                 })
               }, [
                 C(r, {
-                  class: a(n.question.cssClasses.itemNoImageSvgIcon),
-                  iconName: n.question.cssClasses.itemNoImageSvgIconId,
+                  class: a(o.question.cssClasses.itemNoImageSvgIcon),
+                  iconName: o.question.cssClasses.itemNoImageSvgIconId,
                   size: 48
                 }, null, 8, ["class", "iconName"])
               ], 6)) : d("", !0)
             ], 2),
-            n.question.showLabel ? (i(), u("span", {
+            o.question.showLabel ? (i(), u("span", {
               key: 0,
-              class: a(n.question.cssClasses.itemText)
+              class: a(o.question.cssClasses.itemText)
             }, [
               C(c, {
-                locString: n.item.locText
+                locString: o.item.locText
               }, null, 8, ["locString"])
             ], 2)) : d("", !0)
           ], 2)
@@ -1315,80 +1315,80 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = (n) => {
+    const s = l, n = $(null);
+    A(s, n);
+    const e = (o) => {
       const t = s.question;
-      t.value = n.target.value;
+      t.value = o.target.value;
     };
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-character-counter");
-      return !n.question.isReadOnlyRenderDiv() && !n.question.getMaxLength() ? (i(), u("textarea", {
+      return !o.question.isReadOnlyRenderDiv() && !o.question.getMaxLength() ? (i(), u("textarea", {
         key: 0,
         ref_key: "root",
-        ref: o,
-        readonly: n.question.isInputReadOnly,
-        disabled: n.question.isInputReadOnly,
-        value: n.question.value,
-        id: n.question.inputId,
-        maxlength: n.question.getMaxLength(),
-        cols: n.question.cols,
-        rows: n.question.rows,
-        placeholder: n.question.renderedPlaceholder,
-        class: a(n.question.className),
+        ref: n,
+        readonly: o.question.isInputReadOnly,
+        disabled: o.question.isInputReadOnly,
+        value: o.question.value,
+        id: o.question.inputId,
+        maxlength: o.question.getMaxLength(),
+        cols: o.question.cols,
+        rows: o.question.rows,
+        placeholder: o.question.renderedPlaceholder,
+        class: a(o.question.className),
         onChange: e,
         onInput: t[0] || (t[0] = (c) => {
-          n.question.onInput(c);
+          o.question.onInput(c);
         }),
         onKeydown: t[1] || (t[1] = (c) => {
-          n.question.onKeyDown(c);
+          o.question.onKeyDown(c);
         }),
-        "aria-required": n.question.a11y_input_ariaRequired,
-        "aria-label": n.question.a11y_input_ariaLabel,
-        "aria-labelledby": n.question.a11y_input_ariaLabelledBy,
-        "aria-describedby": n.question.a11y_input_ariaDescribedBy,
-        "aria-invalid": n.question.a11y_input_ariaInvalid,
-        "aria-errormessage": n.question.a11y_input_ariaErrormessage,
-        style: S({ resize: n.question.resizeStyle })
-      }, null, 46, Zs)) : !n.question.isReadOnlyRenderDiv() && n.question.getMaxLength() ? (i(), u("div", {
+        "aria-required": o.question.a11y_input_ariaRequired,
+        "aria-label": o.question.a11y_input_ariaLabel,
+        "aria-labelledby": o.question.a11y_input_ariaLabelledBy,
+        "aria-describedby": o.question.a11y_input_ariaDescribedBy,
+        "aria-invalid": o.question.a11y_input_ariaInvalid,
+        "aria-errormessage": o.question.a11y_input_ariaErrormessage,
+        style: S({ resize: o.question.resizeStyle })
+      }, null, 46, Zs)) : !o.question.isReadOnlyRenderDiv() && o.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("textarea", {
-          readonly: n.question.isInputReadOnly,
-          disabled: n.question.isInputReadOnly,
-          value: n.question.value,
-          id: n.question.inputId,
-          maxlength: n.question.getMaxLength(),
-          cols: n.question.cols,
-          rows: n.question.rows,
-          placeholder: n.question.renderedPlaceholder,
-          class: a(n.question.className),
+          readonly: o.question.isInputReadOnly,
+          disabled: o.question.isInputReadOnly,
+          value: o.question.value,
+          id: o.question.inputId,
+          maxlength: o.question.getMaxLength(),
+          cols: o.question.cols,
+          rows: o.question.rows,
+          placeholder: o.question.renderedPlaceholder,
+          class: a(o.question.className),
           onChange: e,
           onInput: t[2] || (t[2] = (c) => {
-            n.question.onInput(c);
+            o.question.onInput(c);
           }),
           onKeydown: t[3] || (t[3] = (c) => {
-            n.question.onKeyDown(c);
+            o.question.onKeyDown(c);
           }),
-          "aria-required": n.question.a11y_input_ariaRequired,
-          "aria-label": n.question.a11y_input_ariaLabel,
-          "aria-labelledby": n.question.a11y_input_ariaLabelledBy,
-          "aria-describedby": n.question.a11y_input_ariaDescribedBy,
-          "aria-invalid": n.question.a11y_input_ariaInvalid,
-          "aria-errormessage": n.question.a11y_input_ariaErrormessage,
-          style: S({ resize: n.question.resizeStyle })
+          "aria-required": o.question.a11y_input_ariaRequired,
+          "aria-label": o.question.a11y_input_ariaLabel,
+          "aria-labelledby": o.question.a11y_input_ariaLabelledBy,
+          "aria-describedby": o.question.a11y_input_ariaDescribedBy,
+          "aria-invalid": o.question.a11y_input_ariaInvalid,
+          "aria-errormessage": o.question.a11y_input_ariaErrormessage,
+          style: S({ resize: o.question.resizeStyle })
         }, null, 46, xs),
         C(r, {
-          counter: n.question.characterCounter,
-          remainingCharacterCounter: n.question.cssClasses.remainingCharacterCounter
+          counter: o.question.characterCounter,
+          remainingCharacterCounter: o.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
       ], 512)) : (i(), u("div", {
         key: 2,
         ref_key: "root",
-        ref: o
-      }, R(n.question.value), 513));
+        ref: n
+      }, R(o.question.value), 513));
     };
   }
 }), sn = /* @__PURE__ */ h({
@@ -1398,13 +1398,13 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("sv-dropdown"), r = q("survey-other-choice");
       return i(), u("div", {
         class: a(e.question.renderCssRoot),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         C(t, { question: e.question }, null, 8, ["question"]),
         e.question.isOtherSelected ? (i(), g(r, {
@@ -1430,11 +1430,11 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = (r) => {
       s.question.onClick(r);
-    }, n = (r) => {
+    }, o = (r) => {
       s.question.onKeyUp(r);
     }, t = w({
       get() {
@@ -1451,7 +1451,7 @@ const rn = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(r.question.renderCssRoot),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("div", {
           class: a(r.question.cssClasses.selectWrapper)
@@ -1466,7 +1466,7 @@ const rn = /* @__PURE__ */ h({
             id: r.question.inputId,
             "onUpdate:modelValue": c[0] || (c[0] = (f) => t.value = f),
             onClick: e,
-            onKeyup: n,
+            onKeyup: o,
             autocomplete: r.question.autocomplete,
             class: a(r.question.getControlClass()),
             "aria-required": r.question.ariaRequired,
@@ -1507,11 +1507,11 @@ const rn = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, o = G(() => s.item.locText);
-    return B(() => s.item), (e, n) => (i(), u("option", {
+    const s = l, n = G(() => s.item.locText);
+    return B(() => s.item), (e, o) => (i(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, R(I(o)), 9, ln));
+    }, R(I(n)), 9, ln));
   }
 }), un = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], dn = { style: { visibility: "hidden" } }, mn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], cn = ["id"], pn = /* @__PURE__ */ h({
   __name: "Dropdown",
@@ -1519,10 +1519,10 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = w(() => {
+    const s = l, n = $(null), e = w(() => {
       const k = s.question;
       return k.dropdownListModel || (k.dropdownListModel = new Be(k)), s.question.dropdownListModel;
-    }), n = (k) => {
+    }), o = (k) => {
       var L;
       (L = e.value) == null || L.onClick(k);
     }, t = (k) => {
@@ -1535,8 +1535,8 @@ const rn = /* @__PURE__ */ h({
       var L;
       (L = e.value) == null || L.keyHandler(k);
     }, m = () => {
-      if (o.value) {
-        const k = o.value, L = e.value.inputStringRendered;
+      if (n.value) {
+        const k = n.value, L = e.value.inputStringRendered;
         Le.isTwoValueEquals(L, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
       }
     }, p = (k) => {
@@ -1554,7 +1554,7 @@ const rn = /* @__PURE__ */ h({
       const W = q("survey-string"), V = q("sv-svg-icon"), K = q("sv-popup");
       return i(), u("div", {
         class: a(k.question.cssClasses.selectWrapper),
-        onClick: n
+        onClick: o
       }, [
         k.question.isReadOnly ? d("", !0) : (i(), u("div", {
           key: 0,
@@ -1602,7 +1602,7 @@ const rn = /* @__PURE__ */ h({
             v("input", {
               type: "text",
               ref_key: "inputElement",
-              ref: o,
+              ref: n,
               class: a(k.question.cssClasses.filterStringInput),
               disabled: k.question.isInputReadOnly,
               autocomplete: "off",
@@ -1676,13 +1676,13 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("sv-tagbox"), r = q("survey-other-choice");
       return i(), u("div", {
         class: a(e.question.renderCssRoot),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         C(t, { question: e.question }, null, 8, ["question"]),
         e.question.isOtherSelected ? (i(), g(r, {
@@ -1698,26 +1698,26 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = w(() => {
+    const s = l, n = w(() => {
       const p = s.question;
       return p.dropdownListModel || (p.dropdownListModel = new Ne(p)), s.question.dropdownListModel;
     }), e = (p) => {
       var y;
-      (y = o.value) == null || y.onClick(p);
-    }, n = (p) => {
+      (y = n.value) == null || y.onClick(p);
+    }, o = (p) => {
       var y;
-      (y = o.value) == null || y.chevronPointerDown(p);
+      (y = n.value) == null || y.chevronPointerDown(p);
     }, t = (p) => {
       var y;
-      (y = o.value) == null || y.onClear(p);
+      (y = n.value) == null || y.onClear(p);
     }, r = (p) => {
       var y;
-      (y = o.value) == null || y.keyHandler(p);
+      (y = n.value) == null || y.keyHandler(p);
     }, c = (p) => {
       var y;
-      (y = o.value) == null || y.onBlur(p);
+      (y = n.value) == null || y.onBlur(p);
     }, m = le(() => s.question.selectedChoices);
-    return B(() => o.value), (p, y) => {
+    return B(() => n.value), (p, y) => {
       const f = q("sv-tagbox-item"), b = q("sv-tagbox-filter"), N = q("sv-svg-icon"), k = q("sv-popup"), L = q("survey-string");
       return i(), u("div", {
         class: a(p.question.cssClasses.selectWrapper),
@@ -1726,7 +1726,7 @@ const rn = /* @__PURE__ */ h({
         p.question.isReadOnly ? d("", !0) : (i(), u("div", {
           key: 0,
           id: p.question.inputId,
-          tabindex: o.value.noTabIndex ? void 0 : 0,
+          tabindex: n.value.noTabIndex ? void 0 : 0,
           disabled: p.question.isInputReadOnly ? !0 : null,
           onKeydown: r,
           onBlur: c,
@@ -1737,8 +1737,8 @@ const rn = /* @__PURE__ */ h({
           "aria-invalid": p.question.ariaInvalid,
           "aria-errormessage": p.question.ariaErrormessage,
           "aria-expanded": p.question.ariaExpanded === null ? void 0 : p.question.ariaExpanded === "true",
-          "aria-controls": o.value.listElementId,
-          "aria-activedescendant": o.value.ariaActivedescendant,
+          "aria-controls": n.value.listElementId,
+          "aria-activedescendant": n.value.ariaActivedescendant,
           required: p.question.isRequired ? !0 : null
         }, [
           v("div", {
@@ -1750,7 +1750,7 @@ const rn = /* @__PURE__ */ h({
               key: "item" + V
             }, null, 8, ["item", "question"]))), 128)),
             C(b, {
-              model: o.value,
+              model: n.value,
               question: p.question
             }, null, 8, ["model", "question"])
           ], 2),
@@ -1782,12 +1782,12 @@ const rn = /* @__PURE__ */ h({
           }, null, 8, ["locString"])) : d("", !0)
         ], 10, qn)) : (i(), g(k, {
           key: 1,
-          model: o.value.popupModel
+          model: n.value.popupModel
         }, null, 8, ["model"])),
         p.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
           key: 3,
           class: a(p.question.cssClasses.chevronButton),
-          onPointerdown: n,
+          onPointerdown: o,
           "aria-hidden": "true"
         }, [
           C(N, {
@@ -1806,12 +1806,12 @@ const rn = /* @__PURE__ */ h({
     model: {}
   },
   setup(l) {
-    const s = l, o = (r) => {
+    const s = l, n = (r) => {
       const c = s.model;
       c.inputStringRendered = r.target.value;
     }, e = (r) => {
       s.model.inputKeyHandler(r);
-    }, n = (r) => {
+    }, o = (r) => {
       s.model.onBlur(r);
     }, t = (r) => {
       s.model.onFocus(r);
@@ -1859,9 +1859,9 @@ const rn = /* @__PURE__ */ h({
             id: r.question.getInputId(),
             readonly: r.model.filterReadOnly ? !0 : void 0,
             size: r.model.inputStringRendered ? void 0 : 1,
-            onChange: o,
+            onChange: n,
             onKeydown: e,
-            onBlur: n,
+            onBlur: o,
             onFocus: t
           }, null, 42, Cn), [
             [we, r.model.inputStringRendered]
@@ -1877,10 +1877,10 @@ const rn = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, o = (e) => {
+    const s = l, n = (e) => {
       s.question.dropdownListModel.deselectItem(s.item.value), e.stopPropagation();
     };
-    return B(() => s.item), (e, n) => {
+    return B(() => s.item), (e, o) => {
       const t = q("survey-string"), r = q("sv-svg-icon");
       return i(), u("div", {
         class: "sv-tagbox__item",
@@ -1893,7 +1893,7 @@ const rn = /* @__PURE__ */ h({
         ]),
         v("div", {
           class: a(e.question.cssClasses.cleanItemButton),
-          onClick: o
+          onClick: n
         }, [
           C(r, {
             class: a(e.question.cssClasses.cleanItemButtonSvg),
@@ -1911,9 +1911,9 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = (t) => s.question.getItemValueWrapperComponentName(t) || "survey-ranking-item", n = (t, r, c) => ({
+    const s = l, n = $(null);
+    A(s, n);
+    const e = (t) => s.question.getItemValueWrapperComponentName(t) || "survey-ranking-item", o = (t, r, c) => ({
       componentName: s.question.getPropertyByName("itemComponent").isDefaultValue(
         s.question.itemComponent
       ) ? "survey-ranking-item" : s.question.itemComponent,
@@ -1930,11 +1930,11 @@ const rn = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(t.question.rootClass),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         t.question.selectToRankEnabled ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.rankingChoices, (m, p) => (i(), g(T(e(m)), E({
           key: m.value + "-" + p + "-item"
-        }, n(m, p)), null, 16))), 128)),
+        }, o(m, p)), null, 16))), 128)),
         t.question.selectToRankEnabled ? (i(), u("div", {
           key: 1,
           class: a(t.question.getContainerClasses("from")),
@@ -1942,7 +1942,7 @@ const rn = /* @__PURE__ */ h({
         }, [
           (i(!0), u(_, null, D(t.question.unRankingChoices, (m, p) => (i(), g(T(e(m)), E({
             key: m.value + "-" + p + "-item"
-          }, n(m, p, !0)), null, 16))), 128)),
+          }, o(m, p, !0)), null, 16))), 128)),
           t.question.unRankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: a(t.question.cssClasses.containerPlaceholder)
@@ -1963,7 +1963,7 @@ const rn = /* @__PURE__ */ h({
         }, [
           (i(!0), u(_, null, D(t.question.rankingChoices, (m, p) => (i(), g(T(e(m)), E({
             key: m.value + "-" + p + "-item"
-          }, n(m, p)), null, 16))), 128)),
+          }, o(m, p)), null, 16))), 128)),
           t.question.rankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: a(t.question.cssClasses.containerPlaceholder)
@@ -1989,17 +1989,17 @@ const rn = /* @__PURE__ */ h({
     unrankedItem: { type: Boolean }
   },
   setup(l) {
-    const s = l, o = w(() => s.question.getNumberByIndex(s.index));
-    return B(() => s.item), (e, n) => {
+    const s = l, n = w(() => s.question.getNumberByIndex(s.index));
+    return B(() => s.item), (e, o) => {
       const t = q("survey-string");
       return i(), u("div", {
         tabindex: e.question.getItemTabIndex(e.item),
         "data-sv-drop-target-ranking-item": e.index,
         class: a(e.question.getItemClass(e.item)),
-        onKeydown: n[0] || (n[0] = (r) => {
+        onKeydown: o[0] || (o[0] = (r) => {
           e.question.handleKeydown.call(e.question, r, e.item);
         }),
-        onPointerdown: n[1] || (n[1] = (r) => {
+        onPointerdown: o[1] || (o[1] = (r) => {
           e.question.handlePointerDown.call(
             e.question,
             r,
@@ -2033,10 +2033,10 @@ const rn = /* @__PURE__ */ h({
                 }, null, 8, Tn)
               ], 2))
             ], 2),
-            !e.unrankedItem && o.value ? (i(), u("div", {
+            !e.unrankedItem && n.value ? (i(), u("div", {
               key: 0,
               class: a(e.question.getItemIndexClasses(e.item))
-            }, R(o.value), 3)) : (i(), u("div", {
+            }, R(n.value), 3)) : (i(), u("div", {
               key: 1,
               class: a(e.question.getItemIndexClasses(e.item))
             }, [
@@ -2068,38 +2068,38 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = (n) => s.question.getInputId(n);
-    return (n, t) => {
+    const s = l, n = $(null);
+    A(s, n);
+    const e = (o) => s.question.getInputId(o);
+    return (o, t) => {
       const r = q("survey-string");
       return i(), u("div", {
-        class: a(n.question.ratingRootCss),
+        class: a(o.question.ratingRootCss),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("fieldset", Dn, [
           Bn,
-          n.question.hasMinLabel ? (i(), u("span", {
+          o.question.hasMinLabel ? (i(), u("span", {
             key: 0,
-            class: a(n.question.cssClasses.minText)
+            class: a(o.question.cssClasses.minText)
           }, [
             C(r, {
-              locString: n.question.locMinRateDescription
+              locString: o.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
-          (i(!0), u(_, null, D(n.question.renderedRateItems, (c, m) => (i(), g(T(n.question.itemComponent), {
+          (i(!0), u(_, null, D(o.question.renderedRateItems, (c, m) => (i(), g(T(o.question.itemComponent), {
             key: e(m),
             item: c,
             index: m,
-            question: n.question
+            question: o.question
           }, null, 8, ["item", "index", "question"]))), 128)),
-          n.question.hasMaxLabel ? (i(), u("span", {
+          o.question.hasMaxLabel ? (i(), u("span", {
             key: 1,
-            class: a(n.question.cssClasses.maxText)
+            class: a(o.question.cssClasses.maxText)
           }, [
             C(r, {
-              locString: n.question.locMaxRateDescription
+              locString: o.question.locMaxRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
         ])
@@ -2115,31 +2115,31 @@ const rn = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.item), (o, e) => {
-      const n = q("survey-string");
+    return B(() => s.item), (n, e) => {
+      const o = q("survey-string");
       return i(), u("label", {
-        key: o.item.value,
-        onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
-        class: a(o.question.getItemClassByText(o.item.itemValue, o.item.text))
+        key: n.item.value,
+        onMousedown: e[1] || (e[1] = (t) => n.question.onMouseDown()),
+        class: a(n.question.getItemClassByText(n.item.itemValue, n.item.text))
       }, [
         v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
-          name: o.question.name,
-          id: o.question.getInputId(o.index),
-          value: o.item.value,
-          disabled: o.question.isInputReadOnly,
-          onClick: e[0] || (e[0] = (t) => o.question.setValueFromClick(t.target.value)),
-          "aria-required": o.question.ariaRequired,
-          "aria-label": o.question.ariaLabel,
-          "aria-invalid": o.question.ariaInvalid,
-          "aria-errormessage": o.question.ariaErrormessage
+          name: n.question.name,
+          id: n.question.getInputId(n.index),
+          value: n.item.value,
+          disabled: n.question.isInputReadOnly,
+          onClick: e[0] || (e[0] = (t) => n.question.setValueFromClick(t.target.value)),
+          "aria-required": n.question.ariaRequired,
+          "aria-label": n.question.ariaLabel,
+          "aria-invalid": n.question.ariaInvalid,
+          "aria-errormessage": n.question.ariaErrormessage
         }, null, 8, Nn),
         v("span", {
-          class: a(o.question.cssClasses.itemText)
+          class: a(n.question.cssClasses.itemText)
         }, [
-          C(n, {
-            locString: o.item.locText
+          C(o, {
+            locString: n.item.locText
           }, null, 8, ["locString"])
         ], 2)
       ], 34);
@@ -2154,33 +2154,33 @@ const rn = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.item), (o, e) => {
-      const n = q("sv-svg-icon");
+    return B(() => s.item), (n, e) => {
+      const o = q("sv-svg-icon");
       return i(), u("label", {
-        key: o.item.value,
-        onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
-        style: S(o.question.getItemStyle(o.item.itemValue, o.item.highlight)),
-        class: a(o.question.getItemClass(o.item.itemValue, o.item.highlight)),
-        onMouseover: e[2] || (e[2] = (t) => o.question.onItemMouseIn(o.item)),
-        onMouseleave: e[3] || (e[3] = (t) => o.question.onItemMouseOut(o.item))
+        key: n.item.value,
+        onMousedown: e[1] || (e[1] = (t) => n.question.onMouseDown()),
+        style: S(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
+        class: a(n.question.getItemClass(n.item.itemValue, n.item.highlight)),
+        onMouseover: e[2] || (e[2] = (t) => n.question.onItemMouseIn(n.item)),
+        onMouseleave: e[3] || (e[3] = (t) => n.question.onItemMouseOut(n.item))
       }, [
         v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
-          name: o.question.name,
-          id: o.question.getInputId(o.index),
-          value: o.item.value,
-          disabled: o.question.isInputReadOnly,
-          onClick: e[0] || (e[0] = (t) => o.question.setValueFromClick(t.target.value)),
-          "aria-required": o.question.ariaRequired,
-          "aria-label": o.question.ariaLabel,
-          "aria-invalid": o.question.ariaInvalid,
-          "aria-errormessage": o.question.ariaErrormessage
+          name: n.question.name,
+          id: n.question.getInputId(n.index),
+          value: n.item.value,
+          disabled: n.question.isInputReadOnly,
+          onClick: e[0] || (e[0] = (t) => n.question.setValueFromClick(t.target.value)),
+          "aria-required": n.question.ariaRequired,
+          "aria-label": n.question.ariaLabel,
+          "aria-invalid": n.question.ariaInvalid,
+          "aria-errormessage": n.question.ariaErrormessage
         }, null, 8, An),
-        C(n, {
-          iconName: o.question.getItemSmileyIconName(o.item.itemValue),
+        C(o, {
+          iconName: n.question.getItemSmileyIconName(n.item.itemValue),
           size: "auto",
-          title: o.item.text
+          title: n.item.text
         }, null, 8, ["iconName", "title"])
       ], 38);
     };
@@ -2194,39 +2194,39 @@ const rn = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.item), (o, e) => {
-      const n = q("sv-svg-icon");
+    return B(() => s.item), (n, e) => {
+      const o = q("sv-svg-icon");
       return i(), u("label", {
-        key: o.item.value,
-        onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
-        class: a(o.question.getItemClass(o.item.itemValue)),
-        onMouseover: e[2] || (e[2] = (t) => o.question.onItemMouseIn(o.item)),
-        onMouseleave: e[3] || (e[3] = (t) => o.question.onItemMouseOut(o.item))
+        key: n.item.value,
+        onMousedown: e[1] || (e[1] = (t) => n.question.onMouseDown()),
+        class: a(n.question.getItemClass(n.item.itemValue)),
+        onMouseover: e[2] || (e[2] = (t) => n.question.onItemMouseIn(n.item)),
+        onMouseleave: e[3] || (e[3] = (t) => n.question.onItemMouseOut(n.item))
       }, [
         v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
-          name: o.question.name,
-          id: o.question.getInputId(o.index),
-          value: o.item.value,
-          disabled: o.question.isInputReadOnly,
-          onClick: e[0] || (e[0] = (t) => o.question.setValueFromClick((t == null ? void 0 : t.target).value)),
-          "aria-required": o.question.ariaRequired,
-          "aria-label": o.question.ariaLabel,
-          "aria-invalid": o.question.ariaInvalid,
-          "aria-errormessage": o.question.ariaErrormessage
+          name: n.question.name,
+          id: n.question.getInputId(n.index),
+          value: n.item.value,
+          disabled: n.question.isInputReadOnly,
+          onClick: e[0] || (e[0] = (t) => n.question.setValueFromClick((t == null ? void 0 : t.target).value)),
+          "aria-required": n.question.ariaRequired,
+          "aria-label": n.question.ariaLabel,
+          "aria-invalid": n.question.ariaInvalid,
+          "aria-errormessage": n.question.ariaErrormessage
         }, null, 8, Hn),
-        C(n, {
+        C(o, {
           class: a("sv-star"),
-          iconName: o.question.itemStarIcon,
+          iconName: n.question.itemStarIcon,
           size: "auto",
-          title: o.item.text
+          title: n.item.text
         }, null, 8, ["iconName", "title"]),
-        C(n, {
+        C(o, {
           class: a("sv-star-2"),
-          iconName: o.question.itemStarIconAlt,
+          iconName: n.question.itemStarIconAlt,
           size: "auto",
-          title: o.item.text
+          title: n.item.text
         }, null, 8, ["iconName", "title"])
       ], 34);
     };
@@ -2241,13 +2241,13 @@ const rn = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.item), (o, e) => {
-      const n = q("survey-string");
+    return B(() => s.item), (n, e) => {
+      const o = q("survey-string");
       return i(), u("div", Wn, [
-        v("span", Vn, R(o.item.title), 1),
-        o.item.description ? (i(), u("div", Fn, [
-          C(n, {
-            locString: o.item.description
+        v("span", Vn, R(n.item.title), 1),
+        n.item.description ? (i(), u("div", Fn, [
+          C(o, {
+            locString: n.item.description
           }, null, 8, ["locString"])
         ])) : d("", !0)
       ]);
@@ -2266,13 +2266,13 @@ const zn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("sv-dropdown");
       return i(), u("div", {
         class: a(e.question.cssClasses.rootDropdown),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         C(t, { question: e.question }, null, 8, ["question"])
       ], 2);
@@ -2285,11 +2285,11 @@ const zn = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = (t, r) => {
       s.question.onLabelClick(t, r);
-    }, n = (t) => {
+    }, o = (t) => {
       s.question.onSwitchClickModel(t);
     };
     return (t, r) => {
@@ -2298,7 +2298,7 @@ const zn = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(t.question.cssClasses.root),
         ref_key: "root",
-        ref: o,
+        ref: n,
         onKeydown: r[4] || (r[4] = (p) => t.question.onKeyDownCore(p))
       }, [
         v("label", {
@@ -2337,7 +2337,7 @@ const zn = /* @__PURE__ */ h({
           ], 2),
           v("div", {
             class: a(t.question.cssClasses.switch),
-            onClick: r[2] || (r[2] = (p) => n(p))
+            onClick: r[2] || (r[2] = (p) => o(p))
           }, [
             v("span", {
               class: a(t.question.cssClasses.slider)
@@ -2382,7 +2382,7 @@ const jn = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = $(null);
-    return A(l, s), (e, n) => {
+    return A(l, s), (e, o) => {
       const t = q("sv-boolean-radio-item");
       return i(), u("div", {
         class: a(e.question.cssClasses.rootRadio),
@@ -2417,11 +2417,11 @@ const jn = /* @__PURE__ */ h({
     value: { type: Boolean }
   },
   setup(l) {
-    const s = l, o = (e) => {
-      const n = s.question;
-      n.booleanValue = e.target.value == "true";
+    const s = l, n = (e) => {
+      const o = s.question;
+      o.booleanValue = e.target.value == "true";
     };
-    return (e, n) => {
+    return (e, o) => {
       const t = q("survey-string");
       return i(), u("div", {
         role: "presentation",
@@ -2438,7 +2438,7 @@ const jn = /* @__PURE__ */ h({
             "aria-errormessage": e.question.ariaErrormessage,
             disabled: e.question.isInputReadOnly,
             class: a(e.question.cssClasses.itemRadioControl),
-            onChange: o
+            onChange: n
           }, null, 42, Qn),
           e.question.cssClasses.materialRadioDecorator ? (i(), u("span", {
             key: 0,
@@ -2476,14 +2476,14 @@ const so = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       var m;
       const t = q("survey-element-title-content"), r = q("sv-title-actions"), c = q("survey-string");
       return i(), u("div", {
         class: a(e.question.cssClasses.rootCheckbox),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("div", {
           class: a(e.question.getCheckboxItemCss())
@@ -2495,7 +2495,7 @@ const so = /* @__PURE__ */ h({
               type: "checkbox",
               name: e.question.name,
               value: (m = e.question.booleanValue) != null ? m : "",
-              "onUpdate:modelValue": n[0] || (n[0] = (p) => e.question.booleanValue = p),
+              "onUpdate:modelValue": o[0] || (o[0] = (p) => e.question.booleanValue = p),
               class: a(e.question.cssClasses.controlCheckbox),
               id: e.question.inputId,
               ".indeterminate": e.question.isIndeterminate,
@@ -2557,28 +2557,28 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = le(() => s.question.getRows());
-    return A(s, o), (n, t) => {
+    const s = l, n = $(null), e = le(() => s.question.getRows());
+    return A(s, n), (o, t) => {
       const r = q("survey-multipletext-item");
       return i(), u("table", {
-        class: a(n.question.getQuestionRootCss()),
+        class: a(o.question.getQuestionRootCss()),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("tbody", null, [
           (i(!0), u(_, null, D(I(e), (c, m) => (i(), u(_, {
-            key: n.question.inputId + "rowkey" + m
+            key: o.question.inputId + "rowkey" + m
           }, [
             c.isVisible ? (i(), u("tr", {
               key: 0,
-              class: a(n.question.cssClasses.row)
+              class: a(o.question.cssClasses.row)
             }, [
               (i(!0), u(_, null, D(c.cells, (p) => (i(), u("td", {
                 key: "item" + p.item.editor.id,
                 class: a(p.className)
               }, [
                 C(r, {
-                  question: n.question,
+                  question: o.question,
                   cell: p
                 }, null, 8, ["question", "cell"])
               ], 2))), 128))
@@ -2595,25 +2595,25 @@ const so = /* @__PURE__ */ h({
     cell: {}
   },
   setup(l) {
-    const s = l, o = (n) => re(n);
+    const s = l, n = (o) => re(o);
     B(() => s.cell.item.editor);
     const e = w(() => s.cell.item);
-    return (n, t) => {
+    return (o, t) => {
       const r = q("survey-string"), c = q("survey-errors");
-      return n.cell.isErrorsCell ? (i(), g(c, {
+      return o.cell.isErrorsCell ? (i(), g(c, {
         key: 1,
         element: e.value.editor
       }, null, 8, ["element"])) : (i(), u("label", {
         key: 0,
-        class: a(n.question.getItemLabelCss(e.value))
+        class: a(o.question.getItemLabelCss(e.value))
       }, [
         v("span", {
-          class: a(n.question.getItemTitleCss()),
-          style: S({ minWidth: n.question.itemTitleWidth, width: n.question.itemTitleWidth })
+          class: a(o.question.getItemTitleCss()),
+          style: S({ minWidth: o.question.itemTitleWidth, width: o.question.itemTitleWidth })
         }, [
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
-            class: a(n.question.cssClasses.requiredText)
+            class: a(o.question.cssClasses.requiredText)
           }, R(e.value.editor.requiredText), 3)) : d("", !0),
           C(r, {
             locString: e.value.locTitle
@@ -2622,15 +2622,15 @@ const so = /* @__PURE__ */ h({
           e.value.editor.isRequireTextAfterTitle ? (i(), u("span", {
             key: 2,
             "aria-hidden": "true",
-            class: a(n.question.cssClasses.requiredText)
+            class: a(o.question.cssClasses.requiredText)
           }, R(e.value.editor.requiredText), 3)) : d("", !0)
         ], 6),
         (i(), u("div", {
           key: e.value.editor.id,
-          class: a(n.question.getItemCss()),
+          class: a(o.question.getItemCss()),
           onFocusin: t[0] || (t[0] = (m) => e.value.focusIn())
         }, [
-          (i(), g(T(o(e.value.editor)), {
+          (i(), g(T(n(e.value.editor)), {
             question: e.value.editor
           }, null, 8, ["question"]))
         ], 34))
@@ -2644,10 +2644,10 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = z();
+    const s = l, n = $(null), e = z();
     A(
       s,
-      o,
+      n,
       (t) => {
         e.value = t.visibleRows, t.visibleRowsChangedCallback = () => {
           e.value = t.visibleRows;
@@ -2658,7 +2658,7 @@ const so = /* @__PURE__ */ h({
         };
       }
     );
-    const n = (t, r) => {
+    const o = (t, r) => {
       t.value = r.value;
     };
     return (t, r) => {
@@ -2666,7 +2666,7 @@ const so = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(t.question.cssClasses.tableWrapper),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         v("fieldset", null, [
           v("legend", io, R(t.question.locTitle.renderedHtml), 1),
@@ -2725,7 +2725,7 @@ const so = /* @__PURE__ */ h({
                 t.question.hasCellText ? (i(!0), u(_, { key: 0 }, D(t.question.visibleColumns, (y, f) => (i(), u("td", {
                   key: f,
                   class: a(t.question.getItemClass(m, y)),
-                  onClick: (b) => n(m, y)
+                  onClick: (b) => o(m, y)
                 }, [
                   C(c, {
                     locString: t.question.getCellDisplayLocText(m.name, y)
@@ -2735,7 +2735,7 @@ const so = /* @__PURE__ */ h({
                   key: f,
                   "data-responsive-title": y.locText.renderedHtml,
                   class: a(t.question.cssClasses.cell),
-                  onClick: (b) => n(m, y)
+                  onClick: (b) => o(m, y)
                 }, [
                   (i(), g(T(t.question.cellComponent), {
                     question: t.question,
@@ -2761,17 +2761,17 @@ const so = /* @__PURE__ */ h({
     columnIndex: {}
   },
   setup(l) {
-    return (s, o) => {
+    return (s, n) => {
       const e = q("survey-string");
       return i(), u("label", {
-        onMousedown: o[1] || (o[1] = (n) => s.question.onMouseDown()),
+        onMousedown: n[1] || (n[1] = (o) => s.question.onMouseDown()),
         class: a(s.question.getItemClass(s.row, s.column))
       }, [
         P(v("input", {
           type: "radio",
           class: a(s.question.cssClasses.itemValue),
           name: s.row.fullName,
-          "onUpdate:modelValue": o[0] || (o[0] = (n) => s.row.value = n),
+          "onUpdate:modelValue": n[0] || (n[0] = (o) => s.row.value = o),
           value: s.column.value,
           disabled: s.row.isReadOnly,
           id: s.question.inputId + "_" + s.row.name + "_" + s.columnIndex,
@@ -2815,13 +2815,13 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    return A(s, o), (e, n) => {
+    const s = l, n = $(null);
+    return A(s, n), (e, o) => {
       const t = q("survey-matrixtable");
       return i(), g(t, {
         question: e.question,
         ref_key: "root",
-        ref: o
+        ref: n
       }, null, 8, ["question"]);
     };
   }
@@ -2831,21 +2831,21 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.question.renderedTable);
+    const s = l, n = w(() => s.question.renderedTable);
     return B(
-      () => o.value,
+      () => n.value,
       (e) => {
-        const n = ie();
+        const o = ie();
         e.renderedRowsChangedCallback = () => {
           var t;
-          (t = n == null ? void 0 : n.proxy) == null || t.$forceUpdate();
+          (t = o == null ? void 0 : o.proxy) == null || t.$forceUpdate();
         };
       },
       (e) => {
         e.renderedRowsChangedCallback = () => {
         };
       }
-    ), (e, n) => {
+    ), (e, o) => {
       const t = q("survey-string"), r = q("survey-matrixheaderrequired"), c = q("survey-matrixdropdown-cell");
       return i(), u("div", {
         style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
@@ -2854,9 +2854,9 @@ const so = /* @__PURE__ */ h({
         v("table", {
           class: a(e.question.getTableCss())
         }, [
-          o.value.showHeader ? (i(), u("thead", qo, [
+          n.value.showHeader ? (i(), u("thead", qo, [
             v("tr", null, [
-              (i(!0), u(_, null, D(o.value.headerRow.cells, (m) => (i(), u(_, null, [
+              (i(!0), u(_, null, D(n.value.headerRow.cells, (m) => (i(), u(_, null, [
                 m.hasTitle ? (i(), u("th", {
                   key: "header_" + m.id,
                   class: a(m.className),
@@ -2887,7 +2887,7 @@ const so = /* @__PURE__ */ h({
             ])
           ])) : d("", !0),
           v("tbody", null, [
-            (i(!0), u(_, null, D(o.value.rows, (m) => (i(), u(_, {
+            (i(!0), u(_, null, D(n.value.rows, (m) => (i(), u(_, {
               key: e.question.inputId + "_" + m.id
             }, [
               m.visible ? (i(), u("tr", {
@@ -2904,9 +2904,9 @@ const so = /* @__PURE__ */ h({
               ], 42, go)) : d("", !0)
             ], 64))), 128))
           ]),
-          o.value.showFooter ? (i(), u("tfoot", ho, [
+          n.value.showFooter ? (i(), u("tfoot", ho, [
             v("tr", null, [
-              (i(!0), u(_, null, D(o.value.footerRow.cells, (m, p) => (i(), g(c, {
+              (i(!0), u(_, null, D(n.value.footerRow.cells, (m, p) => (i(), g(c, {
                 cell: m,
                 question: e.question,
                 key: "footer_" + p
@@ -2925,12 +2925,12 @@ const so = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = l;
-    return B(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u(_, { key: 0 }, [
+    return B(() => s.column), (n, e) => n.column.isRenderedRequired ? (i(), u(_, { key: 0 }, [
       bo,
-      o.column.isRenderedRequired ? (i(), u("span", {
+      n.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
-        class: a(o.question.cssClasses.cellRequiredText)
-      }, R(o.column.requiredText), 3)) : d("", !0)
+        class: a(n.question.cssClasses.cellRequiredText)
+      }, R(n.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
 }), fo = ["data-responsive-title", "title", "colspan"], Io = /* @__PURE__ */ h({
@@ -2940,7 +2940,7 @@ const so = /* @__PURE__ */ h({
     cell: {}
   },
   setup(l) {
-    const s = l, o = $(!1), e = $(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, r = () => o.value = s.cell.question.isVisible, c = (y) => re(y);
+    const s = l, n = $(!1), e = $(), o = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, r = () => n.value = s.cell.question.isVisible, c = (y) => re(y);
     M(() => {
       if (!s.cell.hasQuestion || !s.question || !s.question.survey)
         return;
@@ -2985,7 +2985,7 @@ const so = /* @__PURE__ */ h({
       const b = q("survey-errors"), N = q("sv-matrix-drag-drop-icon"), k = q("sv-action-bar"), L = q("survey-radiogroup-item"), W = q("survey-checkbox-item"), V = q("survey-other-choice"), K = q("survey-string");
       return i(), u("td", {
         class: a(y.cell.className),
-        "data-responsive-title": n(),
+        "data-responsive-title": o(),
         title: y.cell.getTitle(),
         style: S(t()),
         colspan: y.cell.colSpans,
@@ -3051,7 +3051,7 @@ const so = /* @__PURE__ */ h({
             question: y.cell.question
           }, null, 8, ["question"])) : d("", !0)
         ], 2)), [
-          [H, o.value]
+          [H, n.value]
         ]) : d("", !0),
         y.cell.hasTitle ? (i(), g(T(y.question.getCellWrapperComponentName(y.cell)), {
           key: 5,
@@ -3079,77 +3079,77 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = () => {
       s.question.addRowUI();
     };
-    return (n, t) => {
+    return (o, t) => {
       const r = q("survey-string"), c = q("survey-matrixtable");
       return i(), u("div", {
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
-        n.question.renderedTable.showAddRowOnTop ? (i(), u("div", {
+        o.question.renderedTable.showAddRowOnTop ? (i(), u("div", {
           key: 0,
-          class: a(n.question.cssClasses.footer)
+          class: a(o.question.cssClasses.footer)
         }, [
           v("button", {
             type: "button",
-            class: a(n.question.getAddRowButtonCss()),
+            class: a(o.question.getAddRowButtonCss()),
             onClick: e
           }, [
             C(r, {
-              locString: n.question.locAddRowText
+              locString: o.question.locAddRowText
             }, null, 8, ["locString"]),
             v("span", {
-              class: a(n.question.cssClasses.iconAdd)
+              class: a(o.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)
         ], 2)) : d("", !0),
-        n.question.renderedTable.showTable ? (i(), g(c, {
+        o.question.renderedTable.showTable ? (i(), g(c, {
           key: 1,
-          question: n.question
+          question: o.question
         }, null, 8, ["question"])) : d("", !0),
-        n.question.renderedTable.showTable ? d("", !0) : (i(), u("div", {
+        o.question.renderedTable.showTable ? d("", !0) : (i(), u("div", {
           key: 2,
-          class: a(n.question.cssClasses.emptyRowsSection)
+          class: a(o.question.cssClasses.emptyRowsSection)
         }, [
           v("div", {
-            class: a(n.question.cssClasses.emptyRowsText)
+            class: a(o.question.cssClasses.emptyRowsText)
           }, [
             C(r, {
-              locString: n.question.locEmptyRowsText
+              locString: o.question.locEmptyRowsText
             }, null, 8, ["locString"])
           ], 2),
-          n.question.renderedTable.showAddRow ? (i(), u("button", {
+          o.question.renderedTable.showAddRow ? (i(), u("button", {
             key: 0,
             type: "button",
-            class: a(n.question.getAddRowButtonCss(!0)),
+            class: a(o.question.getAddRowButtonCss(!0)),
             onClick: e
           }, [
             C(r, {
-              locString: n.question.locAddRowText
+              locString: o.question.locAddRowText
             }, null, 8, ["locString"]),
             v("span", {
-              class: a(n.question.cssClasses.iconAdd)
+              class: a(o.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)) : d("", !0)
         ], 2)),
-        n.question.renderedTable.showAddRowOnBottom ? (i(), u("div", {
+        o.question.renderedTable.showAddRowOnBottom ? (i(), u("div", {
           key: 3,
-          class: a(n.question.cssClasses.footer)
+          class: a(o.question.cssClasses.footer)
         }, [
           v("button", {
             type: "button",
-            class: a(n.question.getAddRowButtonCss()),
+            class: a(o.question.getAddRowButtonCss()),
             onClick: e
           }, [
             C(r, {
-              locString: n.question.locAddRowText
+              locString: o.question.locAddRowText
             }, null, 8, ["locString"]),
             v("span", {
-              class: a(n.question.cssClasses.iconAdd)
+              class: a(o.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)
         ], 2)) : d("", !0)
@@ -3169,20 +3169,20 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, { question: o, row: e } = ae(s);
-    return (n, t) => {
+    const s = l, { question: n, row: e } = ae(s);
+    return (o, t) => {
       const r = q("survey-string");
       return i(), u("button", {
         type: "button",
-        class: a(I(o).getRemoveRowButtonCss()),
-        disabled: I(o).isInputReadOnly,
-        onClick: t[0] || (t[0] = () => I(o).removeRowUI(I(e)))
+        class: a(I(n).getRemoveRowButtonCss()),
+        disabled: I(n).isInputReadOnly,
+        onClick: t[0] || (t[0] = () => I(n).removeRowUI(I(e)))
       }, [
         C(r, {
-          locString: I(o).locRemoveRowText
+          locString: I(n).locRemoveRowText
         }, null, 8, ["locString"]),
         v("span", {
-          class: a(I(o).cssClasses.iconRemove)
+          class: a(I(n).cssClasses.iconRemove)
         }, null, 2)
       ], 10, So);
     };
@@ -3193,17 +3193,17 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, { question: o } = ae(s, !1);
-    return (e, n) => I(o).iconDragElement ? (i(), u("svg", {
+    const s = l, { question: n } = ae(s, !1);
+    return (e, o) => I(n).iconDragElement ? (i(), u("svg", {
       key: 0,
-      class: a(I(o).cssClasses.dragElementDecorator)
+      class: a(I(n).cssClasses.dragElementDecorator)
     }, [
       v("use", {
-        "xlink:href": I(o).iconDragElement
+        "xlink:href": I(n).iconDragElement
       }, null, 8, To)
     ], 2)) : (i(), u("span", {
       key: 1,
-      class: a(I(o).cssClasses.iconDrag)
+      class: a(I(n).cssClasses.iconDrag)
     }, null, 2));
   }
 }), _o = ["aria-expanded", "aria-controls"], Do = /* @__PURE__ */ h({
@@ -3212,19 +3212,19 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     item: {}
   },
   setup(l) {
-    const s = l, { question: o, row: e } = ae(s);
-    return (n, t) => {
+    const s = l, { question: n, row: e } = ae(s);
+    return (o, t) => {
       const r = q("sv-svg-icon");
       return i(), u("button", {
         type: "button",
-        class: a(I(o).getDetailPanelButtonCss(I(e))),
+        class: a(I(n).getDetailPanelButtonCss(I(e))),
         onClick: t[0] || (t[0] = () => I(e).showHideDetailPanelClick()),
-        "aria-expanded": I(o).getIsDetailPanelShowing(I(e)) ? "true" : "false",
-        "aria-controls": I(o).getIsDetailPanelShowing(I(e)) ? I(e).detailPanelId : null
+        "aria-expanded": I(n).getIsDetailPanelShowing(I(e)) ? "true" : "false",
+        "aria-controls": I(n).getIsDetailPanelShowing(I(e)) ? I(e).detailPanelId : null
       }, [
         C(r, {
-          class: a(I(o).getDetailPanelIconCss(I(e))),
-          iconName: I(o).getDetailPanelIconId(I(e)),
+          class: a(I(n).getDetailPanelIconCss(I(e))),
+          iconName: I(n).getDetailPanelIconId(I(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
       ], 10, _o);
@@ -3238,10 +3238,10 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = ie();
+    const s = l, n = $(null), e = ie();
     A(
       s,
-      o,
+      n,
       (m) => {
         m.panelCountChangedCallback = () => {
           var p;
@@ -3261,7 +3261,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
         };
       }
     );
-    const n = w(() => {
+    const o = w(() => {
       if (s.question.isRenderModeList)
         return s.question.panels;
       const m = [];
@@ -3290,7 +3290,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
       return i(), u("div", {
         class: a(m.question.cssClasses.root),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         m.question.getShowNoEntriesPlaceholder() ? (i(), u("div", {
           key: 0,
@@ -3319,11 +3319,11 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
           key: 2,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
-        (i(!0), u(_, null, D(n.value, (L, W) => (i(), u(_, {
+        (i(!0), u(_, null, D(o.value, (L, W) => (i(), u(_, {
           key: L.id
         }, [
           v("div", {
-            class: a(m.question.getPanelWrapperCss())
+            class: a(m.question.getPanelWrapperCss(L))
           }, [
             (i(), g(T(r(L)), O(ne(c(L))), null, 16)),
             m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && L.state !== "collapsed" ? (i(), g(N, {
@@ -3357,15 +3357,15 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    const s = l, o = () => s.question.isProgressTopShowing ? s.question.cssClasses.progressTop : s.question.cssClasses.progressBottom;
-    return (e, n) => {
+    const s = l, n = () => s.question.isProgressTopShowing ? s.question.cssClasses.progressTop : s.question.cssClasses.progressBottom;
+    return (e, o) => {
       const t = q("sv-paneldynamic-prev-btn"), r = q("sv-paneldynamic-next-btn"), c = q("sv-paneldynamic-add-btn"), m = q("sv-paneldynamic-progress-text");
       return i(), u("div", {
-        class: a(o())
+        class: a(n())
       }, [
         v("div", {
           style: { clear: "both" },
-          class: a(o())
+          class: a(n())
         }, [
           v("div", {
             class: a(e.question.cssClasses.progressContainer)
@@ -3403,7 +3403,7 @@ const So = ["disabled"], Ro = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    return (s, o) => {
+    return (s, n) => {
       const e = q("sv-action-bar");
       return s.question.cssClasses.footer ? (i(), u("div", {
         key: 0,
@@ -3446,22 +3446,22 @@ const Po = /* @__PURE__ */ h({
     data: {}
   },
   setup(l) {
-    const o = Y(l), e = () => {
-      o.value.addPanelUI();
+    const n = Y(l), e = () => {
+      n.value.addPanelUI();
     };
-    return (n, t) => {
+    return (o, t) => {
       const r = q("survey-string");
-      return I(o).canAddPanel ? (i(), u("button", {
+      return I(n).canAddPanel ? (i(), u("button", {
         key: 0,
         type: "button",
-        class: a(I(o).getAddButtonCss()),
+        class: a(I(n).getAddButtonCss()),
         onClick: e
       }, [
         v("span", {
-          class: a(I(o).cssClasses.buttonAddText)
+          class: a(I(n).cssClasses.buttonAddText)
         }, [
           C(r, {
-            locString: I(o).locPanelAddText
+            locString: I(n).locPanelAddText
           }, null, 8, ["locString"])
         ], 2)
       ], 2)) : d("", !0);
@@ -3474,18 +3474,18 @@ const Po = /* @__PURE__ */ h({
     data: {}
   },
   setup(l) {
-    const o = Y(l), e = () => {
-      o.value.goToNextPanel();
+    const n = Y(l), e = () => {
+      n.value.goToNextPanel();
     };
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-svg-icon");
       return i(), u("div", {
-        title: I(o).panelNextText,
+        title: I(n).panelNextText,
         onClick: e,
-        class: a(I(o).getNextButtonCss())
+        class: a(I(n).getNextButtonCss())
       }, [
         C(r, {
-          iconName: I(o).cssClasses.progressBtnIcon,
+          iconName: I(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, Ao);
@@ -3498,18 +3498,18 @@ const Po = /* @__PURE__ */ h({
     data: {}
   },
   setup(l) {
-    const o = Y(l), e = () => {
-      o.value.goToPrevPanel();
+    const n = Y(l), e = () => {
+      n.value.goToPrevPanel();
     };
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-svg-icon");
       return i(), u("div", {
-        title: I(o).panelPrevText,
+        title: I(n).panelPrevText,
         onClick: e,
-        class: a(I(o).getPrevButtonCss())
+        class: a(I(n).getPrevButtonCss())
       }, [
         C(r, {
-          iconName: I(o).cssClasses.progressBtnIcon,
+          iconName: I(n).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, Ho);
@@ -3522,27 +3522,27 @@ const Po = /* @__PURE__ */ h({
     data: {}
   },
   setup(l) {
-    const s = l, o = Y(s), e = w(
+    const s = l, n = Y(s), e = w(
       () => s.item && s.item.data.panel || s.data.panel
-    ), n = (t) => {
-      o.value.isInputReadOnly || o.value.removePanelUI(t);
+    ), o = (t) => {
+      n.value.isInputReadOnly || n.value.removePanelUI(t);
     };
     return (t, r) => {
       const c = q("survey-string");
       return i(), u("button", {
         type: "button",
-        class: a(I(o).getPanelRemoveButtonCss()),
-        onClick: r[0] || (r[0] = (m) => n(e.value))
+        class: a(I(n).getPanelRemoveButtonCss()),
+        onClick: r[0] || (r[0] = (m) => o(e.value))
       }, [
         v("span", {
-          class: a(I(o).cssClasses.buttonRemoveText)
+          class: a(I(n).cssClasses.buttonRemoveText)
         }, [
           C(c, {
-            locString: I(o).locPanelRemoveText
+            locString: I(n).locPanelRemoveText
           }, null, 8, ["locString"])
         ], 2),
         v("span", {
-          class: a(I(o).cssClasses.iconRemove)
+          class: a(I(n).cssClasses.iconRemove)
         }, null, 2)
       ], 2);
     };
@@ -3554,10 +3554,10 @@ const Po = /* @__PURE__ */ h({
     data: {}
   },
   setup(l) {
-    const o = Y(l);
-    return (e, n) => (i(), u("div", {
-      class: a(I(o).cssClasses.progressText)
-    }, R(I(o).progressText), 3));
+    const n = Y(l);
+    return (e, o) => (i(), u("div", {
+      class: a(I(n).cssClasses.progressText)
+    }, R(I(n).progressText), 3));
   }
 }), Fo = ["id"], Oo = /* @__PURE__ */ h({
   __name: "Errors",
@@ -3567,32 +3567,32 @@ const Po = /* @__PURE__ */ h({
   },
   setup(l) {
     const s = $();
-    return (o, e) => {
-      const n = q("survey-string");
-      return o.element.hasVisibleErrors ? (i(), u("div", {
+    return (n, e) => {
+      const o = q("survey-string");
+      return n.element.hasVisibleErrors ? (i(), u("div", {
         key: 0,
         role: "alert",
         "aria-live": "polite",
-        class: a(o.element.cssError),
-        id: o.element.id + "_errors",
+        class: a(n.element.cssError),
+        id: n.element.id + "_errors",
         ref_key: "root",
         ref: s
       }, [
-        (i(!0), u(_, null, D(o.element.errors, (t, r) => (i(), u("div", {
+        (i(!0), u(_, null, D(n.element.errors, (t, r) => (i(), u("div", {
           key: "error_" + r
         }, [
           v("span", {
             class: a(
-              o.element.cssClasses ? o.element.cssClasses.error.icon || void 0 : "panel-error-icon"
+              n.element.cssClasses ? n.element.cssClasses.error.icon || void 0 : "panel-error-icon"
             ),
             "aria-hidden": "true"
           }, null, 2),
           v("span", {
             class: a(
-              o.element.cssClasses ? o.element.cssClasses.error.item || void 0 : "panel-error-item"
+              n.element.cssClasses ? n.element.cssClasses.error.item || void 0 : "panel-error-item"
             )
           }, [
-            C(n, {
+            C(o, {
               locString: t.locText
             }, null, 8, ["locString"])
           ], 2)
@@ -3606,7 +3606,7 @@ const Po = /* @__PURE__ */ h({
     question: {}
   },
   setup(l) {
-    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", zo, R(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, n) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", zo, R(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3618,10 +3618,10 @@ const Po = /* @__PURE__ */ h({
       "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
       "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
       style: S({ resize: s.question.resizeStyle }),
-      onChange: o[0] || (o[0] = (e) => {
+      onChange: n[0] || (n[0] = (e) => {
         s.question.onCommentChange(e);
       }),
-      onInput: o[1] || (o[1] = (e) => {
+      onInput: n[1] || (n[1] = (e) => {
         s.question.onCommentInput(e);
       })
     }, null, 46, Uo));
@@ -3633,33 +3633,33 @@ const Po = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = (o) => {
-      ge(o);
+    const s = (n) => {
+      ge(n);
     };
-    return (o, e) => {
-      const n = q("survey-element-title-content"), t = q("sv-title-actions");
-      return o.element.hasTitle ? (i(), g(T(o.element.titleTagName), {
+    return (n, e) => {
+      const o = q("survey-element-title-content"), t = q("sv-title-actions");
+      return n.element.hasTitle ? (i(), g(T(n.element.titleTagName), {
         key: 0,
-        class: a(o.element.cssTitle),
-        "aria-label": o.element.titleAriaLabel,
-        id: o.element.ariaTitleId,
-        tabindex: o.element.titleTabIndex,
-        "aria-expanded": o.element.titleAriaExpanded,
-        role: o.element.titleAriaRole,
+        class: a(n.element.cssTitle),
+        "aria-label": n.element.titleAriaLabel,
+        id: n.element.ariaTitleId,
+        tabindex: n.element.titleTabIndex,
+        "aria-expanded": n.element.titleAriaExpanded,
+        role: n.element.titleAriaRole,
         onKeyup: e[0] || (e[0] = (r) => {
           s(r);
         })
       }, {
         default: F(() => [
-          o.element.hasTitleActions ? d("", !0) : (i(), g(n, {
+          n.element.hasTitleActions ? d("", !0) : (i(), g(o, {
             key: 0,
-            element: o.element,
-            css: o.css
+            element: n.element,
+            css: n.css
           }, null, 8, ["element", "css"])),
-          o.element.hasTitleActions ? (i(), g(t, {
+          n.element.hasTitleActions ? (i(), g(t, {
             key: 1,
-            element: o.element,
-            css: o.css
+            element: n.element,
+            css: n.css
           }, null, 8, ["element", "css"])) : d("", !0)
         ]),
         _: 1
@@ -3674,41 +3674,44 @@ const Po = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    return (s, o) => {
-      const e = q("survey-string");
+    const s = l, n = w(
+      () => (s.element.isPanel ? s.element.cssClasses.panel : s.element.cssClasses) || {}
+    );
+    return (e, o) => {
+      const t = q("survey-string");
       return i(), u(_, null, [
-        s.element.isTitleRenderedAsString ? (i(), g(e, {
+        e.element.isTitleRenderedAsString ? (i(), g(t, {
           key: 0,
-          locString: s.element.locTitle
+          locString: e.element.locTitle
         }, null, 8, ["locString"])) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextOnStart ? (i(), u("span", {
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextOnStart ? (i(), u("span", {
           key: 1,
-          class: a(s.element.cssClasses.requiredText),
+          class: a(n.value.requiredText),
           "aria-hidden": !0
-        }, R(s.element.requiredText), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", {
+        }, R(e.element.requiredText), 3)) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.no ? (i(), u("span", {
           key: 2,
           style: { position: "static" },
-          class: a(s.element.cssTitleNumber),
+          class: a(e.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),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", {
+        }, R(e.element.no), 3)) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.no ? (i(), u("span", Qo, "\xA0")) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
-          class: a(s.element.cssClasses.requiredText),
+          class: a(n.value.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(), g(e, {
+        }, R(e.element.requiredText), 3)) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), u("span", Go, "\xA0")) : d("", !0),
+        e.element.isTitleRenderedAsString ? d("", !0) : (i(), g(t, {
           key: 6,
-          locString: s.element.locTitle
+          locString: e.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", {
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), u("span", Jo, "\xA0")) : d("", !0),
+        !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), u("span", {
           key: 8,
-          class: a(s.element.cssClasses.requiredText),
+          class: a(n.value.requiredText),
           "aria-hidden": !0
-        }, R(s.element.requiredText), 3)) : d("", !0)
+        }, R(e.element.requiredText), 3)) : d("", !0)
       ], 64);
     };
   }
@@ -3719,8 +3722,8 @@ const Po = /* @__PURE__ */ h({
     css: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.element.getTitleToolbar());
-    return (e, n) => {
+    const s = l, n = w(() => s.element.getTitleToolbar());
+    return (e, o) => {
       const t = q("survey-string"), r = q("survey-element-title-content"), c = q("sv-action-bar");
       return i(), u("div", Yo, [
         v("span", Zo, [
@@ -3734,15 +3737,15 @@ const Po = /* @__PURE__ */ h({
             css: e.css
           }, null, 8, ["element", "css"]))
         ]),
-        C(c, { model: o.value }, null, 8, ["model"])
+        C(c, { model: n.value }, null, 8, ["model"])
       ]);
     };
   }
 }), Ce = (l, s) => {
-  const o = l.__vccOpts || l;
-  for (const [e, n] of s)
-    o[e] = n;
-  return o;
+  const n = l.__vccOpts || l;
+  for (const [e, o] of s)
+    n[e] = o;
+  return n;
 }, 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
 ];
@@ -3761,13 +3764,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     title: {}
   },
   setup(l) {
-    const s = l, o = $(), e = () => {
+    const s = l, n = $(), e = () => {
       Pe(
         s.size,
         s.width,
         s.height,
         s.iconName,
-        o.value,
+        n.value,
         s.title
       );
     };
@@ -3775,9 +3778,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
       e();
     }), M(() => {
       e();
-    }), (n, t) => (i(), u("svg", {
+    }), (o, t) => (i(), u("svg", {
       ref_key: "svgIconElement",
-      ref: o,
+      ref: n,
       class: "sv-svg-icon",
       role: "img"
     }, lt, 512));
@@ -3790,13 +3793,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     handleClick: { type: Boolean, default: !0 }
   },
   setup(l) {
-    const s = l, o = $(null), e = (t) => {
+    const s = l, n = $(null), e = (t) => {
       s.handleClick && t.stopPropagation();
     };
     B(() => s.model);
-    const n = le(() => s.model.renderedActions);
+    const o = le(() => s.model.renderedActions);
     return M(() => {
-      !s.model.hasActions || s.model.initResponsivityManager(o.value);
+      !s.model.hasActions || s.model.initResponsivityManager(n.value);
     }), U(() => {
       s.model.resetResponsivityManager();
     }), (t, r) => {
@@ -3804,11 +3807,11 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
       return t.model.hasActions ? (i(), u("div", {
         key: 0,
         ref_key: "root",
-        ref: o,
+        ref: n,
         class: a(t.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u(_, null, D(I(n), (m) => (i(), g(c, {
+        (i(!0), u(_, null, D(I(o), (m) => (i(), g(c, {
           key: m.id,
           item: m
         }, null, 8, ["item"]))), 128))
@@ -3821,10 +3824,10 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     item: {}
   },
   setup(l) {
-    const s = l, o = w(
+    const s = l, n = w(
       () => s.item.component || "sv-action-bar-item"
     );
-    return B(() => s.item), (e, n) => {
+    return B(() => s.item), (e, o) => {
       const t = q("sv-action-bar-separator");
       return i(), u("div", {
         class: a(e.item.getActionRootCss()),
@@ -3832,7 +3835,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
       }, [
         v("div", mt, [
           e.item.needSeparator ? (i(), g(t, { key: 0 })) : d("", !0),
-          (i(), g(T(o.value), { item: e.item }, null, 8, ["item"]))
+          (i(), g(T(n.value), { item: e.item }, null, 8, ["item"]))
         ])
       ], 10, dt);
     };
@@ -3847,36 +3850,36 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
   },
   setup(l) {
     const s = l;
-    return B(() => s.item), (o, e) => {
-      const n = q("sv-svg-icon"), t = X("key2click");
+    return B(() => s.item), (n, e) => {
+      const o = q("sv-svg-icon"), t = X("key2click");
       return P((i(), u("button", {
-        class: a(o.item.getActionBarItemCss()),
+        class: a(n.item.getActionBarItemCss()),
         type: "button",
         onClick: e[0] || (e[0] = (r) => {
-          o.item.action(o.item, !!r.pointerType);
+          n.item.action(n.item, !!r.pointerType);
         }),
         onKeyup: e[1] || (e[1] = (r) => {
           r.stopPropagation();
         }),
-        disabled: o.item.disabled,
-        title: o.item.tooltip || o.item.title,
-        "aria-checked": o.item.ariaChecked,
-        "aria-expanded": o.item.ariaExpanded,
-        role: o.item.ariaRole
+        disabled: n.item.disabled,
+        title: n.item.tooltip || n.item.title,
+        "aria-checked": n.item.ariaChecked,
+        "aria-expanded": n.item.ariaExpanded,
+        role: n.item.ariaRole
       }, [
-        o.item.iconName ? (i(), g(n, {
+        n.item.iconName ? (i(), g(o, {
           key: 0,
-          class: a(o.item.cssClasses.itemIcon),
-          iconName: o.item.iconName,
-          size: o.item.iconSize,
-          title: o.item.tooltip || o.item.title
+          class: a(n.item.cssClasses.itemIcon),
+          iconName: n.item.iconName,
+          size: n.item.iconSize,
+          title: n.item.tooltip || n.item.title
         }, null, 8, ["class", "iconName", "size", "title"])) : d("", !0),
-        o.item.hasTitle ? (i(), u("span", {
+        n.item.hasTitle ? (i(), u("span", {
           key: 1,
-          class: a(o.item.getActionBarItemTitleCss())
-        }, R(o.item.title), 3)) : d("", !0)
+          class: a(n.item.getActionBarItemTitleCss())
+        }, R(n.item.title), 3)) : d("", !0)
       ], 42, pt)), [
-        [t, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
+        [t, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
       ]);
     };
   }
@@ -3889,49 +3892,49 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     item: {}
   },
   setup(l) {
-    const s = l, o = Me;
+    const s = l, n = Me;
     let e;
     return B(
       () => s.item,
-      (n) => {
-        e = new Ae(n);
+      (o) => {
+        e = new Ae(o);
       },
       () => {
         e.dispose();
       }
-    ), (n, t) => {
+    ), (o, t) => {
       const r = q("sv-svg-icon"), c = q("sv-popup"), m = X("key2click");
       return i(), u(_, null, [
         P((i(), u("button", {
           type: "button",
-          class: a(n.item.getActionBarItemCss()),
+          class: a(o.item.getActionBarItemCss()),
           onClick: t[0] || (t[0] = (p) => {
-            n.item.action(n.item, !!p.pointerType);
+            o.item.action(o.item, !!p.pointerType);
           }),
           onKeyup: t[1] || (t[1] = (p) => {
             p.stopPropagation();
           }),
-          disabled: n.item.disabled,
-          title: n.item.tooltip || n.item.title,
-          role: n.item.ariaRole
+          disabled: o.item.disabled,
+          title: o.item.tooltip || o.item.title,
+          role: o.item.ariaRole
         }, [
-          n.item.iconName ? (i(), g(r, {
+          o.item.iconName ? (i(), g(r, {
             key: 0,
-            class: a(n.item.cssClasses.itemIcon),
-            iconName: n.item.iconName,
-            size: n.item.iconSize,
-            title: n.item.tooltip || n.item.title
+            class: a(o.item.cssClasses.itemIcon),
+            iconName: o.item.iconName,
+            size: o.item.iconSize,
+            title: o.item.tooltip || o.item.title
           }, null, 8, ["class", "iconName", "size", "title"])) : d("", !0),
-          n.item.hasTitle ? (i(), u("span", {
+          o.item.hasTitle ? (i(), u("span", {
             key: 1,
-            class: a(n.item.getActionBarItemTitleCss())
-          }, R(n.item.title), 3)) : d("", !0)
+            class: a(o.item.getActionBarItemTitleCss())
+          }, R(o.item.title), 3)) : d("", !0)
         ], 42, qt)), [
-          [m, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
+          [m, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
         ]),
         C(c, {
-          model: n.item.popupModel,
-          getTarget: I(o)
+          model: o.item.popupModel,
+          getTarget: I(n)
         }, null, 8, ["model", "getTarget"])
       ], 64);
     };
@@ -3942,9 +3945,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     item: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.item && s.item.innerCss);
-    return (e, n) => (i(), u("div", {
-      class: a(["sv-action-bar-separator", o.value])
+    const s = l, n = w(() => s.item && s.item.innerCss);
+    return (e, o) => (i(), u("div", {
+      class: a(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
 }), bt = ["aria-label", "placeholder", "value"], kt = ["aria-label"], ft = ["id"], It = /* @__PURE__ */ h({
@@ -3953,23 +3956,23 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     model: {}
   },
   setup(l) {
-    const s = l, o = $(null), e = (r) => {
+    const s = l, n = $(null), e = (r) => {
       const c = s.model;
       c.filterString = r.target.value;
-    }, n = (r) => {
+    }, o = (r) => {
       const c = s.model;
       c.filterString = r.target.value, s.model.goToItems(r);
     }, t = (r) => {
       s.model.onMouseMove(r);
     };
     return B(() => s.model), M(() => {
-      s.model.initListContainerHtmlElement(o.value);
+      s.model.initListContainerHtmlElement(n.value);
     }), (r, c) => {
       const m = q("sv-svg-icon"), p = q("sv-list-item");
       return i(), u("div", {
         class: a(r.model.cssClasses.root),
         ref_key: "listContainerElement",
-        ref: o
+        ref: n
       }, [
         r.model.showFilter ? (i(), u("div", {
           key: 0,
@@ -3990,7 +3993,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
             placeholder: r.model.filterStringPlaceholder,
             value: r.model.filterString,
             onChange: e,
-            onKeyup: n
+            onKeyup: o
           }, null, 42, bt),
           r.model.showSearchClearButton && !!r.model.filterString ? (i(), u("button", {
             key: 0,
@@ -4046,51 +4049,51 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     item: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.item.elementId), e = (n) => {
-      s.model.onItemClick(s.item), n.stopPropagation();
+    const s = l, n = w(() => s.item.elementId), e = (o) => {
+      s.model.onItemClick(s.item), o.stopPropagation();
     };
     return B(() => s.item), M(() => {
       setTimeout(() => {
         s.model.onLastItemRended(s.item);
       });
-    }), (n, t) => {
+    }), (o, t) => {
       const r = q("sv-svg-icon"), c = q("survey-string"), m = X("key2click");
       return P((i(), u("li", {
         tabindex: "0",
         role: "option",
-        "aria-selected": n.model.isItemSelected(n.item),
-        key: n.item.id,
-        id: o.value,
-        onPointerdown: t[0] || (t[0] = (p) => n.model.onPointerDown(p, n.item)),
-        class: a(n.model.getItemClass(n.item)),
+        "aria-selected": o.model.isItemSelected(o.item),
+        key: o.item.id,
+        id: n.value,
+        onPointerdown: t[0] || (t[0] = (p) => o.model.onPointerDown(p, o.item)),
+        class: a(o.model.getItemClass(o.item)),
         onClick: e
       }, [
-        n.item.needSeparator ? (i(), u("div", {
+        o.item.needSeparator ? (i(), u("div", {
           key: 0,
-          class: a(n.model.cssClasses.itemSeparator)
+          class: a(o.model.cssClasses.itemSeparator)
         }, null, 2)) : d("", !0),
         v("div", {
-          style: S({ paddingInlineStart: n.model.getItemIndent(n.item) }),
-          class: a(n.model.cssClasses.itemBody),
-          title: n.item.locTitle.calculatedText
+          style: S({ paddingInlineStart: o.model.getItemIndent(o.item) }),
+          class: a(o.model.cssClasses.itemBody),
+          title: o.item.locTitle.calculatedText
         }, [
-          n.item.iconName && !n.item.component ? (i(), g(r, {
+          o.item.iconName && !o.item.component ? (i(), g(r, {
             key: 0,
-            class: a(n.model.cssClasses.itemIcon),
-            iconName: n.item.iconName,
-            size: n.item.iconSize
+            class: a(o.model.cssClasses.itemIcon),
+            iconName: o.item.iconName,
+            size: o.item.iconSize
           }, null, 8, ["class", "iconName", "size"])) : d("", !0),
-          n.item.component ? d("", !0) : (i(), g(c, {
+          o.item.component ? d("", !0) : (i(), g(c, {
             key: 1,
-            locString: n.item.locTitle
+            locString: o.item.locTitle
           }, null, 8, ["locString"])),
-          n.item.component ? (i(), g(T(n.item.component), {
+          o.item.component ? (i(), g(T(o.item.component), {
             key: 2,
-            item: n.item
+            item: o.item
           }, null, 8, ["item"])) : d("", !0)
         ], 14, St)
       ], 42, wt)), [
-        [H, n.model.isItemVisible(n.item)],
+        [H, o.model.isItemVisible(o.item)],
         [m]
       ]);
     };
@@ -4102,30 +4105,30 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     model: {}
   },
   setup(l) {
-    const s = l, o = z(
+    const s = l, n = z(
       de(s.model, void 0)
     ), e = $(null);
     return J(
       () => s.model,
-      (n) => {
-        o.value.dispose(), o.value = de(n, void 0);
+      (o) => {
+        n.value.dispose(), n.value = de(o, void 0);
       },
       { immediate: !0 }
-    ), B(() => o.value), M(() => {
-      const n = e.value;
-      o.value.setComponentElement(
-        n,
-        s.getTarget ? s.getTarget(n) : void 0
+    ), B(() => n.value), M(() => {
+      const o = e.value;
+      n.value.setComponentElement(
+        o,
+        s.getTarget ? s.getTarget(o) : void 0
       );
     }), U(() => {
-      o.value.dispose();
-    }), (n, t) => {
+      n.value.dispose();
+    }), (o, t) => {
       const r = q("sv-popup-container");
       return i(), u("div", {
         ref_key: "root",
         ref: e
       }, [
-        C(r, { model: o.value }, null, 8, ["model"])
+        C(r, { model: n.value }, null, 8, ["model"])
       ], 512);
     };
   }
@@ -4142,60 +4145,60 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
   },
   setup(l) {
     const s = l;
-    let o = !1;
-    const e = (n) => {
-      n.stopPropagation();
+    let n = !1;
+    const e = (o) => {
+      o.stopPropagation();
     };
     return B(() => s.model), te(() => {
-      const n = s.model;
-      !o && n.isVisible && s.model.updateOnShowing(), o = n.isVisible;
+      const o = s.model;
+      !n && o.isVisible && s.model.updateOnShowing(), n = o.isVisible;
     }), M(() => {
       s.model.isVisible && s.model.updateOnShowing();
-    }), (n, t) => {
+    }), (o, t) => {
       const r = q("sv-action-bar");
       return P((i(), u("div", {
         tabindex: "-1",
-        class: a(["sv-popup", n.model.styleClass]),
+        class: a(["sv-popup", o.model.styleClass]),
         onKeydown: t[0] || (t[0] = (c) => {
-          n.model.onKeyDown(c);
+          o.model.onKeyDown(c);
         }),
         onClick: t[1] || (t[1] = (c) => {
-          n.model.clickOutside(c);
+          o.model.clickOutside(c);
         })
       }, [
         v("div", {
           class: "sv-popup__container",
           style: S({
-            left: n.model.left,
-            top: n.model.top,
-            height: n.model.height,
-            width: n.model.width,
-            minWidth: n.model.minWidth
+            left: o.model.left,
+            top: o.model.top,
+            height: o.model.height,
+            width: o.model.width,
+            minWidth: o.model.minWidth
           }),
           onClick: e
         }, [
           v("div", $t, [
-            n.model.showHeader ? (i(), g(T(n.model.popupHeaderTemplate), {
+            o.model.showHeader ? (i(), g(T(o.model.popupHeaderTemplate), {
               key: 0,
-              model: n.model
+              model: o.model
             }, null, 8, ["model"])) : d("", !0),
             v("div", _t, [
-              n.model.title ? (i(), u("div", Dt, R(n.model.title), 1)) : d("", !0),
+              o.model.title ? (i(), u("div", Dt, R(o.model.title), 1)) : d("", !0),
               v("div", Bt, [
                 v("div", Lt, [
-                  (i(), g(T(n.model.contentComponentName), O(ne(n.model.contentComponentData)), null, 16))
+                  (i(), g(T(o.model.contentComponentName), O(ne(o.model.contentComponentData)), null, 16))
                 ])
               ]),
-              n.model.showFooter ? (i(), u("div", Nt, [
+              o.model.showFooter ? (i(), u("div", Nt, [
                 C(r, {
-                  model: n.model.footerToolbar
+                  model: o.model.footerToolbar
                 }, null, 8, ["model"])
               ])) : d("", !0)
             ])
           ])
         ], 4)
       ], 34)), [
-        [H, n.model.isVisible]
+        [H, o.model.isVisible]
       ]);
     };
   }
@@ -4205,7 +4208,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     model: {}
   },
   setup(l) {
-    return (s, o) => (i(), u("span", {
+    return (s, n) => (i(), u("span", {
       class: "sv-popup__pointer",
       style: S({
         left: s.model.pointerTarget.left,
@@ -4224,17 +4227,17 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     needRenderWrapper: {}
   },
   setup(l) {
-    const s = l, o = w(
+    const s = l, n = w(
       () => s.survey.getContainerContent(s.container)
     );
-    return (e, n) => o.value.length > 0 ? (i(), u(_, { key: 0 }, [
+    return (e, o) => n.value.length > 0 ? (i(), u(_, { key: 0 }, [
       e.needRenderWrapper ? (i(), u("div", Mt, [
-        (i(!0), u(_, null, D(o.value, (t, r) => (i(), g(T(t.component), {
+        (i(!0), u(_, null, D(n.value, (t, r) => (i(), g(T(t.component), {
           survey: e.survey,
           container: e.container,
           model: t.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (i(!0), u(_, { key: 1 }, D(o.value, (t, r) => (i(), g(T(t.component), {
+      ])) : (i(!0), u(_, { key: 1 }, D(n.value, (t, r) => (i(), g(T(t.component), {
         survey: e.survey,
         container: e.container,
         model: t.data
@@ -4249,13 +4252,13 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     css: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.survey.progressValue + "%"), e = (t) => me.getProgressTextInBarCss(t), n = (t) => me.getProgressTextUnderBarCss(t);
+    const s = l, n = w(() => s.survey.progressValue + "%"), e = (t) => me.getProgressTextInBarCss(t), o = (t) => me.getProgressTextUnderBarCss(t);
     return (t, r) => (i(), u("div", {
       class: a(t.survey.getProgressCssClasses(t.container))
     }, [
       v("div", {
         class: a(t.survey.css.progressBar),
-        style: S({ width: o.value }),
+        style: S({ width: n.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4266,7 +4269,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
         }, R(t.survey.progressText), 3)
       ], 6),
       v("span", {
-        class: a(n(t.survey.css))
+        class: a(o(t.survey.css))
       }, R(t.survey.progressText), 3)
     ], 2));
   }
@@ -4278,7 +4281,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     container: {}
   },
   setup(l) {
-    const s = l, o = $(!1), e = $(!1), n = $(!1), t = $(!0), r = $(), c = w(() => s.survey.css);
+    const s = l, n = $(!1), e = $(!1), o = $(!1), t = $(!0), r = $(), c = w(() => s.survey.css);
     let m = null;
     const p = (y) => {
       let f = r.value;
@@ -4291,10 +4294,10 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
           t.value = f, e.value = !f;
         },
         onUpdateScroller: (f) => {
-          o.value = f;
+          n.value = f;
         },
         onUpdateSettings: () => {
-          t.value = s.model.showItemTitles, n.value = !s.model.showItemTitles;
+          t.value = s.model.showItemTitles, o.value = !s.model.showItemTitles;
         },
         container: w(() => s.container)
       });
@@ -4321,7 +4324,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
         class: a(c.value.progressButtonsContainer)
       }, [
         v("div", {
-          class: a(y.model.getScrollButtonCss(o.value, !0)),
+          class: a(y.model.getScrollButtonCss(n.value, !0)),
           onClick: f[0] || (f[0] = (b) => p(!0)),
           role: "button"
         }, null, 2),
@@ -4351,17 +4354,28 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
                 key: 1,
                 class: a(c.value.progressButtonsPageDescription),
                 title: b.locNavigationDescription.renderedHtml
-              }, R(b.locNavigationDescription.renderedHtml), 11, Ft)) : d("", !0)
+              }, R(b.locNavigationDescription.renderedHtml), 11, Ft)) : d("", !0),
+              v("div", {
+                class: a(c.value.progressButtonsButton)
+              }, [
+                v("div", {
+                  class: a(c.value.progressButtonsButtonBackground)
+                }, null, 2),
+                v("div", {
+                  class: a(c.value.progressButtonsButtonContent)
+                }, null, 2),
+                v("span", null, R(y.model.getItemNumber(b)), 1)
+              ], 2)
             ], 10, Wt))), 128))
           ], 2)
         ], 2),
         v("div", {
-          class: a(y.model.getScrollButtonCss(o.value, !1)),
+          class: a(y.model.getScrollButtonCss(n.value, !1)),
           onClick: f[1] || (f[1] = (b) => p(!1)),
           role: "button"
         }, null, 2)
       ], 2),
-      n.value ? (i(), u("div", {
+      o.value ? (i(), u("div", {
         key: 1,
         class: a(y.survey.css.progressButtonsFooter)
       }, [
@@ -4379,20 +4393,20 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     model: {}
   },
   setup(l) {
-    return (s, o) => {
-      const e = q("sv-svg-icon"), n = q("sv-popup"), t = q("sv-list"), r = X("key2click");
+    return (s, n) => {
+      const e = q("sv-svg-icon"), o = q("sv-popup"), t = q("sv-list"), r = X("key2click");
       return i(), u("div", {
         class: a(s.model.containerCss)
       }, [
         s.model.isMobile ? P((i(), u("div", {
           key: 0,
-          onClick: o[0] || (o[0] = (...c) => s.model.togglePopup && s.model.togglePopup(...c))
+          onClick: n[0] || (n[0] = (...c) => s.model.togglePopup && s.model.togglePopup(...c))
         }, [
           C(e, {
             iconName: s.model.icon,
             size: 24
           }, null, 8, ["iconName"]),
-          C(n, {
+          C(o, {
             model: s.model.popupModel
           }, null, 8, ["model"])
         ])), [
@@ -4414,21 +4428,21 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     survey: {}
   },
   setup(l) {
-    const s = l, o = $(), e = $(""), n = $(1), t = w(() => {
+    const s = l, n = $(), e = $(""), o = $(1), t = w(() => {
       const b = s.survey ? s.survey : s.model;
       return Re(b);
     }), r = w(() => t.value.activePage ? t.value.activePage.id : ""), c = () => {
       const b = r.value;
-      return !!t.value && b + n.value.toString();
+      return !!t.value && b + o.value.toString();
     }, m = w(
       () => t.value.showCompletedPage && t.value.state === "completed"
     ), p = w(() => t.value.css), y = w(() => "page" + c()), f = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
     return B(() => t.value), M(() => {
       if (!!t.value) {
-        var b = o.value;
+        var b = n.value;
         b && t.value.afterRenderSurvey(b), t.value.renderCallback = () => {
           var N, k;
-          n.value++, (k = (N = ie()) == null ? void 0 : N.proxy) == null || k.$forceUpdate();
+          o.value++, (k = (N = ie()) == null ? void 0 : N.proxy) == null || k.$forceUpdate();
         }, t.value.startTimerFromUI();
       }
     }), U(() => {
@@ -4439,7 +4453,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
         class: a(t.value.getRootCss()),
         style: S(t.value.themeVariables),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         t.value.needRenderIcons ? (i(), g(k, { key: 0 })) : d("", !0),
         v("div", {
@@ -4556,18 +4570,18 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
   },
   setup(l) {
     const s = l;
-    return B(() => s.model), (o, e) => {
-      const n = q("sv-action-bar");
-      return o.model.isDisplayed ? (i(), u("div", {
+    return B(() => s.model), (n, e) => {
+      const o = q("sv-action-bar");
+      return n.model.isDisplayed ? (i(), u("div", {
         key: 0,
-        class: a(o.model.css),
-        style: S({ visibility: o.model.active ? "visible" : "hidden" }),
+        class: a(n.model.css),
+        style: S({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
-        v("span", null, R(o.model.message), 1),
-        C(n, {
-          model: o.model.actionBar
+        v("span", null, R(n.model.message), 1),
+        C(o, {
+          model: n.model.actionBar
         }, null, 8, ["model"])
       ], 6)) : d("", !0);
     };
@@ -4579,7 +4593,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     commentClass: {}
   },
   setup(l) {
-    return (s, o) => (i(), u("div", {
+    return (s, n) => (i(), u("div", {
       class: a(s.question.getCommentAreaCss(!0))
     }, [
       s.question.isReadOnlyRenderDiv() ? d("", !0) : (i(), u("textarea", {
@@ -4594,10 +4608,10 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
         "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
         "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
         style: S({ resize: s.question.resizeStyle }),
-        onChange: o[0] || (o[0] = (e) => {
+        onChange: n[0] || (n[0] = (e) => {
           s.question.onOtherValueChange(e);
         }),
-        onInput: o[1] || (o[1] = (e) => {
+        onInput: n[1] || (n[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
       }, null, 46, ei)),
@@ -4610,16 +4624,16 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     item: {}
   },
   setup(l) {
-    const s = l, o = () => s.item.data && s.item.data.mouseDown();
-    return B(() => s.item), (e, n) => e.item.visible ? (i(), u("input", {
+    const s = l, n = () => s.item.data && s.item.data.mouseDown();
+    return B(() => s.item), (e, o) => e.item.visible ? (i(), u("input", {
       key: 0,
       type: "button",
       disabled: e.item.disabled,
       value: e.item.title,
       class: a(e.item.innerCss),
       title: e.item.getTooltip(),
-      onMousedown: o,
-      onClick: n[0] || (n[0] = (...t) => e.item.action && e.item.action(...t))
+      onMousedown: n,
+      onClick: o[0] || (o[0] = (...t) => e.item.action && e.item.action(...t))
     }, null, 42, oi)) : d("", !0);
   }
 }), ye = /* @__PURE__ */ h({
@@ -4632,32 +4646,32 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     closeOnCompleteTimeout: {}
   },
   setup(l) {
-    const s = l, o = z(), e = w(() => s.survey ? s.survey.getCss() : {});
+    const s = l, n = z(), e = w(() => s.survey ? s.survey.getCss() : {});
     w(() => {
       var f;
-      return (f = o.value) != null && f.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
+      return (f = n.value) != null && f.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
     }), w(() => {
       var f;
-      return (f = o.value) == null ? void 0 : f.isExpanded;
+      return (f = n.value) == null ? void 0 : f.isExpanded;
     });
-    const n = () => {
-      o.value.changeExpandCollapse();
+    const o = () => {
+      n.value.changeExpandCollapse();
     }, t = () => {
-      o.value.hide();
+      n.value.hide();
     }, r = () => {
-      o.value.toggleFullScreen();
+      n.value.toggleFullScreen();
     }, c = () => "SurveyComponent", m = () => {
-      o.value.onScroll();
+      n.value.onScroll();
     }, p = () => {
-      let f = o.value.cssHeaderRoot;
-      return o.value.isCollapsed && (f += " " + o.value.cssRootCollapsedMod), f;
+      let f = n.value.cssHeaderRoot;
+      return n.value.isCollapsed && (f += " " + n.value.cssRootCollapsedMod), f;
     };
-    B(() => o.value);
+    B(() => n.value);
     const y = J(
       () => s.survey,
       (f) => {
         const b = new Ee(null, f);
-        s.isExpanded !== void 0 && (b.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (b.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (b.allowClose = s.allowClose), s.allowFullScreen !== void 0 && (b.allowFullScreen = s.allowFullScreen), b.isShowing = !0, o.value = b;
+        s.isExpanded !== void 0 && (b.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (b.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (b.allowClose = s.allowClose), s.allowFullScreen !== void 0 && (b.allowFullScreen = s.allowFullScreen), b.isShowing = !0, n.value = b;
       },
       {
         immediate: !0
@@ -4667,59 +4681,59 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
       y();
     }), (f, b) => {
       const N = q("sv-svg-icon");
-      return o.value.isShowing ? (i(), u("div", {
+      return n.value.isShowing ? (i(), u("div", {
         key: 0,
-        style: S({ maxWidth: o.value.renderedWidth, width: o.value.renderedWidth }),
-        class: a(o.value.cssRoot),
+        style: S({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
+        class: a(n.value.cssRoot),
         onScroll: m
       }, [
         v("div", {
-          class: a(o.value.cssRootContent)
+          class: a(n.value.cssRootContent)
         }, [
           v("div", {
             class: a(p())
           }, [
-            o.value.isCollapsed && !!o.value.locTitle ? (i(), u("div", {
+            n.value.isCollapsed && !!n.value.locTitle ? (i(), u("div", {
               key: 0,
-              class: a(o.value.cssHeaderTitleCollapsed)
-            }, R(o.value.locTitle.renderedHtml), 3)) : d("", !0),
+              class: a(n.value.cssHeaderTitleCollapsed)
+            }, R(n.value.locTitle.renderedHtml), 3)) : d("", !0),
             v("div", {
-              class: a(o.value.cssHeaderButtonsContainer)
+              class: a(n.value.cssHeaderButtonsContainer)
             }, [
-              o.value.allowFullScreen ? (i(), u("div", {
+              n.value.allowFullScreen ? (i(), u("div", {
                 key: 0,
-                class: a(o.value.cssHeaderFullScreenButton),
+                class: a(n.value.cssHeaderFullScreenButton),
                 onClick: r
               }, [
-                o.value.isFullScreen ? (i(), g(N, {
+                n.value.isFullScreen ? (i(), g(N, {
                   key: 0,
                   iconName: "icon-back-to-panel_16x16",
                   size: 16
                 })) : d("", !0),
-                o.value.isFullScreen ? d("", !0) : (i(), g(N, {
+                n.value.isFullScreen ? d("", !0) : (i(), g(N, {
                   key: 1,
                   iconName: "icon-full-screen_16x16",
                   size: 16
                 }))
               ], 2)) : d("", !0),
               v("div", {
-                class: a(o.value.cssHeaderCollapseButton),
-                onClick: n
+                class: a(n.value.cssHeaderCollapseButton),
+                onClick: o
               }, [
-                o.value.isExpanded ? (i(), g(N, {
+                n.value.isExpanded ? (i(), g(N, {
                   key: 0,
                   iconName: "icon-minimize_16x16",
                   size: 16
                 })) : d("", !0),
-                o.value.isCollapsed ? (i(), g(N, {
+                n.value.isCollapsed ? (i(), g(N, {
                   key: 1,
                   iconName: "icon-restore_16x16",
                   size: 16
                 })) : d("", !0)
               ], 2),
-              o.value.allowClose ? (i(), u("div", {
+              n.value.allowClose ? (i(), u("div", {
                 key: 1,
-                class: a(o.value.cssHeaderCloseButton),
+                class: a(n.value.cssHeaderCloseButton),
                 onClick: t
               }, [
                 C(N, {
@@ -4730,7 +4744,7 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
             ], 2)
           ], 2),
           v("div", {
-            class: a(o.value.cssBody)
+            class: a(n.value.cssBody)
           }, [
             (i(), g(T(c()), { survey: f.survey }, null, 8, ["survey"]))
           ], 2)
@@ -4745,20 +4759,20 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     css: {}
   },
   setup(l) {
-    const s = l, o = $(), e = w(
+    const s = l, n = $(), e = w(
       () => s.question.customWidget.isDefaultRender
-    ), n = w(
+    ), o = w(
       () => !!s.question.customWidget.htmlTemplate
     ), t = w(() => s.question.customWidget.htmlTemplate), r = w(() => "survey-" + s.question.getTemplate());
     return M(() => {
-      s.question.customWidget.afterRender(s.question, o.value);
+      s.question.customWidget.afterRender(s.question, n.value);
     }), Q(() => {
-      s.question.customWidget.willUnmount(s.question, o.value);
+      s.question.customWidget.willUnmount(s.question, n.value);
     }), (c, m) => (i(), u("div", {
       ref_key: "root",
-      ref: o
+      ref: n
     }, [
-      n.value ? (i(), u("div", {
+      o.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
       }, null, 8, ii)) : d("", !0),
@@ -4773,9 +4787,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
   __name: "PopupModal",
   setup(l) {
     const s = z();
-    function o(n, t, r, c, m, p, y = "popup") {
+    function n(o, t, r, c, m, p, y = "popup") {
       const f = We(
-        n,
+        o,
         t,
         r,
         c,
@@ -4787,21 +4801,21 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
       );
       return e(f);
     }
-    function e(n, t) {
-      n.onHide = () => {
+    function e(o, t) {
+      o.onHide = () => {
         s.value = void 0, r.dispose();
       };
       const r = Ve(
-        n,
+        o,
         t
       );
       return r.model.isVisible = !0, s.value = r, r;
     }
-    return j.showModal || (j.showModal = o, U(() => {
+    return j.showModal || (j.showModal = n, U(() => {
       j.showModal = void 0;
     })), j.showDialog || (j.showDialog = e, U(() => {
       j.showDialog = void 0;
-    })), (n, t) => {
+    })), (o, t) => {
       const r = q("sv-popup-container");
       return s.value ? (i(), g(Te, {
         key: 0,
@@ -4819,9 +4833,9 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
   },
   setup(l) {
     const s = l;
-    return B(() => s.counter), (o, e) => (i(), u("div", {
-      class: a(o.remainingCharacterCounter)
-    }, R(o.counter.remainingCharacterCounter), 3));
+    return B(() => s.counter), (n, e) => (i(), u("div", {
+      class: a(n.remainingCharacterCounter)
+    }, R(n.counter.remainingCharacterCounter), 3));
   }
 }), ui = /* @__PURE__ */ h({
   inheritAttrs: !1,
@@ -4831,16 +4845,16 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
+    const s = l, n = $(null);
+    A(s, n);
     const e = w(() => s.question.contentPanel);
-    return (n, t) => {
+    return (o, t) => {
       const r = q("survey-panel");
       return i(), g(r, {
         ref_key: "root",
-        ref: o,
+        ref: n,
         element: e.value,
-        css: n.css
+        css: o.css
       }, null, 8, ["element", "css"]);
     };
   }
@@ -4852,11 +4866,11 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     css: {}
   },
   setup(l) {
-    const s = l, o = $(null);
-    A(s, o);
-    const e = w(() => s.question.contentQuestion), n = (t) => re(t);
-    return (t, r) => (i(), g(T(n(e.value)), {
-      ref: o.value,
+    const s = l, n = $(null);
+    A(s, n);
+    const e = w(() => s.question.contentQuestion), o = (t) => re(t);
+    return (t, r) => (i(), g(T(o(e.value)), {
+      ref: n.value,
       question: e.value,
       css: t.css
     }, null, 8, ["question", "css"]));
@@ -4870,39 +4884,39 @@ const it = /* @__PURE__ */ Ce(et, [["render", tt]]), rt = /* @__PURE__ */ v("use
     css: {}
   },
   setup(l) {
-    const s = l, o = w(() => qe * s.model.progress), e = w(() => s.model.text);
-    return B(() => s.model), (n, t) => n.model.isRunning && n.model.showTimerAsClock ? (i(), u("div", {
+    const s = l, n = w(() => qe * s.model.progress), e = w(() => s.model.text);
+    return B(() => s.model), (o, t) => o.model.isRunning && o.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
-      class: a(n.model.rootCss)
+      class: a(o.model.rootCss)
     }, [
-      n.model.showProgress ? (i(), u("svg", {
+      o.model.showProgress ? (i(), u("svg", {
         key: 0,
-        class: a(n.model.getProgressCss()),
-        style: S({ strokeDasharray: qe, strokeDashoffset: o.value })
+        class: a(o.model.getProgressCss()),
+        style: S({ strokeDasharray: qe, strokeDashoffset: n.value })
       }, ci, 6)) : d("", !0),
       v("div", {
-        class: a(n.model.textContainerCss)
+        class: a(o.model.textContainerCss)
       }, [
         v("span", {
-          class: a(n.model.majorTextCss)
-        }, R(n.model.clockMajorText), 3),
-        n.model.clockMinorText ? (i(), u("span", {
+          class: a(o.model.majorTextCss)
+        }, R(o.model.clockMajorText), 3),
+        o.model.clockMinorText ? (i(), u("span", {
           key: 0,
-          class: a(n.model.minorTextCss)
-        }, R(n.model.clockMinorText), 3)) : d("", !0)
+          class: a(o.model.minorTextCss)
+        }, R(o.model.clockMinorText), 3)) : d("", !0)
       ], 2)
     ], 2)) : P((i(), u("div", {
       key: 1,
-      class: a(n.model.survey.getCss().timerRoot)
+      class: a(o.model.survey.getCss().timerRoot)
     }, R(e.value), 3)), [
-      [H, n.model.isRunning && !n.model.showTimerAsClock]
+      [H, o.model.isRunning && !o.model.showTimerAsClock]
     ]);
   }
 }), vi = {}, yi = { class: "sd-loading-indicator" };
 function qi(l, s) {
-  const o = q("sv-svg-icon");
+  const n = q("sv-svg-icon");
   return i(), u("div", yi, [
-    C(o, {
+    C(n, {
       iconName: "icon-loading",
       size: "'auto'"
     })
@@ -4917,31 +4931,31 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
   setup(l) {
     const s = l;
     return B(() => {
-      const o = s.model;
-      return o.survey = s.survey, s.model;
-    }), (o, e) => {
-      const n = q("sv-header-cell"), t = q("sv-header-mobile");
+      const n = s.model;
+      return n.survey = s.survey, s.model;
+    }), (n, e) => {
+      const o = q("sv-header-cell"), t = q("sv-header-mobile");
       return i(), u("div", {
-        class: a(o.model.headerClasses),
-        style: S({ height: o.model.renderedHeight })
+        class: a(n.model.headerClasses),
+        style: S({ height: n.model.renderedHeight })
       }, [
-        o.model.backgroundImage ? (i(), u("div", {
+        n.model.backgroundImage ? (i(), u("div", {
           key: 0,
-          class: a(o.model.backgroundImageClasses),
-          style: S(o.model.backgroundImageStyle)
+          class: a(n.model.backgroundImageClasses),
+          style: S(n.model.backgroundImageStyle)
         }, null, 6)) : d("", !0),
-        o.survey.isMobile ? d("", !0) : (i(), u("div", {
+        n.survey.isMobile ? d("", !0) : (i(), u("div", {
           key: 1,
-          class: a(o.model.contentClasses),
-          style: S({ maxWidth: o.model.maxWidth })
+          class: a(n.model.contentClasses),
+          style: S({ maxWidth: n.model.maxWidth })
         }, [
-          (i(!0), u(_, null, D(o.model.cells, (r, c) => (i(), g(n, {
+          (i(!0), u(_, null, D(n.model.cells, (r, c) => (i(), g(o, {
             model: r,
             key: c
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        o.survey.isMobile ? (i(), u("div", hi, [
-          C(t, { model: o.model }, null, 8, ["model"])
+        n.survey.isMobile ? (i(), u("div", hi, [
+          C(t, { model: n.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
@@ -4955,8 +4969,8 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     model: {}
   },
   setup(l) {
-    return (s, o) => {
-      const e = q("survey-element-title"), n = q("survey-string");
+    return (s, n) => {
+      const e = q("survey-element-title"), o = q("survey-string");
       return i(), u("div", {
         class: a(s.model.css),
         style: S(s.model.style)
@@ -4998,7 +5012,7 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
               key: 0,
               class: a(s.model.survey.css.description)
             }, [
-              C(n, {
+              C(o, {
                 locString: s.model.survey.locDescription
               }, null, 8, ["locString"])
             ], 2)) : d("", !0)
@@ -5016,8 +5030,8 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     model: {}
   },
   setup(l) {
-    return (s, o) => {
-      const e = q("survey-element-title"), n = q("survey-string");
+    return (s, n) => {
+      const e = q("survey-element-title"), o = q("survey-string");
       return i(), u("div", Ii, [
         s.model.survey.hasLogo ? (i(), u("div", wi, [
           v("div", {
@@ -5052,7 +5066,7 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
             key: 0,
             class: a(s.model.survey.css.description)
           }, [
-            C(n, {
+            C(o, {
               locString: s.model.survey.locDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
@@ -5068,19 +5082,19 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     css: {}
   },
   setup(l) {
-    const s = l, o = (r) => r.isPanel ? "survey-panel" : "survey-question", e = w(() => {
+    const s = l, n = (r) => r.isPanel ? "survey-panel" : "survey-question", e = w(() => {
       const r = s.element.survey;
       if (r) {
         const c = r.getElementWrapperComponentName(s.element);
         if (c)
           return c;
       }
-      return o(s.element);
-    }), n = (r) => r.cssClasses ? r.rootStyle : {}, t = w(() => {
+      return n(s.element);
+    }), o = (r) => r.cssClasses ? r.rootStyle : {}, t = w(() => {
       const r = s.element, c = r.survey;
       let m;
       return c && (m = c.getElementWrapperComponentData(r)), {
-        componentName: o(r),
+        componentName: n(r),
         componentData: {
           element: r,
           survey: c,
@@ -5091,7 +5105,7 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
       };
     });
     return (r, c) => (i(), u("div", {
-      style: S(n(r.element)),
+      style: S(o(r.element)),
       class: a(r.element.cssClasses.questionWrapper)
     }, [
       r.row.isNeedRender ? (i(), g(T(e.value), O(E({ key: 0 }, t.value)), null, 16)) : r.element.skeletonComponentName ? (i(), g(T(r.element.skeletonComponentName), {
@@ -5108,8 +5122,8 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     componentData: {}
   },
   setup(l) {
-    const s = $e(), o = w(() => !!s.default);
-    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), O(E({ key: 1 }, e.componentData)), null, 16));
+    const s = $e(), n = w(() => !!s.default);
+    return (e, o) => n.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), O(E({ key: 1 }, e.componentData)), null, 16));
   }
 }), _i = /* @__PURE__ */ h({
   __name: "FileCleanButton",
@@ -5118,12 +5132,12 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     css: {}
   },
   setup(l) {
-    return (s, o) => {
+    return (s, n) => {
       const e = q("sv-svg-icon");
       return i(), u("button", {
         type: "button",
         class: a(s.css),
-        onClick: o[0] || (o[0] = (...n) => s.question.doClean && s.question.doClean(...n))
+        onClick: n[0] || (n[0] = (...o) => s.question.doClean && s.question.doClean(...o))
       }, [
         v("span", null, R(s.question.clearButtonCaption), 1),
         s.question.cssClasses.removeButtonIconId ? (i(), g(e, {
@@ -5141,7 +5155,7 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     question: {}
   },
   setup(l) {
-    return (s, o) => {
+    return (s, n) => {
       const e = q("sv-action");
       return i(), u("div", {
         class: a(s.question.cssClasses.videoContainer)
@@ -5171,28 +5185,28 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     item: {}
   },
   setup(l) {
-    const s = l, o = w(
+    const s = l, n = w(
       () => {
         var e;
         return ((e = s.data) == null ? void 0 : e.question) || s.item.data.question;
       }
     );
-    return (e, n) => {
+    return (e, o) => {
       const t = q("sv-svg-icon"), r = X("key2click");
       return P((i(), u("label", {
         tabindex: "0",
-        class: a(o.value.getChooseFileCss()),
-        for: o.value.inputId,
-        "aria-label": o.value.chooseButtonText,
-        onClick: n[0] || (n[0] = (c) => o.value.chooseFile(c))
+        class: a(n.value.getChooseFileCss()),
+        for: n.value.inputId,
+        "aria-label": n.value.chooseButtonText,
+        onClick: o[0] || (o[0] = (c) => n.value.chooseFile(c))
       }, [
-        o.value.cssClasses.chooseFileIconId ? (i(), g(t, {
+        n.value.cssClasses.chooseFileIconId ? (i(), g(t, {
           key: 0,
-          title: o.value.chooseButtonText,
-          iconName: o.value.cssClasses.chooseFileIconId,
+          title: n.value.chooseButtonText,
+          iconName: n.value.cssClasses.chooseFileIconId,
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
-        v("span", null, R(o.value.chooseButtonText), 1)
+        v("span", null, R(n.value.chooseButtonText), 1)
       ], 10, Li)), [
         [r]
       ]);
@@ -5204,50 +5218,50 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     question: {}
   },
   setup(l) {
-    return (s, o) => {
+    return (s, n) => {
       const e = q("sv-svg-icon");
       return s.question.showPreviewContainer ? (i(), u("div", {
         key: 0,
         class: a(s.question.cssClasses.fileList || void 0)
       }, [
-        (i(!0), u(_, null, D(s.question.previewValue, (n, t) => P((i(), u("span", {
+        (i(!0), u(_, null, D(s.question.previewValue, (o, t) => P((i(), u("span", {
           key: s.question.inputId + "_" + t,
           class: a(s.question.cssClasses.preview)
         }, [
-          n.name && s.question.cssClasses.fileSign ? (i(), u("div", {
+          o.name && s.question.cssClasses.fileSign ? (i(), u("div", {
             key: 0,
             class: a(s.question.cssClasses.fileSign)
           }, [
             v("a", {
-              onClick: (r) => s.question.doDownloadFile(r, n),
-              href: n.content,
-              title: n.name,
-              download: n.name,
+              onClick: (r) => s.question.doDownloadFile(r, o),
+              href: o.content,
+              title: o.name,
+              download: o.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, Pi)
+            }, R(o.name), 13, Pi)
           ], 2)) : d("", !0),
           v("div", {
-            class: a(s.question.getImageWrapperCss(n))
+            class: a(s.question.getImageWrapperCss(o))
           }, [
-            s.question.canPreviewImage(n) ? (i(), u("img", {
+            s.question.canPreviewImage(o) ? (i(), u("img", {
               key: 0,
-              src: n.content,
+              src: o.content,
               style: S({
                 height: s.question.imageHeight,
                 width: s.question.imageWidth
               }),
               alt: "File preview"
             }, null, 12, Ai)) : d("", !0),
-            s.question.defaultImage(n) ? (i(), g(e, {
+            s.question.defaultImage(o) ? (i(), g(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
               class: a(s.question.cssClasses.defaultImage),
               size: "auto"
             }, null, 8, ["iconName", "class"])) : d("", !0),
-            n.name && !s.question.isReadOnly ? (i(), u("div", {
+            o.name && !s.question.isReadOnly ? (i(), u("div", {
               key: 2,
               class: a(s.question.getRemoveButtonCss()),
-              onClick: (r) => s.question.doRemoveFile(n)
+              onClick: (r) => s.question.doRemoveFile(o)
             }, [
               v("span", {
                 class: a(s.question.cssClasses.removeFile)
@@ -5261,20 +5275,20 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
             ], 10, Mi)) : d("", !0)
           ], 2),
-          n.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
+          o.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
             class: a(s.question.cssClasses.fileSignBottom)
           }, [
             v("a", {
-              onClick: (r) => s.question.doDownloadFile(r, n),
-              href: n.content,
-              title: n.name,
-              download: n.name,
+              onClick: (r) => s.question.doDownloadFile(r, o),
+              href: o.content,
+              title: o.name,
+              download: o.name,
               style: S({ width: s.question.imageWidth })
-            }, R(n.name), 13, Hi)
+            }, R(o.name), 13, Hi)
           ], 2)) : d("", !0)
         ], 2)), [
-          [H, n && s.question.isPreviewVisible(t)]
+          [H, o && s.question.isPreviewVisible(t)]
         ])), 128))
       ], 2)) : d("", !0);
     };
@@ -5285,14 +5299,14 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     question: {}
   },
   setup(l) {
-    const s = l, o = $();
-    return A(s, o), (e, n) => {
+    const s = l, n = $();
+    return A(s, n), (e, o) => {
       const t = q("sv-button-group-item");
       return i(), u("div", {
         role: "group",
         class: a(e.question.cssClasses.root),
         ref_key: "root",
-        ref: o
+        ref: n
       }, [
         (i(!0), u(_, null, D(e.question.visibleChoices, (r, c) => (i(), g(t, {
           question: e.question,
@@ -5311,54 +5325,54 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     index: {}
   },
   setup(l) {
-    const s = l, o = w(
+    const s = l, n = w(
       () => new Fe(s.question, s.item, s.index)
     ), e = w({
       get: () => s.question.renderedValue,
-      set: (n) => {
+      set: (o) => {
         const t = s.question;
-        t.renderedValue = n;
+        t.renderedValue = o;
       }
     });
-    return (n, t) => {
+    return (o, t) => {
       const r = q("sv-svg-icon"), c = q("survey-string");
       return i(), u("label", {
         role: "radio",
-        class: a(o.value.css.label),
-        title: o.value.caption.renderedHtml
+        class: a(n.value.css.label),
+        title: n.value.caption.renderedHtml
       }, [
         P(v("input", {
           type: "radio",
-          name: o.value.name,
-          id: o.value.id,
-          "aria-required": o.value.isRequired,
-          "aria-label": o.value.caption.renderedHtml,
+          name: n.value.name,
+          id: n.value.id,
+          "aria-required": n.value.isRequired,
+          "aria-label": n.value.caption.renderedHtml,
           role: "radio",
-          "aria-invalid": o.value.hasErrors,
-          "aria-errormessage": o.value.describedBy,
-          disabled: o.value.readOnly,
-          class: a(o.value.css.control),
+          "aria-invalid": n.value.hasErrors,
+          "aria-errormessage": n.value.describedBy,
+          disabled: n.value.readOnly,
+          class: a(n.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (m) => e.value = m),
-          value: o.value.value
+          value: n.value.value
         }, null, 10, Fi), [
           [x, e.value]
         ]),
         v("div", {
-          class: a(o.value.css.decorator)
+          class: a(n.value.css.decorator)
         }, [
-          o.value.iconName ? (i(), g(r, {
+          n.value.iconName ? (i(), g(r, {
             key: 0,
-            iconName: o.value.iconName,
-            size: o.value.iconSize,
-            class: a(o.value.css.icon)
+            iconName: n.value.iconName,
+            size: n.value.iconSize,
+            class: a(n.value.css.icon)
           }, null, 8, ["iconName", "size", "class"])) : d("", !0),
-          o.value.showCaption ? (i(), u("span", {
+          n.value.showCaption ? (i(), u("span", {
             key: 1,
-            class: a(o.value.css.caption),
-            title: o.value.caption.renderedHtml
+            class: a(n.value.css.caption),
+            title: n.value.caption.renderedHtml
           }, [
             C(c, {
-              locString: o.value.caption
+              locString: n.value.caption
             }, null, 8, ["locString"])
           ], 10, Oi)) : d("", !0)
         ], 2)
@@ -5372,20 +5386,20 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     data: {}
   },
   setup(l) {
-    const s = l, o = w(() => s.data), e = G(() => o.value.locLogo);
-    return (n, t) => (i(), u("div", {
-      class: a(o.value.logoClassNames)
+    const s = l, n = w(() => s.data), e = G(() => n.value.locLogo);
+    return (o, t) => (i(), u("div", {
+      class: a(n.value.logoClassNames)
     }, [
       v("img", {
-        class: a(o.value.css.logoImage),
+        class: a(n.value.css.logoImage),
         src: I(e),
-        width: o.value.renderedLogoWidth,
-        height: o.value.renderedLogoHeight,
-        alt: o.value.locTitle.renderedHtml,
+        width: n.value.renderedLogoWidth,
+        height: n.value.renderedLogoHeight,
+        alt: n.value.locTitle.renderedHtml,
         style: S({
-          objectFit: o.value.logoFit,
-          width: o.value.renderedStyleLogoWidth,
-          height: o.value.renderedStyleLogoHeight
+          objectFit: n.value.logoFit,
+          width: n.value.renderedStyleLogoWidth,
+          height: n.value.renderedStyleLogoHeight
         })
       }, null, 14, Ui)
     ], 2));
@@ -5396,7 +5410,7 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
     const s = $();
     return M(() => {
       s.value.innerHTML = Oe.iconsRenderedHtml();
-    }), (o, e) => P((i(), u("svg", {
+    }), (n, e) => P((i(), u("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
       ref: s
@@ -5408,16 +5422,16 @@ const gi = /* @__PURE__ */ Ce(vi, [["render", qi]]), hi = { key: 2 }, Ci = /* @_
 ze.platform = "vue3";
 function Qi(l) {
   l.component("SurveyComponent", ve), l.component("sv-svg-bundle", ji), l.component("PopupSurveyComponent", ye), l.component("survey", ve), l.component("popup-survey", ye), l.component("survey-header", Ge), l.component("sv-logo-image", Ki), l.component("survey-page", Qe), l.component("survey-row", Je), l.component("survey-question", xe), l.component("survey-panel", os), l.component("survey-element-header", is), l.component("survey-string", rs), l.component("sv-string-viewer", as), l.component("sv-string-editor", ds), l.component("sv-skeleton", cs), l.component("survey-text", ys), l.component("survey-text-input", hs), l.component("survey-checkbox", Is), l.component("survey-checkbox-item", Rs), l.component("survey-radiogroup", Ts), l.component("survey-radiogroup-item", Ds), l.component("survey-signaturepad", Ps), l.component("survey-html", Ms), l.component("survey-image", Vs), l.component("survey-expression", Fs), l.component("survey-file", Us), l.component("sv-file-choose-btn", Ni), l.component("sv-file-clean-btn", _i), l.component("sv-file-preview", Ei), l.component("sv-file-video", Bi), l.component("survey-imagepicker", js), l.component("survey-imagepicker-item", Ys), l.component("survey-comment", en), l.component("survey-dropdown", sn), l.component("sv-dropdown-select", rn), l.component("sv-dropdown-option-item", an), l.component("sv-dropdown", pn), l.component("survey-tagbox", vn), l.component("sv-tagbox", gn), l.component("sv-tagbox-item", fn), l.component("sv-tagbox-filter", bn), l.component("survey-ranking", In), l.component("survey-ranking-item", _n), l.component("survey-rating", Ln), l.component("sv-rating-item", Pn), l.component("sv-rating-item-smiley", Mn), l.component("sv-rating-item-star", En), l.component("sv-rating-dropdown", zn), l.component("sv-rating-dropdown-item", On), l.component("survey-boolean", Kn), l.component("sv-boolean-radio", jn), l.component("sv-boolean-radio-item", Jn), l.component("sv-boolean-checkbox", so), l.component("survey-multipletext", no), l.component("survey-multipletext-item", to), l.component("survey-matrix", mo), l.component("survey-matrix-cell", vo), l.component("survey-matrixdropdown", yo), l.component("survey-matrixtable", Co), l.component("survey-matrixheaderrequired", ko), l.component("survey-matrixdropdown-cell", Io), l.component("survey-matrixdynamic", wo), l.component("sv-matrix-remove-button", Ro), l.component("sv-matrix-drag-drop-icon", $o), l.component("sv-matrix-detail-button", Do), l.component("survey-paneldynamic", Bo), l.component("survey-paneldynamicprogress", Lo), l.component("survey-paneldynamicprogress-v2", No), l.component("sv-paneldynamic-add-btn", Po), l.component("sv-paneldynamic-next-btn", Mo), l.component("sv-paneldynamic-prev-btn", Eo), l.component("sv-paneldynamic-remove-btn", Wo), l.component("sv-paneldynamic-progress-text", Vo), l.component("sv-components-container", Ht), l.component("sv-progress-buttons", zt), l.component("sv-navigation-toc", Ut), l.component("sv-progress-pages", Z), l.component("sv-progress-questions", Z), l.component("sv-progress-correctquestions", Z), l.component("sv-progress-requiredquestions", Z), l.component("survey-errors", Oo), l.component("survey-question-comment", Ko), l.component("survey-element-title", jo), l.component("survey-element-title-content", Xo), l.component("sv-title-actions", xo), l.component("sv-brand-info", it), l.component("sv-svg-icon", at), l.component("sv-action-bar", ut), l.component("sv-action", ct), l.component("sv-action-bar-item", yt), l.component("sv-action-bar-item-dropdown", ht), l.component("sv-action-bar-separator", Ct), l.component("sv-list", It), l.component("sv-list-item", Rt), l.component("sv-popup", Tt), l.component("sv-popup-container", Pt), l.component("popup-pointer", At), l.component("sv-notifier", xt), l.component("survey-other-choice", ni), l.component("sv-nav-btn", ti), l.component("survey-customwidget", ri), l.component("survey-popup-modal", li), l.component("sv-character-counter", ai), l.component("survey-composite", ui), l.component("survey-custom", di), l.component("sv-timerpanel", pi), l.component("sv-loading-indicator", gi), l.component("sv-header", Ci), l.component("sv-header-cell", fi), l.component("sv-header-mobile", Ri), l.component("sv-template-renderer", $i), l.component("survey-element", Ti), l.component("survey-buttongroup", Wi), l.component("sv-button-group-item", zi), l.directive("key2click", {
-    mounted: function(s, o) {
-      const e = { ...o.value };
+    mounted: function(s, n) {
+      const e = { ...n.value };
       if (e.disableTabStop) {
         s.tabIndex = -1;
         return;
       }
-      e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (n) => (n.preventDefault(), n.stopPropagation(), ge(n, e), !1)), s.addEventListener("keydown", (n) => {
-        Ue(n, e);
-      }), s.addEventListener("blur", (n) => {
-        Ke(n);
+      e.disableTabStop || (s.tabIndex = 0), s.addEventListener("keyup", (o) => (o.preventDefault(), o.stopPropagation(), ge(o, e), !1)), s.addEventListener("keydown", (o) => {
+        Ue(o, e);
+      }), s.addEventListener("blur", (o) => {
+        Ke(o);
       });
     }
   });