survey-vue3-ui 1.9.126 → 1.9.128

package/survey-vue3-ui.es.js

@@ -1,12 +1,12 @@
-import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as H, ref as _, shallowRef as z, watchEffect as ke, triggerRef as se, unref as f, isRef as fe, defineComponent as h, computed as w, resolveComponent as p, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as $, renderList as B, createBlock as g, resolveDynamicComponent as R, normalizeProps as O, mergeProps as W, withCtx as F, normalizeStyle as S, createElementVNode as c, onUnmounted as U, guardReactiveProps as ne, withDirectives as P, vShow as M, toDisplayString as T, vModelRadio as x, vModelCheckbox as oe, vModelSelect as Ie, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
-import { Base as De, RendererFactory as ee, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ge, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as de, SurveyProgressModel as me, SurveyProgressButtonsModel as He, PopupSurveyModel as We, settings as j, createDialogOptions as Ee, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
+import { shallowReactive as be, watch as J, onBeforeUnmount as Q, onMounted as H, ref as $, shallowRef as z, watchEffect as ke, triggerRef as se, unref as I, isRef as fe, defineComponent as h, computed as w, resolveComponent as v, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as _, renderList as D, createBlock as g, resolveDynamicComponent as T, normalizeProps as O, mergeProps as W, withCtx as F, normalizeStyle as S, createElementVNode as c, onUnmounted as U, guardReactiveProps as ne, withDirectives as N, vShow as M, toDisplayString as R, vModelRadio as x, vModelCheckbox as oe, vModelSelect as Ie, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as _e } from "vue";
+import { Base as De, RendererFactory as ee, DropdownListModel as Be, Helpers as Le, DropdownMultiSelectListModel as Ne, doKey2ClickUp as ge, createSvg as Pe, ActionDropdownViewModel as Ae, getActionDropdownButtonTarget as Me, createPopupViewModel as de, SurveyProgressModel as me, ProgressButtonsResponsivityManager as He, PopupSurveyModel as We, settings as j, createDialogOptions as Ee, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
 De.createPropertiesHash = () => be({});
 function je(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (s, o) => {
     const e = [], n = z(e);
     return e.onArrayChanged = () => {
       se(n);
-    }, s[o] = n, f(s[o]);
+    }, s[o] = n, I(s[o]);
   }, r.iteratePropertiesHash((s, o) => {
     if (Array.isArray(s[o])) {
       const e = z(s[o]);
@@ -14,16 +14,16 @@ function je(r) {
         se(e);
       }, s[o] = e;
     }
-  }), r.getPropertyValueCoreHandler = (s, o) => f(s[o]), r.setPropertyValueCoreHandler = (s, o, e) => {
+  }), r.getPropertyValueCoreHandler = (s, o) => I(s[o]), r.setPropertyValueCoreHandler = (s, o, e) => {
     fe(s[o]) ? s[o].value = e : s[o] = e;
   }, r.__vueImplemented = !0, !0);
 }
 function ce(r, s) {
   !r || !s || (r.iteratePropertiesHash((o, e) => {
-    o[e] = f(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
+    o[e] = I(o[e]), Array.isArray(o[e]) && (o[e].onArrayChanged = void 0);
   }), delete r.__vueImplemented, r.createArrayCoreHandler = void 0, r.getPropertyValueCoreHandler = void 0, r.setPropertyValueCoreHandler = void 0);
 }
-function L(r, s, o) {
+function B(r, s, o) {
   let e = !1;
   const n = J(
     r,
@@ -39,15 +39,15 @@ function L(r, s, o) {
     t && (ce(t, e), o && o(t), n());
   });
 }
-function A(r, s, o, e) {
-  L(() => r.question, o, e), H(() => {
+function P(r, s, o, e) {
+  B(() => r.question, o, e), H(() => {
     r.question && r.question.afterRenderQuestionElement(s.value);
   }), Q(() => {
     r.question.beforeDestroyQuestionElement(s.value);
   });
 }
 function G(r) {
-  const s = _(), o = (n) => {
+  const s = $(), o = (n) => {
     s.value = n.renderedHtml, n.onChanged = () => {
       s.value = n.renderedHtml;
     };
@@ -82,10 +82,10 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = () => {
+    const s = r, o = $(null), e = () => {
       s.survey && o.value && s.survey.afterRenderPage(o.value);
     };
-    L(
+    B(
       () => s.page,
       () => {
         e();
@@ -95,7 +95,7 @@ const Qe = /* @__PURE__ */ h({
     return H(() => {
       e();
     }), (t, a) => {
-      const y = p("survey-element-title"), m = p("survey-string"), q = p("survey-errors"), v = p("survey-row");
+      const y = v("survey-element-title"), m = v("survey-string"), q = v("survey-errors"), p = v("survey-row");
       return i(), u("div", {
         class: l(t.page.cssRoot),
         ref_key: "root",
@@ -114,15 +114,15 @@ const Qe = /* @__PURE__ */ h({
           }, null, 8, ["locString"])
         ], 2)) : d("", !0),
         C(q, { element: t.page }, null, 8, ["element"]),
-        (i(!0), u($, null, B(t.page.rows, (I, b) => (i(), g(R(t.page.getSurvey().getRowWrapperComponentName(I)), O(W({
+        (i(!0), u(_, null, D(t.page.rows, (f, b) => (i(), g(T(t.page.getSurvey().getRowWrapperComponentName(f)), O(W({
           key: t.page.id + "_" + b
         }, {
-          componentData: t.page.getSurvey().getRowWrapperComponentData(I)
+          componentData: t.page.getSurvey().getRowWrapperComponentData(f)
         })), {
           default: F(() => [
-            I.visible ? (i(), g(v, {
+            f.visible ? (i(), g(p, {
               key: 0,
-              row: I,
+              row: f,
               survey: t.survey,
               css: t.css
             }, null, 8, ["row", "survey", "css"])) : d("", !0)
@@ -138,19 +138,19 @@ const Qe = /* @__PURE__ */ h({
     survey: {}
   },
   setup(r) {
-    const s = r, o = _();
+    const s = r, o = $();
     return H(() => {
       var e = o.value;
       e && s.survey && s.survey.afterRenderHeader(e);
     }), (e, n) => {
-      const t = p("survey-element-title"), a = p("survey-string");
+      const t = v("survey-element-title"), a = v("survey-string");
       return e.survey.renderedHasHeader ? (i(), u("div", {
         key: 0,
         class: l(e.survey.css.header),
         ref_key: "root",
         ref: o
       }, [
-        e.survey.isLogoBefore ? (i(), g(R(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
+        e.survey.isLogoBefore ? (i(), g(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 0,
           data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
         }, null, 8, ["data"])) : d("", !0),
@@ -172,7 +172,7 @@ const Qe = /* @__PURE__ */ h({
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
         ], 6)) : d("", !0),
-        e.survey.isLogoAfter ? (i(), g(R(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
+        e.survey.isLogoAfter ? (i(), g(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 2,
           data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
         }, null, 8, ["data"])) : d("", !0),
@@ -192,8 +192,8 @@ const Qe = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = w(
       () => s.row.visibleElements
-    ), e = _();
-    return L(
+    ), e = $();
+    return B(
       () => s.row,
       (n, t) => {
         t && (n.isNeedRender = t.isNeedRender);
@@ -209,13 +209,13 @@ const Qe = /* @__PURE__ */ h({
         }, 10);
       }
     }), (n, t) => {
-      const a = p("survey-element");
+      const a = v("survey-element");
       return i(), u("div", {
         class: l(n.row.getRowCss()),
         ref_key: "root",
         ref: e
       }, [
-        (i(!0), u($, null, B(o.value, (y) => (i(), g(a, {
+        (i(!0), u(_, null, D(o.value, (y) => (i(), g(a, {
           row: n.row,
           css: n.css,
           element: y,
@@ -235,8 +235,8 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => s.element.showErrorOnTop), n = w(() => s.element.showErrorOnBottom), t = (b) => b.cssContent, a = () => s.element.getRootStyle();
-    L(() => s.element);
+    const s = r, o = $(null), e = w(() => s.element.showErrorOnTop), n = w(() => s.element.showErrorOnBottom), t = (b) => b.cssContent, a = () => s.element.getRootStyle();
+    B(() => s.element);
     const y = () => {
       o.value && s.element.afterRender(o.value);
     }, m = J(
@@ -244,7 +244,7 @@ const Qe = /* @__PURE__ */ h({
       () => {
         y();
       }
-    ), q = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), v = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), I = w(() => ({
+    ), q = w(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), p = w(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), f = w(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
@@ -252,14 +252,14 @@ const Qe = /* @__PURE__ */ h({
     }));
     return U(() => {
       m();
-    }), (b, N) => {
-      const k = p("survey-errors"), D = p("survey-element-header"), E = p("survey-string"), V = p("survey-question-comment");
+    }), (b, A) => {
+      const k = v("survey-errors"), L = v("survey-element-header"), E = v("survey-string"), V = v("survey-question-comment");
       return i(), u("div", {
         class: l(b.element.getRootCss()),
         style: S(a()),
         ref_key: "root",
         ref: o,
-        onFocusin: N[0] || (N[0] = (K) => b.element.focusIn()),
+        onFocusin: A[0] || (A[0] = (K) => b.element.focusIn()),
         id: b.element.id,
         role: b.element.ariaRole,
         "aria-required": b.element.ariaRequired,
@@ -273,14 +273,14 @@ const Qe = /* @__PURE__ */ h({
           element: b.element,
           location: "top"
         }, null, 8, ["element"])) : d("", !0),
-        b.element.hasTitleOnLeftTop ? (i(), g(D, {
+        b.element.hasTitleOnLeftTop ? (i(), g(L, {
           key: 1,
           element: b.element,
           css: b.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        (i(), g(R(v.value), O(ne(I.value)), {
+        (i(), g(T(p.value), O(ne(f.value)), {
           default: F(() => [
-            P(c("div", {
+            N(c("div", {
               class: l(t(b.element) || void 0),
               role: "presentation"
             }, [
@@ -289,7 +289,7 @@ const Qe = /* @__PURE__ */ h({
                 element: b.element,
                 location: "top"
               }, null, 8, ["element"])) : d("", !0),
-              b.element.isCollapsed ? d("", !0) : (i(), g(R(q.value), {
+              b.element.isCollapsed ? d("", !0) : (i(), g(T(q.value), {
                 key: 1,
                 question: b.element
               }, null, 8, ["question"])),
@@ -323,7 +323,7 @@ const Qe = /* @__PURE__ */ h({
           ]),
           _: 1
         }, 16)),
-        b.element.hasTitleOnBottom ? (i(), g(D, {
+        b.element.hasTitleOnBottom ? (i(), g(L, {
           key: 2,
           element: b.element,
           css: b.css
@@ -348,16 +348,16 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => s.element.survey);
-    return L(() => s.element), H(() => {
+    const s = r, o = $(null), e = w(() => s.element.survey);
+    return B(() => s.element), H(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, o.value);
     }), (n, t) => {
-      const a = p("survey-errors"), y = p("survey-element-header"), m = p("survey-row"), q = p("sv-action-bar");
+      const a = v("survey-errors"), y = v("survey-element-header"), m = v("survey-row"), q = v("sv-action-bar");
       return n.element.isVisible ? (i(), u("div", {
         key: 0,
         class: l(n.element.getContainerCss()),
         id: n.element.id,
-        onFocusin: t[0] || (t[0] = (v) => n.element.focusIn()),
+        onFocusin: t[0] || (t[0] = (p) => n.element.focusIn()),
         ref_key: "root",
         ref: o
       }, [
@@ -380,15 +380,15 @@ const Qe = /* @__PURE__ */ h({
           style: S({ paddingLeft: n.element.innerPaddingLeft }),
           class: l(n.element.cssClasses.panel.content)
         }, [
-          (i(!0), u($, null, B(n.element.rows, (v, I) => (i(), g(R(n.element.getSurvey().getRowWrapperComponentName(v)), O(W({
-            key: n.element.id + "_" + I
+          (i(!0), u(_, null, D(n.element.rows, (p, f) => (i(), g(T(n.element.getSurvey().getRowWrapperComponentName(p)), O(W({
+            key: n.element.id + "_" + f
           }, {
-            componentData: n.element.getSurvey().getRowWrapperComponentData(v)
+            componentData: n.element.getSurvey().getRowWrapperComponentData(p)
           })), {
             default: F(() => [
-              v.visible ? (i(), g(m, {
+              p.visible ? (i(), g(m, {
                 key: 0,
-                row: v,
+                row: p,
                 survey: e.value,
                 css: n.css
               }, null, 8, ["row", "survey", "css"])) : d("", !0)
@@ -413,7 +413,7 @@ const Qe = /* @__PURE__ */ h({
       typeof s.element.clickTitleFunction == "function" && s.element.clickTitleFunction(e);
     };
     return (e, n) => {
-      const t = p("survey-element-title"), a = p("survey-string"), y = p("sv-action-bar");
+      const t = v("survey-element-title"), a = v("survey-string"), y = v("sv-action-bar");
       return i(), u("div", {
         class: l(e.element.cssHeader),
         onClick: o
@@ -422,7 +422,7 @@ const Qe = /* @__PURE__ */ h({
           element: e.element,
           css: e.css
         }, null, 8, ["element", "css"]),
-        e.element.hasDescriptionUnderTitle ? P((i(), u("div", {
+        e.element.hasDescriptionUnderTitle ? N((i(), u("div", {
           key: 0,
           class: l(e.element.cssDescription)
         }, [
@@ -445,7 +445,7 @@ const Qe = /* @__PURE__ */ h({
     locString: {}
   },
   setup(r) {
-    return (s, o) => (i(), g(R(s.locString.renderAs), {
+    return (s, o) => (i(), g(T(s.locString.renderAs), {
       locString: s.locString.renderAsData
     }, null, 8, ["locString"]));
   }
@@ -462,8 +462,8 @@ const Qe = /* @__PURE__ */ h({
     return (e, n) => e.locString.hasHtml ? (i(), u("span", {
       key: 0,
       class: "sv-string-viewer",
-      innerHTML: f(o)
-    }, null, 8, is)) : (i(), u("span", rs, T(f(o)), 1));
+      innerHTML: I(o)
+    }, null, 8, is)) : (i(), u("span", rs, R(I(o)), 1));
   }
 }), as = ["innerHTML"], us = /* @__PURE__ */ h({
   __name: "StringEditor",
@@ -490,7 +490,7 @@ const Qe = /* @__PURE__ */ h({
       contenteditable: "true",
       onBlur: o,
       onClick: e
-    }, T(n.locString.renderedHtml), 33));
+    }, R(n.locString.renderedHtml), 33));
   }
 }), ds = ["id"], ms = /* @__PURE__ */ h({
   __name: "Skeleton",
@@ -499,7 +499,7 @@ const Qe = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.element), (o, e) => (i(), u("div", {
+    return B(() => s.element), (o, e) => (i(), u("div", {
       class: "sv-skeleton-element",
       id: o.element.id
     }, null, 8, ds));
@@ -511,14 +511,14 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("survey-text-input");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("survey-text-input");
       return e.question.isReadOnlyRenderDiv() ? (i(), u("div", {
         key: 0,
         ref_key: "root",
         ref: o
-      }, T(e.question.value), 513)) : e.question.dataListId ? (i(), u("div", {
+      }, R(e.question.value), 513)) : e.question.dataListId ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: o
@@ -527,7 +527,7 @@ const Qe = /* @__PURE__ */ h({
         c("datalist", {
           id: e.question.dataListId
         }, [
-          (i(!0), u($, null, B(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, ps))), 256))
+          (i(!0), u(_, null, D(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, ps))), 256))
         ], 8, cs)
       ], 512)) : (i(), g(t, {
         key: 2,
@@ -544,10 +544,10 @@ const Qe = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    L(() => s.question);
+    B(() => s.question);
     const o = w(() => s.question.inputStyle);
     return (e, n) => {
-      const t = p("sv-character-counter");
+      const t = v("sv-character-counter");
       return e.question.getMaxLength() ? (i(), u("div", qs, [
         c("input", {
           disabled: e.question.isInputReadOnly,
@@ -621,8 +621,8 @@ const Qe = /* @__PURE__ */ h({
     showLegend: { type: Boolean }
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (t) => s.question.getItemValueWrapperComponentName(t) || s.question.itemComponent, n = (t) => ({
       componentName: s.question.itemComponent,
       componentData: {
@@ -632,7 +632,7 @@ const Qe = /* @__PURE__ */ h({
       }
     });
     return (t, a) => {
-      const y = p("survey-other-choice");
+      const y = v("survey-other-choice");
       return i(), u("fieldset", {
         class: l(t.question.getSelectBaseRootCss()),
         ref_key: "root",
@@ -644,18 +644,18 @@ const Qe = /* @__PURE__ */ h({
         "aria-invalid": t.question.a11y_input_ariaInvalid,
         "aria-describedby": t.question.a11y_input_ariaDescribedBy
       }, [
-        t.showLegend ? (i(), u("legend", bs, T(t.question.locTitle.renderedHtml), 1)) : d("", !0),
-        t.question.hasHeadItems ? (i(!0), u($, { key: 1 }, B(t.question.headItems, (m) => (i(), g(R(e(m)), W({
+        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)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
-        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u($, { key: 2 }, B(t.question.bodyItems, (m) => (i(), g(R(e(m)), W({
+        !t.question.hasColumns && !t.question.blockedRow ? (i(!0), u(_, { key: 2 }, D(t.question.bodyItems, (m) => (i(), g(T(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
         t.question.blockedRow ? (i(), u("div", {
           key: 3,
           class: l(t.question.cssClasses.rootRow)
         }, [
-          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u($, { key: 0 }, B(t.question.dataChoices, (m) => (i(), g(R(e(m)), W({
+          !t.question.hasColumns && t.question.blockedRow ? (i(!0), u(_, { key: 0 }, D(t.question.dataChoices, (m) => (i(), g(T(e(m)), W({
             key: m.value
           }, n(m)), null, 16))), 128)) : d("", !0)
         ], 2)) : d("", !0),
@@ -663,17 +663,17 @@ const Qe = /* @__PURE__ */ h({
           key: 4,
           class: l(t.question.cssClasses.rootMultiColumn)
         }, [
-          t.question.hasColumns ? (i(!0), u($, { key: 0 }, B(t.question.columns, (m, q) => (i(), u("div", {
+          t.question.hasColumns ? (i(!0), u(_, { key: 0 }, D(t.question.columns, (m, q) => (i(), u("div", {
             key: q,
             class: l(t.question.getColumnClass()),
             role: "presentation"
           }, [
-            (i(!0), u($, null, B(m, (v) => (i(), g(R(e(v)), W({
-              key: v.value
-            }, n(v)), null, 16))), 128))
+            (i(!0), u(_, null, D(m, (p) => (i(), g(T(e(p)), W({
+              key: p.value
+            }, n(p)), null, 16))), 128))
           ], 2))), 128)) : d("", !0)
         ], 2)) : d("", !0),
-        t.question.hasFootItems ? (i(!0), u($, { key: 5 }, B(t.question.footItems, (m) => (i(), g(R(e(m)), W({
+        t.question.hasFootItems ? (i(!0), u(_, { key: 5 }, D(t.question.footItems, (m) => (i(), g(T(e(m)), W({
           key: m.value
         }, n(m)), null, 16))), 128)) : d("", !0),
         t.question.renderedValue && t.question.isOtherSelected ? (i(), g(y, {
@@ -715,12 +715,12 @@ const Qe = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    L(() => s.item);
+    B(() => s.item);
     const o = (e) => {
       s.question.clickItemHandler(s.item, e.target.checked);
     };
     return (e, n) => {
-      const t = p("survey-string");
+      const t = v("survey-string");
       return i(), u("div", {
         role: "presentation",
         class: l(e.question.getItemClass(e.item))
@@ -791,8 +791,8 @@ const Qe = /* @__PURE__ */ h({
         a.renderedValue = t;
       }
     });
-    return L(() => s.item), (t, a) => {
-      const y = p("survey-string");
+    return B(() => s.item), (t, a) => {
+      const y = v("survey-string");
       return i(), u("div", {
         role: "presentation",
         class: l(t.question.getItemClass(t.item))
@@ -801,7 +801,7 @@ const Qe = /* @__PURE__ */ h({
           onMousedown: a[1] || (a[1] = (m) => t.question.onMouseDown()),
           class: l(o(t.item))
         }, [
-          P(c("input", {
+          N(c("input", {
             type: "radio",
             name: t.question.questionName,
             value: t.item.value,
@@ -845,9 +845,9 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("survey-string"), a = p("sv-svg-icon"), y = p("sv-loading-indicator");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("survey-string"), a = v("sv-svg-icon"), y = v("sv-loading-indicator");
       return i(), u("div", {
         class: l(e.question.cssClasses.root),
         ref_key: "root",
@@ -856,7 +856,7 @@ const Qe = /* @__PURE__ */ h({
           width: e.question.renderedCanvasWidth
         })
       }, [
-        P(c("div", {
+        N(c("div", {
           class: l(e.question.cssClasses.placeholder)
         }, [
           C(t, {
@@ -875,7 +875,7 @@ const Qe = /* @__PURE__ */ h({
             })
           }, null, 14, Bs)) : d("", !0),
           c("canvas", {
-            tabindex: "0",
+            tabindex: "-1",
             class: l(e.question.cssClasses.canvas),
             onBlur: n[0] || (n[0] = (...m) => e.question.onBlur && e.question.onBlur(...m))
           }, null, 34)
@@ -916,14 +916,14 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = G(() => s.question.locHtml);
     return (n, t) => (i(), u("div", {
       ref_key: "root",
       ref: o,
       class: l(n.question.renderCssRoot),
-      innerHTML: f(e)
+      innerHTML: I(e)
     }, null, 10, As));
   }
 }), Hs = ["src", "alt", "width", "height"], Ws = ["src", "width", "height"], Es = ["src", "width", "height"], Vs = /* @__PURE__ */ h({
@@ -933,20 +933,20 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = G(() => s.question.locImageLink);
     return (n, t) => {
-      const a = p("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return i(), u("div", {
         class: l(n.question.cssClasses.root),
         ref_key: "root",
         ref: o
       }, [
-        n.question.renderedMode === "image" ? P((i(), u("img", {
+        n.question.renderedMode === "image" ? N((i(), u("img", {
           key: 0,
           class: l(n.question.getImageCss()),
-          src: f(e),
+          src: I(e),
           alt: n.question.altText || n.question.title,
           width: n.question.renderedWidth,
           height: n.question.renderedHeight,
@@ -962,13 +962,13 @@ const Qe = /* @__PURE__ */ h({
             n.question.onErrorHandler();
           })
         }, null, 46, Hs)), [
-          [M, f(e) && !n.question.contentNotLoaded]
+          [M, I(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
-        n.question.renderedMode === "video" ? P((i(), u("video", {
+        n.question.renderedMode === "video" ? N((i(), u("video", {
           key: 1,
           controls: "",
           class: l(n.question.getImageCss()),
-          src: f(e),
+          src: I(e),
           width: n.question.renderedWidth,
           height: n.question.renderedHeight,
           style: S({
@@ -983,12 +983,12 @@ const Qe = /* @__PURE__ */ h({
             n.question.onErrorHandler();
           })
         }, null, 46, Ws)), [
-          [M, f(e) && !n.question.contentNotLoaded]
+          [M, I(e) && !n.question.contentNotLoaded]
         ]) : d("", !0),
         n.question.renderedMode === "youtube" ? (i(), u("iframe", {
           key: 2,
           class: l(n.question.getImageCss()),
-          src: f(e),
+          src: I(e),
           width: n.question.renderedWidth,
           height: n.question.renderedHeight,
           style: S({
@@ -997,7 +997,7 @@ const Qe = /* @__PURE__ */ h({
             height: n.question.renderedStyleHeight
           })
         }, null, 14, Es)) : d("", !0),
-        !f(e) || n.question.contentNotLoaded ? (i(), u("div", {
+        !I(e) || n.question.contentNotLoaded ? (i(), u("div", {
           key: 3,
           class: l(n.question.cssClasses.noImage)
         }, [
@@ -1016,12 +1016,12 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => (i(), u("div", {
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => (i(), u("div", {
       class: l(e.question.cssClasses.root),
       ref_key: "root",
       ref: o
-    }, T(e.question.formatedValue), 3));
+    }, R(e.question.formatedValue), 3));
   }
 }), Os = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], zs = ["id", "multiple", "placeholder"], Us = /* @__PURE__ */ h({
   inheritAttrs: !1,
@@ -1030,9 +1030,9 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("survey-string"), a = p("sv-file-choose-btn"), y = p("sv-action-bar"), m = p("sv-file-clean-btn"), q = p("sv-loading-indicator"), v = p("sv-file-video"), I = p("sv-file-preview");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("survey-string"), a = v("sv-file-choose-btn"), y = v("sv-action-bar"), m = v("sv-file-clean-btn"), q = v("sv-loading-indicator"), p = v("sv-file-video"), f = v("sv-file-preview");
       return i(), u("div", {
         class: l(e.question.fileRootCss),
         ref_key: "root",
@@ -1096,7 +1096,7 @@ const Qe = /* @__PURE__ */ h({
               e.question.isEmpty() ? (i(), u("span", {
                 key: 2,
                 class: l(e.question.cssClasses.noFileChosen)
-              }, T(e.question.noFileChosenCaption), 3)) : d("", !0)
+              }, R(e.question.noFileChosenCaption), 3)) : d("", !0)
             ], 2)
           ], 2)) : d("", !0),
           e.question.showRemoveButton ? (i(), g(m, {
@@ -1110,11 +1110,11 @@ const Qe = /* @__PURE__ */ h({
           }, [
             C(q)
           ], 2)) : d("", !0),
-          e.question.isPlayingVideo ? (i(), g(v, {
+          e.question.isPlayingVideo ? (i(), g(p, {
             key: 3,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
-          e.question.allowShowPreview ? (i(), g(I, {
+          e.question.allowShowPreview ? (i(), g(f, {
             key: 4,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
@@ -1138,8 +1138,8 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (t) => s.question.getItemValueWrapperComponentName(t) || pe, n = (t) => ({
       componentName: pe,
       componentData: {
@@ -1153,16 +1153,16 @@ const Qe = /* @__PURE__ */ h({
       ref_key: "root",
       ref: o
     }, [
-      c("legend", Ks, T(t.question.locTitle.renderedHtml), 1),
-      t.question.hasColumns ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.visibleChoices, (y) => (i(), g(R(e(y)), W({
+      c("legend", Ks, R(t.question.locTitle.renderedHtml), 1),
+      t.question.hasColumns ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.visibleChoices, (y) => (i(), g(T(e(y)), W({
         key: y.value
       }, n(y)), null, 16))), 128)),
-      t.question.hasColumns ? (i(!0), u($, { key: 1 }, B(t.question.columns, (y, m) => (i(), u("div", {
+      t.question.hasColumns ? (i(!0), u(_, { key: 1 }, D(t.question.columns, (y, m) => (i(), u("div", {
         class: l(t.question.getColumnClass()),
         key: m,
         role: "presentation"
       }, [
-        (i(!0), u($, null, B(y, (q) => (i(), g(R(e(q)), W({
+        (i(!0), u(_, null, D(y, (q) => (i(), g(T(e(q)), W({
           key: q.value
         }, n(q)), null, 16))), 128))
       ], 2))), 128)) : d("", !0)
@@ -1177,17 +1177,17 @@ const Qe = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, o = (n) => s.question.getItemClass(n);
-    L(() => s.item);
+    B(() => s.item);
     const e = G(() => s.item.locImageLink);
     return (n, t) => {
-      const a = p("sv-svg-icon"), y = p("survey-string");
+      const a = v("sv-svg-icon"), y = v("survey-string");
       return i(), u("div", {
         class: l(o(n.item))
       }, [
         c("label", {
           class: l(n.question.cssClasses.label)
         }, [
-          n.question.multiSelect ? P((i(), u("input", {
+          n.question.multiSelect ? N((i(), u("input", {
             key: 0,
             type: "checkbox",
             name: n.question.questionName,
@@ -1202,7 +1202,7 @@ const Qe = /* @__PURE__ */ h({
             class: l(n.question.cssClasses.itemControl)
           }, null, 10, Qs)), [
             [oe, n.question.value]
-          ]) : P((i(), u("input", {
+          ]) : N((i(), u("input", {
             key: 1,
             type: "radio",
             name: n.question.questionName,
@@ -1235,10 +1235,10 @@ const Qe = /* @__PURE__ */ h({
                   iconName: n.question.cssClasses.checkedItemSvgIconId
                 }, null, 8, ["class", "iconName"])) : d("", !0)
               ], 2)) : d("", !0),
-              f(e) && !n.item.contentNotLoaded && n.question.contentMode === "image" ? (i(), u("img", {
+              I(e) && !n.item.contentNotLoaded && n.question.contentMode === "image" ? (i(), u("img", {
                 key: 1,
                 class: l(n.question.cssClasses.image),
-                src: f(e),
+                src: I(e),
                 width: n.question.renderedImageWidth,
                 height: n.question.renderedImageHeight,
                 style: S({ objectFit: n.question.imageFit }),
@@ -1250,11 +1250,11 @@ const Qe = /* @__PURE__ */ h({
                   n.item.onErrorHandler();
                 })
               }, null, 46, Js)) : d("", !0),
-              f(e) && !n.item.contentNotLoaded && n.question.contentMode === "video" ? (i(), u("video", {
+              I(e) && !n.item.contentNotLoaded && n.question.contentMode === "video" ? (i(), u("video", {
                 key: 2,
                 controls: "",
                 class: l(n.question.cssClasses.image),
-                src: f(e),
+                src: I(e),
                 width: n.question.renderedImageWidth,
                 height: n.question.renderedImageHeight,
                 style: S({ objectFit: n.question.imageFit }),
@@ -1265,7 +1265,7 @@ const Qe = /* @__PURE__ */ h({
                   n.item.onErrorHandler();
                 })
               }, null, 46, Xs)) : d("", !0),
-              !f(e) || n.item.contentNotLoaded ? (i(), u("div", {
+              !I(e) || n.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: l(n.question.cssClasses.itemNoImage),
                 style: S({
@@ -1302,14 +1302,14 @@ const Qe = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (n) => {
       const t = s.question;
       t.value = n.target.value;
     };
     return (n, t) => {
-      const a = p("sv-character-counter");
+      const a = v("sv-character-counter");
       return !n.question.isReadOnlyRenderDiv() && !n.question.getMaxLength() ? (i(), u("textarea", {
         key: 0,
         ref_key: "root",
@@ -1373,7 +1373,7 @@ const Qe = /* @__PURE__ */ h({
         key: 2,
         ref_key: "root",
         ref: o
-      }, T(n.question.value), 513));
+      }, R(n.question.value), 513));
     };
   }
 }), sn = /* @__PURE__ */ h({
@@ -1383,9 +1383,9 @@ const Qe = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("sv-dropdown"), a = p("survey-other-choice");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("sv-dropdown"), a = v("survey-other-choice");
       return i(), u("div", {
         class: l(e.question.renderCssRoot),
         ref_key: "root",
@@ -1415,8 +1415,8 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (a) => {
       s.question.onClick(a);
     }, n = (a) => {
@@ -1432,7 +1432,7 @@ const rn = /* @__PURE__ */ h({
       }
     });
     return (a, y) => {
-      const m = p("sv-dropdown-option-item"), q = p("sv-svg-icon"), v = p("survey-other-choice");
+      const m = v("sv-dropdown-option-item"), q = v("sv-svg-icon"), p = v("survey-other-choice");
       return i(), u("div", {
         class: l(a.question.renderCssRoot),
         ref_key: "root",
@@ -1446,10 +1446,10 @@ const rn = /* @__PURE__ */ h({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, T(a.question.readOnlyText), 11, tn)) : P((i(), u("select", {
+          }, R(a.question.readOnlyText), 11, tn)) : N((i(), u("select", {
             key: 0,
             id: a.question.inputId,
-            "onUpdate:modelValue": y[0] || (y[0] = (I) => t.value = I),
+            "onUpdate:modelValue": y[0] || (y[0] = (f) => t.value = f),
             onClick: e,
             onKeyup: n,
             autocomplete: a.question.autocomplete,
@@ -1460,10 +1460,10 @@ const rn = /* @__PURE__ */ h({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (i(), u("option", on, T(a.question.placeholder), 1)) : d("", !0),
-            (i(!0), u($, null, B(a.question.visibleChoices, (I) => (i(), g(m, {
-              item: I,
-              key: I.id
+            a.question.allowClear ? (i(), u("option", on, R(a.question.placeholder), 1)) : d("", !0),
+            (i(!0), u(_, null, D(a.question.visibleChoices, (f) => (i(), g(m, {
+              item: f,
+              key: f.id
             }, null, 8, ["item"]))), 128))
           ], 42, nn)), [
             [Ie, t.value]
@@ -1479,7 +1479,7 @@ const rn = /* @__PURE__ */ h({
             }, null, 8, ["class", "iconName"])
           ], 2)) : d("", !0)
         ], 2),
-        a.question.isOtherSelected ? (i(), g(v, {
+        a.question.isOtherSelected ? (i(), g(p, {
           key: 0,
           question: a.question
         }, null, 8, ["question"])) : d("", !0)
@@ -1493,10 +1493,10 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, o = G(() => s.item.locText);
-    return L(() => s.item), (e, n) => (i(), u("option", {
+    return B(() => s.item), (e, n) => (i(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, T(f(o)), 9, ln));
+    }, R(I(o)), 9, ln));
   }
 }), un = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], dn = { style: { visibility: "hidden" } }, mn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], cn = ["id"], pn = /* @__PURE__ */ h({
   __name: "Dropdown",
@@ -1504,39 +1504,39 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = w(() => {
+    const s = r, o = $(null), e = w(() => {
       const k = s.question;
       return k.dropdownListModel || (k.dropdownListModel = new Be(k)), s.question.dropdownListModel;
     }), n = (k) => {
-      var D;
-      (D = e.value) == null || D.onClick(k);
+      var L;
+      (L = e.value) == null || L.onClick(k);
     }, t = (k) => {
-      var D;
-      (D = e.value) == null || D.chevronPointerDown(k);
+      var L;
+      (L = e.value) == null || L.chevronPointerDown(k);
     }, a = (k) => {
-      var D;
-      (D = e.value) == null || D.onClear(k);
+      var L;
+      (L = e.value) == null || L.onClear(k);
     }, y = (k) => {
-      var D;
-      (D = e.value) == null || D.keyHandler(k);
+      var L;
+      (L = e.value) == null || L.keyHandler(k);
     }, m = () => {
       if (o.value) {
-        const k = o.value, D = e.value.inputStringRendered;
-        Le.isTwoValueEquals(D, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
+        const k = o.value, L = e.value.inputStringRendered;
+        Le.isTwoValueEquals(L, k.value, !1, !0, !1) || (k.value = e.value.inputStringRendered);
       }
     }, q = (k) => {
-      var D;
-      (D = e.value) == null || D.onBlur(k), m();
-    }, v = (k) => {
-      var D;
-      (D = e.value) == null || D.onFocus(k);
-    }, I = (k) => {
+      var L;
+      (L = e.value) == null || L.onBlur(k), m();
+    }, p = (k) => {
+      var L;
+      (L = e.value) == null || L.onFocus(k);
+    }, f = (k) => {
       e.value.inputStringRendered = k.target.value;
     }, b = w(
       () => s.question.showSelectedItemLocText
-    ), N = w(() => s.question.selectedItemLocText);
-    return L(() => e.value), te(m), H(m), (k, D) => {
-      const E = p("survey-string"), V = p("sv-svg-icon"), K = p("sv-popup");
+    ), A = w(() => s.question.selectedItemLocText);
+    return B(() => e.value), te(m), H(m), (k, L) => {
+      const E = v("survey-string"), V = v("sv-svg-icon"), K = v("sv-popup");
       return i(), u("div", {
         class: l(k.question.cssClasses.selectWrapper),
         onClick: n
@@ -1563,23 +1563,23 @@ const rn = /* @__PURE__ */ h({
             key: 0,
             class: l(k.question.cssClasses.hintPrefix)
           }, [
-            c("span", null, T(e.value.hintStringPrefix), 1)
+            c("span", null, R(e.value.hintStringPrefix), 1)
           ], 2)) : d("", !0),
           c("div", {
             class: l(k.question.cssClasses.controlValue)
           }, [
             b.value ? (i(), g(E, {
               key: 0,
-              locString: N.value
+              locString: A.value
             }, null, 8, ["locString"])) : d("", !0),
             e.value.showHintString ? (i(), u("div", {
               key: 1,
               class: l(k.question.cssClasses.hintSuffix)
             }, [
-              c("span", dn, T(e.value.inputStringRendered), 1),
-              c("span", null, T(e.value.hintStringSuffix), 1)
+              c("span", dn, R(e.value.inputStringRendered), 1),
+              c("span", null, R(e.value.hintStringSuffix), 1)
             ], 2)) : d("", !0),
-            k.question.showInputFieldComponent ? (i(), g(R(k.question.inputFieldComponentName), {
+            k.question.showInputFieldComponent ? (i(), g(T(k.question.inputFieldComponentName), {
               key: 2,
               item: e.value.getSelectedAction(),
               question: k.question
@@ -1602,12 +1602,12 @@ const rn = /* @__PURE__ */ h({
               "aria-labelledby": k.question.a11y_input_ariaLabelledBy,
               "aria-activedescendant": e.value.ariaActivedescendant,
               placeholder: e.value.placeholderRendered,
-              onInput: I,
+              onInput: f,
               onBlur: q,
-              onFocus: v
+              onFocus: p
             }, null, 42, mn)
           ], 2),
-          k.question.allowClear && k.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
+          k.question.allowClear && k.question.cssClasses.cleanButtonIconId ? N((i(), u("div", {
             key: 1,
             class: l(k.question.cssClasses.cleanButton),
             onClick: a,
@@ -1633,7 +1633,7 @@ const rn = /* @__PURE__ */ h({
             key: 0,
             locString: k.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
-          c("div", null, T(k.question.readOnlyText), 1)
+          c("div", null, R(k.question.readOnlyText), 1)
         ], 10, cn)) : (i(), g(K, {
           key: 1,
           model: k.question.dropdownListModel.popupModel
@@ -1660,9 +1660,9 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("sv-tagbox"), a = p("survey-other-choice");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("sv-tagbox"), a = v("survey-other-choice");
       return i(), u("div", {
         class: l(e.question.renderCssRoot),
         ref_key: "root",
@@ -1686,23 +1686,23 @@ const rn = /* @__PURE__ */ h({
       const q = s.question;
       return q.dropdownListModel || (q.dropdownListModel = new Ne(q)), s.question.dropdownListModel;
     }), e = (q) => {
-      var v;
-      (v = o.value) == null || v.onClick(q);
+      var p;
+      (p = o.value) == null || p.onClick(q);
     }, n = (q) => {
-      var v;
-      (v = o.value) == null || v.chevronPointerDown(q);
+      var p;
+      (p = o.value) == null || p.chevronPointerDown(q);
     }, t = (q) => {
-      var v;
-      (v = o.value) == null || v.onClear(q);
+      var p;
+      (p = o.value) == null || p.onClear(q);
     }, a = (q) => {
-      var v;
-      (v = o.value) == null || v.keyHandler(q);
+      var p;
+      (p = o.value) == null || p.keyHandler(q);
     }, y = (q) => {
-      var v;
-      (v = o.value) == null || v.onBlur(q);
+      var p;
+      (p = o.value) == null || p.onBlur(q);
     }, m = le(() => s.question.selectedChoices);
-    return L(() => o.value), (q, v) => {
-      const I = p("sv-tagbox-item"), b = p("sv-tagbox-filter"), N = p("sv-svg-icon"), k = p("sv-popup"), D = p("survey-string");
+    return B(() => o.value), (q, p) => {
+      const f = v("sv-tagbox-item"), b = v("sv-tagbox-filter"), A = v("sv-svg-icon"), k = v("sv-popup"), L = v("survey-string");
       return i(), u("div", {
         class: l(q.question.cssClasses.selectWrapper),
         onClick: e
@@ -1728,7 +1728,7 @@ const rn = /* @__PURE__ */ h({
           c("div", {
             class: l(q.question.cssClasses.controlValue)
           }, [
-            (i(!0), u($, null, B(f(m), (E, V) => (i(), g(I, {
+            (i(!0), u(_, null, D(I(m), (E, V) => (i(), g(f, {
               item: E,
               question: q.question,
               key: "item" + V
@@ -1738,13 +1738,13 @@ const rn = /* @__PURE__ */ h({
               question: q.question
             }, null, 8, ["model", "question"])
           ], 2),
-          q.question.allowClear && q.question.cssClasses.cleanButtonIconId ? P((i(), u("div", {
+          q.question.allowClear && q.question.cssClasses.cleanButtonIconId ? N((i(), u("div", {
             key: 0,
             class: l(q.question.cssClasses.cleanButton),
             onClick: t,
             "aria-hidden": "true"
           }, [
-            C(N, {
+            C(A, {
               class: l(q.question.cssClasses.cleanButtonSvg),
               iconName: q.question.cssClasses.cleanButtonIconId,
               title: q.question.clearCaption,
@@ -1760,7 +1760,7 @@ const rn = /* @__PURE__ */ h({
           id: q.question.inputId,
           class: l(q.question.getControlClass())
         }, [
-          q.question.locReadOnlyText ? (i(), g(D, {
+          q.question.locReadOnlyText ? (i(), g(L, {
             key: 0,
             locString: q.question.locReadOnlyText
           }, null, 8, ["locString"])) : d("", !0)
@@ -1774,7 +1774,7 @@ const rn = /* @__PURE__ */ h({
           onPointerdown: n,
           "aria-hidden": "true"
         }, [
-          C(N, {
+          C(A, {
             class: l(q.question.cssClasses.chevronButtonSvg),
             iconName: q.question.cssClasses.chevronButtonIconId,
             size: "auto"
@@ -1800,8 +1800,8 @@ const rn = /* @__PURE__ */ h({
     }, t = (a) => {
       s.model.onFocus(a);
     };
-    return L(() => s.model), (a, y) => {
-      const m = p("survey-string");
+    return B(() => s.model), (a, y) => {
+      const m = v("survey-string");
       return i(), u("div", {
         class: l(a.question.cssClasses.hint)
       }, [
@@ -1809,7 +1809,7 @@ const rn = /* @__PURE__ */ h({
           key: 0,
           class: l(a.question.cssClasses.hintPrefix)
         }, [
-          c("span", null, T(a.model.hintStringPrefix), 1)
+          c("span", null, R(a.model.hintStringPrefix), 1)
         ], 2)) : d("", !0),
         c("div", {
           class: l(a.question.cssClasses.hintSuffixWrapper)
@@ -1822,10 +1822,10 @@ const rn = /* @__PURE__ */ h({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            c("span", hn, T(a.model.inputStringRendered), 1),
-            c("span", null, T(a.model.hintStringSuffix), 1)
+            c("span", hn, R(a.model.inputStringRendered), 1),
+            c("span", null, R(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
-          P(c("input", {
+          N(c("input", {
             type: "text",
             autocomplete: "off",
             "onUpdate:modelValue": y[0] || (y[0] = (q) => a.model.inputStringRendered = q),
@@ -1863,8 +1863,8 @@ const rn = /* @__PURE__ */ h({
     const s = r, o = (e) => {
       s.question.dropdownListModel.deselectItem(s.item.value), e.stopPropagation();
     };
-    return L(() => s.item), (e, n) => {
-      const t = p("survey-string"), a = p("sv-svg-icon");
+    return B(() => s.item), (e, n) => {
+      const t = v("survey-string"), a = v("sv-svg-icon");
       return i(), u("div", {
         class: "sv-tagbox__item",
         key: e.item.key
@@ -1894,8 +1894,8 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (t) => s.question.getItemValueWrapperComponentName(t) || "survey-ranking-item", n = (t, a, y) => ({
       componentName: s.question.getPropertyByName("itemComponent").isDefaultValue(
         s.question.itemComponent
@@ -1909,13 +1909,13 @@ const rn = /* @__PURE__ */ h({
       }
     });
     return (t, a) => {
-      const y = p("survey-string");
+      const y = v("survey-string");
       return i(), u("div", {
         class: l(t.question.rootClass),
         ref_key: "root",
         ref: o
       }, [
-        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.rankingChoices, (m, q) => (i(), g(R(e(m)), W({
+        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u(_, { key: 0 }, D(t.question.rankingChoices, (m, q) => (i(), g(T(e(m)), W({
           key: m.value + "-" + q + "-item"
         }, n(m, q)), null, 16))), 128)),
         t.question.selectToRankEnabled ? (i(), u("div", {
@@ -1923,7 +1923,7 @@ const rn = /* @__PURE__ */ h({
           class: l(t.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (i(!0), u($, null, B(t.question.unRankingChoices, (m, q) => (i(), g(R(e(m)), W({
+          (i(!0), u(_, null, D(t.question.unRankingChoices, (m, q) => (i(), g(T(e(m)), W({
             key: m.value + "-" + q + "-item"
           }, n(m, q, !0)), null, 16))), 128)),
           t.question.unRankingChoices.length === 0 ? (i(), u("div", {
@@ -1944,7 +1944,7 @@ const rn = /* @__PURE__ */ h({
           class: l(t.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (i(!0), u($, null, B(t.question.rankingChoices, (m, q) => (i(), g(R(e(m)), W({
+          (i(!0), u(_, null, D(t.question.rankingChoices, (m, q) => (i(), g(T(e(m)), W({
             key: m.value + "-" + q + "-item"
           }, n(m, q)), null, 16))), 128)),
           t.question.rankingChoices.length === 0 ? (i(), u("div", {
@@ -1973,8 +1973,8 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, o = w(() => s.question.getNumberByIndex(s.index));
-    return L(() => s.item), (e, n) => {
-      const t = p("survey-string");
+    return B(() => s.item), (e, n) => {
+      const t = v("survey-string");
       return i(), u("div", {
         tabindex: e.question.getItemTabIndex(e.item),
         "data-sv-drop-target-ranking-item": e.index,
@@ -2019,7 +2019,7 @@ const rn = /* @__PURE__ */ h({
             !e.unrankedItem && o.value ? (i(), u("div", {
               key: 0,
               class: l(e.question.getItemIndexClasses(e.item))
-            }, T(o.value), 3)) : (i(), u("div", {
+            }, R(o.value), 3)) : (i(), u("div", {
               key: 1,
               class: l(e.question.getItemIndexClasses(e.item))
             }, [
@@ -2051,11 +2051,11 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (n) => s.question.getInputId(n);
     return (n, t) => {
-      const a = p("survey-string");
+      const a = v("survey-string");
       return i(), u("div", {
         class: l(n.question.ratingRootCss),
         ref_key: "root",
@@ -2071,7 +2071,7 @@ const rn = /* @__PURE__ */ h({
               locString: n.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
-          (i(!0), u($, null, B(n.question.renderedRateItems, (y, m) => (i(), g(R(n.question.itemComponent), {
+          (i(!0), u(_, null, D(n.question.renderedRateItems, (y, m) => (i(), g(T(n.question.itemComponent), {
             key: e(m),
             item: y,
             index: m,
@@ -2098,8 +2098,8 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.item), (o, e) => {
-      const n = p("survey-string");
+    return B(() => s.item), (o, e) => {
+      const n = v("survey-string");
       return i(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
@@ -2137,8 +2137,8 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.item), (o, e) => {
-      const n = p("sv-svg-icon");
+    return B(() => s.item), (o, e) => {
+      const n = v("sv-svg-icon");
       return i(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
@@ -2177,8 +2177,8 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.item), (o, e) => {
-      const n = p("sv-svg-icon");
+    return B(() => s.item), (o, e) => {
+      const n = v("sv-svg-icon");
       return i(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (t) => o.question.onMouseDown()),
@@ -2224,10 +2224,10 @@ const rn = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.item), (o, e) => {
-      const n = p("survey-string");
+    return B(() => s.item), (o, e) => {
+      const n = v("survey-string");
       return i(), u("div", En, [
-        c("span", Vn, T(o.item.title), 1),
+        c("span", Vn, R(o.item.title), 1),
         o.item.description ? (i(), u("div", Fn, [
           C(n, {
             locString: o.item.description
@@ -2249,9 +2249,9 @@ const zn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("sv-dropdown");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("sv-dropdown");
       return i(), u("div", {
         class: l(e.question.cssClasses.rootDropdown),
         ref_key: "root",
@@ -2261,15 +2261,15 @@ const zn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Un = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Kn = /* @__PURE__ */ h({
+}), Un = ["name", "value", "id", ".indeterminate", "disabled", "role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], Kn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = (t, a) => {
       s.question.onLabelClick(t, a);
     }, n = (t) => {
@@ -2277,7 +2277,7 @@ const zn = /* @__PURE__ */ h({
     };
     return (t, a) => {
       var m;
-      const y = p("survey-string");
+      const y = v("survey-string");
       return i(), u("div", {
         class: l(t.question.cssClasses.root),
         ref_key: "root",
@@ -2287,7 +2287,7 @@ const zn = /* @__PURE__ */ h({
         c("label", {
           class: l(t.question.getItemCss())
         }, [
-          P(c("input", {
+          N(c("input", {
             type: "checkbox",
             name: t.question.name,
             value: (m = t.question.booleanValue) != null ? m : "",
@@ -2296,10 +2296,12 @@ const zn = /* @__PURE__ */ h({
             id: t.question.inputId,
             ".indeterminate": t.question.isIndeterminate,
             disabled: t.question.isInputReadOnly,
-            "aria-required": t.question.ariaRequired,
-            "aria-label": t.question.ariaLabel,
-            "aria-invalid": t.question.ariaInvalid,
-            "aria-describedby": t.question.ariaDescribedBy
+            role: t.question.a11y_input_ariaRole,
+            "aria-required": t.question.a11y_input_ariaRequired,
+            "aria-label": t.question.a11y_input_ariaLabel,
+            "aria-labelledby": t.question.a11y_input_ariaLabelledBy,
+            "aria-invalid": t.question.a11y_input_ariaInvalid,
+            "aria-describedby": t.question.a11y_input_ariaDescribedBy
           }, null, 42, Un), [
             [oe, t.question.booleanValue]
           ]),
@@ -2361,9 +2363,9 @@ const jn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = _(null);
-    return A(r, s), (e, n) => {
-      const t = p("sv-boolean-radio-item");
+    const s = $(null);
+    return P(r, s), (e, n) => {
+      const t = v("sv-boolean-radio-item");
       return i(), u("div", {
         class: l(e.question.cssClasses.rootRadio),
         ref_key: "root",
@@ -2402,7 +2404,7 @@ const jn = /* @__PURE__ */ h({
       n.booleanValue = e.target.value == "true";
     };
     return (e, n) => {
-      const t = p("survey-string");
+      const t = v("survey-string");
       return i(), u("div", {
         role: "presentation",
         class: l(e.question.getRadioItemClass(e.question.cssClasses, e.value))
@@ -2456,10 +2458,10 @@ const eo = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
       var m;
-      const t = p("survey-element-title-content"), a = p("sv-title-actions"), y = p("survey-string");
+      const t = v("survey-element-title-content"), a = v("sv-title-actions"), y = v("survey-string");
       return i(), u("div", {
         class: l(e.question.cssClasses.rootCheckbox),
         ref_key: "root",
@@ -2471,7 +2473,7 @@ const eo = /* @__PURE__ */ h({
           c("label", {
             class: l(e.question.cssClasses.checkboxLabel)
           }, [
-            P(c("input", {
+            N(c("input", {
               type: "checkbox",
               name: e.question.name,
               value: (m = e.question.booleanValue) != null ? m : "",
@@ -2536,23 +2538,23 @@ const eo = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = le(() => s.question.getRows());
-    return A(s, o), (n, t) => {
-      const a = p("survey-multipletext-item");
+    const s = r, o = $(null), e = le(() => s.question.getRows());
+    return P(s, o), (n, t) => {
+      const a = v("survey-multipletext-item");
       return i(), u("table", {
         class: l(n.question.getQuestionRootCss()),
         ref_key: "root",
         ref: o
       }, [
         c("tbody", null, [
-          (i(!0), u($, null, B(f(e), (y, m) => (i(), u($, {
+          (i(!0), u(_, null, D(I(e), (y, m) => (i(), u(_, {
             key: n.question.inputId + "rowkey" + m
           }, [
             y.isVisible ? (i(), u("tr", {
               key: 0,
               class: l(n.question.cssClasses.row)
             }, [
-              (i(!0), u($, null, B(y.cells, (q) => (i(), u("td", {
+              (i(!0), u(_, null, D(y.cells, (q) => (i(), u("td", {
                 key: "item" + q.item.editor.id,
                 class: l(q.className)
               }, [
@@ -2575,10 +2577,10 @@ const eo = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, o = (n) => re(n);
-    L(() => s.cell.item.editor);
+    B(() => s.cell.item.editor);
     const e = w(() => s.cell.item);
     return (n, t) => {
-      const a = p("survey-string"), y = p("survey-errors");
+      const a = v("survey-string"), y = v("survey-errors");
       return n.cell.isErrorsCell ? (i(), g(y, {
         key: 1,
         element: e.value.editor
@@ -2593,7 +2595,7 @@ const eo = /* @__PURE__ */ h({
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
             class: l(n.question.cssClasses.requiredText)
-          }, T(e.value.editor.requiredText), 3)) : d("", !0),
+          }, R(e.value.editor.requiredText), 3)) : d("", !0),
           C(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
@@ -2602,14 +2604,14 @@ const eo = /* @__PURE__ */ h({
             key: 2,
             "aria-hidden": "true",
             class: l(n.question.cssClasses.requiredText)
-          }, T(e.value.editor.requiredText), 3)) : d("", !0)
+          }, R(e.value.editor.requiredText), 3)) : d("", !0)
         ], 6),
         (i(), u("div", {
           key: e.value.editor.id,
           class: l(n.question.getItemCss()),
           onFocusin: t[0] || (t[0] = (m) => e.value.focusIn())
         }, [
-          (i(), g(R(o(e.value.editor)), {
+          (i(), g(T(o(e.value.editor)), {
             question: e.value.editor
           }, null, 8, ["question"]))
         ], 34))
@@ -2623,8 +2625,8 @@ const eo = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = z();
-    A(
+    const s = r, o = $(null), e = z();
+    P(
       s,
       o,
       (t) => {
@@ -2641,21 +2643,21 @@ const eo = /* @__PURE__ */ h({
       t.value = a.value;
     };
     return (t, a) => {
-      const y = p("survey-string");
+      const y = v("survey-string");
       return i(), u("div", {
         class: l(t.question.cssClasses.tableWrapper),
         ref_key: "root",
         ref: o
       }, [
         c("fieldset", null, [
-          c("legend", to, T(t.question.locTitle.renderedHtml), 1),
+          c("legend", to, R(t.question.locTitle.renderedHtml), 1),
           c("table", {
             class: l(t.question.getTableCss())
           }, [
             t.question.showHeader ? (i(), u("thead", io, [
               c("tr", null, [
                 t.question.hasRows ? (i(), u("td", ro)) : d("", !0),
-                (i(!0), u($, null, B(t.question.visibleColumns, (m, q) => (i(), u("th", {
+                (i(!0), u(_, null, D(t.question.visibleColumns, (m, q) => (i(), u("th", {
                   key: q,
                   class: l(t.question.cssClasses.headerCell),
                   style: S({
@@ -2663,7 +2665,7 @@ const eo = /* @__PURE__ */ h({
                     width: t.question.columnMinWidth
                   })
                 }, [
-                  (i(), g(R(t.question.getColumnHeaderWrapperComponentName(m)), {
+                  (i(), g(T(t.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: t.question.getColumnHeaderWrapperComponentData(m)
                   }, {
                     default: F(() => [
@@ -2677,18 +2679,18 @@ const eo = /* @__PURE__ */ h({
               ])
             ])) : d("", !0),
             c("tbody", null, [
-              (i(!0), u($, null, B(e.value, (m, q) => (i(), u("tr", {
+              (i(!0), u(_, null, D(e.value, (m, q) => (i(), u("tr", {
                 key: "row_" + m.name + "_" + q,
                 class: l(m.rowClasses || void 0)
               }, [
-                P(c("td", {
+                N(c("td", {
                   class: l(m.rowTextClasses),
                   style: S({
                     minWidth: t.question.rowTitleWidth,
                     width: t.question.rowTitleWidth
                   })
                 }, [
-                  (i(), g(R(t.question.getRowHeaderWrapperComponentName(m)), {
+                  (i(), g(T(t.question.getRowHeaderWrapperComponentName(m)), {
                     componentData: t.question.getRowHeaderWrapperComponentData(m)
                   }, {
                     default: F(() => [
@@ -2701,26 +2703,26 @@ const eo = /* @__PURE__ */ h({
                 ], 6), [
                   [M, t.question.hasRows]
                 ]),
-                t.question.hasCellText ? (i(!0), u($, { key: 0 }, B(t.question.visibleColumns, (v, I) => (i(), u("td", {
-                  key: I,
-                  class: l(t.question.getItemClass(m, v)),
-                  onClick: (b) => n(m, v)
+                t.question.hasCellText ? (i(!0), u(_, { key: 0 }, D(t.question.visibleColumns, (p, f) => (i(), u("td", {
+                  key: f,
+                  class: l(t.question.getItemClass(m, p)),
+                  onClick: (b) => n(m, p)
                 }, [
                   C(y, {
-                    locString: t.question.getCellDisplayLocText(m.name, v)
+                    locString: t.question.getCellDisplayLocText(m.name, p)
                   }, null, 8, ["locString"])
                 ], 10, lo))), 128)) : d("", !0),
-                t.question.hasCellText ? d("", !0) : (i(!0), u($, { key: 1 }, B(t.question.visibleColumns, (v, I) => (i(), u("td", {
-                  key: I,
-                  "data-responsive-title": v.locText.renderedHtml,
+                t.question.hasCellText ? d("", !0) : (i(!0), u(_, { key: 1 }, D(t.question.visibleColumns, (p, f) => (i(), u("td", {
+                  key: f,
+                  "data-responsive-title": p.locText.renderedHtml,
                   class: l(t.question.cssClasses.cell),
-                  onClick: (b) => n(m, v)
+                  onClick: (b) => n(m, p)
                 }, [
-                  (i(), g(R(t.question.cellComponent), {
+                  (i(), g(T(t.question.cellComponent), {
                     question: t.question,
                     row: m,
-                    column: v,
-                    columnIndex: I
+                    column: p,
+                    columnIndex: f
                   }, null, 8, ["question", "row", "column", "columnIndex"]))
                 ], 10, ao))), 128))
               ], 2))), 128))
@@ -2741,12 +2743,12 @@ const eo = /* @__PURE__ */ h({
   },
   setup(r) {
     return (s, o) => {
-      const e = p("survey-string");
+      const e = v("survey-string");
       return i(), u("label", {
         onMousedown: o[1] || (o[1] = (n) => s.question.onMouseDown()),
         class: l(s.question.getItemClass(s.row, s.column))
       }, [
-        P(c("input", {
+        N(c("input", {
           type: "radio",
           class: l(s.question.cssClasses.itemValue),
           name: s.row.fullName,
@@ -2794,9 +2796,9 @@ const eo = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    return A(s, o), (e, n) => {
-      const t = p("survey-matrixtable");
+    const s = r, o = $(null);
+    return P(s, o), (e, n) => {
+      const t = v("survey-matrixtable");
       return i(), g(t, {
         question: e.question,
         ref_key: "root",
@@ -2811,7 +2813,7 @@ const eo = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, o = w(() => s.question.renderedTable);
-    return L(
+    return B(
       () => o.value,
       (e) => {
         const n = ie();
@@ -2825,7 +2827,7 @@ const eo = /* @__PURE__ */ h({
         };
       }
     ), (e, n) => {
-      const t = p("survey-string"), a = p("survey-matrixheaderrequired"), y = p("survey-matrixdropdown-cell");
+      const t = v("survey-string"), a = v("survey-matrixheaderrequired"), y = v("survey-matrixdropdown-cell");
       return i(), u("div", {
         style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: l(e.question.cssClasses.tableWrapper)
@@ -2835,13 +2837,13 @@ const eo = /* @__PURE__ */ h({
         }, [
           o.value.showHeader ? (i(), u("thead", yo, [
             c("tr", null, [
-              (i(!0), u($, null, B(o.value.headerRow.cells, (m) => (i(), u($, null, [
+              (i(!0), u(_, null, D(o.value.headerRow.cells, (m) => (i(), u(_, null, [
                 m.hasTitle ? (i(), u("th", {
                   key: "header_" + m.id,
                   class: l(m.className),
                   style: S({ minWidth: m.minWidth, width: m.width })
                 }, [
-                  (i(), g(R(e.question.getColumnHeaderWrapperComponentName(m)), {
+                  (i(), g(T(e.question.getColumnHeaderWrapperComponentName(m)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(m)
                   }, {
                     default: F(() => [
@@ -2866,7 +2868,7 @@ const eo = /* @__PURE__ */ h({
             ])
           ])) : d("", !0),
           c("tbody", null, [
-            (i(!0), u($, null, B(o.value.rows, (m) => (i(), u($, {
+            (i(!0), u(_, null, D(o.value.rows, (m) => (i(), u(_, {
               key: e.question.inputId + "_" + m.id
             }, [
               m.visible ? (i(), u("tr", {
@@ -2875,17 +2877,17 @@ const eo = /* @__PURE__ */ h({
                 onPointerdown: (q) => e.question.onPointerDown(q, m.row),
                 class: l(m.className)
               }, [
-                (i(!0), u($, null, B(m.cells, (q, v) => (i(), g(y, {
+                (i(!0), u(_, null, D(m.cells, (q, p) => (i(), g(y, {
                   cell: q,
                   question: e.question,
-                  key: m.id + "_" + v
+                  key: m.id + "_" + p
                 }, null, 8, ["cell", "question"]))), 128))
               ], 42, qo)) : d("", !0)
             ], 64))), 128))
           ]),
           o.value.showFooter ? (i(), u("tfoot", go, [
             c("tr", null, [
-              (i(!0), u($, null, B(o.value.footerRow.cells, (m, q) => (i(), g(y, {
+              (i(!0), u(_, null, D(o.value.footerRow.cells, (m, q) => (i(), g(y, {
                 cell: m,
                 question: e.question,
                 key: "footer_" + q
@@ -2904,12 +2906,12 @@ const eo = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r;
-    return L(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u($, { key: 0 }, [
+    return B(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u(_, { key: 0 }, [
       Co,
       o.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
-      }, T(o.column.requiredText), 3)) : d("", !0)
+      }, R(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
 }), ko = ["data-responsive-title", "title", "colspan"], fo = /* @__PURE__ */ h({
@@ -2919,132 +2921,132 @@ const eo = /* @__PURE__ */ h({
     cell: {}
   },
   setup(r) {
-    const s = r, o = _(!1), e = _(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (v) => re(v);
+    const s = r, o = $(!1), e = $(), n = () => s.cell.headers, t = () => !!s.cell.width || !!s.cell.minWidth ? { width: s.cell.width, minWidth: s.cell.minWidth } : null, a = () => o.value = s.cell.question.isVisible, y = (p) => re(p);
     H(() => {
       if (!s.cell.hasQuestion || !s.question || !s.question.survey)
         return;
       a(), s.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
         a();
       });
-      const v = e.value, I = s.cell.question, b = {
+      const p = e.value, f = s.cell.question, b = {
         cell: s.cell.cell,
-        cellQuestion: I,
-        htmlElement: v,
+        cellQuestion: f,
+        htmlElement: p,
         row: s.cell.row,
         column: s.cell.cell.column
       };
-      s.question.survey.matrixAfterCellRender(s.question, b), I && I.afterRenderCore(v);
+      s.question.survey.matrixAfterCellRender(s.question, b), f && f.afterRenderCore(p);
     });
     const m = w(() => {
-      const v = s.cell;
-      if (v.hasPanel) {
-        const I = v.panel, b = I.survey;
+      const p = s.cell;
+      if (p.hasPanel) {
+        const f = p.panel, b = f.survey;
         if (b) {
-          const N = b.getElementWrapperComponentName(I);
-          if (N)
-            return N;
+          const A = b.getElementWrapperComponentName(f);
+          if (A)
+            return A;
         }
         return "survey-panel";
       }
     }), q = w(() => {
       if (s.cell.hasPanel) {
-        const I = s.cell.panel, b = I.survey;
-        let N;
-        return b && (N = b.getElementWrapperComponentData(I)), {
+        const f = s.cell.panel, b = f.survey;
+        let A;
+        return b && (A = b.getElementWrapperComponentData(f)), {
           componentName: "survey-panel",
           componentData: {
-            element: I,
-            data: N,
+            element: f,
+            data: A,
             css: s.question.cssClasses
           }
         };
       }
     });
-    return (v, I) => {
-      const b = p("survey-errors"), N = p("sv-matrix-drag-drop-icon"), k = p("sv-action-bar"), D = p("survey-radiogroup-item"), E = p("survey-checkbox-item"), V = p("survey-other-choice"), K = p("survey-string");
+    return (p, f) => {
+      const b = v("survey-errors"), A = v("sv-matrix-drag-drop-icon"), k = v("sv-action-bar"), L = v("survey-radiogroup-item"), E = v("survey-checkbox-item"), V = v("survey-other-choice"), K = v("survey-string");
       return i(), u("td", {
-        class: l(v.cell.className),
+        class: l(p.cell.className),
         "data-responsive-title": n(),
-        title: v.cell.getTitle(),
+        title: p.cell.getTitle(),
         style: S(t()),
-        colspan: v.cell.colSpans,
-        onFocusin: I[0] || (I[0] = (ue) => v.cell.focusIn()),
+        colspan: p.cell.colSpans,
+        onFocusin: f[0] || (f[0] = (ue) => p.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
-        v.cell.isErrorsCell ? (i(), g(b, {
+        p.cell.isErrorsCell ? (i(), g(b, {
           key: 0,
-          element: v.cell.question
+          element: p.cell.question
         }, null, 8, ["element"])) : d("", !0),
-        v.cell.isDragHandlerCell ? (i(), g(N, {
+        p.cell.isDragHandlerCell ? (i(), g(A, {
           key: 1,
-          item: { data: { row: v.cell.row, question: v.question } }
+          item: { data: { row: p.cell.row, question: p.question } }
         }, null, 8, ["item"])) : d("", !0),
-        v.cell.isActionsCell ? (i(), g(k, {
+        p.cell.isActionsCell ? (i(), g(k, {
           key: 2,
-          model: v.cell.item.getData(),
+          model: p.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : d("", !0),
-        v.cell.hasPanel ? (i(), g(R(m.value), O(W({ key: 3 }, q.value)), null, 16)) : d("", !0),
-        v.cell.hasQuestion ? P((i(), u("div", {
+        p.cell.hasPanel ? (i(), g(T(m.value), O(W({ key: 3 }, q.value)), null, 16)) : d("", !0),
+        p.cell.hasQuestion ? N((i(), u("div", {
           key: 4,
-          class: l(v.question.cssClasses.cellQuestionWrapper)
+          class: l(p.question.cssClasses.cellQuestionWrapper)
         }, [
-          !v.cell.isChoice && v.cell.question.isDefaultRendering() ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell.cell)), {
+          !p.cell.isChoice && p.cell.question.isDefaultRendering() ? (i(), g(T(p.question.getCellWrapperComponentName(p.cell.cell)), {
             key: 0,
-            componentData: v.question.getCellWrapperComponentData(v.cell.cell)
+            componentData: p.question.getCellWrapperComponentData(p.cell.cell)
           }, {
             default: F(() => [
-              (i(), g(R(y(v.cell.question)), {
-                question: v.cell.question
+              (i(), g(T(y(p.cell.question)), {
+                question: p.cell.question
               }, null, 8, ["question"]))
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          !v.cell.isChoice && !v.cell.question.isDefaultRendering() ? (i(), g(R(v.cell.question.getComponentName()), {
+          !p.cell.isChoice && !p.cell.question.isDefaultRendering() ? (i(), g(T(p.cell.question.getComponentName()), {
             key: 1,
-            question: v.cell.question
+            question: p.cell.question
           }, null, 8, ["question"])) : d("", !0),
-          v.cell.isItemChoice ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell.cell)), {
+          p.cell.isItemChoice ? (i(), g(T(p.question.getCellWrapperComponentName(p.cell.cell)), {
             key: 2,
-            componentData: v.question.getCellWrapperComponentData(v.cell.cell)
+            componentData: p.question.getCellWrapperComponentData(p.cell.cell)
           }, {
             default: F(() => [
-              v.cell.isRadio ? (i(), g(D, {
-                key: v.cell.item.value,
-                question: v.cell.question,
-                item: v.cell.item,
+              p.cell.isRadio ? (i(), g(L, {
+                key: p.cell.item.value,
+                question: p.cell.question,
+                item: p.cell.item,
                 hideLabel: !0
               }, null, 8, ["question", "item"])) : d("", !0),
-              v.cell.isCheckbox ? (i(), g(E, {
-                key: v.cell.item.value,
-                question: v.cell.question,
-                item: v.cell.item,
+              p.cell.isCheckbox ? (i(), g(E, {
+                key: p.cell.item.value,
+                question: p.cell.question,
+                item: p.cell.item,
                 hideLabel: !0
               }, null, 8, ["question", "item"])) : d("", !0)
             ]),
             _: 1
           }, 8, ["componentData"])) : d("", !0),
-          v.cell.isOtherChoice ? (i(), g(V, {
+          p.cell.isOtherChoice ? (i(), g(V, {
             key: 3,
-            question: v.cell.question
+            question: p.cell.question
           }, null, 8, ["question"])) : d("", !0)
         ], 2)), [
           [M, o.value]
         ]) : d("", !0),
-        v.cell.hasTitle ? (i(), g(R(v.question.getCellWrapperComponentName(v.cell)), {
+        p.cell.hasTitle ? (i(), g(T(p.question.getCellWrapperComponentName(p.cell)), {
           key: 5,
-          componentData: v.question.getCellWrapperComponentData(v.cell)
+          componentData: p.question.getCellWrapperComponentData(p.cell)
         }, {
           default: F(() => [
-            v.cell.hasTitle ? (i(), g(K, {
+            p.cell.hasTitle ? (i(), g(K, {
               key: 0,
-              locString: v.cell.locTitle
+              locString: p.cell.locTitle
             }, null, 8, ["locString"])) : d("", !0),
-            v.cell.requiredText ? (i(), u("span", {
+            p.cell.requiredText ? (i(), u("span", {
               key: 1,
-              class: l(v.question.cssClasses.cellRequiredText)
-            }, T(v.cell.requiredText), 3)) : d("", !0)
+              class: l(p.question.cssClasses.cellRequiredText)
+            }, R(p.cell.requiredText), 3)) : d("", !0)
           ]),
           _: 1
         }, 8, ["componentData"])) : d("", !0)
@@ -3058,13 +3060,13 @@ const eo = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = () => {
       s.question.addRowUI();
     };
     return (n, t) => {
-      const a = p("survey-string"), y = p("survey-matrixtable");
+      const a = v("survey-string"), y = v("survey-matrixtable");
       return i(), u("div", {
         ref_key: "root",
         ref: o
@@ -3150,18 +3152,18 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
   setup(r) {
     const s = r, { question: o, row: e } = ae(s);
     return (n, t) => {
-      const a = p("survey-string");
+      const a = v("survey-string");
       return i(), u("button", {
         type: "button",
-        class: l(f(o).getRemoveRowButtonCss()),
-        disabled: f(o).isInputReadOnly,
-        onClick: t[0] || (t[0] = () => f(o).removeRowUI(f(e)))
+        class: l(I(o).getRemoveRowButtonCss()),
+        disabled: I(o).isInputReadOnly,
+        onClick: t[0] || (t[0] = () => I(o).removeRowUI(I(e)))
       }, [
         C(a, {
-          locString: f(o).locRemoveRowText
+          locString: I(o).locRemoveRowText
         }, null, 8, ["locString"]),
         c("span", {
-          class: l(f(o).cssClasses.iconRemove)
+          class: l(I(o).cssClasses.iconRemove)
         }, null, 2)
       ], 10, wo);
     };
@@ -3173,16 +3175,16 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
   },
   setup(r) {
     const s = r, { question: o } = ae(s, !1);
-    return (e, n) => f(o).iconDragElement ? (i(), u("svg", {
+    return (e, n) => I(o).iconDragElement ? (i(), u("svg", {
       key: 0,
-      class: l(f(o).cssClasses.dragElementDecorator)
+      class: l(I(o).cssClasses.dragElementDecorator)
     }, [
       c("use", {
-        "xlink:href": f(o).iconDragElement
+        "xlink:href": I(o).iconDragElement
       }, null, 8, Ro)
     ], 2)) : (i(), u("span", {
       key: 1,
-      class: l(f(o).cssClasses.iconDrag)
+      class: l(I(o).cssClasses.iconDrag)
     }, null, 2));
   }
 }), $o = ["aria-expanded", "aria-controls"], _o = /* @__PURE__ */ h({
@@ -3193,17 +3195,17 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
   setup(r) {
     const s = r, { question: o, row: e } = ae(s);
     return (n, t) => {
-      const a = p("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return i(), u("button", {
         type: "button",
-        class: l(f(o).getDetailPanelButtonCss(f(e))),
-        onClick: t[0] || (t[0] = () => f(e).showHideDetailPanelClick()),
-        "aria-expanded": f(o).getIsDetailPanelShowing(f(e)) ? "true" : "false",
-        "aria-controls": f(o).getIsDetailPanelShowing(f(e)) ? f(e).detailPanelId : null
+        class: l(I(o).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
       }, [
         C(a, {
-          class: l(f(o).getDetailPanelIconCss(f(e))),
-          iconName: f(o).getDetailPanelIconId(f(e)),
+          class: l(I(o).getDetailPanelIconCss(I(e))),
+          iconName: I(o).getDetailPanelIconId(I(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
       ], 10, $o);
@@ -3217,8 +3219,8 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = ie();
-    A(
+    const s = r, o = $(null), e = ie();
+    P(
       s,
       o,
       (m) => {
@@ -3248,24 +3250,24 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
     }), t = () => s.question.showLegacyNavigation, a = (m) => {
       const q = s.question.getSurvey();
       if (q) {
-        const v = q.getElementWrapperComponentName(m);
-        if (v)
-          return v;
+        const p = q.getElementWrapperComponentName(m);
+        if (p)
+          return p;
       }
       return "panel";
     }, y = (m) => {
       const q = s.question.getSurvey();
-      let v;
-      return q && (v = q.getElementWrapperComponentData(m)), {
+      let p;
+      return q && (p = q.getElementWrapperComponentData(m)), {
         componentName: "survey-panel",
         componentData: {
           element: m,
-          data: v
+          data: p
         }
       };
     };
     return (m, q) => {
-      const v = p("survey-string"), I = p("sv-paneldynamic-add-btn"), b = p("survey-paneldynamicprogress"), N = p("sv-paneldynamic-remove-btn"), k = p("survey-paneldynamicprogress-v2");
+      const p = v("survey-string"), f = v("sv-paneldynamic-add-btn"), b = v("survey-paneldynamicprogress"), A = v("sv-paneldynamic-remove-btn"), k = v("survey-paneldynamicprogress-v2");
       return i(), u("div", {
         class: l(m.question.cssClasses.root),
         ref_key: "root",
@@ -3276,11 +3278,11 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
           class: l(m.question.cssClasses.noEntriesPlaceholder)
         }, [
           c("span", null, [
-            C(v, {
+            C(p, {
               locString: m.question.locNoEntriesText
             }, null, 8, ["locString"])
           ]),
-          C(I, {
+          C(f, {
             data: { question: m.question }
           }, null, 8, ["data"])
         ], 2)) : d("", !0),
@@ -3298,28 +3300,28 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
           key: 2,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
-        (i(!0), u($, null, B(n.value, (D, E) => (i(), u($, {
-          key: D.id
+        (i(!0), u(_, null, D(n.value, (L, E) => (i(), u(_, {
+          key: L.id
         }, [
           c("div", {
             class: l(m.question.getPanelWrapperCss())
           }, [
-            (i(), g(R(a(D)), O(ne(y(D))), null, 16)),
-            m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && D.state !== "collapsed" ? (i(), g(N, {
+            (i(), g(T(a(L)), O(ne(y(L))), null, 16)),
+            m.question.panelRemoveButtonLocation === "right" && m.question.canRemovePanel && L.state !== "collapsed" ? (i(), g(A, {
               key: 0,
-              data: { question: m.question, panel: D }
+              data: { question: m.question, panel: L }
             }, null, 8, ["data"])) : d("", !0)
           ], 2),
           m.question.isRenderModeList && E < m.question.visiblePanelCount - 1 ? (i(), u("hr", {
             class: l(m.question.cssClasses.separator),
-            key: "separator" + D.id
+            key: "separator" + L.id
           }, null, 2)) : d("", !0)
         ], 64))), 128)),
         t() && m.question.isProgressBottomShowing ? (i(), g(b, {
           key: 3,
           question: m.question
         }, null, 8, ["question"])) : d("", !0),
-        t() && m.question.isRenderModeList ? (i(), g(I, {
+        t() && m.question.isRenderModeList ? (i(), g(f, {
           key: 4,
           data: { question: m.question }
         }, null, 8, ["data"])) : d("", !0),
@@ -3338,7 +3340,7 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = () => s.question.isProgressTopShowing ? s.question.cssClasses.progressTop : s.question.cssClasses.progressBottom;
     return (e, n) => {
-      const t = p("sv-paneldynamic-prev-btn"), a = p("sv-paneldynamic-next-btn"), y = p("sv-paneldynamic-add-btn"), m = p("sv-paneldynamic-progress-text");
+      const t = v("sv-paneldynamic-prev-btn"), a = v("sv-paneldynamic-next-btn"), y = v("sv-paneldynamic-add-btn"), m = v("sv-paneldynamic-progress-text");
       return i(), u("div", {
         class: l(o())
       }, [
@@ -3383,7 +3385,7 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
   },
   setup(r) {
     return (s, o) => {
-      const e = p("sv-action-bar");
+      const e = v("sv-action-bar");
       return s.question.cssClasses.footer ? (i(), u("div", {
         key: 0,
         class: l(s.question.cssClasses.footer)
@@ -3429,18 +3431,18 @@ const No = /* @__PURE__ */ h({
       o.value.addPanelUI();
     };
     return (n, t) => {
-      const a = p("survey-string");
-      return f(o).canAddPanel ? (i(), u("button", {
+      const a = v("survey-string");
+      return I(o).canAddPanel ? (i(), u("button", {
         key: 0,
         type: "button",
-        class: l(f(o).getAddButtonCss()),
+        class: l(I(o).getAddButtonCss()),
         onClick: e
       }, [
         c("span", {
-          class: l(f(o).cssClasses.buttonAddText)
+          class: l(I(o).cssClasses.buttonAddText)
         }, [
           C(a, {
-            locString: f(o).locPanelAddText
+            locString: I(o).locPanelAddText
           }, null, 8, ["locString"])
         ], 2)
       ], 2)) : d("", !0);
@@ -3457,14 +3459,14 @@ const No = /* @__PURE__ */ h({
       o.value.goToNextPanel();
     };
     return (n, t) => {
-      const a = p("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return i(), u("div", {
-        title: f(o).panelNextText,
+        title: I(o).panelNextText,
         onClick: e,
-        class: l(f(o).getNextButtonCss())
+        class: l(I(o).getNextButtonCss())
       }, [
         C(a, {
-          iconName: f(o).cssClasses.progressBtnIcon,
+          iconName: I(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, Po);
@@ -3481,14 +3483,14 @@ const No = /* @__PURE__ */ h({
       o.value.goToPrevPanel();
     };
     return (n, t) => {
-      const a = p("sv-svg-icon");
+      const a = v("sv-svg-icon");
       return i(), u("div", {
-        title: f(o).panelPrevText,
+        title: I(o).panelPrevText,
         onClick: e,
-        class: l(f(o).getPrevButtonCss())
+        class: l(I(o).getPrevButtonCss())
       }, [
         C(a, {
-          iconName: f(o).cssClasses.progressBtnIcon,
+          iconName: I(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
       ], 10, Mo);
@@ -3507,21 +3509,21 @@ const No = /* @__PURE__ */ h({
       o.value.isInputReadOnly || o.value.removePanelUI(t);
     };
     return (t, a) => {
-      const y = p("survey-string");
+      const y = v("survey-string");
       return i(), u("button", {
         type: "button",
-        class: l(f(o).getPanelRemoveButtonCss()),
+        class: l(I(o).getPanelRemoveButtonCss()),
         onClick: a[0] || (a[0] = (m) => n(e.value))
       }, [
         c("span", {
-          class: l(f(o).cssClasses.buttonRemoveText)
+          class: l(I(o).cssClasses.buttonRemoveText)
         }, [
           C(y, {
-            locString: f(o).locPanelRemoveText
+            locString: I(o).locPanelRemoveText
           }, null, 8, ["locString"])
         ], 2),
         c("span", {
-          class: l(f(o).cssClasses.iconRemove)
+          class: l(I(o).cssClasses.iconRemove)
         }, null, 2)
       ], 2);
     };
@@ -3535,8 +3537,8 @@ const No = /* @__PURE__ */ h({
   setup(r) {
     const o = Y(r);
     return (e, n) => (i(), u("div", {
-      class: l(f(o).cssClasses.progressText)
-    }, T(f(o).progressText), 3));
+      class: l(I(o).cssClasses.progressText)
+    }, R(I(o).progressText), 3));
   }
 }), Vo = ["id"], Fo = /* @__PURE__ */ h({
   __name: "Errors",
@@ -3545,9 +3547,9 @@ const No = /* @__PURE__ */ h({
     location: {}
   },
   setup(r) {
-    const s = _();
+    const s = $();
     return (o, e) => {
-      const n = p("survey-string");
+      const n = v("survey-string");
       return o.element.hasVisibleErrors ? (i(), u("div", {
         key: 0,
         role: "alert",
@@ -3557,7 +3559,7 @@ const No = /* @__PURE__ */ h({
         ref_key: "root",
         ref: s
       }, [
-        (i(!0), u($, null, B(o.element.errors, (t, a) => (i(), u("div", {
+        (i(!0), u(_, null, D(o.element.errors, (t, a) => (i(), u("div", {
           key: "error_" + a
         }, [
           c("span", {
@@ -3585,7 +3587,7 @@ const No = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Oo, T(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Oo, R(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3616,8 +3618,8 @@ const No = /* @__PURE__ */ h({
       ge(o);
     };
     return (o, e) => {
-      const n = p("survey-element-title-content"), t = p("sv-title-actions");
-      return o.element.hasTitle ? (i(), g(R(o.element.titleTagName), {
+      const n = v("survey-element-title-content"), t = v("sv-title-actions");
+      return o.element.hasTitle ? (i(), g(T(o.element.titleTagName), {
         key: 0,
         class: l(o.element.cssTitle),
         "aria-label": o.element.titleAriaLabel,
@@ -3654,8 +3656,8 @@ const No = /* @__PURE__ */ h({
   },
   setup(r) {
     return (s, o) => {
-      const e = p("survey-string");
-      return i(), u($, null, [
+      const e = v("survey-string");
+      return i(), u(_, null, [
         s.element.isTitleRenderedAsString ? (i(), g(e, {
           key: 0,
           locString: s.element.locTitle
@@ -3664,19 +3666,19 @@ const No = /* @__PURE__ */ h({
           key: 1,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, T(s.element.requiredText), 3)) : d("", !0),
+        }, R(s.element.requiredText), 3)) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", {
           key: 2,
           style: { position: "static" },
           class: l(s.element.cssTitleNumber),
           "aria-hidden": !0
-        }, T(s.element.no), 3)) : d("", !0),
+        }, R(s.element.no), 3)) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", jo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, T(s.element.requiredText), 3)) : d("", !0),
+        }, R(s.element.requiredText), 3)) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Qo, "\xA0")) : d("", !0),
         s.element.isTitleRenderedAsString ? d("", !0) : (i(), g(e, {
           key: 6,
@@ -3687,7 +3689,7 @@ const No = /* @__PURE__ */ h({
           key: 8,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, T(s.element.requiredText), 3)) : d("", !0)
+        }, R(s.element.requiredText), 3)) : d("", !0)
       ], 64);
     };
   }
@@ -3700,7 +3702,7 @@ const No = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = w(() => s.element.getTitleToolbar());
     return (e, n) => {
-      const t = p("survey-string"), a = p("survey-element-title-content"), y = p("sv-action-bar");
+      const t = v("survey-string"), a = v("survey-element-title-content"), y = v("sv-action-bar");
       return i(), u("div", Xo, [
         c("span", Yo, [
           e.element.isPage ? (i(), g(t, {
@@ -3740,7 +3742,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     title: {}
   },
   setup(r) {
-    const s = r, o = _(), e = () => {
+    const s = r, o = $(), e = () => {
       Pe(
         s.size,
         s.width,
@@ -3769,17 +3771,17 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     handleClick: { type: Boolean, default: !0 }
   },
   setup(r) {
-    const s = r, o = _(null), e = (t) => {
+    const s = r, o = $(null), e = (t) => {
       s.handleClick && t.stopPropagation();
     };
-    L(() => s.model);
+    B(() => s.model);
     const n = le(() => s.model.renderedActions);
     return H(() => {
       !s.model.hasActions || s.model.initResponsivityManager(o.value);
     }), U(() => {
       s.model.resetResponsivityManager();
     }), (t, a) => {
-      const y = p("sv-action");
+      const y = v("sv-action");
       return t.model.hasActions ? (i(), u("div", {
         key: 0,
         ref_key: "root",
@@ -3787,7 +3789,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         class: l(t.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u($, null, B(f(n), (m) => (i(), g(y, {
+        (i(!0), u(_, null, D(I(n), (m) => (i(), g(y, {
           key: m.id,
           item: m
         }, null, 8, ["item"]))), 128))
@@ -3803,15 +3805,15 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     const s = r, o = w(
       () => s.item.component || "sv-action-bar-item"
     );
-    return L(() => s.item), (e, n) => {
-      const t = p("sv-action-bar-separator");
+    return B(() => s.item), (e, n) => {
+      const t = v("sv-action-bar-separator");
       return i(), u("div", {
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
         c("div", dt, [
           e.item.needSeparator ? (i(), g(t, { key: 0 })) : d("", !0),
-          (i(), g(R(o.value), { item: e.item }, null, 8, ["item"]))
+          (i(), g(T(o.value), { item: e.item }, null, 8, ["item"]))
         ])
       ], 10, ut);
     };
@@ -3826,9 +3828,9 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   },
   setup(r) {
     const s = r;
-    return L(() => s.item), (o, e) => {
-      const n = p("sv-svg-icon"), t = X("key2click");
-      return P((i(), u("button", {
+    return B(() => s.item), (o, e) => {
+      const n = v("sv-svg-icon"), t = X("key2click");
+      return N((i(), u("button", {
         class: l(o.item.getActionBarItemCss()),
         type: "button",
         onClick: e[0] || (e[0] = (a) => {
@@ -3853,7 +3855,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         o.item.hasTitle ? (i(), u("span", {
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
-        }, T(o.item.title), 3)) : d("", !0)
+        }, R(o.item.title), 3)) : d("", !0)
       ], 42, ct)), [
         [t, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
@@ -3870,7 +3872,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   setup(r) {
     const s = r, o = Me;
     let e;
-    return L(
+    return B(
       () => s.item,
       (n) => {
         e = new Ae(n);
@@ -3879,9 +3881,9 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         e.dispose();
       }
     ), (n, t) => {
-      const a = p("sv-svg-icon"), y = p("sv-popup"), m = X("key2click");
-      return i(), u($, null, [
-        P((i(), u("button", {
+      const a = v("sv-svg-icon"), y = v("sv-popup"), m = X("key2click");
+      return i(), u(_, null, [
+        N((i(), u("button", {
           type: "button",
           class: l(n.item.getActionBarItemCss()),
           onClick: t[0] || (t[0] = (q) => {
@@ -3904,13 +3906,13 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           n.item.hasTitle ? (i(), u("span", {
             key: 1,
             class: l(n.item.getActionBarItemTitleCss())
-          }, T(n.item.title), 3)) : d("", !0)
+          }, R(n.item.title), 3)) : d("", !0)
         ], 42, yt)), [
           [m, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
         ]),
         C(y, {
           model: n.item.popupModel,
-          getTarget: f(o)
+          getTarget: I(o)
         }, null, 8, ["model", "getTarget"])
       ], 64);
     };
@@ -3932,7 +3934,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     model: {}
   },
   setup(r) {
-    const s = r, o = _(null), e = (a) => {
+    const s = r, o = $(null), e = (a) => {
       const y = s.model;
       y.filterString = a.target.value;
     }, n = (a) => {
@@ -3941,10 +3943,10 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     }, t = (a) => {
       s.model.onMouseMove(a);
     };
-    return L(() => s.model), H(() => {
+    return B(() => s.model), H(() => {
       s.model.initListContainerHtmlElement(o.value);
     }), (a, y) => {
-      const m = p("sv-svg-icon"), q = p("sv-list-item");
+      const m = v("sv-svg-icon"), q = v("sv-list-item");
       return i(), u("div", {
         class: l(a.model.cssClasses.root),
         ref_key: "listContainerElement",
@@ -3973,8 +3975,8 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           }, null, 42, Ct),
           a.model.showSearchClearButton && !!a.model.filterString ? (i(), u("button", {
             key: 0,
-            onClick: y[0] || (y[0] = (v) => {
-              a.model.onClickSearchClearButton(v);
+            onClick: y[0] || (y[0] = (p) => {
+              a.model.onClickSearchClearButton(p);
             }),
             class: l(a.model.cssClasses.searchClearButtonIcon)
           }, [
@@ -3984,33 +3986,33 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             })
           ], 2)) : d("", !0)
         ], 2)) : d("", !0),
-        P(c("div", {
+        N(c("div", {
           class: l(a.model.cssClasses.emptyContainer)
         }, [
           c("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, T(a.model.emptyMessage), 11, bt)
+          }, R(a.model.emptyMessage), 11, bt)
         ], 2), [
           [M, a.model.isEmpty]
         ]),
-        a.model.renderElements ? P((i(), u("ul", {
+        a.model.renderElements ? N((i(), u("ul", {
           key: 1,
           class: l(a.model.getListClass()),
           role: "listbox",
           id: a.model.elementId,
-          onMousedown: y[1] || (y[1] = (v) => {
-            v.preventDefault();
+          onMousedown: y[1] || (y[1] = (p) => {
+            p.preventDefault();
           }),
           onMousemove: t,
-          onKeydown: y[2] || (y[2] = (v) => {
-            a.model.onKeyDown(v);
+          onKeydown: y[2] || (y[2] = (p) => {
+            a.model.onKeyDown(p);
           })
         }, [
-          (i(!0), u($, null, B(a.model.renderedActions, (v) => (i(), g(q, {
-            item: v,
+          (i(!0), u(_, null, D(a.model.renderedActions, (p) => (i(), g(q, {
+            item: p,
             model: a.model,
-            key: v.id
+            key: p.id
           }, null, 8, ["item", "model"]))), 128))
         ], 42, kt)), [
           [M, !a.model.isEmpty]
@@ -4028,13 +4030,13 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     const s = r, o = w(() => s.item.elementId), e = (n) => {
       s.model.onItemClick(s.item), n.stopPropagation();
     };
-    return L(() => s.item), H(() => {
+    return B(() => s.item), H(() => {
       setTimeout(() => {
         s.model.onLastItemRended(s.item);
       });
     }), (n, t) => {
-      const a = p("sv-svg-icon"), y = p("survey-string"), m = X("key2click");
-      return P((i(), u("li", {
+      const a = v("sv-svg-icon"), y = v("survey-string"), m = X("key2click");
+      return N((i(), u("li", {
         tabindex: "0",
         role: "option",
         "aria-selected": n.model.isItemSelected(n.item),
@@ -4063,7 +4065,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             key: 1,
             locString: n.item.locTitle
           }, null, 8, ["locString"])),
-          n.item.component ? (i(), g(R(n.item.component), {
+          n.item.component ? (i(), g(T(n.item.component), {
             key: 2,
             item: n.item
           }, null, 8, ["item"])) : d("", !0)
@@ -4083,14 +4085,14 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   setup(r) {
     const s = r, o = z(
       de(s.model, void 0)
-    ), e = _(null);
+    ), e = $(null);
     return J(
       () => s.model,
       (n) => {
         o.value.dispose(), o.value = de(n, void 0);
       },
       { immediate: !0 }
-    ), L(() => o.value), H(() => {
+    ), B(() => o.value), H(() => {
       const n = e.value;
       o.value.setComponentElement(
         n,
@@ -4099,7 +4101,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     }), U(() => {
       o.value.dispose();
     }), (n, t) => {
-      const a = p("sv-popup-container");
+      const a = v("sv-popup-container");
       return i(), u("div", {
         ref_key: "root",
         ref: e
@@ -4125,14 +4127,14 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     const e = (n) => {
       n.stopPropagation();
     };
-    return L(() => s.model), te(() => {
+    return B(() => s.model), te(() => {
       const n = s.model;
       !o && n.isVisible && s.model.updateOnShowing(), o = n.isVisible;
     }), H(() => {
       s.model.isVisible && s.model.updateOnShowing();
     }), (n, t) => {
-      const a = p("sv-action-bar");
-      return P((i(), u("div", {
+      const a = v("sv-action-bar");
+      return N((i(), u("div", {
         tabindex: "-1",
         class: l(["sv-popup", n.model.styleClass]),
         onKeydown: t[0] || (t[0] = (y) => {
@@ -4154,15 +4156,15 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           onClick: e
         }, [
           c("div", Tt, [
-            n.model.showHeader ? (i(), g(R(n.model.popupHeaderTemplate), {
+            n.model.showHeader ? (i(), g(T(n.model.popupHeaderTemplate), {
               key: 0,
               model: n.model
             }, null, 8, ["model"])) : d("", !0),
             c("div", $t, [
-              n.model.title ? (i(), u("div", _t, T(n.model.title), 1)) : d("", !0),
+              n.model.title ? (i(), u("div", _t, R(n.model.title), 1)) : d("", !0),
               c("div", Dt, [
                 c("div", Bt, [
-                  (i(), g(R(n.model.contentComponentName), O(ne(n.model.contentComponentData)), null, 16))
+                  (i(), g(T(n.model.contentComponentName), O(ne(n.model.contentComponentData)), null, 16))
                 ])
               ]),
               n.model.showFooter ? (i(), u("div", Lt, [
@@ -4206,17 +4208,18 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     const s = r, o = w(
       () => s.survey.getContainerContent(s.container)
     );
-    return (e, n) => o.value.length > 0 ? (i(), u($, { key: 0 }, [
+    return (e, n) => o.value.length > 0 ? (i(), u(_, { key: 0 }, [
       e.needRenderWrapper ? (i(), u("div", At, [
-        (i(!0), u($, null, B(o.value, (t, a) => (i(), g(R(t.component), {
+        (i(!0), u(_, null, D(o.value, (t, a) => (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 }, B(o.value, (t, a) => (i(), g(R(t.component), {
+      ])) : (i(!0), u(_, { key: 1 }, D(o.value, (t, a) => (i(), g(T(t.component), {
         survey: e.survey,
+        container: e.container,
         model: t.data
-      }, null, 8, ["survey", "model"]))), 256))
+      }, null, 8, ["survey", "container", "model"]))), 256))
     ], 64)) : d("", !0);
   }
 }), Z = /* @__PURE__ */ h({
@@ -4241,78 +4244,115 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       }, [
         c("span", {
           class: l(e(t.survey.css))
-        }, T(t.survey.progressText), 3)
+        }, R(t.survey.progressText), 3)
       ], 6),
       c("span", {
         class: l(n(t.survey.css))
-      }, T(t.survey.progressText), 3)
+      }, R(t.survey.progressText), 3)
     ], 2));
   }
-}), Ht = ["onClick"], Wt = ["title"], Et = ["title"], Vt = /* @__PURE__ */ h({
+}), Ht = ["title"], Wt = ["onClick", "data-page-number"], Et = ["title"], Vt = ["title"], Ft = ["title"], Ot = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
-    survey: {}
+    survey: {},
+    model: {},
+    container: {}
   },
   setup(r) {
-    const s = r, o = new He(s.survey), e = _(!1), n = _(), t = w(() => s.survey.css);
-    let a;
-    const y = (b) => o.isListElementClickable(b), m = (b) => o.getListElementCss(b), q = (b) => {
-      o.clickListElement(b);
-    }, v = (b, N) => o.getScrollButtonCss(b, N), I = (b) => {
-      let N = n.value;
-      N.scrollLeft += (b ? -1 : 1) * 70;
+    const s = r, o = $(!1), e = $(!1), n = $(!1), t = $(!0), a = $(), y = w(() => s.survey.css);
+    let m = null;
+    const q = (p) => {
+      let f = a.value;
+      f.scrollLeft += (p ? -1 : 1) * 70;
     };
     return H(() => {
-      const b = n.value;
-      a = setInterval(() => {
-        e.value = b.scrollWidth > b.offsetWidth;
-      }, 100);
+      const p = a.value;
+      m = new He(s.model, p, {
+        onResize: (f) => {
+          t.value = f, e.value = !f;
+        },
+        onUpdateScroller: (f) => {
+          o.value = f;
+        },
+        onUpdateSettings: () => {
+          t.value = s.model.showItemTitles, n.value = !s.model.showItemTitles;
+        },
+        container: w(() => s.container)
+      });
     }), Q(() => {
-      typeof a < "u" && (clearInterval(a), a = void 0);
-    }), (b, N) => (i(), u("div", {
-      class: l(t.value.progressButtonsContainerCenter)
+      m.dispose();
+    }), (p, f) => (i(), u("div", {
+      class: l(p.model.getRootCss(p.container)),
+      role: "progressbar",
+      "aria-valuemin": "0",
+      "aria-valuemax": "100",
+      "aria-label": "progress"
     }, [
+      e.value ? (i(), u("div", {
+        key: 0,
+        class: l(p.survey.css.progressButtonsHeader)
+      }, [
+        c("div", {
+          class: l(p.survey.css.progressButtonsPageTitle),
+          title: p.model.headerText
+        }, R(p.model.headerText), 11, Ht)
+      ], 2)) : d("", !0),
       c("div", {
-        class: l(t.value.progressButtonsContainer)
+        class: l(y.value.progressButtonsContainer)
       }, [
         c("div", {
-          class: l(v(e.value, !0)),
-          onClick: N[0] || (N[0] = (k) => I(!0)),
+          class: l(p.model.getScrollButtonCss(o.value, !0)),
+          onClick: f[0] || (f[0] = (b) => q(!0)),
           role: "button"
         }, null, 2),
         c("div", {
-          class: l(t.value.progressButtonsListContainer),
+          class: l(y.value.progressButtonsListContainer),
           ref_key: "progressButtonsListContainer",
-          ref: n
+          ref: a
         }, [
           c("ul", {
-            class: l(t.value.progressButtonsList)
+            class: l(y.value.progressButtonsList)
           }, [
-            (i(!0), u($, null, B(b.survey.visiblePages, (k, D) => (i(), u("li", {
-              key: "listelement" + D,
-              class: l(m(D)),
-              onClick: (E) => y(D) ? q(D) : null
+            (i(!0), u(_, null, D(p.survey.visiblePages, (b, A) => (i(), u("li", {
+              key: "listelement" + A,
+              class: l(p.model.getListElementCss(A)),
+              onClick: (k) => p.model.isListElementClickable(A) ? p.model.clickListElement(b) : null,
+              "data-page-number": p.model.getItemNumber(b)
             }, [
               c("div", {
-                class: l(t.value.progressButtonsPageTitle),
-                title: k.renderedNavigationTitle
-              }, T(k.renderedNavigationTitle), 11, Wt),
-              c("div", {
-                class: l(t.value.progressButtonsPageDescription),
-                title: k.locNavigationDescription.renderedHtml
-              }, T(k.locNavigationDescription.renderedHtml), 11, Et)
-            ], 10, Ht))), 128))
+                class: l(y.value.progressButtonsConnector)
+              }, null, 2),
+              t.value ? (i(), u("div", {
+                key: 0,
+                class: l(y.value.progressButtonsPageTitle),
+                title: b.renderedNavigationTitle
+              }, R(b.renderedNavigationTitle), 11, Et)) : d("", !0),
+              t.value ? (i(), u("div", {
+                key: 1,
+                class: l(y.value.progressButtonsPageDescription),
+                title: b.locNavigationDescription.renderedHtml
+              }, R(b.locNavigationDescription.renderedHtml), 11, Vt)) : d("", !0)
+            ], 10, Wt))), 128))
           ], 2)
         ], 2),
         c("div", {
-          class: l(v(e.value, !1)),
-          onClick: N[1] || (N[1] = (k) => I(!1)),
+          class: l(p.model.getScrollButtonCss(o.value, !1)),
+          onClick: f[1] || (f[1] = (b) => q(!1)),
           role: "button"
         }, null, 2)
-      ], 2)
+      ], 2),
+      n.value ? (i(), u("div", {
+        key: 1,
+        class: l(p.survey.css.progressButtonsFooter)
+      }, [
+        c("div", {
+          class: l(p.survey.css.progressButtonsPageTitle),
+          title: p.model.footerText
+        }, R(p.model.footerText), 11, Ft)
+      ], 2)) : d("", !0)
     ], 2));
   }
-}), Ft = /* @__PURE__ */ h({
+}), zt = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
     survey: {},
@@ -4320,11 +4360,11 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   },
   setup(r) {
     return (s, o) => {
-      const e = p("sv-svg-icon"), n = p("sv-popup"), t = p("sv-list"), a = X("key2click");
+      const e = v("sv-svg-icon"), n = v("sv-popup"), t = v("sv-list"), a = X("key2click");
       return i(), u("div", {
         class: l(s.model.containerCss)
       }, [
-        s.model.isMobile ? P((i(), u("div", {
+        s.model.isMobile ? N((i(), u("div", {
           key: 0,
           onClick: o[0] || (o[0] = (...y) => s.model.togglePopup && s.model.togglePopup(...y))
         }, [
@@ -4344,17 +4384,17 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 2);
     };
   }
-}), Ot = { onsubmit: "return false;" }, zt = {
+}), Ut = { onsubmit: "return false;" }, Kt = {
   key: 0,
   class: "sv_custom_header"
-}, Ut = { class: "sv-components-column sv-components-column--expandable" }, Kt = ["id"], jt = { key: 2 }, Qt = ["innerHTML"], Gt = ["innerHTML"], Jt = ["innerHTML"], ve = /* @__PURE__ */ h({
+}, jt = { class: "sv-components-column sv-components-column--expandable" }, Qt = ["id"], Gt = { key: 2 }, Jt = ["innerHTML"], Xt = ["innerHTML"], Yt = ["innerHTML"], ve = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const s = r, o = _(), e = _(""), n = _(1), t = w(() => {
+    const s = r, o = $(), e = $(""), n = $(1), t = w(() => {
       const b = s.survey ? s.survey : s.model;
       return Re(b);
     }), a = w(() => t.value.activePage ? t.value.activePage.id : ""), y = () => {
@@ -4362,19 +4402,19 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       return !!t.value && b + n.value.toString();
     }, m = w(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), q = w(() => t.value.css), v = w(() => "page" + y()), I = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
-    return L(() => t.value), H(() => {
+    ), q = w(() => t.value.css), p = w(() => "page" + y()), f = () => m.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
+    return B(() => t.value), H(() => {
       if (!!t.value) {
         var b = o.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();
+          var A, k;
+          n.value++, (k = (A = ie()) == null ? void 0 : A.proxy) == null || k.$forceUpdate();
         }, t.value.startTimerFromUI();
       }
     }), U(() => {
       t.value.stopTimer(), t.value.renderCallback = void 0;
-    }), (b, N) => {
-      const k = p("sv-svg-bundle"), D = p("survey-popup-modal"), E = p("survey-header"), V = p("survey-page"), K = p("sv-brand-info"), ue = p("sv-notifier");
+    }), (b, A) => {
+      const k = v("sv-svg-bundle"), L = v("survey-popup-modal"), E = v("survey-header"), V = v("survey-page"), K = v("sv-brand-info"), ue = v("sv-notifier");
       return i(), u("div", {
         class: l(t.value.getRootCss()),
         style: S(t.value.themeVariables),
@@ -4385,14 +4425,14 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         c("div", {
           class: l(t.value.wrapperFormCss)
         }, [
-          C(D),
+          C(L),
           t.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
             class: l(q.value.rootBackgroundImage),
             style: S(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          c("form", Ot, [
-            t.value.hasLogo ? d("", !0) : (i(), u("div", zt)),
+          c("form", Ut, [
+            t.value.hasLogo ? d("", !0) : (i(), u("div", Kt)),
             c("div", {
               class: l(q.value.container)
             }, [
@@ -4400,7 +4440,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                 key: 0,
                 survey: t.value
               }, null, 8, ["survey"])) : d("", !0),
-              (i(), g(R("sv-components-container"), {
+              (i(), g(T("sv-components-container"), {
                 survey: t.value,
                 container: "header",
                 needRenderWrapper: !1
@@ -4409,13 +4449,13 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                 key: 1,
                 class: l(t.value.bodyContainerCss)
               }, [
-                (i(), g(R("sv-components-container"), {
+                (i(), g(T("sv-components-container"), {
                   survey: t.value,
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                c("div", Ut, [
-                  (i(), g(R("sv-components-container"), {
+                c("div", jt, [
+                  (i(), g(T("sv-components-container"), {
                     survey: t.value,
                     container: "center",
                     needRenderWrapper: !0
@@ -4425,41 +4465,41 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                     style: S({ maxWidth: t.value.renderedWidth }),
                     id: a.value
                   }, [
-                    (i(), g(R("sv-components-container"), {
+                    (i(), g(T("sv-components-container"), {
                       survey: t.value,
                       container: "contentTop",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"])),
                     (i(), g(V, {
-                      key: v.value,
+                      key: p.value,
                       survey: t.value,
                       page: t.value.activePage,
                       css: q.value
                     }, null, 8, ["survey", "page", "css"])),
-                    (i(), g(R("sv-components-container"), {
+                    (i(), g(T("sv-components-container"), {
                       survey: t.value,
                       container: "contentBottom",
                       needRenderWrapper: !0
                     }, null, 8, ["survey"]))
-                  ], 14, Kt)
+                  ], 14, Qt)
                 ]),
-                (i(), g(R("sv-components-container"), {
+                (i(), g(T("sv-components-container"), {
                   survey: t.value,
                   container: "right",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"]))
               ], 2)) : d("", !0),
-              (i(), g(R("sv-components-container"), {
+              (i(), g(T("sv-components-container"), {
                 survey: t.value,
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              m.value ? (i(), u("div", jt, [
+              m.value ? (i(), u("div", Gt, [
                 c("div", {
-                  innerHTML: I(),
+                  innerHTML: f(),
                   class: l(t.value.completedCss)
-                }, null, 10, Qt),
-                (i(), g(R("sv-components-container"), {
+                }, null, 10, Jt),
+                (i(), g(T("sv-components-container"), {
                   survey: t.value,
                   container: "completePage",
                   needRenderWrapper: !0
@@ -4469,16 +4509,16 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                 key: 3,
                 class: l(t.value.completedBeforeCss),
                 innerHTML: t.value.processedCompletedBeforeHtml
-              }, null, 10, Gt)) : d("", !0),
+              }, null, 10, Xt)) : d("", !0),
               t.value.state === "loading" ? (i(), u("div", {
                 key: 4,
                 class: l(t.value.loadingBodyCss),
                 innerHTML: t.value.processedLoadingHtml
-              }, null, 10, Jt)) : d("", !0),
+              }, null, 10, Yt)) : d("", !0),
               t.value.state === "empty" ? (i(), u("div", {
                 key: 5,
                 class: l(q.value.bodyEmpty)
-              }, T(t.value.emptySurveyText), 3)) : d("", !0)
+              }, R(t.value.emptySurveyText), 3)) : d("", !0)
             ], 2)
           ]),
           t.value.showBrandInfo ? (i(), g(K, { key: 1 })) : d("", !0),
@@ -4489,22 +4529,22 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 6);
     };
   }
-}), Xt = /* @__PURE__ */ h({
+}), Zt = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
   },
   setup(r) {
     const s = r;
-    return L(() => s.model), (o, e) => {
-      const n = p("sv-action-bar");
-      return P((i(), u("div", {
+    return B(() => s.model), (o, e) => {
+      const n = v("sv-action-bar");
+      return N((i(), u("div", {
         class: l(o.model.css),
         style: S({ visibility: o.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
-        c("span", null, T(o.model.message), 1),
+        c("span", null, R(o.model.message), 1),
         C(n, {
           model: o.model.actionBar
         }, null, 8, ["model"])
@@ -4513,7 +4553,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Yt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Zt = { key: 1 }, xt = /* @__PURE__ */ h({
+}), xt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], ei = { key: 1 }, si = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4541,18 +4581,18 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         onInput: o[1] || (o[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
-      }, null, 46, Yt)),
-      s.question.isReadOnlyRenderDiv() ? (i(), u("div", Zt, T(s.question.otherValue), 1)) : d("", !0)
+      }, null, 46, xt)),
+      s.question.isReadOnlyRenderDiv() ? (i(), u("div", ei, R(s.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), ei = ["disabled", "value", "title"], si = /* @__PURE__ */ h({
+}), ni = ["disabled", "value", "title"], oi = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
   },
   setup(r) {
     const s = r, o = () => s.item.data && s.item.data.mouseDown();
-    return L(() => s.item), (e, n) => e.item.visible ? (i(), u("input", {
+    return B(() => s.item), (e, n) => e.item.visible ? (i(), u("input", {
       key: 0,
       type: "button",
       disabled: e.item.disabled,
@@ -4561,7 +4601,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: n[0] || (n[0] = (...t) => e.item.action && e.item.action(...t))
-    }, null, 42, ei)) : d("", !0);
+    }, null, 42, ni)) : d("", !0);
   }
 }), ye = /* @__PURE__ */ h({
   __name: "PopupSurvey",
@@ -4574,11 +4614,11 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   setup(r) {
     const s = r, o = z(), e = w(() => s.survey ? s.survey.getCss() : {});
     w(() => {
-      var v;
-      return (v = o.value) != null && v.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
+      var p;
+      return (p = o.value) != null && p.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
     }), w(() => {
-      var v;
-      return (v = o.value) == null ? void 0 : v.isExpanded;
+      var p;
+      return (p = o.value) == null ? void 0 : p.isExpanded;
     });
     const n = () => {
       o.value.changeExpandCollapse();
@@ -4587,15 +4627,15 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     }, a = () => "SurveyComponent", y = () => {
       o.value.onScroll();
     }, m = () => {
-      let v = o.value.cssHeaderRoot;
-      return o.value.isCollapsed && (v += " " + o.value.cssRootCollapsedMod), v;
+      let p = o.value.cssHeaderRoot;
+      return o.value.isCollapsed && (p += " " + o.value.cssRootCollapsedMod), p;
     };
-    L(() => o.value);
+    B(() => o.value);
     const q = J(
       () => s.survey,
-      (v) => {
-        const I = new We(null, v);
-        s.isExpanded !== void 0 && (I.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (I.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (I.allowClose = s.allowClose), I.isShowing = !0, o.value = I;
+      (p) => {
+        const f = new We(null, p);
+        s.isExpanded !== void 0 && (f.isExpanded = s.isExpanded), s.closeOnCompleteTimeout !== void 0 && (f.closeOnCompleteTimeout = s.closeOnCompleteTimeout), s.allowClose !== void 0 && (f.allowClose = s.allowClose), f.isShowing = !0, o.value = f;
       },
       {
         immediate: !0
@@ -4603,8 +4643,8 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     );
     return U(() => {
       q();
-    }), (v, I) => {
-      const b = p("sv-svg-icon");
+    }), (p, f) => {
+      const b = v("sv-svg-icon");
       return o.value.isShowing ? (i(), u("div", {
         key: 0,
         style: S({ maxWidth: o.value.renderedWidth, width: o.value.renderedWidth }),
@@ -4620,7 +4660,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             o.value.isCollapsed && !!o.value.locTitle ? (i(), u("div", {
               key: 0,
               class: l(o.value.cssHeaderTitleCollapsed)
-            }, T(o.value.locTitle.renderedHtml), 3)) : d("", !0),
+            }, R(o.value.locTitle.renderedHtml), 3)) : d("", !0),
             c("div", {
               class: l(o.value.cssHeaderButtonsContainer)
             }, [
@@ -4654,20 +4694,20 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           c("div", {
             class: l(o.value.cssBody)
           }, [
-            (i(), g(R(a()), { survey: v.survey }, null, 8, ["survey"]))
+            (i(), g(T(a()), { survey: p.survey }, null, 8, ["survey"]))
           ], 2)
         ], 2)
       ], 38)) : d("", !0);
     };
   }
-}), ni = ["innerHTML"], oi = /* @__PURE__ */ h({
+}), ti = ["innerHTML"], ii = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const s = r, o = _(), e = w(
+    const s = r, o = $(), e = w(
       () => s.question.customWidget.isDefaultRender
     ), n = w(
       () => !!s.question.customWidget.htmlTemplate
@@ -4683,20 +4723,20 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       n.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, ni)) : d("", !0),
-      e.value ? (i(), g(R(a.value), {
+      }, null, 8, ti)) : d("", !0),
+      e.value ? (i(), g(T(a.value), {
         key: 1,
         question: y.question,
         css: y.css
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), ti = /* @__PURE__ */ h({
+}), ri = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(r) {
     const s = z();
-    function o(n, t, a, y, m, q, v = "popup") {
-      const I = Ee(
+    function o(n, t, a, y, m, q, p = "popup") {
+      const f = Ee(
         n,
         t,
         a,
@@ -4705,9 +4745,9 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         void 0,
         m,
         q,
-        v
+        p
       );
-      return e(I);
+      return e(f);
     }
     function e(n, t) {
       n.onHide = () => {
@@ -4724,7 +4764,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     })), j.showDialog || (j.showDialog = e, U(() => {
       j.showDialog = void 0;
     })), (n, t) => {
-      const a = p("sv-popup-container");
+      const a = v("sv-popup-container");
       return s.value ? (i(), g(Te, {
         key: 0,
         to: s.value.container
@@ -4733,7 +4773,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), ii = /* @__PURE__ */ h({
+}), li = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4741,11 +4781,11 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   },
   setup(r) {
     const s = r;
-    return L(() => s.counter), (o, e) => (i(), u("div", {
+    return B(() => s.counter), (o, e) => (i(), u("div", {
       class: l(o.remainingCharacterCounter)
-    }, T(o.counter.remainingCharacterCounter), 3));
+    }, R(o.counter.remainingCharacterCounter), 3));
   }
-}), ri = /* @__PURE__ */ h({
+}), ai = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -4753,11 +4793,11 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = w(() => s.question.contentPanel);
     return (n, t) => {
-      const a = p("survey-panel");
+      const a = v("survey-panel");
       return i(), g(a, {
         ref_key: "root",
         ref: o,
@@ -4766,7 +4806,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       }, null, 8, ["element", "css"]);
     };
   }
-}), li = /* @__PURE__ */ h({
+}), ui = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -4774,18 +4814,18 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
     css: {}
   },
   setup(r) {
-    const s = r, o = _(null);
-    A(s, o);
+    const s = r, o = $(null);
+    P(s, o);
     const e = w(() => s.question.contentQuestion), n = (t) => re(t);
-    return (t, a) => (i(), g(R(n(e.value)), {
+    return (t, a) => (i(), g(T(n(e.value)), {
       ref: o.value,
       question: e.value,
       css: t.css
     }, null, 8, ["question", "css"]));
   }
-}), ai = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), ui = [
-  ai
-], qe = 440, di = /* @__PURE__ */ h({
+}), di = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), mi = [
+  di
+], qe = 440, ci = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -4793,7 +4833,7 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
   },
   setup(r) {
     const s = r, o = w(() => qe * s.model.progress), e = w(() => s.model.text);
-    return L(() => s.model), (n, t) => n.model.isRunning && n.model.showTimerAsClock ? (i(), u("div", {
+    return B(() => s.model), (n, t) => n.model.isRunning && n.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
       class: l(n.model.rootCss)
     }, [
@@ -4801,36 +4841,36 @@ const tt = /* @__PURE__ */ Ce(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         key: 0,
         class: l(n.model.getProgressCss()),
         style: S({ strokeDasharray: qe, strokeDashoffset: o.value })
-      }, ui, 6)) : d("", !0),
+      }, mi, 6)) : d("", !0),
       c("div", {
         class: l(n.model.textContainerCss)
       }, [
         c("span", {
           class: l(n.model.majorTextCss)
-        }, T(n.model.clockMajorText), 3),
+        }, R(n.model.clockMajorText), 3),
         n.model.clockMinorText ? (i(), u("span", {
           key: 0,
           class: l(n.model.minorTextCss)
-        }, T(n.model.clockMinorText), 3)) : d("", !0)
+        }, R(n.model.clockMinorText), 3)) : d("", !0)
       ], 2)
-    ], 2)) : P((i(), u("div", {
+    ], 2)) : N((i(), u("div", {
       key: 1,
       class: l(n.model.survey.getCss().timerRoot)
-    }, T(e.value), 3)), [
+    }, R(e.value), 3)), [
       [M, n.model.isRunning && !n.model.showTimerAsClock]
     ]);
   }
-}), mi = {}, ci = { class: "sd-loading-indicator" };
-function pi(r, s) {
-  const o = p("sv-svg-icon");
-  return i(), u("div", ci, [
+}), pi = {}, vi = { class: "sd-loading-indicator" };
+function yi(r, s) {
+  const o = v("sv-svg-icon");
+  return i(), u("div", vi, [
     C(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @__PURE__ */ h({
+const qi = /* @__PURE__ */ Ce(pi, [["render", yi]]), gi = { key: 2 }, hi = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -4838,11 +4878,11 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
   },
   setup(r) {
     const s = r;
-    return L(() => {
+    return B(() => {
       const o = s.model;
       return o.survey = s.survey, s.model;
     }), (o, e) => {
-      const n = p("sv-header-cell"), t = p("sv-header-mobile");
+      const n = v("sv-header-cell"), t = v("sv-header-mobile");
       return i(), u("div", {
         class: l(o.model.headerClasses),
         style: S({ height: o.model.renderedHeight })
@@ -4857,28 +4897,28 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           class: l(o.model.contentClasses),
           style: S({ maxWidth: o.model.maxWidth })
         }, [
-          (i(!0), u($, null, B(o.model.cells, (a, y) => (i(), g(n, {
+          (i(!0), u(_, null, D(o.model.cells, (a, y) => (i(), g(n, {
             model: a,
             key: y
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        o.survey.isMobile ? (i(), u("div", yi, [
+        o.survey.isMobile ? (i(), u("div", gi, [
           C(t, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), gi = {
+}), Ci = {
   key: 0,
   class: "sv-header__logo"
-}, hi = ["src", "width", "height", "alt"], Ci = /* @__PURE__ */ h({
+}, bi = ["src", "width", "height", "alt"], ki = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
   },
   setup(r) {
     return (s, o) => {
-      const e = p("survey-element-title"), n = p("survey-string");
+      const e = v("survey-element-title"), n = v("survey-string");
       return i(), u("div", {
         class: l(s.model.css),
         style: S(s.model.style)
@@ -4887,7 +4927,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           class: "sv-header__cell-content",
           style: S(s.model.contentStyle)
         }, [
-          s.model.showLogo ? (i(), u("div", gi, [
+          s.model.showLogo ? (i(), u("div", Ci, [
             c("div", {
               class: l(s.model.survey.logoClassNames)
             }, [
@@ -4898,7 +4938,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
                 style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-              }, null, 14, hi)
+              }, null, 14, bi)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
@@ -4929,19 +4969,19 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       ], 6);
     };
   }
-}), bi = { class: "sv-header--mobile" }, ki = {
+}), fi = { class: "sv-header--mobile" }, Ii = {
   key: 0,
   class: "sv-header__logo"
-}, fi = ["src", "width", "height", "alt"], Ii = /* @__PURE__ */ h({
+}, wi = ["src", "width", "height", "alt"], Si = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
   },
   setup(r) {
     return (s, o) => {
-      const e = p("survey-element-title"), n = p("survey-string");
-      return i(), u("div", bi, [
-        s.model.survey.hasLogo ? (i(), u("div", ki, [
+      const e = v("survey-element-title"), n = v("survey-string");
+      return i(), u("div", fi, [
+        s.model.survey.hasLogo ? (i(), u("div", Ii, [
           c("div", {
             class: l(s.model.survey.logoClassNames)
           }, [
@@ -4952,7 +4992,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
               style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-            }, null, 14, fi)
+            }, null, 14, wi)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
@@ -4982,7 +5022,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       ]);
     };
   }
-}), wi = /* @__PURE__ */ h({
+}), Ri = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -5016,14 +5056,14 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       style: S(n(a.element)),
       class: l(a.element.cssClasses.questionWrapper)
     }, [
-      a.row.isNeedRender ? (i(), g(R(e.value), O(W({ key: 0 }, t.value)), null, 16)) : a.element.skeletonComponentName ? (i(), g(R(a.element.skeletonComponentName), {
+      a.row.isNeedRender ? (i(), g(T(e.value), O(W({ key: 0 }, t.value)), null, 16)) : a.element.skeletonComponentName ? (i(), g(T(a.element.skeletonComponentName), {
         key: 1,
         element: a.element,
         css: a.css
       }, null, 8, ["element", "css"])) : d("", !0)
     ], 6));
   }
-}), Si = /* @__PURE__ */ h({
+}), Ti = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
@@ -5031,9 +5071,9 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
   },
   setup(r) {
     const s = $e(), o = w(() => !!s.default);
-    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(R(e.componentName), O(W({ key: 1 }, e.componentData)), null, 16));
+    return (e, n) => o.value && !e.componentName ? _e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), O(W({ key: 1 }, e.componentData)), null, 16));
   }
-}), Ri = /* @__PURE__ */ h({
+}), $i = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5041,13 +5081,13 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
   },
   setup(r) {
     return (s, o) => {
-      const e = p("sv-svg-icon");
+      const e = v("sv-svg-icon");
       return i(), u("button", {
         type: "button",
         class: l(s.css),
         onClick: o[0] || (o[0] = (...n) => s.question.doClean && s.question.doClean(...n))
       }, [
-        c("span", null, T(s.question.clearButtonCaption), 1),
+        c("span", null, R(s.question.clearButtonCaption), 1),
         s.question.cssClasses.removeButtonIconId ? (i(), g(e, {
           key: 0,
           iconName: s.question.cssClasses.removeButtonIconId,
@@ -5057,14 +5097,14 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       ], 2);
     };
   }
-}), Ti = ["id"], $i = /* @__PURE__ */ h({
+}), _i = ["id"], Di = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
   },
   setup(r) {
     return (s, o) => {
-      const e = p("sv-action");
+      const e = v("sv-action");
       return i(), u("div", {
         class: l(s.question.cssClasses.videoContainer)
       }, [
@@ -5079,14 +5119,14 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           playsinline: "",
           id: s.question.videoId,
           class: l(s.question.cssClasses.video)
-        }, null, 10, Ti),
+        }, null, 10, _i),
         C(e, {
           item: s.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), _i = ["for", "aria-label"], Di = /* @__PURE__ */ h({
+}), Bi = ["for", "aria-label"], Li = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -5100,8 +5140,8 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       }
     );
     return (e, n) => {
-      const t = p("sv-svg-icon"), a = X("key2click");
-      return P((i(), u("label", {
+      const t = v("sv-svg-icon"), a = X("key2click");
+      return N((i(), u("label", {
         tabindex: "0",
         class: l(o.value.getChooseFileCss()),
         for: o.value.inputId,
@@ -5113,25 +5153,25 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           iconName: o.value.cssClasses.chooseFileIconId,
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
-        c("span", null, T(o.value.chooseButtonText), 1)
-      ], 10, _i)), [
+        c("span", null, R(o.value.chooseButtonText), 1)
+      ], 10, Bi)), [
         [a]
       ]);
     };
   }
-}), Bi = ["onClick", "href", "title", "download"], Li = ["src"], Ni = ["onClick"], Pi = ["onClick", "href", "title", "download"], Ai = /* @__PURE__ */ h({
+}), Ni = ["onClick", "href", "title", "download"], Pi = ["src"], Ai = ["onClick"], Mi = ["onClick", "href", "title", "download"], Hi = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
   },
   setup(r) {
     return (s, o) => {
-      const e = p("sv-svg-icon");
+      const e = v("sv-svg-icon");
       return s.question.showPreviewContainer ? (i(), u("div", {
         key: 0,
         class: l(s.question.cssClasses.fileList || void 0)
       }, [
-        (i(!0), u($, null, B(s.question.previewValue, (n, t) => P((i(), u("span", {
+        (i(!0), u(_, null, D(s.question.previewValue, (n, t) => N((i(), u("span", {
           key: s.question.inputId + "_" + t,
           class: l(s.question.cssClasses.preview)
         }, [
@@ -5145,7 +5185,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, T(n.name), 13, Bi)
+            }, R(n.name), 13, Ni)
           ], 2)) : d("", !0),
           c("div", {
             class: l(s.question.getImageWrapperCss(n))
@@ -5158,7 +5198,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
                 width: s.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Li)) : d("", !0),
+            }, null, 12, Pi)) : d("", !0),
             s.question.defaultImage(n) ? (i(), g(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
@@ -5172,7 +5212,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
             }, [
               c("span", {
                 class: l(s.question.cssClasses.removeFile)
-              }, T(s.question.removeFileCaption), 3),
+              }, R(s.question.removeFileCaption), 3),
               s.question.cssClasses.removeFileSvgIconId ? (i(), g(e, {
                 key: 0,
                 title: s.question.removeFileCaption,
@@ -5180,7 +5220,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
                 iconName: s.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, Ni)) : d("", !0)
+            ], 10, Ai)) : d("", !0)
           ], 2),
           n.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
@@ -5192,7 +5232,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
               title: n.name,
               download: n.name,
               style: S({ width: s.question.imageWidth })
-            }, T(n.name), 13, Pi)
+            }, R(n.name), 13, Mi)
           ], 2)) : d("", !0)
         ], 2)), [
           [M, n && s.question.isPreviewVisible(t)]
@@ -5200,22 +5240,22 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       ], 2)) : d("", !0);
     };
   }
-}), Mi = /* @__PURE__ */ h({
+}), Wi = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
   },
   setup(r) {
-    const s = r, o = _();
-    return A(s, o), (e, n) => {
-      const t = p("sv-button-group-item");
+    const s = r, o = $();
+    return P(s, o), (e, n) => {
+      const t = v("sv-button-group-item");
       return i(), u("div", {
         role: "group",
         class: l(e.question.cssClasses.root),
         ref_key: "root",
         ref: o
       }, [
-        (i(!0), u($, null, B(e.question.visibleChoices, (a, y) => (i(), g(t, {
+        (i(!0), u(_, null, D(e.question.visibleChoices, (a, y) => (i(), g(t, {
           question: e.question,
           key: y,
           item: a,
@@ -5224,7 +5264,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       ], 2);
     };
   }
-}), Hi = ["title"], Wi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Ei = ["title"], Vi = /* @__PURE__ */ h({
+}), Ei = ["title"], Vi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Fi = ["title"], Oi = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5242,13 +5282,13 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
       }
     });
     return (n, t) => {
-      const a = p("sv-svg-icon"), y = p("survey-string");
+      const a = v("sv-svg-icon"), y = v("survey-string");
       return i(), u("label", {
         role: "radio",
         class: l(o.value.css.label),
         title: o.value.caption.renderedHtml
       }, [
-        P(c("input", {
+        N(c("input", {
           type: "radio",
           name: o.value.name,
           id: o.value.id,
@@ -5261,7 +5301,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           class: l(o.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (m) => e.value = m),
           value: o.value.value
-        }, null, 10, Wi), [
+        }, null, 10, Vi), [
           [x, e.value]
         ]),
         c("div", {
@@ -5281,12 +5321,12 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
             C(y, {
               locString: o.value.caption
             }, null, 8, ["locString"])
-          ], 10, Ei)) : d("", !0)
+          ], 10, Fi)) : d("", !0)
         ], 2)
-      ], 10, Hi);
+      ], 10, Ei);
     };
   }
-}), Fi = ["src", "width", "height", "alt"], Oi = /* @__PURE__ */ h({
+}), zi = ["src", "width", "height", "alt"], Ui = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
@@ -5299,7 +5339,7 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
     }, [
       c("img", {
         class: l(o.value.css.logoImage),
-        src: f(e),
+        src: I(e),
         width: o.value.renderedLogoWidth,
         height: o.value.renderedLogoHeight,
         alt: o.value.locTitle.renderedHtml,
@@ -5308,16 +5348,16 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
           width: o.value.renderedStyleLogoWidth,
           height: o.value.renderedStyleLogoHeight
         })
-      }, null, 14, Fi)
+      }, null, 14, zi)
     ], 2));
   }
-}), zi = /* @__PURE__ */ h({
+}), Ki = /* @__PURE__ */ h({
   __name: "SvgBundle",
   setup(r) {
-    const s = _();
+    const s = $();
     return H(() => {
       s.value.innerHTML = Oe.iconsRenderedHtml();
-    }), (o, e) => P((i(), u("svg", {
+    }), (o, e) => N((i(), u("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
       ref: s
@@ -5327,8 +5367,8 @@ const vi = /* @__PURE__ */ Ce(mi, [["render", pi]]), yi = { key: 2 }, qi = /* @_
   }
 });
 ze.platform = "vue3";
-function Ui(r) {
-  r.component("SurveyComponent", ve), r.component("sv-svg-bundle", zi), r.component("PopupSurveyComponent", ye), r.component("survey", ve), r.component("popup-survey", ye), r.component("survey-header", Ge), r.component("sv-logo-image", Oi), r.component("survey-page", Qe), r.component("survey-row", Je), r.component("survey-question", Ze), r.component("survey-panel", ns), r.component("survey-element-header", os), r.component("survey-string", ts), r.component("sv-string-viewer", ls), r.component("sv-string-editor", us), r.component("sv-skeleton", ms), r.component("survey-text", vs), r.component("survey-text-input", hs), r.component("survey-checkbox", Is), r.component("survey-checkbox-item", Rs), r.component("survey-radiogroup", Ts), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ps), r.component("survey-html", Ms), r.component("survey-image", Vs), r.component("survey-expression", Fs), r.component("survey-file", Us), r.component("sv-file-choose-btn", Di), r.component("sv-file-clean-btn", Ri), r.component("sv-file-preview", Ai), r.component("sv-file-video", $i), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", en), r.component("survey-dropdown", sn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", an), r.component("sv-dropdown", pn), r.component("survey-tagbox", vn), r.component("sv-tagbox", gn), r.component("sv-tagbox-item", fn), r.component("sv-tagbox-filter", bn), r.component("survey-ranking", In), r.component("survey-ranking-item", _n), r.component("survey-rating", Ln), r.component("sv-rating-item", Pn), r.component("sv-rating-item-smiley", Mn), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", jn), r.component("sv-boolean-radio-item", Jn), r.component("sv-boolean-checkbox", eo), r.component("survey-multipletext", so), r.component("survey-multipletext-item", oo), r.component("survey-matrix", uo), r.component("survey-matrix-cell", po), r.component("survey-matrixdropdown", vo), r.component("survey-matrixtable", ho), r.component("survey-matrixheaderrequired", bo), r.component("survey-matrixdropdown-cell", fo), r.component("survey-matrixdynamic", Io), r.component("sv-matrix-remove-button", So), r.component("sv-matrix-drag-drop-icon", To), r.component("sv-matrix-detail-button", _o), r.component("survey-paneldynamic", Do), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", No), r.component("sv-paneldynamic-next-btn", Ao), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Wo), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Vt), r.component("sv-navigation-toc", Ft), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Fo), r.component("survey-question-comment", Uo), r.component("survey-element-title", Ko), r.component("survey-element-title-content", Jo), r.component("sv-title-actions", Zo), r.component("sv-brand-info", tt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", vt), r.component("sv-action-bar-item-dropdown", gt), r.component("sv-action-bar-separator", ht), r.component("sv-list", ft), r.component("sv-list-item", St), r.component("sv-popup", Rt), r.component("sv-popup-container", Nt), r.component("popup-pointer", Pt), r.component("sv-notifier", Xt), r.component("survey-other-choice", xt), r.component("sv-nav-btn", si), r.component("survey-customwidget", oi), r.component("survey-popup-modal", ti), r.component("sv-character-counter", ii), r.component("survey-composite", ri), r.component("survey-custom", li), r.component("sv-timerpanel", di), r.component("sv-loading-indicator", vi), r.component("sv-header", qi), r.component("sv-header-cell", Ci), r.component("sv-header-mobile", Ii), r.component("sv-template-renderer", Si), r.component("survey-element", wi), r.component("survey-buttongroup", Mi), r.component("sv-button-group-item", Vi), r.directive("key2click", {
+function ji(r) {
+  r.component("SurveyComponent", ve), r.component("sv-svg-bundle", Ki), r.component("PopupSurveyComponent", ye), r.component("survey", ve), r.component("popup-survey", ye), r.component("survey-header", Ge), r.component("sv-logo-image", Ui), r.component("survey-page", Qe), r.component("survey-row", Je), r.component("survey-question", Ze), r.component("survey-panel", ns), r.component("survey-element-header", os), r.component("survey-string", ts), r.component("sv-string-viewer", ls), r.component("sv-string-editor", us), r.component("sv-skeleton", ms), r.component("survey-text", vs), r.component("survey-text-input", hs), r.component("survey-checkbox", Is), r.component("survey-checkbox-item", Rs), r.component("survey-radiogroup", Ts), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ps), r.component("survey-html", Ms), r.component("survey-image", Vs), r.component("survey-expression", Fs), r.component("survey-file", Us), r.component("sv-file-choose-btn", Li), r.component("sv-file-clean-btn", $i), r.component("sv-file-preview", Hi), r.component("sv-file-video", Di), r.component("survey-imagepicker", js), r.component("survey-imagepicker-item", Ys), r.component("survey-comment", en), r.component("survey-dropdown", sn), r.component("sv-dropdown-select", rn), r.component("sv-dropdown-option-item", an), r.component("sv-dropdown", pn), r.component("survey-tagbox", vn), r.component("sv-tagbox", gn), r.component("sv-tagbox-item", fn), r.component("sv-tagbox-filter", bn), r.component("survey-ranking", In), r.component("survey-ranking-item", _n), r.component("survey-rating", Ln), r.component("sv-rating-item", Pn), r.component("sv-rating-item-smiley", Mn), r.component("sv-rating-item-star", Wn), r.component("sv-rating-dropdown", zn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Kn), r.component("sv-boolean-radio", jn), r.component("sv-boolean-radio-item", Jn), r.component("sv-boolean-checkbox", eo), r.component("survey-multipletext", so), r.component("survey-multipletext-item", oo), r.component("survey-matrix", uo), r.component("survey-matrix-cell", po), r.component("survey-matrixdropdown", vo), r.component("survey-matrixtable", ho), r.component("survey-matrixheaderrequired", bo), r.component("survey-matrixdropdown-cell", fo), r.component("survey-matrixdynamic", Io), r.component("sv-matrix-remove-button", So), r.component("sv-matrix-drag-drop-icon", To), r.component("sv-matrix-detail-button", _o), r.component("survey-paneldynamic", Do), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", No), r.component("sv-paneldynamic-next-btn", Ao), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Wo), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Ot), r.component("sv-navigation-toc", zt), r.component("sv-progress-pages", Z), r.component("sv-progress-questions", Z), r.component("sv-progress-correctquestions", Z), r.component("sv-progress-requiredquestions", Z), r.component("survey-errors", Fo), r.component("survey-question-comment", Uo), r.component("survey-element-title", Ko), r.component("survey-element-title-content", Jo), r.component("sv-title-actions", Zo), r.component("sv-brand-info", tt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", vt), r.component("sv-action-bar-item-dropdown", gt), r.component("sv-action-bar-separator", ht), r.component("sv-list", ft), r.component("sv-list-item", St), r.component("sv-popup", Rt), r.component("sv-popup-container", Nt), r.component("popup-pointer", Pt), r.component("sv-notifier", Zt), r.component("survey-other-choice", si), r.component("sv-nav-btn", oi), r.component("survey-customwidget", ii), r.component("survey-popup-modal", ri), r.component("sv-character-counter", li), r.component("survey-composite", ai), r.component("survey-custom", ui), r.component("sv-timerpanel", ci), r.component("sv-loading-indicator", qi), r.component("sv-header", hi), r.component("sv-header-cell", ki), r.component("sv-header-mobile", Si), r.component("sv-template-renderer", Ti), r.component("survey-element", Ri), r.component("survey-buttongroup", Wi), r.component("sv-button-group-item", Oi), r.directive("key2click", {
     mounted: function(s, o) {
       const e = { ...o.value };
       if (e.disableTabStop) {
@@ -5343,15 +5383,15 @@ function Ui(r) {
     }
   });
 }
-const Qi = {
+const Ji = {
   install(r) {
-    Ui(r);
+    ji(r);
   }
 };
 export {
-  Qi as surveyPlugin,
-  L as useBase,
+  Ji as surveyPlugin,
+  B as useBase,
   le as useComputedArray,
   G as useLocString,
-  A as useQuestion
+  P as useQuestion
 };