survey-vue3-ui 1.9.114 → 1.9.116

package/survey-vue3-ui.es.js

@@ -1,5 +1,5 @@
-import { shallowReactive as ce, watch as K, onBeforeUnmount as j, onMounted as A, ref as $, shallowRef as O, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as T, onUpdated as J, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as w, renderList as B, createBlock as y, createElementVNode as p, normalizeStyle as I, onUnmounted as W, withDirectives as P, resolveDynamicComponent as N, vShow as _, toDisplayString as S, vModelCheckbox as U, vModelRadio as Z, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
-import { Base as fe, RendererFactory as Y, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Re, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as _e, doKey2ClickBlur as Ae } from "survey-core";
+import { shallowReactive as ce, watch as K, onBeforeUnmount as j, onMounted as A, ref as $, shallowRef as O, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as J, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as S, renderList as B, createBlock as y, createElementVNode as p, normalizeStyle as w, onUnmounted as W, withDirectives as P, resolveDynamicComponent as N, vShow as _, toDisplayString as I, vModelCheckbox as U, vModelRadio as Z, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as Y, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Te, ActionDropdownViewModel as Re, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as _e, doKey2ClickBlur as Ae } from "survey-core";
 fe.createPropertiesHash = () => ce({});
 function Ee(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (n, o) => {
@@ -76,7 +76,7 @@ const We = /* @__PURE__ */ g({
   setup(r) {
     const n = r, o = $(null);
     L(() => n.page);
-    const e = T(() => n.page._showDescription), s = T(() => n.page.rows);
+    const e = R(() => n.page._showDescription), s = R(() => n.page.rows);
     return A(() => {
       n.survey && n.survey.afterRenderPage(o.value);
     }), J(() => {
@@ -100,9 +100,9 @@ const We = /* @__PURE__ */ g({
             locString: i.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : d("", !0),
-        (t(!0), u(w, null, B(s.value, (b, R) => (t(), u(w, null, [
+        (t(!0), u(S, null, B(s.value, (b, T) => (t(), u(S, null, [
           b.visible ? (t(), y(m, {
-            key: i.page.id + "_" + R,
+            key: i.page.id + "_" + T,
             row: b,
             survey: i.survey,
             css: i.css
@@ -139,7 +139,7 @@ const We = /* @__PURE__ */ g({
             width: s.survey.renderedLogoWidth,
             height: s.survey.renderedLogoHeight,
             alt: s.survey.locTitle.renderedHtml,
-            style: I({
+            style: w({
               objectFit: s.survey.logoFit,
               width: s.survey.renderedStyleLogoWidth,
               height: s.survey.renderedStyleLogoHeight
@@ -149,7 +149,7 @@ const We = /* @__PURE__ */ g({
         s.survey.renderedHasTitle ? (t(), u("div", {
           key: 1,
           class: l(s.survey.css.headerText),
-          style: I({ maxWidth: s.survey.titleMaxWidth })
+          style: w({ maxWidth: s.survey.titleMaxWidth })
         }, [
           C(a, {
             element: s.survey,
@@ -174,7 +174,7 @@ const We = /* @__PURE__ */ g({
             width: s.survey.renderedLogoWidth,
             height: s.survey.renderedLogoHeight,
             alt: s.survey.locTitle.renderedHtml,
-            style: I({
+            style: w({
               objectFit: s.survey.logoFit,
               width: s.survey.renderedStyleLogoWidth,
               height: s.survey.renderedStyleLogoHeight
@@ -195,7 +195,7 @@ const We = /* @__PURE__ */ g({
     survey: {}
   },
   setup(r) {
-    const n = r, o = T(
+    const n = r, o = R(
       () => n.row.visibleElements
     ), e = $();
     return L(() => n.row), A(() => {
@@ -215,8 +215,8 @@ const We = /* @__PURE__ */ g({
         ref_key: "root",
         ref: e
       }, [
-        (t(!0), u(w, null, B(o.value, (v) => (t(), u("div", {
-          style: I(v.rootStyle)
+        (t(!0), u(S, null, B(o.value, (v) => (t(), u("div", {
+          style: w(v.rootStyle)
         }, [
           v.isPanel ? d("", !0) : (t(), y(a, {
             key: v.id,
@@ -224,7 +224,7 @@ const We = /* @__PURE__ */ g({
             survey: s.survey,
             css: s.css,
             row: s.row,
-            style: I(v.getRootStyle())
+            style: w(v.getRootStyle())
           }, null, 8, ["element", "survey", "css", "row", "style"])),
           v.isPanel ? (t(), y(c, {
             key: v.id,
@@ -235,7 +235,7 @@ const We = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Ue = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "data-name"], Ke = /* @__PURE__ */ g({
+}), Ue = ["id", "role", "aria-required", "aria-invalid", "aria-labelledby", "aria-expanded", "data-name"], Ke = /* @__PURE__ */ g({
   __name: "Element",
   props: {
     survey: {},
@@ -244,7 +244,7 @@ const We = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const n = r, o = $(null), e = T(() => !n.element.isPanel && n.element.showErrorOnTop), s = T(() => !n.element.isPanel && n.element.showErrorOnBottom), i = (m) => m.customWidget ? "survey-customwidget" : m.getType() === "panel" || m.isDefaultRendering() ? "survey-" + m.getTemplate() : m.getComponentName(), a = (m) => m.cssContent;
+    const n = r, o = $(null), e = R(() => !n.element.isPanel && n.element.showErrorOnTop), s = R(() => !n.element.isPanel && n.element.showErrorOnBottom), i = (m) => m.customWidget ? "survey-customwidget" : m.getType() === "panel" || m.isDefaultRendering() ? "survey-" + m.getTemplate() : m.getComponentName(), a = (m) => m.cssContent;
     L(() => n.element);
     const c = () => {
       !n.element.isPanel && o.value && n.element.afterRender(o.value);
@@ -257,7 +257,7 @@ const We = /* @__PURE__ */ g({
     return W(() => {
       v();
     }), (m, b) => {
-      const R = q("survey-errors"), f = q("survey-element-header"), M = q("survey-string"), h = q("survey-question-comment");
+      const T = q("survey-errors"), f = q("survey-element-header"), M = q("survey-string"), h = q("survey-question-comment");
       return m.row.isNeedRender ? (t(), u("div", {
         key: 0,
         class: l(m.element.isPanel ? null : m.element.getRootCss()),
@@ -269,9 +269,10 @@ const We = /* @__PURE__ */ g({
         "aria-required": m.element.ariaRequired,
         "aria-invalid": m.element.ariaInvalid,
         "aria-labelledby": m.element.ariaLabelledBy,
+        "aria-expanded": m.element.ariaExpanded === null ? void 0 : m.element.ariaExpanded === "true",
         "data-name": m.element.name
       }, [
-        !m.element.isPanel && m.element.showErrorsAboveQuestion ? (t(), y(R, {
+        !m.element.isPanel && m.element.showErrorsAboveQuestion ? (t(), y(T, {
           key: 0,
           element: m.element,
           location: "top"
@@ -285,7 +286,7 @@ const We = /* @__PURE__ */ g({
           class: l(a(m.element) || void 0),
           role: "presentation"
         }, [
-          e.value ? (t(), y(R, {
+          e.value ? (t(), y(T, {
             key: 0,
             element: m.element,
             location: "top"
@@ -308,7 +309,7 @@ const We = /* @__PURE__ */ g({
               question: m.element
             }, null, 8, ["commentClass", "question"])
           ], 2)) : d("", !0),
-          s.value ? (t(), y(R, {
+          s.value ? (t(), y(T, {
             key: 3,
             element: m.element,
             location: "bottom"
@@ -329,7 +330,7 @@ const We = /* @__PURE__ */ g({
           element: m.element,
           css: m.css
         }, null, 8, ["element", "css"])) : d("", !0),
-        !m.element.isPanel && m.element.showErrorsBelowQuestion ? (t(), y(R, {
+        !m.element.isPanel && m.element.showErrorsBelowQuestion ? (t(), y(T, {
           key: 3,
           element: m.element,
           location: "bottom"
@@ -349,7 +350,7 @@ const We = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const n = r, o = $(!1), e = $(null), s = T(() => n.question.rows), i = T(() => n.question.survey), a = T(() => o.value);
+    const n = r, o = $(!1), e = $(null), s = R(() => n.question.rows), i = R(() => n.question.survey), a = R(() => o.value);
     return L(() => n.question), A(() => {
       n.question.survey && n.question.survey.afterRenderPanel(n.question, e.value), o.value = n.question.isCollapsed;
       const c = n.question;
@@ -360,7 +361,7 @@ const We = /* @__PURE__ */ g({
       const c = n.question;
       c.stateChangedCallback = null;
     }), (c, v) => {
-      const m = q("survey-errors"), b = q("survey-element-header"), R = q("survey-row"), f = q("sv-action-bar");
+      const m = q("survey-errors"), b = q("survey-element-header"), T = q("survey-row"), f = q("sv-action-bar");
       return c.question.isVisible ? (t(), u("div", {
         key: 0,
         class: l(c.question.getContainerCss()),
@@ -384,11 +385,11 @@ const We = /* @__PURE__ */ g({
         a.value ? d("", !0) : (t(), u("div", {
           key: 3,
           id: c.question.contentId,
-          style: I({ paddingLeft: c.question.innerPaddingLeft }),
+          style: w({ paddingLeft: c.question.innerPaddingLeft }),
           class: l(c.question.cssClasses.panel.content)
         }, [
-          (t(!0), u(w, null, B(s.value, (M, h) => (t(), u(w, null, [
-            M.visible ? (t(), y(R, {
+          (t(!0), u(S, null, B(s.value, (M, h) => (t(), u(S, null, [
+            M.visible ? (t(), y(T, {
               key: c.question.id + "_" + h,
               row: M,
               survey: i.value,
@@ -463,7 +464,7 @@ const We = /* @__PURE__ */ g({
       key: 0,
       class: "sv-string-viewer",
       innerHTML: k(o)
-    }, null, 8, Ye)) : (t(), u("span", Ze, S(k(o)), 1));
+    }, null, 8, Ye)) : (t(), u("span", Ze, I(k(o)), 1));
   }
 }), es = ["innerHTML"], ss = /* @__PURE__ */ g({
   __name: "StringEditor",
@@ -490,7 +491,7 @@ const We = /* @__PURE__ */ g({
       contenteditable: "true",
       onBlur: o,
       onClick: e
-    }, S(s.locString.renderedHtml), 33));
+    }, I(s.locString.renderedHtml), 33));
   }
 }), ns = ["id"], os = /* @__PURE__ */ g({
   __name: "Skeleton",
@@ -517,7 +518,7 @@ const We = /* @__PURE__ */ g({
         key: 0,
         ref_key: "root",
         ref: o
-      }, S(e.question.value), 513)) : e.question.dataListId ? (t(), u("div", {
+      }, I(e.question.value), 513)) : e.question.dataListId ? (t(), u("div", {
         key: 1,
         ref_key: "root",
         ref: o
@@ -526,7 +527,7 @@ const We = /* @__PURE__ */ g({
         p("datalist", {
           id: e.question.dataListId
         }, [
-          (t(!0), u(w, null, B(e.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
+          (t(!0), u(S, null, B(e.question.dataList, (a) => (t(), u("option", { value: a }, null, 8, is))), 256))
         ], 8, ts)
       ], 512)) : (t(), y(i, {
         key: 2,
@@ -544,7 +545,7 @@ const We = /* @__PURE__ */ g({
   setup(r) {
     const n = r;
     L(() => n.question);
-    const o = T(() => n.question.inputStyle);
+    const o = R(() => n.question.inputStyle);
     return (e, s) => {
       const i = q("sv-character-counter");
       return e.question.getMaxLength() ? (t(), u("div", as, [
@@ -557,7 +558,7 @@ const We = /* @__PURE__ */ g({
           max: e.question.renderedMax,
           step: e.question.renderedStep,
           size: e.question.renderedInputSize,
-          style: I(o.value),
+          style: w(o.value),
           id: e.question.inputId,
           list: e.question.dataListId,
           placeholder: e.question.renderedPlaceholder,
@@ -589,7 +590,7 @@ const We = /* @__PURE__ */ g({
         max: e.question.renderedMax,
         step: e.question.renderedStep,
         size: e.question.renderedInputSize,
-        style: I(o.value),
+        style: w(o.value),
         id: e.question.inputId,
         list: e.question.dataListId,
         placeholder: e.question.renderedPlaceholder,
@@ -609,10 +610,7 @@ const We = /* @__PURE__ */ g({
       }, null, 46, rs));
     };
   }
-}), ms = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], cs = /* @__PURE__ */ p("legend", {
-  role: "presentation",
-  class: "sv-hidden"
-}, null, -1), ps = /* @__PURE__ */ g({
+}), ms = ["role", "aria-required", "aria-label", "aria-labelledby", "aria-invalid", "aria-describedby"], cs = { class: "sv-hidden" }, ps = /* @__PURE__ */ g({
   __name: "Checkbox",
   props: {
     question: {}
@@ -632,15 +630,15 @@ const We = /* @__PURE__ */ g({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
       }, [
-        cs,
-        e.question.hasHeadItems ? (t(!0), u(w, { key: 0 }, B(e.question.headItems, (c, v) => (t(), y(i, {
+        p("legend", cs, I(e.question.locTitle.renderedHtml), 1),
+        e.question.hasHeadItems ? (t(!0), u(S, { key: 0 }, B(e.question.headItems, (c, v) => (t(), y(i, {
           key: c.value,
           class: l(e.question.getItemClass(c)),
           question: e.question,
           item: c,
           index: "" + v
         }, null, 8, ["class", "question", "item", "index"]))), 128)) : d("", !0),
-        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 1 }, B(e.question.bodyItems, (c, v) => (t(), y(i, {
+        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(S, { key: 1 }, B(e.question.bodyItems, (c, v) => (t(), y(i, {
           key: c.value,
           class: l(e.question.getItemClass(c)),
           question: e.question,
@@ -651,7 +649,7 @@ const We = /* @__PURE__ */ g({
           key: 2,
           class: l(e.question.cssClasses.rootRow)
         }, [
-          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.dataChoices, (c, v) => (t(), y(i, {
+          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(S, { key: 0 }, B(e.question.dataChoices, (c, v) => (t(), y(i, {
             key: c.value,
             class: l(e.question.getItemClass(c)),
             question: e.question,
@@ -663,12 +661,12 @@ const We = /* @__PURE__ */ g({
           key: 3,
           class: l(e.question.cssClasses.rootMultiColumn)
         }, [
-          (t(!0), u(w, null, B(e.question.columns, (c, v) => (t(), u("div", {
+          (t(!0), u(S, null, B(e.question.columns, (c, v) => (t(), u("div", {
             key: v,
             class: l(e.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, B(c, (m, b) => (t(), y(i, {
+            (t(!0), u(S, null, B(c, (m, b) => (t(), y(i, {
               key: m.value,
               class: l(e.question.getItemClass(m)),
               question: e.question,
@@ -677,7 +675,7 @@ const We = /* @__PURE__ */ g({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 128))
         ], 2)) : d("", !0),
-        e.question.hasFootItems ? (t(!0), u(w, { key: 4 }, B(e.question.footItems, (c, v) => (t(), y(i, {
+        e.question.hasFootItems ? (t(!0), u(S, { key: 4 }, B(e.question.footItems, (c, v) => (t(), y(i, {
           key: c.value,
           class: l(e.question.getItemClass(c)),
           question: e.question,
@@ -700,7 +698,7 @@ const We = /* @__PURE__ */ g({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const n = r, o = T({
+    const n = r, o = R({
       get() {
         return n.question.isAllSelected || "";
       },
@@ -718,7 +716,8 @@ const We = /* @__PURE__ */ g({
           e.item == e.question.selectAllItem ? P((t(), u("input", {
             key: 0,
             type: "checkbox",
-            name: e.question.name,
+            role: "option",
+            name: e.question.name + e.item.value,
             value: o.value,
             "onUpdate:modelValue": s[0] || (s[0] = (a) => o.value = a),
             id: e.question.getItemId(e.item),
@@ -730,7 +729,8 @@ const We = /* @__PURE__ */ g({
           e.item != e.question.selectAllItem ? P((t(), u("input", {
             key: 1,
             type: "checkbox",
-            name: e.question.name,
+            role: "option",
+            name: e.question.name + e.item.value,
             value: e.item.value,
             "onUpdate:modelValue": s[1] || (s[1] = (a) => e.question.renderedValue = a),
             id: e.question.getItemId(e.item),
@@ -784,7 +784,7 @@ const We = /* @__PURE__ */ g({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
       }, [
-        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.bodyItems, (c, v) => (t(), y(i, {
+        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(S, { key: 0 }, B(e.question.bodyItems, (c, v) => (t(), y(i, {
           key: c.value,
           class: l(e.question.getItemClass(c)),
           question: e.question,
@@ -795,7 +795,7 @@ const We = /* @__PURE__ */ g({
           key: 1,
           class: l(e.question.cssClasses.rootRow)
         }, [
-          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.dataChoices, (c, v) => (t(), y(i, {
+          !e.question.hasColumns && e.question.blockedRow ? (t(!0), u(S, { key: 0 }, B(e.question.dataChoices, (c, v) => (t(), y(i, {
             key: c.value,
             class: l(e.question.getItemClass(c)),
             question: e.question,
@@ -807,11 +807,11 @@ const We = /* @__PURE__ */ g({
           key: 2,
           class: l(e.question.cssClasses.rootMultiColumn)
         }, [
-          e.question.hasColumns ? (t(!0), u(w, { key: 0 }, B(e.question.columns, (c, v) => (t(), u("div", {
+          e.question.hasColumns ? (t(!0), u(S, { key: 0 }, B(e.question.columns, (c, v) => (t(), u("div", {
             class: l(e.question.getColumnClass()),
             role: "presentation"
           }, [
-            (t(!0), u(w, null, B(c, (m, b) => (t(), y(i, {
+            (t(!0), u(S, null, B(c, (m, b) => (t(), y(i, {
               key: m.value,
               class: l(e.question.getItemClass(m)),
               question: e.question,
@@ -820,7 +820,7 @@ const We = /* @__PURE__ */ g({
             }, null, 8, ["class", "question", "item", "index"]))), 128))
           ], 2))), 256)) : d("", !0)
         ], 2)) : d("", !0),
-        e.question.hasFootItems ? (t(!0), u(w, { key: 3 }, B(e.question.footItems, (c, v) => (t(), y(i, {
+        e.question.hasFootItems ? (t(!0), u(S, { key: 3 }, B(e.question.footItems, (c, v) => (t(), y(i, {
           key: c.value,
           class: l(e.question.getItemClass(c)),
           question: e.question,
@@ -844,7 +844,7 @@ const We = /* @__PURE__ */ g({
       ], 10, Cs);
     };
   }
-}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Rs = /* @__PURE__ */ g({
+}), Is = { role: "presentation" }, ws = ["name", "value", "id", "aria-describedby", "disabled"], Ss = ["xlink:href"], Ts = /* @__PURE__ */ g({
   __name: "RadiogroupItem",
   props: {
     question: {},
@@ -898,7 +898,7 @@ const We = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Ts = ["src", "width", "height"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ g({
+}), Rs = ["src"], $s = ["title"], Bs = { key: 0 }, Ls = /* @__PURE__ */ g({
   __name: "Signaturepad",
   props: {
     question: {}
@@ -911,9 +911,8 @@ const We = /* @__PURE__ */ g({
         class: l(e.question.cssClasses.root),
         ref_key: "root",
         ref: o,
-        style: I({
-          height: e.question.signatureHeight + "px",
-          width: e.question.signatureWidth + "px"
+        style: w({
+          width: e.question.renderedCanvasWidth
         })
       }, [
         P(p("div", {
@@ -930,9 +929,10 @@ const We = /* @__PURE__ */ g({
             key: 0,
             class: l(e.question.cssClasses.backgroundImage),
             src: e.question.backgroundImage,
-            width: e.question.signatureWidth,
-            height: e.question.signatureHeight
-          }, null, 10, Ts)) : d("", !0),
+            style: w({
+              width: e.question.renderedCanvasWidth
+            })
+          }, null, 14, Rs)) : d("", !0),
           p("canvas", {
             tabindex: "0",
             class: l(e.question.cssClasses.canvas)
@@ -1000,7 +1000,7 @@ const We = /* @__PURE__ */ g({
           alt: s.question.altText || s.question.title,
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
-          style: I({
+          style: w({
             objectFit: s.question.imageFit,
             width: s.question.renderedStyleWidth,
             height: s.question.renderedStyleHeight
@@ -1021,7 +1021,7 @@ const We = /* @__PURE__ */ g({
           src: k(e),
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
-          style: I({
+          style: w({
             objectFit: s.question.imageFit,
             width: s.question.renderedStyleWidth,
             height: s.question.renderedStyleHeight
@@ -1041,7 +1041,7 @@ const We = /* @__PURE__ */ g({
           src: k(e),
           width: s.question.renderedWidth,
           height: s.question.renderedHeight,
-          style: I({
+          style: w({
             objectFit: s.question.imageFit,
             width: s.question.renderedStyleWidth,
             height: s.question.renderedStyleHeight
@@ -1070,7 +1070,7 @@ const We = /* @__PURE__ */ g({
       class: l(e.question.cssClasses.root),
       ref_key: "root",
       ref: o
-    }, S(e.question.formatedValue), 3));
+    }, I(e.question.formatedValue), 3));
   }
 }), Es = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Ws = ["id", "multiple", "placeholder"], Vs = /* @__PURE__ */ g({
   __name: "File",
@@ -1080,7 +1080,7 @@ const We = /* @__PURE__ */ g({
   setup(r) {
     const n = r, o = $(null);
     return H(n, o), (e, s) => {
-      const i = q("survey-string"), a = q("sv-file-choose-btn"), c = q("sv-action-bar"), v = q("sv-file-clean-btn"), m = q("sv-loading-indicator"), b = q("sv-file-video"), R = q("sv-file-preview");
+      const i = q("survey-string"), a = q("sv-file-choose-btn"), c = q("sv-action-bar"), v = q("sv-file-clean-btn"), m = q("sv-loading-indicator"), b = q("sv-file-video"), T = q("sv-file-preview");
       return t(), u("div", {
         class: l(e.question.fileRootCss),
         ref_key: "root",
@@ -1144,7 +1144,7 @@ const We = /* @__PURE__ */ g({
               e.question.isEmpty() ? (t(), u("span", {
                 key: 2,
                 class: l(e.question.cssClasses.noFileChosen)
-              }, S(e.question.noFileChosenCaption), 3)) : d("", !0)
+              }, I(e.question.noFileChosenCaption), 3)) : d("", !0)
             ], 2)
           ], 2)) : d("", !0),
           e.question.showRemoveButton ? (t(), y(v, {
@@ -1162,7 +1162,7 @@ const We = /* @__PURE__ */ g({
             key: 3,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
-          e.question.allowShowPreview ? (t(), y(R, {
+          e.question.allowShowPreview ? (t(), y(T, {
             key: 4,
             question: e.question
           }, null, 8, ["question"])) : d("", !0),
@@ -1179,7 +1179,7 @@ const We = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Fs = ["aria-label"], Os = /* @__PURE__ */ g({
+}), Fs = { class: "sv-hidden" }, Os = /* @__PURE__ */ g({
   __name: "Imagepicker",
   props: {
     question: {}
@@ -1193,21 +1193,18 @@ const We = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        p("legend", {
-          role: "radio",
-          "aria-label": e.question.locTitle.renderedHtml
-        }, null, 8, Fs),
-        e.question.hasColumns ? d("", !0) : (t(!0), u(w, { key: 0 }, B(e.question.visibleChoices, (a) => (t(), y(i, {
+        p("legend", Fs, I(e.question.locTitle.renderedHtml), 1),
+        e.question.hasColumns ? d("", !0) : (t(!0), u(S, { key: 0 }, B(e.question.visibleChoices, (a) => (t(), y(i, {
           key: a.value,
           question: e.question,
           item: a
         }, null, 8, ["question", "item"]))), 128)),
-        e.question.hasColumns ? (t(!0), u(w, { key: 1 }, B(e.question.columns, (a, c) => (t(), u("div", {
+        e.question.hasColumns ? (t(!0), u(S, { key: 1 }, B(e.question.columns, (a, c) => (t(), u("div", {
           class: l(e.question.getColumnClass()),
           key: c,
           role: "presentation"
         }, [
-          (t(!0), u(w, null, B(a, (v) => (t(), y(i, {
+          (t(!0), u(S, null, B(a, (v) => (t(), y(i, {
             key: v.value,
             question: e.question,
             item: v
@@ -1288,7 +1285,7 @@ const We = /* @__PURE__ */ g({
                 src: k(e),
                 width: s.question.renderedImageWidth,
                 height: s.question.renderedImageHeight,
-                style: I({ objectFit: s.question.imageFit }),
+                style: w({ objectFit: s.question.imageFit }),
                 alt: s.item.locText.renderedHtml,
                 onLoad: i[2] || (i[2] = (v) => {
                   s.question.onContentLoaded(s.item, v);
@@ -1304,7 +1301,7 @@ const We = /* @__PURE__ */ g({
                 src: k(e),
                 width: s.question.renderedImageWidth,
                 height: s.question.renderedImageHeight,
-                style: I({ objectFit: s.question.imageFit }),
+                style: w({ objectFit: s.question.imageFit }),
                 onLoadedmetadata: i[4] || (i[4] = (v) => {
                   s.question.onContentLoaded(s.item, v);
                 }),
@@ -1315,7 +1312,7 @@ const We = /* @__PURE__ */ g({
               !k(e) || s.item.contentNotLoaded ? (t(), u("div", {
                 key: 3,
                 class: l(s.question.cssClasses.itemNoImage),
-                style: I({
+                style: w({
                   width: s.question.renderedImageWidth + "px",
                   height: s.question.renderedImageHeight + "px",
                   objectFit: s.question.imageFit
@@ -1381,7 +1378,7 @@ const We = /* @__PURE__ */ g({
         "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
         "aria-invalid": s.question.a11y_input_ariaInvalid,
         "aria-describedby": s.question.a11y_input_ariaDescribedBy,
-        style: I({ resize: s.question.resizeStyle })
+        style: w({ resize: s.question.resizeStyle })
       }, null, 46, Gs)) : !s.question.isReadOnlyRenderDiv() && s.question.getMaxLength() ? (t(), u("div", {
         key: 1,
         ref_key: "root",
@@ -1409,7 +1406,7 @@ const We = /* @__PURE__ */ g({
           "aria-labelledby": s.question.a11y_input_ariaLabelledBy,
           "aria-invalid": s.question.a11y_input_ariaInvalid,
           "aria-describedby": s.question.a11y_input_ariaDescribedBy,
-          style: I({ resize: s.question.resizeStyle })
+          style: w({ resize: s.question.resizeStyle })
         }, null, 46, Xs),
         C(a, {
           counter: s.question.characterCounter,
@@ -1419,7 +1416,7 @@ const We = /* @__PURE__ */ g({
         key: 2,
         ref_key: "root",
         ref: o
-      }, S(s.question.value), 513));
+      }, I(s.question.value), 513));
     };
   }
 }), Ys = /* @__PURE__ */ g({
@@ -1465,7 +1462,7 @@ const sn = /* @__PURE__ */ g({
       n.question.onClick(a);
     }, s = (a) => {
       n.question.onKeyUp(a);
-    }, i = T({
+    }, i = R({
       get() {
         var a;
         return (a = n.question.value) != null ? a : "";
@@ -1490,10 +1487,10 @@ const sn = /* @__PURE__ */ g({
             disabled: "",
             id: a.question.inputId,
             class: l(a.question.getControlClass())
-          }, S(a.question.readOnlyText), 11, en)) : P((t(), u("select", {
+          }, I(a.question.readOnlyText), 11, en)) : P((t(), u("select", {
             key: 0,
             id: a.question.inputId,
-            "onUpdate:modelValue": c[0] || (c[0] = (R) => i.value = R),
+            "onUpdate:modelValue": c[0] || (c[0] = (T) => i.value = T),
             onClick: e,
             onKeyup: s,
             autocomplete: a.question.autocomplete,
@@ -1504,10 +1501,10 @@ const sn = /* @__PURE__ */ g({
             "aria-describedby": a.question.ariaDescribedBy,
             required: a.question.isRequired
           }, [
-            a.question.allowClear ? (t(), u("option", xs, S(a.question.placeholder), 1)) : d("", !0),
-            (t(!0), u(w, null, B(a.question.visibleChoices, (R) => (t(), y(v, {
-              item: R,
-              key: R.id
+            a.question.allowClear ? (t(), u("option", xs, I(a.question.placeholder), 1)) : d("", !0),
+            (t(!0), u(S, null, B(a.question.visibleChoices, (T) => (t(), y(v, {
+              item: T,
+              key: T.id
             }, null, 8, ["item"]))), 128))
           ], 42, Zs)), [
             [ve, i.value]
@@ -1540,15 +1537,15 @@ const sn = /* @__PURE__ */ g({
     return L(() => n.item), (e, s) => (t(), u("option", {
       value: e.item.value,
       disabled: !e.item.isEnabled
-    }, S(k(o)), 9, nn));
+    }, I(k(o)), 9, nn));
   }
-}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
+}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     question: {}
   },
   setup(r) {
-    const n = r, o = $(null), e = T(() => {
+    const n = r, o = $(null), e = R(() => {
       const h = n.question;
       return h.dropdownListModel || (h.dropdownListModel = new Ie(h)), n.question.dropdownListModel;
     }), s = (h) => {
@@ -1574,11 +1571,11 @@ const sn = /* @__PURE__ */ g({
     }, b = (h) => {
       var D;
       (D = e.value) == null || D.onFocus(h);
-    }, R = (h) => {
+    }, T = (h) => {
       e.value.inputStringRendered = h.target.value;
-    }, f = T(
+    }, f = R(
       () => n.question.showSelectedItemLocText
-    ), M = T(() => n.question.selectedItemLocText);
+    ), M = R(() => n.question.selectedItemLocText);
     return L(() => e.value), J(v), A(v), (h, D) => {
       const E = q("survey-string"), V = q("sv-svg-icon"), G = q("sv-popup");
       return t(), u("div", {
@@ -1607,7 +1604,7 @@ const sn = /* @__PURE__ */ g({
             key: 0,
             class: l(h.question.cssClasses.hintPrefix)
           }, [
-            p("span", null, S(e.value.hintStringPrefix), 1)
+            p("span", null, I(e.value.hintStringPrefix), 1)
           ], 2)) : d("", !0),
           p("div", {
             class: l(h.question.cssClasses.controlValue)
@@ -1620,8 +1617,8 @@ const sn = /* @__PURE__ */ g({
               key: 1,
               class: l(h.question.cssClasses.hintSuffix)
             }, [
-              p("span", ln, S(e.value.inputStringRendered), 1),
-              p("span", null, S(e.value.hintStringSuffix), 1)
+              p("span", ln, I(e.value.inputStringRendered), 1),
+              p("span", null, I(e.value.hintStringSuffix), 1)
             ], 2)) : d("", !0),
             h.question.showInputFieldComponent ? (t(), y(N(h.question.inputFieldComponentName), {
               key: 2,
@@ -1642,9 +1639,11 @@ const sn = /* @__PURE__ */ g({
               readonly: e.value.searchEnabled ? void 0 : !0,
               "aria-expanded": h.question.ariaExpanded === null ? void 0 : h.question.ariaExpanded === "true",
               "aria-controls": e.value.listElementId,
+              "aria-label": h.question.a11y_input_ariaLabel,
+              "aria-labelledby": h.question.a11y_input_ariaLabelledBy,
               "aria-activedescendant": e.value.ariaActivedescendant,
               placeholder: e.value.placeholderRendered,
-              onInput: R,
+              onInput: T,
               onBlur: m,
               onFocus: b
             }, null, 42, rn)
@@ -1674,7 +1673,7 @@ const sn = /* @__PURE__ */ g({
             key: 0,
             locString: h.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
-          p("div", null, S(h.question.readOnlyText), 1)
+          p("div", null, I(h.question.readOnlyText), 1)
         ], 10, an)) : (t(), y(G, {
           key: 1,
           model: h.question.dropdownListModel.popupModel
@@ -1721,7 +1720,7 @@ const sn = /* @__PURE__ */ g({
     question: {}
   },
   setup(r) {
-    const n = r, o = T(() => {
+    const n = r, o = R(() => {
       const m = n.question;
       return m.dropdownListModel || (m.dropdownListModel = new Se(m)), n.question.dropdownListModel;
     }), e = (m) => {
@@ -1739,9 +1738,9 @@ const sn = /* @__PURE__ */ g({
     }, c = (m) => {
       var b;
       (b = o.value) == null || b.onBlur(m);
-    }, v = T(() => n.question.selectedChoices);
+    }, v = R(() => n.question.selectedChoices);
     return L(() => o.value), (m, b) => {
-      const R = q("sv-tagbox-item"), f = q("sv-tagbox-filter"), M = q("sv-svg-icon"), h = q("sv-popup");
+      const T = q("sv-tagbox-item"), f = q("sv-tagbox-filter"), M = q("sv-svg-icon"), h = q("sv-popup");
       return t(), u("div", {
         class: l(m.question.cssClasses.selectWrapper),
         onClick: e
@@ -1767,7 +1766,7 @@ const sn = /* @__PURE__ */ g({
           p("div", {
             class: l(m.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, B(v.value, (D, E) => (t(), y(R, {
+            (t(!0), u(S, null, B(v.value, (D, E) => (t(), y(T, {
               item: D,
               question: m.question,
               key: "item" + E
@@ -1798,7 +1797,7 @@ const sn = /* @__PURE__ */ g({
           id: m.question.inputId,
           class: l(m.question.getControlClass())
         }, [
-          p("div", null, S(m.question.readOnlyText), 1)
+          p("div", null, I(m.question.readOnlyText), 1)
         ], 10, cn)) : (t(), y(h, {
           key: 1,
           model: o.value.popupModel
@@ -1817,7 +1816,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
+}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1843,7 +1842,7 @@ const sn = /* @__PURE__ */ g({
           key: 0,
           class: l(a.question.cssClasses.hintPrefix)
         }, [
-          p("span", null, S(a.model.hintStringPrefix), 1)
+          p("span", null, I(a.model.hintStringPrefix), 1)
         ], 2)) : d("", !0),
         p("div", {
           class: l(a.question.cssClasses.hintSuffixWrapper)
@@ -1856,8 +1855,8 @@ const sn = /* @__PURE__ */ g({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            p("span", vn, S(a.model.inputStringRendered), 1),
-            p("span", null, S(a.model.hintStringSuffix), 1)
+            p("span", vn, I(a.model.inputStringRendered), 1),
+            p("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(p("input", {
             type: "text",
@@ -1870,6 +1869,8 @@ const sn = /* @__PURE__ */ g({
             role: a.model.filterStringEnabled ? a.question.ariaRole : void 0,
             "aria-expanded": a.question.ariaExpanded === null ? void 0 : a.question.ariaExpanded === "true",
             "aria-controls": a.model.listElementId,
+            "aria-label": a.question.a11y_input_ariaLabel,
+            "aria-labelledby": a.question.a11y_input_ariaLabelledBy,
             "aria-activedescendant": a.model.ariaActivedescendant,
             id: a.question.getInputId(),
             readonly: a.model.searchEnabled ? void 0 : !0,
@@ -1935,7 +1936,7 @@ const sn = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        s.question.selectToRankEnabled ? d("", !0) : (t(!0), u(w, { key: 0 }, B(s.question.rankingChoices, (c, v) => (t(), y(a, {
+        s.question.selectToRankEnabled ? d("", !0) : (t(!0), u(S, { key: 0 }, B(s.question.rankingChoices, (c, v) => (t(), y(a, {
           key: c.value + "-" + v + "-item",
           class: l(s.question.getItemClass(c)),
           text: c.locText,
@@ -1950,7 +1951,7 @@ const sn = /* @__PURE__ */ g({
           class: l(s.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (t(!0), u(w, null, B(s.question.unRankingChoices, (c, v) => (t(), y(a, {
+          (t(!0), u(S, null, B(s.question.unRankingChoices, (c, v) => (t(), y(a, {
             key: c.value + "-" + v + "-item",
             class: l(s.question.getItemClass(c)),
             text: c.locText,
@@ -1964,7 +1965,7 @@ const sn = /* @__PURE__ */ g({
           s.question.unRankingChoices.length === 0 ? (t(), u("div", {
             key: 0,
             class: l(s.question.cssClasses.containerPlaceholder)
-          }, S(s.question.selectToRankEmptyRankedAreaText), 3)) : d("", !0)
+          }, I(s.question.selectToRankEmptyRankedAreaText), 3)) : d("", !0)
         ], 2)) : d("", !0),
         s.question.selectToRankEnabled ? (t(), u("div", {
           key: 2,
@@ -1975,7 +1976,7 @@ const sn = /* @__PURE__ */ g({
           class: l(s.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (t(!0), u(w, null, B(s.question.rankingChoices, (c, v) => (t(), y(a, {
+          (t(!0), u(S, null, B(s.question.rankingChoices, (c, v) => (t(), y(a, {
             key: c.value + "-" + v + "-item",
             class: l(s.question.getItemClass(c)),
             text: c.locText,
@@ -1988,7 +1989,7 @@ const sn = /* @__PURE__ */ g({
           s.question.rankingChoices.length === 0 ? (t(), u("div", {
             key: 0,
             class: l(s.question.cssClasses.containerPlaceholder)
-          }, S(s.question.selectToRankEmptyUnrankedAreaText), 3)) : d("", !0)
+          }, I(s.question.selectToRankEmptyUnrankedAreaText), 3)) : d("", !0)
         ], 2)) : d("", !0)
       ], 2);
     };
@@ -2056,7 +2057,7 @@ const sn = /* @__PURE__ */ g({
             !o.unrankedItem && o.indexText ? (t(), u("div", {
               key: 0,
               class: l(o.question.getItemIndexClasses(o.item))
-            }, S(o.indexText), 3)) : (t(), u("div", {
+            }, I(o.indexText), 3)) : (t(), u("div", {
               key: 1,
               class: l(o.question.getItemIndexClasses(o.item))
             }, [
@@ -2076,7 +2077,7 @@ const sn = /* @__PURE__ */ g({
       ], 42, bn);
     };
   }
-}), Rn = { role: "radiogroup" }, Tn = /* @__PURE__ */ p("legend", {
+}), Tn = { role: "radiogroup" }, Rn = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
 }, null, -1), $n = /* @__PURE__ */ g({
@@ -2095,8 +2096,8 @@ const sn = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        p("fieldset", Rn, [
-          Tn,
+        p("fieldset", Tn, [
+          Rn,
           s.question.hasMinLabel ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.minText)
@@ -2105,7 +2106,7 @@ const sn = /* @__PURE__ */ g({
               locString: s.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : d("", !0),
-          (t(!0), u(w, null, B(s.question.renderedRateItems, (c, v) => (t(), y(N(s.question.itemComponent), {
+          (t(!0), u(S, null, B(s.question.renderedRateItems, (c, v) => (t(), y(N(s.question.itemComponent), {
             key: e(v),
             item: c,
             index: v,
@@ -2176,7 +2177,7 @@ const sn = /* @__PURE__ */ g({
       return t(), u("label", {
         key: o.item.value,
         onMousedown: e[1] || (e[1] = (i) => o.question.onMouseDown()),
-        style: I(o.question.getItemStyle(o.item.itemValue, o.item.highlight)),
+        style: w(o.question.getItemStyle(o.item.itemValue, o.item.highlight)),
         class: l(o.question.getItemClass(o.item.itemValue, o.item.highlight)),
         onMouseover: e[2] || (e[2] = (i) => o.question.onItemMouseIn(o.item)),
         onMouseleave: e[3] || (e[3] = (i) => o.question.onItemMouseOut(o.item))
@@ -2552,14 +2553,14 @@ const jn = /* @__PURE__ */ g({
         ref: o
       }, [
         p("tbody", null, [
-          (t(!0), u(w, null, B(e.question.getRows(), (a, c) => (t(), u(w, {
+          (t(!0), u(S, null, B(e.question.getRows(), (a, c) => (t(), u(S, {
             key: e.question.inputId + "rowkey" + c
           }, [
             a.isVisible ? (t(), u("tr", {
               key: 0,
               class: l(e.question.cssClasses.row)
             }, [
-              (t(!0), u(w, null, B(a.cells, (v) => (t(), u("td", {
+              (t(!0), u(S, null, B(a.cells, (v) => (t(), u("td", {
                 key: "item" + v.item.editor.id,
                 class: l(v.className)
               }, [
@@ -2583,7 +2584,7 @@ const jn = /* @__PURE__ */ g({
   setup(r) {
     const n = r, o = (s) => se(s);
     L(() => n.cell.item.editor);
-    const e = T(() => n.cell.item);
+    const e = R(() => n.cell.item);
     return (s, i) => {
       const a = q("survey-string"), c = q("survey-errors");
       return s.cell.isErrorsCell ? (t(), y(c, {
@@ -2599,7 +2600,7 @@ const jn = /* @__PURE__ */ g({
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.requiredText)
-          }, S(e.value.editor.requiredText), 3)) : d("", !0),
+          }, I(e.value.editor.requiredText), 3)) : d("", !0),
           C(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
@@ -2608,7 +2609,7 @@ const jn = /* @__PURE__ */ g({
             key: 2,
             "aria-hidden": "true",
             class: l(s.question.cssClasses.requiredText)
-          }, S(e.value.editor.requiredText), 3)) : d("", !0)
+          }, I(e.value.editor.requiredText), 3)) : d("", !0)
         ], 2),
         (t(), u("div", {
           key: e.value.editor.id,
@@ -2622,7 +2623,7 @@ const jn = /* @__PURE__ */ g({
       ], 2));
     };
   }
-}), Jn = ["aria-label"], Yn = { key: 0 }, Zn = { key: 0 }, xn = ["onClick"], eo = ["data-responsive-title", "onClick"], so = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], no = ["xlink:href"], oo = /* @__PURE__ */ g({
+}), Jn = { class: "sv-hidden" }, Yn = { key: 0 }, Zn = { key: 0 }, xn = ["onClick"], eo = ["data-responsive-title", "onClick"], so = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], no = ["xlink:href"], oo = /* @__PURE__ */ g({
   __name: "Matrix",
   props: {
     question: {}
@@ -2653,19 +2654,17 @@ const jn = /* @__PURE__ */ g({
         ref: o
       }, [
         p("fieldset", null, [
-          p("legend", {
-            "aria-label": i.question.locTitle.renderedHtml
-          }, null, 8, Jn),
+          p("legend", Jn, I(i.question.locTitle.renderedHtml), 1),
           p("table", {
             class: l(i.question.getTableCss())
           }, [
             i.question.showHeader ? (t(), u("thead", Yn, [
               p("tr", null, [
                 i.question.hasRows ? (t(), u("td", Zn)) : d("", !0),
-                (t(!0), u(w, null, B(i.question.visibleColumns, (v, m) => (t(), u("th", {
+                (t(!0), u(S, null, B(i.question.visibleColumns, (v, m) => (t(), u("th", {
                   key: m,
                   class: l(i.question.cssClasses.headerCell),
-                  style: I({
+                  style: w({
                     minWidth: i.question.columnMinWidth,
                     width: i.question.columnMinWidth
                   })
@@ -2677,13 +2676,13 @@ const jn = /* @__PURE__ */ g({
               ])
             ])) : d("", !0),
             p("tbody", null, [
-              (t(!0), u(w, null, B(e.value, (v, m) => (t(), u("tr", {
+              (t(!0), u(S, null, B(e.value, (v, m) => (t(), u("tr", {
                 key: "row_" + v.name + "_" + m,
                 class: l(v.rowClasses || void 0)
               }, [
                 P(p("td", {
                   class: l(i.question.cssClasses.rowTextCell),
-                  style: I({
+                  style: w({
                     minWidth: i.question.rowTitleWidth,
                     width: i.question.rowTitleWidth
                   })
@@ -2694,8 +2693,8 @@ const jn = /* @__PURE__ */ g({
                 ], 6), [
                   [_, i.question.hasRows]
                 ]),
-                i.question.hasCellText ? (t(!0), u(w, { key: 0 }, B(i.question.visibleColumns, (b, R) => (t(), u("td", {
-                  key: R,
+                i.question.hasCellText ? (t(!0), u(S, { key: 0 }, B(i.question.visibleColumns, (b, T) => (t(), u("td", {
+                  key: T,
                   class: l(i.question.getItemClass(v, b)),
                   onClick: (f) => s(v, b)
                 }, [
@@ -2703,8 +2702,8 @@ const jn = /* @__PURE__ */ g({
                     locString: i.question.getCellDisplayLocText(v.name, b)
                   }, null, 8, ["locString"])
                 ], 10, xn))), 128)) : d("", !0),
-                i.question.hasCellText ? d("", !0) : (t(!0), u(w, { key: 1 }, B(i.question.visibleColumns, (b, R) => (t(), u("td", {
-                  key: R,
+                i.question.hasCellText ? d("", !0) : (t(!0), u(S, { key: 1 }, B(i.question.visibleColumns, (b, T) => (t(), u("td", {
+                  key: T,
                   "data-responsive-title": b.locText.renderedHtml,
                   class: l(i.question.cssClasses.cell),
                   onClick: (f) => s(v, b)
@@ -2720,7 +2719,7 @@ const jn = /* @__PURE__ */ g({
                       "onUpdate:modelValue": (f) => v.value = f,
                       value: b.value,
                       disabled: i.question.isInputReadOnly,
-                      id: i.question.inputId + "_" + v.name + "_" + R,
+                      id: i.question.inputId + "_" + v.name + "_" + T,
                       "aria-required": i.question.ariaRequired,
                       "aria-label": b.locText.renderedHtml,
                       "aria-invalid": i.question.ariaInvalid,
@@ -2780,7 +2779,7 @@ const jn = /* @__PURE__ */ g({
     question: {}
   },
   setup(r) {
-    const n = r, o = T(() => n.question.renderedTable);
+    const n = r, o = R(() => n.question.renderedTable);
     return L(
       () => o.value,
       (e) => {
@@ -2797,7 +2796,7 @@ const jn = /* @__PURE__ */ g({
     ), (e, s) => {
       const i = q("survey-string"), a = q("survey-matrixheaderrequired"), c = q("survey-matrixcell");
       return t(), u("div", {
-        style: I({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
+        style: w({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: l(e.question.cssClasses.tableWrapper)
       }, [
         p("table", {
@@ -2805,11 +2804,11 @@ const jn = /* @__PURE__ */ g({
         }, [
           o.value.showHeader ? (t(), u("thead", io, [
             p("tr", null, [
-              (t(!0), u(w, null, B(o.value.headerRow.cells, (v) => (t(), u(w, null, [
+              (t(!0), u(S, null, B(o.value.headerRow.cells, (v) => (t(), u(S, null, [
                 v.hasTitle ? (t(), u("th", {
                   class: l(v.className),
                   key: "header_" + v.id,
-                  style: I({ minWidth: v.minWidth, width: v.width })
+                  style: w({ minWidth: v.minWidth, width: v.width })
                 }, [
                   C(i, {
                     locString: v.locTitle
@@ -2823,13 +2822,13 @@ const jn = /* @__PURE__ */ g({
                 v.hasTitle ? d("", !0) : (t(), u("td", {
                   class: l(v.className),
                   key: "header_" + v.id,
-                  style: I({ minWidth: v.minWidth, width: v.width })
+                  style: w({ minWidth: v.minWidth, width: v.width })
                 }, null, 6))
               ], 64))), 256))
             ])
           ])) : d("", !0),
           p("tbody", null, [
-            (t(!0), u(w, null, B(o.value.rows, (v) => (t(), u(w, {
+            (t(!0), u(S, null, B(o.value.rows, (v) => (t(), u(S, {
               key: e.question.inputId + "_" + v.id
             }, [
               v.visible ? (t(), u("tr", {
@@ -2837,7 +2836,7 @@ const jn = /* @__PURE__ */ g({
                 "data-sv-drop-target-matrix-row": v.row && v.row.id,
                 class: l(v.className)
               }, [
-                (t(!0), u(w, null, B(v.cells, (m, b) => (t(), y(c, {
+                (t(!0), u(S, null, B(v.cells, (m, b) => (t(), y(c, {
                   cell: m,
                   question: e.question,
                   key: v.id + "_" + b
@@ -2847,7 +2846,7 @@ const jn = /* @__PURE__ */ g({
           ]),
           o.value.showFooter ? (t(), u("tfoot", ro, [
             p("tr", null, [
-              (t(!0), u(w, null, B(o.value.footerRow.cells, (v, m) => (t(), y(c, {
+              (t(!0), u(S, null, B(o.value.footerRow.cells, (v, m) => (t(), y(c, {
                 cell: v,
                 question: e.question,
                 key: "footer_" + m
@@ -2866,12 +2865,12 @@ const jn = /* @__PURE__ */ g({
   },
   setup(r) {
     const n = r;
-    return L(() => n.column), (o, e) => o.column.isRenderedRequired ? (t(), u(w, { key: 0 }, [
+    return L(() => n.column), (o, e) => o.column.isRenderedRequired ? (t(), u(S, { key: 0 }, [
       uo,
       o.column.isRenderedRequired ? (t(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
-      }, S(o.column.requiredText), 3)) : d("", !0)
+      }, I(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
 }), co = ["data-responsive-title", "title", "colspan"], po = /* @__PURE__ */ g({
@@ -2888,27 +2887,27 @@ const jn = /* @__PURE__ */ g({
       c(), n.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
         c();
       });
-      const m = e.value, b = n.cell.question, R = {
+      const m = e.value, b = n.cell.question, T = {
         cell: n.cell.cell,
         cellQuestion: b,
         htmlElement: m,
         row: n.cell.row,
         column: n.cell.cell.column
       };
-      n.question.survey.matrixAfterCellRender(n.question, R), b && b.afterRenderCore(m);
+      n.question.survey.matrixAfterCellRender(n.question, T), b && b.afterRenderCore(m);
     }), (m, b) => {
-      const R = q("survey-errors"), f = q("sv-matrix-drag-drop-icon"), M = q("sv-action-bar"), h = q("survey-radiogroup-item"), D = q("survey-checkbox-item"), E = q("survey-other-choice"), V = q("survey-string");
+      const T = q("survey-errors"), f = q("sv-matrix-drag-drop-icon"), M = q("sv-action-bar"), h = q("survey-radiogroup-item"), D = q("survey-checkbox-item"), E = q("survey-other-choice"), V = q("survey-string");
       return t(), u("td", {
         class: l(m.cell.className),
         "data-responsive-title": s(),
         title: m.cell.getTitle(),
-        style: I(i()),
+        style: w(i()),
         colspan: m.cell.colSpans,
         onFocusin: b[0] || (b[0] = (G) => m.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
-        m.cell.isErrorsCell ? (t(), y(R, {
+        m.cell.isErrorsCell ? (t(), y(T, {
           key: 0,
           element: m.cell.question
         }, null, 8, ["element"])) : d("", !0),
@@ -2970,7 +2969,7 @@ const jn = /* @__PURE__ */ g({
         m.cell.requiredText ? (t(), u("span", {
           key: 6,
           class: l(m.question.cssClasses.cellRequiredText)
-        }, S(m.cell.requiredText), 3)) : d("", !0)
+        }, I(m.cell.requiredText), 3)) : d("", !0)
       ], 46, co);
     };
   }
@@ -3060,8 +3059,8 @@ const jn = /* @__PURE__ */ g({
 });
 function ne(r, n = !0) {
   return {
-    question: T(() => r.item.data.question),
-    row: n ? T(() => r.item.data.row) : void 0
+    question: R(() => r.item.data.question),
+    row: n ? R(() => r.item.data.row) : void 0
   };
 }
 const qo = ["disabled"], yo = /* @__PURE__ */ g({
@@ -3161,14 +3160,14 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
         };
       }
     );
-    const s = T(() => {
+    const s = R(() => {
       if (n.question.isRenderModeList)
         return n.question.panels;
       const a = [];
       return n.question.currentPanel && a.push(n.question.currentPanel), a;
     }), i = () => n.question.showLegacyNavigation;
     return (a, c) => {
-      const v = q("survey-string"), m = q("sv-paneldynamic-add-btn"), b = q("survey-paneldynamicprogress"), R = q("survey-panel"), f = q("sv-paneldynamic-remove-btn"), M = q("survey-paneldynamicprogress-v2");
+      const v = q("survey-string"), m = q("sv-paneldynamic-add-btn"), b = q("survey-paneldynamicprogress"), T = q("survey-panel"), f = q("sv-paneldynamic-remove-btn"), M = q("survey-paneldynamicprogress-v2");
       return t(), u("div", {
         class: l(a.question.cssClasses.root),
         ref_key: "root",
@@ -3193,7 +3192,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
         }, [
           p("div", {
             class: l(a.question.cssClasses.progressBar),
-            style: I({ width: a.question.progress }),
+            style: w({ width: a.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3201,13 +3200,13 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
           key: 2,
           question: a.question
         }, null, 8, ["question"])) : d("", !0),
-        (t(!0), u(w, null, B(s.value, (h, D) => (t(), u(w, {
+        (t(!0), u(S, null, B(s.value, (h, D) => (t(), u(S, {
           key: h.id
         }, [
           p("div", {
             class: l(a.question.getPanelWrapperCss())
           }, [
-            C(R, {
+            C(T, {
               question: h,
               css: a.css
             }, null, 8, ["question", "css"]),
@@ -3264,7 +3263,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
             }, [
               p("div", {
                 class: l(e.question.cssClasses.progressBar),
-                style: I({ width: e.question.progress }),
+                style: w({ width: e.question.progress }),
                 role: "progressbar"
               }, null, 6)
             ], 2)) : d("", !0),
@@ -3303,7 +3302,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
         }, [
           p("div", {
             class: l(n.question.cssClasses.progressBar),
-            style: I({ width: n.question.progress }),
+            style: w({ width: n.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3320,7 +3319,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
   }
 });
 function Q(r) {
-  return T(
+  return R(
     () => r.item && r.item.data.question || r.data.question
   );
 }
@@ -3342,10 +3341,10 @@ const wo = /* @__PURE__ */ g({
     }, [
       p("span", {
         class: l(k(o).cssClasses.buttonAddText)
-      }, S(k(o).panelAddText), 3)
+      }, I(k(o).panelAddText), 3)
     ], 2)) : d("", !0);
   }
-}), So = ["title"], Ro = /* @__PURE__ */ g({
+}), So = ["title"], To = /* @__PURE__ */ g({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3369,7 +3368,7 @@ const wo = /* @__PURE__ */ g({
       ], 10, So);
     };
   }
-}), To = ["title"], $o = /* @__PURE__ */ g({
+}), Ro = ["title"], $o = /* @__PURE__ */ g({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3390,7 +3389,7 @@ const wo = /* @__PURE__ */ g({
           iconName: k(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, To);
+      ], 10, Ro);
     };
   }
 }), Bo = /* @__PURE__ */ g({
@@ -3400,7 +3399,7 @@ const wo = /* @__PURE__ */ g({
     data: {}
   },
   setup(r) {
-    const n = r, o = Q(n), e = T(
+    const n = r, o = Q(n), e = R(
       () => n.item && n.item.data.panel || n.data.panel
     ), s = (i) => {
       o.value.isInputReadOnly || o.value.removePanelUI(i);
@@ -3412,7 +3411,7 @@ const wo = /* @__PURE__ */ g({
     }, [
       p("span", {
         class: l(k(o).cssClasses.buttonRemoveText)
-      }, S(k(o).panelRemoveText), 3),
+      }, I(k(o).panelRemoveText), 3),
       p("span", {
         class: l(k(o).cssClasses.iconRemove)
       }, null, 2)
@@ -3428,7 +3427,7 @@ const wo = /* @__PURE__ */ g({
     const o = Q(r);
     return (e, s) => (t(), u("div", {
       class: l(k(o).cssClasses.progressText)
-    }, S(k(o).progressText), 3));
+    }, I(k(o).progressText), 3));
   }
 }), Do = ["id"], Po = /* @__PURE__ */ g({
   __name: "Errors",
@@ -3449,7 +3448,7 @@ const wo = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        (t(!0), u(w, null, B(o.element.errors, (i, a) => (t(), u("div", {
+        (t(!0), u(S, null, B(o.element.errors, (i, a) => (t(), u("div", {
           key: "error_" + a
         }, [
           p("span", {
@@ -3478,7 +3477,7 @@ const wo = /* @__PURE__ */ g({
     commentClass: {}
   },
   setup(r) {
-    return (n, o) => n.question.isReadOnlyRenderDiv() ? (t(), u("div", Mo, S(n.question.comment), 1)) : (t(), u("textarea", {
+    return (n, o) => n.question.isReadOnlyRenderDiv() ? (t(), u("div", Mo, I(n.question.comment), 1)) : (t(), u("textarea", {
       key: 1,
       id: n.question.commentId,
       readonly: n.question.isInputReadOnly,
@@ -3489,7 +3488,7 @@ const wo = /* @__PURE__ */ g({
       placeholder: n.question.renderedCommentPlaceholder,
       "aria-label": n.question.ariaLabel || n.question.a11y_input_ariaLabel,
       "aria-required": n.question.ariaRequired || n.question.a11y_input_ariaRequired,
-      style: I({ resize: n.question.resizeStyle }),
+      style: w({ resize: n.question.resizeStyle }),
       onChange: o[0] || (o[0] = (e) => {
         n.question.onCommentChange(e);
       }),
@@ -3556,19 +3555,19 @@ const wo = /* @__PURE__ */ g({
           key: 1,
           class: l(n.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, S(n.element.requiredText), 3)) : d("", !0),
+        }, I(n.element.requiredText), 3)) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.no ? (t(), u("span", {
           key: 2,
           style: { position: "static" },
           class: l(n.element.cssTitleNumber),
           "aria-hidden": !0
-        }, S(n.element.no), 3)) : d("", !0),
+        }, I(n.element.no), 3)) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.no ? (t(), u("span", Eo, "\xA0")) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", {
           key: 4,
           class: l(n.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, S(n.element.requiredText), 3)) : d("", !0),
+        }, I(n.element.requiredText), 3)) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", Wo, "\xA0")) : d("", !0),
         n.element.isTitleRenderedAsString ? d("", !0) : (t(), y(e, {
           key: 6,
@@ -3579,7 +3578,7 @@ const wo = /* @__PURE__ */ g({
           key: 8,
           class: l(n.element.cssClasses.requiredText),
           "aria-hidden": !0
-        }, S(n.element.requiredText), 3)) : d("", !0)
+        }, I(n.element.requiredText), 3)) : d("", !0)
       ]);
     };
   }
@@ -3590,7 +3589,7 @@ const wo = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const n = r, o = T(() => n.element.getTitleToolbar());
+    const n = r, o = R(() => n.element.getTitleToolbar());
     return (e, s) => {
       const i = q("survey-string"), a = q("survey-element-title-content"), c = q("sv-action-bar");
       return t(), u("div", Oo, [
@@ -3633,7 +3632,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
   },
   setup(r) {
     const n = r, o = $(), e = () => {
-      Re(
+      Te(
         n.size,
         n.width,
         n.height,
@@ -3678,7 +3677,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           a.stopPropagation();
         })
       }, [
-        (t(!0), u(w, null, B(e.model.renderedActions, (a) => (t(), y(i, {
+        (t(!0), u(S, null, B(e.model.renderedActions, (a) => (t(), y(i, {
           key: a.id,
           item: a
         }, null, 8, ["item"]))), 128))
@@ -3691,7 +3690,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     item: {}
   },
   setup(r) {
-    const n = r, o = T(
+    const n = r, o = R(
       () => n.item.component || "sv-action-bar-item"
     );
     return L(() => n.item), (e, s) => {
@@ -3719,8 +3718,8 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       return t(), u("button", {
         class: l(o.item.getActionBarItemCss()),
         type: "button",
-        onClick: e[0] || (e[0] = () => {
-          o.item.action();
+        onClick: e[0] || (e[0] = (i) => {
+          o.item.action(o.item, !!i.pointerType);
         }),
         onKeyup: e[1] || (e[1] = (i) => {
           i.stopPropagation();
@@ -3742,7 +3741,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         o.item.hasTitle ? (t(), u("span", {
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
-        }, S(o.item.title), 3)) : d("", !0)
+        }, I(o.item.title), 3)) : d("", !0)
       ], 42, it);
     };
   }
@@ -3757,14 +3756,14 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     return L(
       () => n.item,
       (s) => {
-        e = new Te(s);
+        e = new Re(s);
       },
       () => {
         e.dispose();
       }
     ), (s, i) => {
       const a = q("sv-svg-icon"), c = q("sv-popup");
-      return t(), u(w, null, [
+      return t(), u(S, null, [
         p("button", {
           type: "button",
           class: l(s.item.getActionBarItemCss()),
@@ -3789,7 +3788,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           s.item.hasTitle ? (t(), u("span", {
             key: 1,
             class: l(s.item.getActionBarItemTitleCss())
-          }, S(s.item.title), 3)) : d("", !0)
+          }, I(s.item.title), 3)) : d("", !0)
         ], 42, rt),
         C(c, {
           model: s.item.popupModel,
@@ -3804,7 +3803,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     item: {}
   },
   setup(r) {
-    const n = r, o = T(() => n.item && n.item.innerCss);
+    const n = r, o = R(() => n.item && n.item.innerCss);
     return (e, s) => (t(), u("div", {
       class: l(["sv-action-bar-separator", o.value])
     }, null, 2));
@@ -3873,7 +3872,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           p("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, S(a.model.emptyMessage), 11, mt)
+          }, I(a.model.emptyMessage), 11, mt)
         ], 2), [
           [_, a.model.isEmpty]
         ]),
@@ -3890,7 +3889,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             a.model.onKeyDown(b);
           })
         }, [
-          (t(!0), u(w, null, B(a.model.renderedActions, (b) => (t(), y(m, {
+          (t(!0), u(S, null, B(a.model.renderedActions, (b) => (t(), y(m, {
             item: b,
             model: a.model,
             key: b.id
@@ -3901,14 +3900,14 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 2);
     };
   }
-}), vt = ["aria-selected", "id"], qt = /* @__PURE__ */ g({
+}), vt = ["aria-selected", "id"], qt = ["title"], yt = /* @__PURE__ */ g({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(r) {
-    const n = r, o = T(() => n.item.elementId), e = (s) => {
+    const n = r, o = R(() => n.item.elementId), e = (s) => {
       n.model.onItemClick(n.item), s.stopPropagation();
     };
     return L(() => n.item), A(() => {
@@ -3931,8 +3930,9 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           class: l(s.model.cssClasses.itemSeparator)
         }, null, 2)) : d("", !0),
         p("div", {
-          style: I({ paddingInlineStart: s.model.getItemIndent(s.item) }),
-          class: l(s.model.cssClasses.itemBody)
+          style: w({ paddingInlineStart: s.model.getItemIndent(s.item) }),
+          class: l(s.model.cssClasses.itemBody),
+          title: s.item.locTitle.calculatedText
         }, [
           s.item.iconName && !s.item.component ? (t(), y(a, {
             key: 0,
@@ -3948,14 +3948,14 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             key: 2,
             item: s.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 6)
+        ], 14, qt)
       ], 10, vt)), [
         [_, s.model.isItemVisible(s.item)],
         [v]
       ]);
     };
   }
-}), yt = /* @__PURE__ */ g({
+}), gt = /* @__PURE__ */ g({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -3989,13 +3989,13 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 512);
     };
   }
-}), gt = { class: "sv-popup__shadow" }, ht = { class: "sv-popup__body-content" }, Ct = {
+}), ht = { class: "sv-popup__shadow" }, Ct = { class: "sv-popup__body-content" }, bt = {
   key: 0,
   class: "sv-popup__body-header"
-}, bt = { class: "sv-popup__scrolling-content" }, kt = { class: "sv-popup__content" }, ft = {
+}, kt = { class: "sv-popup__scrolling-content" }, ft = { class: "sv-popup__content" }, It = {
   key: 1,
   class: "sv-popup__body-footer"
-}, It = /* @__PURE__ */ g({
+}, wt = /* @__PURE__ */ g({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4023,7 +4023,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, [
         p("div", {
           class: "sv-popup__container",
-          style: I({
+          style: w({
             left: s.model.left,
             top: s.model.top,
             height: s.model.height,
@@ -4032,19 +4032,19 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           }),
           onClick: e
         }, [
-          p("div", gt, [
+          p("div", ht, [
             s.model.showHeader ? (t(), y(N(s.model.popupHeaderTemplate), {
               key: 0,
               model: s.model
             }, null, 8, ["model"])) : d("", !0),
-            p("div", ht, [
-              s.model.title ? (t(), u("div", Ct, S(s.model.title), 1)) : d("", !0),
-              p("div", bt, [
-                p("div", kt, [
+            p("div", Ct, [
+              s.model.title ? (t(), u("div", bt, I(s.model.title), 1)) : d("", !0),
+              p("div", kt, [
+                p("div", ft, [
                   (t(), y(N(s.model.contentComponentName), he(Ce(s.model.contentComponentData)), null, 16))
                 ])
               ]),
-              s.model.showFooter ? (t(), u("div", ft, [
+              s.model.showFooter ? (t(), u("div", It, [
                 C(a, {
                   model: s.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4057,7 +4057,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ]);
     };
   }
-}), wt = /* @__PURE__ */ g({
+}), St = /* @__PURE__ */ g({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4065,13 +4065,13 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
   setup(r) {
     return (n, o) => (t(), u("span", {
       class: "sv-popup__pointer",
-      style: I({
+      style: w({
         left: n.model.pointerTarget.left,
         top: n.model.pointerTarget.top
       })
     }, null, 4));
   }
-}), St = {
+}), Tt = {
   key: 0,
   class: "sv-components-column"
 }, Rt = /* @__PURE__ */ g({
@@ -4082,17 +4082,17 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     needRenderWrapper: {}
   },
   setup(r) {
-    const n = r, o = T(
+    const n = r, o = R(
       () => n.survey.getContainerContent(n.container)
     );
-    return (e, s) => o.value.length > 0 ? (t(), u(w, { key: 0 }, [
-      e.needRenderWrapper ? (t(), u("div", St, [
-        (t(!0), u(w, null, B(o.value, (i, a) => (t(), y(N(i.component), {
+    return (e, s) => o.value.length > 0 ? (t(), u(S, { key: 0 }, [
+      e.needRenderWrapper ? (t(), u("div", Tt, [
+        (t(!0), u(S, null, B(o.value, (i, a) => (t(), y(N(i.component), {
           survey: e.survey,
           container: e.container,
           model: i.data
         }, null, 8, ["survey", "container", "model"]))), 256))
-      ])) : (t(!0), u(w, { key: 1 }, B(o.value, (i, a) => (t(), y(N(i.component), {
+      ])) : (t(!0), u(S, { key: 1 }, B(o.value, (i, a) => (t(), y(N(i.component), {
         survey: e.survey,
         model: i.data
       }, null, 8, ["survey", "model"]))), 256))
@@ -4106,13 +4106,13 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     css: {}
   },
   setup(r) {
-    const n = r, o = T(() => n.survey.progressValue + "%"), e = (i) => ie.getProgressTextInBarCss(i), s = (i) => ie.getProgressTextUnderBarCss(i);
+    const n = r, o = R(() => n.survey.progressValue + "%"), e = (i) => ie.getProgressTextInBarCss(i), s = (i) => ie.getProgressTextUnderBarCss(i);
     return (i, a) => (t(), u("div", {
       class: l(i.survey.getProgressCssClasses(i.container))
     }, [
       p("div", {
         class: l(i.survey.css.progressBar),
-        style: I({ width: o.value }),
+        style: w({ width: o.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4120,24 +4120,24 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, [
         p("span", {
           class: l(e(i.survey.css))
-        }, S(i.survey.progressText), 3)
+        }, I(i.survey.progressText), 3)
       ], 6),
       p("span", {
         class: l(s(i.survey.css))
-      }, S(i.survey.progressText), 3)
+      }, I(i.survey.progressText), 3)
     ], 2));
   }
-}), Tt = ["onClick"], $t = ["title"], Bt = ["title"], Lt = /* @__PURE__ */ g({
+}), $t = ["onClick"], Bt = ["title"], Lt = ["title"], Dt = /* @__PURE__ */ g({
   __name: "ProgressButtons",
   props: {
     survey: {}
   },
   setup(r) {
-    const n = r, o = new Be(n.survey), e = $(!1), s = $(), i = T(() => n.survey.css);
+    const n = r, o = new Be(n.survey), e = $(!1), s = $(), i = R(() => n.survey.css);
     let a;
     const c = (f) => o.isListElementClickable(f), v = (f) => o.getListElementCss(f), m = (f) => {
       o.clickListElement(f);
-    }, b = (f, M) => o.getScrollButtonCss(f, M), R = (f) => {
+    }, b = (f, M) => o.getScrollButtonCss(f, M), T = (f) => {
       let M = s.value;
       M.scrollLeft += (f ? -1 : 1) * 70;
     };
@@ -4156,7 +4156,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, [
         p("div", {
           class: l(b(e.value, !0)),
-          onClick: M[0] || (M[0] = (h) => R(!0)),
+          onClick: M[0] || (M[0] = (h) => T(!0)),
           role: "button"
         }, null, 2),
         p("div", {
@@ -4167,7 +4167,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           p("ul", {
             class: l(i.value.progressButtonsList)
           }, [
-            (t(!0), u(w, null, B(f.survey.visiblePages, (h, D) => (t(), u("li", {
+            (t(!0), u(S, null, B(f.survey.visiblePages, (h, D) => (t(), u("li", {
               key: "listelement" + D,
               class: l(v(D)),
               onClick: (E) => c(D) ? m(D) : null
@@ -4175,23 +4175,23 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
               p("div", {
                 class: l(i.value.progressButtonsPageTitle),
                 title: h.renderedNavigationTitle
-              }, S(h.renderedNavigationTitle), 11, $t),
+              }, I(h.renderedNavigationTitle), 11, Bt),
               p("div", {
                 class: l(i.value.progressButtonsPageDescription),
                 title: h.locNavigationDescription.renderedHtml
-              }, S(h.locNavigationDescription.renderedHtml), 11, Bt)
-            ], 10, Tt))), 128))
+              }, I(h.locNavigationDescription.renderedHtml), 11, Lt)
+            ], 10, $t))), 128))
           ], 2)
         ], 2),
         p("div", {
           class: l(b(e.value, !1)),
-          onClick: M[1] || (M[1] = (h) => R(!1)),
+          onClick: M[1] || (M[1] = (h) => T(!1)),
           role: "button"
         }, null, 2)
       ], 2)
     ], 2));
   }
-}), Dt = /* @__PURE__ */ g({
+}), Pt = /* @__PURE__ */ g({
   __name: "ProgressToc",
   props: {
     survey: {}
@@ -4223,25 +4223,25 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 2);
     };
   }
-}), Pt = { onsubmit: "return false;" }, Mt = {
+}), Mt = { onsubmit: "return false;" }, Nt = {
   key: 0,
   class: "sv_custom_header"
-}, Nt = ["id"], Ht = { key: 2 }, _t = ["innerHTML"], At = ["innerHTML"], Et = ["innerHTML"], re = /* @__PURE__ */ g({
+}, Ht = ["id"], _t = { key: 2 }, At = ["innerHTML"], Et = ["innerHTML"], Wt = ["innerHTML"], re = /* @__PURE__ */ g({
   __name: "Survey",
   props: {
     model: {},
     survey: {}
   },
   setup(r) {
-    const n = r, o = $(), e = $(""), s = $(1), i = T(() => {
+    const n = r, o = $(), e = $(""), s = $(1), i = R(() => {
       const f = n.survey ? n.survey : n.model;
       return be(f);
-    }), a = T(() => i.value.activePage ? i.value.activePage.id : ""), c = () => {
+    }), a = R(() => i.value.activePage ? i.value.activePage.id : ""), c = () => {
       const f = a.value;
       return !!i.value && f + s.value.toString();
-    }, v = T(
+    }, v = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
-    ), m = T(() => i.value.css), b = T(() => "page" + c()), R = () => v.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
+    ), m = R(() => i.value.css), b = R(() => "page" + c()), T = () => v.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
     return L(() => i.value), A(() => {
       if (!!i.value) {
         i.value.needRenderIcons && De.renderIcons();
@@ -4257,7 +4257,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       const h = q("survey-popup-modal"), D = q("survey-header"), E = q("survey-page"), V = q("sv-brand-info"), G = q("sv-notifier");
       return t(), u("div", {
         class: l(i.value.getRootCss()),
-        style: I(i.value.themeVariables),
+        style: w(i.value.themeVariables),
         ref_key: "root",
         ref: o
       }, [
@@ -4268,10 +4268,10 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           i.value.renderBackgroundImage ? (t(), u("div", {
             key: 0,
             class: l(m.value.rootBackgroundImage),
-            style: I(i.value.backgroundImageStyle)
+            style: w(i.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          p("form", Pt, [
-            i.value.hasLogo ? d("", !0) : (t(), u("div", Mt)),
+          p("form", Mt, [
+            i.value.hasLogo ? d("", !0) : (t(), u("div", Nt)),
             p("div", {
               class: l(m.value.container)
             }, [
@@ -4295,7 +4295,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                 }, null, 8, ["survey"])),
                 p("div", {
                   class: l(i.value.bodyCss),
-                  style: I({ maxWidth: i.value.renderedWidth }),
+                  style: w({ maxWidth: i.value.renderedWidth }),
                   id: a.value
                 }, [
                   (t(), y(N("sv-components-container"), {
@@ -4314,7 +4314,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                     container: "contentBottom",
                     needRenderWrapper: !0
                   }, null, 8, ["survey"]))
-                ], 14, Nt),
+                ], 14, Ht),
                 (t(), y(N("sv-components-container"), {
                   survey: i.value,
                   container: "right",
@@ -4326,11 +4326,11 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              v.value ? (t(), u("div", Ht, [
+              v.value ? (t(), u("div", _t, [
                 p("div", {
-                  innerHTML: R(),
+                  innerHTML: T(),
                   class: l(i.value.completedCss)
-                }, null, 10, _t),
+                }, null, 10, At),
                 (t(), y(N("sv-components-container"), {
                   survey: i.value,
                   container: "completePage",
@@ -4341,16 +4341,16 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                 key: 3,
                 class: l(i.value.completedBeforeCss),
                 innerHTML: i.value.processedCompletedBeforeHtml
-              }, null, 10, At)) : d("", !0),
+              }, null, 10, Et)) : d("", !0),
               i.value.state === "loading" ? (t(), u("div", {
                 key: 4,
                 class: l(i.value.loadingBodyCss),
                 innerHTML: i.value.processedLoadingHtml
-              }, null, 10, Et)) : d("", !0),
+              }, null, 10, Wt)) : d("", !0),
               i.value.state === "empty" ? (t(), u("div", {
                 key: 5,
                 class: l(m.value.bodyEmpty)
-              }, S(i.value.emptySurveyText), 3)) : d("", !0)
+              }, I(i.value.emptySurveyText), 3)) : d("", !0)
             ], 2)
           ]),
           i.value.showBrandInfo ? (t(), y(V, { key: 1 })) : d("", !0),
@@ -4361,7 +4361,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 6);
     };
   }
-}), Wt = /* @__PURE__ */ g({
+}), Vt = /* @__PURE__ */ g({
   __name: "Notifier",
   props: {
     model: {}
@@ -4372,11 +4372,11 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       const s = q("sv-action-bar");
       return P((t(), u("div", {
         class: l(o.model.css),
-        style: I({ visibility: o.model.active ? "visible" : "hidden" }),
+        style: w({ visibility: o.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
-        p("span", null, S(o.model.message), 1),
+        p("span", null, I(o.model.message), 1),
         C(s, {
           model: o.model.actionBar
         }, null, 8, ["model"])
@@ -4385,7 +4385,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ]);
     };
   }
-}), Vt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ft = { key: 1 }, Ot = /* @__PURE__ */ g({
+}), Ft = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ot = { key: 1 }, zt = /* @__PURE__ */ g({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4406,18 +4406,18 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         placeholder: n.question.otherPlaceholder,
         "aria-label": n.question.ariaLabel || n.question.a11y_input_ariaLabel,
         "aria-required": n.question.ariaRequired || n.question.a11y_input_ariaRequired,
-        style: I({ resize: n.question.resizeStyle }),
+        style: w({ resize: n.question.resizeStyle }),
         onChange: o[0] || (o[0] = (e) => {
           n.question.onOtherValueChange(e);
         }),
         onInput: o[1] || (o[1] = (e) => {
           n.question.onOtherValueInput(e);
         })
-      }, null, 46, Vt)),
-      n.question.isReadOnlyRenderDiv() ? (t(), u("div", Ft, S(n.question.otherValue), 1)) : d("", !0)
+      }, null, 46, Ft)),
+      n.question.isReadOnlyRenderDiv() ? (t(), u("div", Ot, I(n.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), zt = ["disabled", "value", "title"], Ut = /* @__PURE__ */ g({
+}), Ut = ["disabled", "value", "title"], Kt = /* @__PURE__ */ g({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4433,7 +4433,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: s[0] || (s[0] = (...i) => e.item.action && e.item.action(...i))
-    }, null, 42, zt)) : d("", !0);
+    }, null, 42, Ut)) : d("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "PopupSurvey",
@@ -4443,12 +4443,12 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const n = r, o = O(), e = T(() => n.survey ? n.survey.getCss() : {}), s = T(() => {
-      var R;
-      return (R = o.value) != null && R.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), i = T(() => {
-      var R;
-      return (R = o.value) == null ? void 0 : R.isExpanded;
+    const n = r, o = O(), e = R(() => n.survey ? n.survey.getCss() : {}), s = R(() => {
+      var T;
+      return (T = o.value) != null && T.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
+    }), i = R(() => {
+      var T;
+      return (T = o.value) == null ? void 0 : T.isExpanded;
     }), a = () => {
       o.value.changeExpandCollapse();
     }, c = () => {
@@ -4459,8 +4459,8 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     L(() => o.value);
     const b = K(
       () => n.survey,
-      (R) => {
-        const f = new Pe(null, R);
+      (T) => {
+        const f = new Pe(null, T);
         n.isExpanded !== void 0 && (f.isExpanded = n.isExpanded), n.closeOnCompleteTimeout !== void 0 && (f.closeOnCompleteTimeout = n.closeOnCompleteTimeout), f.isShowing = !0, o.value = f;
       },
       {
@@ -4469,11 +4469,11 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     );
     return W(() => {
       b();
-    }), (R, f) => {
+    }), (T, f) => {
       const M = q("survey-string"), h = q("sv-svg-icon");
       return o.value.isShowing ? (t(), u("div", {
         key: 0,
-        style: I([{ position: "fixed", bottom: "3px", right: "10px" }, {
+        style: w([{ position: "fixed", bottom: "3px", right: "10px" }, {
           maxWidth: o.value.renderedWidth,
           width: o.value.renderedWidth
         }]),
@@ -4491,7 +4491,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
               class: l(o.value.cssHeaderTitle)
             }, [
               C(M, {
-                locString: R.survey.locTitle
+                locString: T.survey.locTitle
               }, null, 8, ["locString"])
             ], 2),
             p("span", {
@@ -4527,23 +4527,23 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           class: l(o.value.cssBody),
           onScroll: m
         }, [
-          (t(), y(N(v()), { survey: R.survey }, null, 8, ["survey"]))
+          (t(), y(N(v()), { survey: T.survey }, null, 8, ["survey"]))
         ], 34)) : d("", !0)
       ], 6)) : d("", !0);
     };
   }
-}), Kt = ["innerHTML"], jt = /* @__PURE__ */ g({
+}), jt = ["innerHTML"], Qt = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     question: {},
     css: {}
   },
   setup(r) {
-    const n = r, o = $(), e = T(
+    const n = r, o = $(), e = R(
       () => n.question.customWidget.isDefaultRender
-    ), s = T(
+    ), s = R(
       () => !!n.question.customWidget.htmlTemplate
-    ), i = T(() => n.question.customWidget.htmlTemplate), a = T(() => "survey-" + n.question.getTemplate());
+    ), i = R(() => n.question.customWidget.htmlTemplate), a = R(() => "survey-" + n.question.getTemplate());
     return A(() => {
       n.question.customWidget.afterRender(n.question, o.value);
     }), j(() => {
@@ -4555,7 +4555,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       s.value ? (t(), u("div", {
         key: 0,
         innerHTML: i.value
-      }, null, 8, Kt)) : d("", !0),
+      }, null, 8, jt)) : d("", !0),
       e.value ? (t(), y(N(a.value), {
         key: 1,
         question: c.question,
@@ -4563,12 +4563,12 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), Qt = /* @__PURE__ */ g({
+}), Gt = /* @__PURE__ */ g({
   __name: "PopupModal",
   setup(r) {
     const n = O();
     function o(s, i, a, c, v, m, b = "popup") {
-      const R = Me(
+      const T = Me(
         s,
         i,
         a,
@@ -4579,7 +4579,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         m,
         b
       );
-      return e(R);
+      return e(T);
     }
     function e(s, i) {
       s.onHide = () => {
@@ -4605,7 +4605,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), Gt = /* @__PURE__ */ g({
+}), Xt = /* @__PURE__ */ g({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4615,9 +4615,9 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     const n = r;
     return L(() => n.counter), (o, e) => (t(), u("div", {
       class: l(o.remainingCharacterCounter)
-    }, S(o.counter.remainingCharacterCounter), 3));
+    }, I(o.counter.remainingCharacterCounter), 3));
   }
-}), Xt = /* @__PURE__ */ g({
+}), Jt = /* @__PURE__ */ g({
   __name: "Composite",
   props: {
     question: {},
@@ -4626,7 +4626,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
   setup(r) {
     const n = r, o = $(null);
     H(n, o);
-    const e = T(() => n.question.contentPanel);
+    const e = R(() => n.question.contentPanel);
     return (s, i) => {
       const a = q("survey-panel");
       return t(), y(a, {
@@ -4637,7 +4637,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, null, 8, ["question", "css"]);
     };
   }
-}), Jt = /* @__PURE__ */ g({
+}), Yt = /* @__PURE__ */ g({
   __name: "Custom",
   props: {
     question: {},
@@ -4646,23 +4646,23 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
   setup(r) {
     const n = r, o = $(null);
     H(n, o);
-    const e = T(() => n.question.contentQuestion), s = (i) => se(i);
+    const e = R(() => n.question.contentQuestion), s = (i) => se(i);
     return (i, a) => (t(), y(N(s(e.value)), {
       ref: o.value,
       question: e.value,
       css: i.css
     }, null, 8, ["question", "css"]));
   }
-}), Yt = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), Zt = [
-  Yt
-], ue = 440, xt = /* @__PURE__ */ g({
+}), Zt = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), xt = [
+  Zt
+], ue = 440, ei = /* @__PURE__ */ g({
   __name: "TimerPanel",
   props: {
     model: {},
     css: {}
   },
   setup(r) {
-    const n = r, o = T(() => ue * n.model.progress), e = T(() => n.model.text);
+    const n = r, o = R(() => ue * n.model.progress), e = R(() => n.model.text);
     return L(() => n.model), (s, i) => s.model.isRunning && s.model.showTimerAsClock ? (t(), u("div", {
       key: 0,
       class: l(s.model.rootCss)
@@ -4670,37 +4670,37 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       s.model.showProgress ? (t(), u("svg", {
         key: 0,
         class: l(s.model.getProgressCss()),
-        style: I({ strokeDasharray: ue, strokeDashoffset: o.value })
-      }, Zt, 6)) : d("", !0),
+        style: w({ strokeDasharray: ue, strokeDashoffset: o.value })
+      }, xt, 6)) : d("", !0),
       p("div", {
         class: l(s.model.textContainerCss)
       }, [
         p("span", {
           class: l(s.model.majorTextCss)
-        }, S(s.model.clockMajorText), 3),
+        }, I(s.model.clockMajorText), 3),
         s.model.clockMinorText ? (t(), u("span", {
           key: 0,
           class: l(s.model.minorTextCss)
-        }, S(s.model.clockMinorText), 3)) : d("", !0)
+        }, I(s.model.clockMinorText), 3)) : d("", !0)
       ], 2)
     ], 2)) : P((t(), u("div", {
       key: 1,
       class: l(s.model.survey.getCss().timerRoot)
-    }, S(e.value), 3)), [
+    }, I(e.value), 3)), [
       [_, s.model.isRunning && !s.model.showTimerAsClock]
     ]);
   }
-}), ei = {}, si = { class: "sd-loading-indicator" };
-function ni(r, n) {
+}), si = {}, ni = { class: "sd-loading-indicator" };
+function oi(r, n) {
   const o = q("sv-svg-icon");
-  return t(), u("div", si, [
+  return t(), u("div", ni, [
     C(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @__PURE__ */ g({
+const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @__PURE__ */ g({
   __name: "Header",
   props: {
     model: {},
@@ -4712,30 +4712,30 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
       const s = q("sv-header-cell"), i = q("sv-header-mobile");
       return t(), u("div", {
         class: l(o.model.headerClasses),
-        style: I({ height: o.model.renderedHeight })
+        style: w({ height: o.model.renderedHeight })
       }, [
         o.model.backgroundImage ? (t(), u("div", {
           key: 0,
           class: l(o.model.backgroundImageClasses),
-          style: I(o.model.backgroundImageStyle)
+          style: w(o.model.backgroundImageStyle)
         }, null, 6)) : d("", !0),
         o.survey.isMobile ? d("", !0) : (t(), u("div", {
           key: 1,
           class: l(o.model.contentClasses),
-          style: I({ maxWidth: o.model.maxWidth })
+          style: w({ maxWidth: o.model.maxWidth })
         }, [
-          (t(!0), u(w, null, B(o.model.cells, (a) => (t(), y(s, { model: a }, null, 8, ["model"]))), 256))
+          (t(!0), u(S, null, B(o.model.cells, (a) => (t(), y(s, { model: a }, null, 8, ["model"]))), 256))
         ], 6)),
-        o.survey.isMobile ? (t(), u("div", ti, [
+        o.survey.isMobile ? (t(), u("div", ii, [
           C(i, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), li = {
+}), ri = {
   key: 0,
   class: "sv-header__logo"
-}, ri = ["src", "width", "height", "alt"], ai = /* @__PURE__ */ g({
+}, ai = ["src", "width", "height", "alt"], ui = /* @__PURE__ */ g({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -4745,13 +4745,13 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
       const e = q("survey-element-title"), s = q("survey-string");
       return t(), u("div", {
         class: l(n.model.css),
-        style: I(n.model.style)
+        style: w(n.model.style)
       }, [
         p("div", {
           class: "sv-header__cell-content",
-          style: I(n.model.contentStyle)
+          style: w(n.model.contentStyle)
         }, [
-          n.model.showLogo ? (t(), u("div", li, [
+          n.model.showLogo ? (t(), u("div", ri, [
             p("div", {
               class: l(n.model.survey.logoClassNames)
             }, [
@@ -4761,14 +4761,14 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
                 width: n.model.survey.renderedLogoWidth,
                 height: n.model.survey.renderedLogoHeight,
                 alt: n.model.survey.locTitle.renderedHtml,
-                style: I({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
-              }, null, 14, ri)
+                style: w({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
+              }, null, 14, ai)
             ], 2)
           ])) : d("", !0),
           n.model.showTitle ? (t(), u("div", {
             key: 1,
             class: "sv-header__title",
-            style: I({ maxWidth: n.model.textAreaWidth })
+            style: w({ maxWidth: n.model.textAreaWidth })
           }, [
             C(e, {
               element: n.model.survey,
@@ -4778,7 +4778,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
           n.model.showDescription ? (t(), u("div", {
             key: 2,
             class: "sv-header__description",
-            style: I({ maxWidth: n.model.textAreaWidth })
+            style: w({ maxWidth: n.model.textAreaWidth })
           }, [
             n.model.survey.renderedHasDescription ? (t(), u("h5", {
               key: 0,
@@ -4793,10 +4793,10 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
       ], 6);
     };
   }
-}), ui = { class: "sv-header--mobile" }, di = {
+}), di = { class: "sv-header--mobile" }, mi = {
   key: 0,
   class: "sv-header__logo"
-}, mi = ["src", "width", "height", "alt"], ci = /* @__PURE__ */ g({
+}, ci = ["src", "width", "height", "alt"], pi = /* @__PURE__ */ g({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -4804,8 +4804,8 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
   setup(r) {
     return (n, o) => {
       const e = q("survey-element-title"), s = q("survey-string");
-      return t(), u("div", ui, [
-        n.model.survey.hasLogo ? (t(), u("div", di, [
+      return t(), u("div", di, [
+        n.model.survey.hasLogo ? (t(), u("div", mi, [
           p("div", {
             class: l(n.model.survey.logoClassNames)
           }, [
@@ -4815,14 +4815,14 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
               width: n.model.survey.renderedLogoWidth,
               height: n.model.survey.renderedLogoHeight,
               alt: n.model.survey.locTitle.renderedHtml,
-              style: I({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
-            }, null, 14, mi)
+              style: w({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
+            }, null, 14, ci)
           ], 2)
         ])) : d("", !0),
         n.model.survey.hasTitle ? (t(), u("div", {
           key: 1,
           class: "sv-header__title",
-          style: I({ maxWidth: n.model.textAreaWidth })
+          style: w({ maxWidth: n.model.textAreaWidth })
         }, [
           C(e, {
             element: n.model.survey,
@@ -4832,7 +4832,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
         n.model.survey.renderedHasDescription ? (t(), u("div", {
           key: 2,
           class: "sv-header__description",
-          style: I({ maxWidth: n.model.textAreaWidth })
+          style: w({ maxWidth: n.model.textAreaWidth })
         }, [
           n.model.survey.renderedHasDescription ? (t(), u("h5", {
             key: 0,
@@ -4846,7 +4846,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
       ]);
     };
   }
-}), pi = /* @__PURE__ */ g({
+}), vi = /* @__PURE__ */ g({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -4860,7 +4860,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
         class: l(n.css),
         onClick: o[0] || (o[0] = (...s) => n.question.doClean && n.question.doClean(...s))
       }, [
-        p("span", null, S(n.question.clearButtonCaption), 1),
+        p("span", null, I(n.question.clearButtonCaption), 1),
         n.question.cssClasses.removeButtonIconId ? (t(), y(e, {
           key: 0,
           iconName: n.question.cssClasses.removeButtonIconId,
@@ -4870,7 +4870,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
       ], 2);
     };
   }
-}), vi = ["id"], qi = /* @__PURE__ */ g({
+}), qi = ["id"], yi = /* @__PURE__ */ g({
   __name: "FileVideo",
   props: {
     question: {}
@@ -4892,21 +4892,21 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
           playsinline: "",
           id: n.question.videoId,
           class: l(n.question.cssClasses.video)
-        }, null, 10, vi),
+        }, null, 10, qi),
         C(e, {
           item: n.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), yi = ["for", "aria-label"], gi = /* @__PURE__ */ g({
+}), gi = ["for", "aria-label"], hi = /* @__PURE__ */ g({
   __name: "FileChooseButton",
   props: {
     data: {},
     item: {}
   },
   setup(r) {
-    const n = r, o = T(
+    const n = r, o = R(
       () => {
         var e;
         return ((e = n.data) == null ? void 0 : e.question) || n.item.data.question;
@@ -4914,9 +4914,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
     );
     return (e, s) => {
       const i = q("sv-svg-icon"), a = ee("key2click");
-      return o.value.isReadOnly ? d("", !0) : P((t(), u("label", {
-        key: 0,
-        role: "button",
+      return P((t(), u("label", {
         tabindex: "0",
         class: l(o.value.getChooseFileCss()),
         for: o.value.inputId,
@@ -4928,13 +4926,13 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
           iconName: o.value.cssClasses.chooseFileIconId,
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
-        p("span", null, S(o.value.chooseButtonText), 1)
-      ], 10, yi)), [
+        p("span", null, I(o.value.chooseButtonText), 1)
+      ], 10, gi)), [
         [a]
       ]);
     };
   }
-}), hi = ["onClick", "href", "title", "download"], Ci = ["src"], bi = ["onClick"], ki = ["onClick", "href", "title", "download"], fi = /* @__PURE__ */ g({
+}), Ci = ["onClick", "href", "title", "download"], bi = ["src"], ki = ["onClick"], fi = ["onClick", "href", "title", "download"], Ii = /* @__PURE__ */ g({
   __name: "FilePreview",
   props: {
     question: {}
@@ -4946,7 +4944,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
         key: 0,
         class: l(n.question.cssClasses.fileList || void 0)
       }, [
-        (t(!0), u(w, null, B(n.question.previewValue, (s, i) => P((t(), u("span", {
+        (t(!0), u(S, null, B(n.question.previewValue, (s, i) => P((t(), u("span", {
           key: n.question.inputId + "_" + i,
           class: l(n.question.cssClasses.preview)
         }, [
@@ -4959,21 +4957,21 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
               href: s.content,
               title: s.name,
               download: s.name,
-              style: I({ width: n.question.imageWidth })
-            }, S(s.name), 13, hi)
+              style: w({ width: n.question.imageWidth })
+            }, I(s.name), 13, Ci)
           ], 2)) : d("", !0),
           p("div", {
-            class: l(n.question.cssClasses.imageWrapper)
+            class: l(n.question.getImageWrapperCss(s))
           }, [
             n.question.canPreviewImage(s) ? (t(), u("img", {
               key: 0,
               src: s.content,
-              style: I({
+              style: w({
                 height: n.question.imageHeight,
                 width: n.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Ci)) : d("", !0),
+            }, null, 12, bi)) : d("", !0),
             n.question.defaultImage(s) ? (t(), y(e, {
               key: 1,
               iconName: n.question.cssClasses.defaultImageIconId,
@@ -4987,7 +4985,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
             }, [
               p("span", {
                 class: l(n.question.cssClasses.removeFile)
-              }, S(n.question.removeFileCaption), 3),
+              }, I(n.question.removeFileCaption), 3),
               n.question.cssClasses.removeFileSvgIconId ? (t(), y(e, {
                 key: 0,
                 title: n.question.removeFileCaption,
@@ -4995,7 +4993,7 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
                 iconName: n.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, bi)) : d("", !0)
+            ], 10, ki)) : d("", !0)
           ], 2),
           s.name && n.question.cssClasses.fileSignBottom ? (t(), u("div", {
             key: 1,
@@ -5006,8 +5004,8 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
               href: s.content,
               title: s.name,
               download: s.name,
-              style: I({ width: n.question.imageWidth })
-            }, S(s.name), 13, ki)
+              style: w({ width: n.question.imageWidth })
+            }, I(s.name), 13, fi)
           ], 2)) : d("", !0)
         ], 2)), [
           [_, s && n.question.isPreviewVisible(i)]
@@ -5017,8 +5015,8 @@ const oi = /* @__PURE__ */ me(ei, [["render", ni]]), ti = { key: 2 }, ii = /* @_
   }
 });
 He.platform = "vue3";
-function Ii(r) {
-  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", Oe), r.component("survey-page", We), r.component("survey-row", ze), r.component("survey-element", Ke), r.component("survey-panel", Ge), r.component("survey-element-header", Xe), r.component("survey-string", Je), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", hs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Rs), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", _s), r.component("survey-expression", As), r.component("survey-file", Vs), r.component("sv-file-choose-btn", gi), r.component("sv-file-clean-btn", pi), r.component("sv-file-preview", fi), r.component("sv-file-video", qi), r.component("survey-imagepicker", Os), r.component("survey-imagepicker-item", Qs), r.component("survey-comment", Js), r.component("survey-dropdown", Ys), r.component("sv-dropdown-select", sn), r.component("sv-dropdown-option-item", on), r.component("sv-dropdown", un), r.component("survey-tagbox", dn), r.component("sv-tagbox", pn), r.component("sv-tagbox-item", hn), r.component("sv-tagbox-filter", yn), r.component("survey-ranking", Cn), r.component("survey-ranking-item", Sn), r.component("survey-rating", $n), r.component("sv-rating-item", Ln), r.component("sv-rating-item-smiley", Pn), r.component("sv-rating-item-star", Nn), r.component("sv-rating-dropdown", Hn), r.component("survey-boolean", An), r.component("sv-boolean-radio", En), r.component("sv-boolean-radio-item", Fn), r.component("sv-boolean-checkbox", jn), r.component("survey-multipletext", Qn), r.component("survey-multipletext-item", Xn), r.component("survey-matrix", oo), r.component("survey-matrixdropdown", to), r.component("survey-matrixtable", ao), r.component("survey-matrixheaderrequired", mo), r.component("survey-matrixcell", po), r.component("survey-matrixdynamic", vo), r.component("sv-matrix-remove-button", yo), r.component("sv-matrix-drag-drop-icon", ho), r.component("sv-matrix-detail-button", bo), r.component("survey-paneldynamic", ko), r.component("survey-paneldynamicprogress", fo), r.component("survey-paneldynamicprogress-v2", Io), r.component("sv-paneldynamic-add-btn", wo), r.component("sv-paneldynamic-next-btn", Ro), r.component("sv-paneldynamic-prev-btn", $o), r.component("sv-paneldynamic-remove-btn", Bo), r.component("sv-paneldynamic-progress-text", Lo), r.component("sv-components-container", Rt), r.component("sv-progress-buttons", Lt), r.component("sv-progress-toc", Dt), r.component("sv-progress-pages", X), r.component("sv-progress-questions", X), r.component("sv-progress-correctquestions", X), r.component("sv-progress-requiredquestions", X), r.component("survey-errors", Po), r.component("survey-question-comment", Ho), r.component("survey-element-title", _o), r.component("survey-element-title-content", Fo), r.component("sv-title-actions", Uo), r.component("sv-brand-info", Jo), r.component("sv-svg-icon", et), r.component("sv-action-bar", st), r.component("sv-action", tt), r.component("sv-action-bar-item", lt), r.component("sv-action-bar-item-dropdown", at), r.component("sv-action-bar-separator", ut), r.component("sv-list", pt), r.component("sv-list-item", qt), r.component("sv-popup", yt), r.component("sv-popup-container", It), r.component("popup-pointer", wt), r.component("sv-notifier", Wt), r.component("survey-other-choice", Ot), r.component("sv-nav-btn", Ut), r.component("survey-customwidget", jt), r.component("survey-popup-modal", Qt), r.component("sv-character-counter", Gt), r.component("survey-composite", Xt), r.component("survey-custom", Jt), r.component("sv-timerpanel", xt), r.component("sv-loading-indicator", oi), r.component("sv-header", ii), r.component("sv-header-cell", ai), r.component("sv-header-mobile", ci), r.directive("key2click", {
+function wi(r) {
+  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", Oe), r.component("survey-page", We), r.component("survey-row", ze), r.component("survey-element", Ke), r.component("survey-panel", Ge), r.component("survey-element-header", Xe), r.component("survey-string", Je), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", hs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Ts), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", _s), r.component("survey-expression", As), r.component("survey-file", Vs), r.component("sv-file-choose-btn", hi), r.component("sv-file-clean-btn", vi), r.component("sv-file-preview", Ii), r.component("sv-file-video", yi), r.component("survey-imagepicker", Os), r.component("survey-imagepicker-item", Qs), r.component("survey-comment", Js), r.component("survey-dropdown", Ys), r.component("sv-dropdown-select", sn), r.component("sv-dropdown-option-item", on), r.component("sv-dropdown", un), r.component("survey-tagbox", dn), r.component("sv-tagbox", pn), r.component("sv-tagbox-item", hn), r.component("sv-tagbox-filter", yn), r.component("survey-ranking", Cn), r.component("survey-ranking-item", Sn), r.component("survey-rating", $n), r.component("sv-rating-item", Ln), r.component("sv-rating-item-smiley", Pn), r.component("sv-rating-item-star", Nn), r.component("sv-rating-dropdown", Hn), r.component("survey-boolean", An), r.component("sv-boolean-radio", En), r.component("sv-boolean-radio-item", Fn), r.component("sv-boolean-checkbox", jn), r.component("survey-multipletext", Qn), r.component("survey-multipletext-item", Xn), r.component("survey-matrix", oo), r.component("survey-matrixdropdown", to), r.component("survey-matrixtable", ao), r.component("survey-matrixheaderrequired", mo), r.component("survey-matrixcell", po), r.component("survey-matrixdynamic", vo), r.component("sv-matrix-remove-button", yo), r.component("sv-matrix-drag-drop-icon", ho), r.component("sv-matrix-detail-button", bo), r.component("survey-paneldynamic", ko), r.component("survey-paneldynamicprogress", fo), r.component("survey-paneldynamicprogress-v2", Io), r.component("sv-paneldynamic-add-btn", wo), r.component("sv-paneldynamic-next-btn", To), r.component("sv-paneldynamic-prev-btn", $o), r.component("sv-paneldynamic-remove-btn", Bo), r.component("sv-paneldynamic-progress-text", Lo), r.component("sv-components-container", Rt), r.component("sv-progress-buttons", Dt), r.component("sv-progress-toc", Pt), r.component("sv-progress-pages", X), r.component("sv-progress-questions", X), r.component("sv-progress-correctquestions", X), r.component("sv-progress-requiredquestions", X), r.component("survey-errors", Po), r.component("survey-question-comment", Ho), r.component("survey-element-title", _o), r.component("survey-element-title-content", Fo), r.component("sv-title-actions", Uo), r.component("sv-brand-info", Jo), r.component("sv-svg-icon", et), r.component("sv-action-bar", st), r.component("sv-action", tt), r.component("sv-action-bar-item", lt), r.component("sv-action-bar-item-dropdown", at), r.component("sv-action-bar-separator", ut), r.component("sv-list", pt), r.component("sv-list-item", yt), r.component("sv-popup", gt), r.component("sv-popup-container", wt), r.component("popup-pointer", St), r.component("sv-notifier", Vt), r.component("survey-other-choice", zt), r.component("sv-nav-btn", Kt), r.component("survey-customwidget", Qt), r.component("survey-popup-modal", Gt), r.component("sv-character-counter", Xt), r.component("survey-composite", Jt), r.component("survey-custom", Yt), r.component("sv-timerpanel", ei), r.component("sv-loading-indicator", ti), r.component("sv-header", li), r.component("sv-header-cell", ui), r.component("sv-header-mobile", pi), r.directive("key2click", {
     mounted: function(n, o) {
       const e = { ...o.value };
       e.disableTabStop || (n.tabIndex = 0), n.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), de(s, e), !1)), n.addEventListener("keydown", (s) => {
@@ -5031,7 +5029,7 @@ function Ii(r) {
 }
 const Ri = {
   install(r) {
-    Ii(r);
+    wi(r);
   }
 };
 export {