survey-vue3-ui 1.11.12 → 1.11.14

package/survey-vue3-ui.es.js

@@ -1,4 +1,4 @@
-import { shallowReactive as be, watch as K, onUpdated as x, onBeforeUnmount as j, onMounted as M, ref as $, shallowRef as U, watchEffect as ke, triggerRef as oe, unref as w, isRef as fe, defineComponent as g, computed as S, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as h, createCommentVNode as m, Fragment as D, renderList as L, createBlock as q, resolveDynamicComponent as R, normalizeProps as z, mergeProps as H, withCtx as V, normalizeStyle as I, createElementVNode as p, onUnmounted as O, guardReactiveProps as te, withDirectives as N, vShow as E, toDisplayString as T, vModelRadio as ee, vModelCheckbox as ie, vModelSelect as we, vModelText as Ie, getCurrentInstance as ve, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as De } from "vue";
+import { shallowReactive as be, watch as K, onUpdated as x, onBeforeUnmount as j, onMounted as M, ref as $, shallowRef as U, watchEffect as ke, triggerRef as oe, unref as w, isRef as fe, defineComponent as g, computed as I, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as l, createVNode as h, createCommentVNode as m, Fragment as D, renderList as L, createBlock as q, resolveDynamicComponent as R, normalizeProps as z, mergeProps as H, withCtx as V, normalizeStyle as S, createElementVNode as v, onUnmounted as O, guardReactiveProps as te, withDirectives as N, vShow as E, toDisplayString as T, vModelRadio as ee, vModelCheckbox as ie, vModelSelect as we, vModelText as Ie, getCurrentInstance as ve, createStaticVNode as Se, resolveDirective as X, toRaw as Re, Teleport as Te, useSlots as $e, renderSlot as De } from "vue";
 import { Base as _e, RendererFactory as se, Helpers as Be, DropdownMultiSelectListModel as Le, doKey2ClickUp as ye, createSvg as Ae, ActionDropdownViewModel as Ne, getActionDropdownButtonTarget as Pe, createPopupViewModel as Me, SurveyProgressModel as ae, ProgressButtonsResponsivityManager as He, PopupSurveyModel as Ee, settings as Q, createDialogOptions as We, createPopupModalViewModel as Fe, ButtonGroupItemModel as Ve, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
 _e.createPropertiesHash = () => be({});
 function Qe(r) {
@@ -87,7 +87,7 @@ const je = /* @__PURE__ */ g({
   setup(r) {
     const s = r, n = $(null), e = () => {
       s.survey && n.value && s.survey.afterRenderPage(n.value);
-    }, t = S(() => s.page._showDescription);
+    }, t = I(() => s.page._showDescription);
     return B(
       () => s.page,
       () => {
@@ -96,7 +96,7 @@ const je = /* @__PURE__ */ g({
     ), M(() => {
       e();
     }), (o, a) => {
-      const c = y("survey-element-title"), v = y("survey-string"), d = y("survey-errors"), C = y("survey-row");
+      const c = y("survey-element-title"), p = y("survey-string"), d = y("survey-errors"), C = y("survey-row");
       return i(), u("div", {
         class: l(o.page.cssRoot),
         ref_key: "root",
@@ -110,7 +110,7 @@ const je = /* @__PURE__ */ g({
           key: 0,
           class: l(o.page.cssClasses.page.description)
         }, [
-          h(v, {
+          h(p, {
             locString: o.page.locDescription
           }, null, 8, ["locString"])
         ], 2)) : m("", !0),
@@ -157,7 +157,7 @@ const je = /* @__PURE__ */ g({
         e.survey.renderedHasTitle ? (i(), u("div", {
           key: 1,
           class: l(e.survey.css.headerText),
-          style: I({ maxWidth: e.survey.titleMaxWidth })
+          style: S({ maxWidth: e.survey.titleMaxWidth })
         }, [
           h(o, {
             element: e.survey,
@@ -176,7 +176,7 @@ const je = /* @__PURE__ */ g({
           key: 2,
           data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
         }, null, 8, ["data"])) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(e.survey.css.headerClose)
         }, null, 2)
       ], 2)) : m("", !0);
@@ -233,28 +233,28 @@ const je = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = S(() => s.element.showErrorOnTop), t = S(() => s.element.showErrorOnBottom), o = (f) => f.cssContent, a = () => s.element.getRootStyle();
+    const s = r, n = $(null), e = I(() => s.element.showErrorOnTop), t = I(() => s.element.showErrorOnBottom), o = (f) => f.cssContent, a = () => s.element.getRootStyle();
     B(() => s.element);
     const c = () => {
       n.value && s.element.afterRender(n.value);
-    }, v = K(
+    }, p = K(
       () => n.value,
       () => {
         c();
       }
-    ), d = S(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), C = S(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), k = S(() => ({
+    ), d = I(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), C = I(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), k = I(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
       }
     }));
     return O(() => {
-      v();
+      p();
     }), (f, _) => {
       const b = y("survey-errors"), A = y("survey-element-header"), W = y("survey-string"), F = y("survey-question-comment");
       return i(), u("div", {
         class: l(f.element.getRootCss()),
-        style: I(a()),
+        style: S(a()),
         ref_key: "root",
         ref: n,
         onFocusin: _[0] || (_[0] = (J) => f.element.focusIn()),
@@ -279,9 +279,9 @@ const je = /* @__PURE__ */ g({
         }, null, 8, ["element", "css"])) : m("", !0),
         (i(), q(R(C.value), z(te(k.value)), {
           default: V(() => [
-            p("div", {
+            v("div", {
               class: l(o(f.element) || void 0),
-              style: I({ display: f.element.renderedIsExpanded ? void 0 : "none" }),
+              style: S({ display: f.element.renderedIsExpanded ? void 0 : "none" }),
               role: "presentation"
             }, [
               e.value ? (i(), q(b, {
@@ -294,7 +294,7 @@ const je = /* @__PURE__ */ g({
                 key: 1,
                 class: l(f.element.getCommentAreaCss())
               }, [
-                p("div", null, [
+                v("div", null, [
                   h(W, {
                     locString: f.element.locCommentText
                   }, null, 8, ["locString"])
@@ -344,11 +344,11 @@ const je = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = S(() => s.element.survey);
+    const s = r, n = $(null), e = I(() => s.element.survey);
     return B(() => s.element), M(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, n.value);
     }), (t, o) => {
-      const a = y("survey-errors"), c = y("survey-element-header"), v = y("survey-row"), d = y("sv-action-bar");
+      const a = y("survey-errors"), c = y("survey-element-header"), p = y("survey-row"), d = y("sv-action-bar");
       return t.element.getIsContentVisible() ? (i(), u("div", {
         key: 0,
         class: l(t.element.getContainerCss()),
@@ -373,7 +373,7 @@ const je = /* @__PURE__ */ g({
         t.element.renderedIsExpanded ? (i(), u("div", {
           key: 3,
           id: t.element.contentId,
-          style: I({ paddingLeft: t.element.innerPaddingLeft }),
+          style: S({ paddingLeft: t.element.innerPaddingLeft }),
           class: l(t.element.cssClasses.panel.content)
         }, [
           (i(!0), u(D, null, L(t.element.visibleRows, (C) => (i(), q(R(t.element.getSurvey().getRowWrapperComponentName(C)), z(H({
@@ -382,7 +382,7 @@ const je = /* @__PURE__ */ g({
             componentData: t.element.getSurvey().getRowWrapperComponentData(C)
           })), {
             default: V(() => [
-              h(v, {
+              h(p, {
                 row: C,
                 survey: e.value,
                 css: t.css
@@ -411,11 +411,11 @@ const je = /* @__PURE__ */ g({
       return "titleWidth" in s.element && (t.width = s.element.titleWidth), t;
     };
     return (t, o) => {
-      const a = y("survey-element-title"), c = y("survey-string"), v = y("sv-action-bar");
+      const a = y("survey-element-title"), c = y("survey-string"), p = y("sv-action-bar");
       return i(), u("div", {
         class: l(t.element.cssHeader),
         onClick: n,
-        style: I(e())
+        style: S(e())
       }, [
         h(a, {
           element: t.element,
@@ -432,7 +432,7 @@ const je = /* @__PURE__ */ g({
         ], 10, ts)), [
           [E, t.element.hasDescription]
         ]) : m("", !0),
-        t.element.hasAdditionalTitleToolbar ? (i(), q(v, {
+        t.element.hasAdditionalTitleToolbar ? (i(), q(p, {
           key: 1,
           model: t.element.additionalTitleToolbar
         }, null, 8, ["model"])) : m("", !0)
@@ -524,7 +524,7 @@ const je = /* @__PURE__ */ g({
         ref: n
       }, [
         h(o, { question: e.question }, null, 8, ["question"]),
-        p("datalist", {
+        v("datalist", {
           id: e.question.dataListId
         }, [
           (i(!0), u(D, null, L(e.question.dataList, (a) => (i(), u("option", { value: a }, null, 8, vs))), 256))
@@ -549,14 +549,14 @@ const je = /* @__PURE__ */ g({
       n.getRef && n.getRef(a);
     }, t = $(null);
     s({ root: t }), B(() => n.question);
-    const o = S(() => n.question.inputStyle);
+    const o = I(() => n.question.inputStyle);
     return (a, c) => {
-      const v = y("sv-character-counter");
+      const p = y("sv-character-counter");
       return a.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref: (d) => e(d)
       }, [
-        p("input", {
+        v("input", {
           disabled: a.question.isDisabledAttr,
           readonly: a.question.isReadOnlyAttr,
           class: l(a.question.getControlClass()),
@@ -566,7 +566,7 @@ const je = /* @__PURE__ */ g({
           max: a.question.renderedMax,
           step: a.question.renderedStep,
           size: a.question.renderedInputSize,
-          style: I(o.value),
+          style: S(o.value),
           id: a.question.inputId,
           list: a.question.dataListId,
           placeholder: a.question.renderedPlaceholder,
@@ -585,7 +585,7 @@ const je = /* @__PURE__ */ g({
           "aria-invalid": a.question.a11y_input_ariaInvalid,
           "aria-errormessage": a.question.a11y_input_ariaErrormessage
         }, null, 46, gs),
-        h(v, {
+        h(p, {
           counter: a.question.characterCounter,
           remainingCharacterCounter: a.question.cssClasses.remainingCharacterCounter
         }, null, 8, ["counter", "remainingCharacterCounter"])
@@ -601,7 +601,7 @@ const je = /* @__PURE__ */ g({
         max: a.question.renderedMax,
         step: a.question.renderedStep,
         size: a.question.renderedInputSize,
-        style: I(o.value),
+        style: S(o.value),
         id: a.question.inputId,
         list: a.question.dataListId,
         placeholder: a.question.renderedPlaceholder,
@@ -658,43 +658,43 @@ const je = /* @__PURE__ */ g({
         "aria-errormessage": o.question.a11y_input_ariaErrormessage
       }, [
         o.showLegend ? (i(), u("legend", bs, T(o.question.locTitle.renderedHtml), 1)) : m("", !0),
-        o.question.hasHeadItems ? (i(!0), u(D, { key: 1 }, L(o.question.headItems, (v) => (i(), q(R(e(v)), H({
-          key: v.value
-        }, t(v)), null, 16))), 128)) : m("", !0),
-        !o.question.hasColumns && !o.question.blockedRow ? (i(!0), u(D, { key: 2 }, L(o.question.bodyItems, (v) => (i(), q(R(e(v)), H({
-          key: v.value
-        }, t(v)), null, 16))), 128)) : m("", !0),
+        o.question.hasHeadItems ? (i(!0), u(D, { key: 1 }, L(o.question.headItems, (p) => (i(), q(R(e(p)), H({
+          key: p.value
+        }, t(p)), null, 16))), 128)) : m("", !0),
+        !o.question.hasColumns && !o.question.blockedRow ? (i(!0), u(D, { key: 2 }, L(o.question.bodyItems, (p) => (i(), q(R(e(p)), H({
+          key: p.value
+        }, t(p)), null, 16))), 128)) : m("", !0),
         o.question.blockedRow ? (i(), u("div", {
           key: 3,
           class: l(o.question.cssClasses.rootRow)
         }, [
-          !o.question.hasColumns && o.question.blockedRow ? (i(!0), u(D, { key: 0 }, L(o.question.dataChoices, (v) => (i(), q(R(e(v)), H({
-            key: v.value
-          }, t(v)), null, 16))), 128)) : m("", !0)
+          !o.question.hasColumns && o.question.blockedRow ? (i(!0), u(D, { key: 0 }, L(o.question.dataChoices, (p) => (i(), q(R(e(p)), H({
+            key: p.value
+          }, t(p)), null, 16))), 128)) : m("", !0)
         ], 2)) : m("", !0),
         o.question.hasColumns ? (i(), u("div", {
           key: 4,
           class: l(o.question.cssClasses.rootMultiColumn)
         }, [
-          o.question.hasColumns ? (i(!0), u(D, { key: 0 }, L(o.question.columns, (v, d) => (i(), u("div", {
+          o.question.hasColumns ? (i(!0), u(D, { key: 0 }, L(o.question.columns, (p, d) => (i(), u("div", {
             key: d,
             class: l(o.question.getColumnClass()),
             role: "presentation"
           }, [
-            (i(!0), u(D, null, L(v, (C) => (i(), q(R(e(C)), H({
+            (i(!0), u(D, null, L(p, (C) => (i(), q(R(e(C)), H({
               key: C.value
             }, t(C)), null, 16))), 128))
           ], 2))), 128)) : m("", !0)
         ], 2)) : m("", !0),
-        o.question.hasFootItems ? (i(!0), u(D, { key: 5 }, L(o.question.footItems, (v) => (i(), q(R(e(v)), H({
-          key: v.value
-        }, t(v)), null, 16))), 128)) : m("", !0),
+        o.question.hasFootItems ? (i(!0), u(D, { key: 5 }, L(o.question.footItems, (p) => (i(), q(R(e(p)), H({
+          key: p.value
+        }, t(p)), null, 16))), 128)) : m("", !0),
         o.question.renderedValue && o.question.isOtherSelected ? (i(), q(c, {
           key: 6,
           question: o.question
         }, null, 8, ["question"])) : m("", !0),
         o.question.showClearButtonInContent ? (i(), u("div", ks, [
-          p("input", {
+          v("input", {
             type: "button",
             class: l(o.question.cssClasses.clearButton),
             onClick: a[0] || (a[0] = () => {
@@ -738,10 +738,10 @@ const je = /* @__PURE__ */ g({
         role: "presentation",
         class: l(e.question.getItemClass(e.item))
       }, [
-        p("label", {
+        v("label", {
           class: l(e.question.getLabelClass(e.item))
         }, [
-          p("input", {
+          v("input", {
             type: "checkbox",
             name: e.question.name + e.item.id,
             checked: e.question.isItemSelected(e.item),
@@ -763,7 +763,7 @@ const je = /* @__PURE__ */ g({
               key: 0,
               class: l(e.question.cssClasses.itemDecorator)
             }, [
-              p("use", {
+              v("use", {
                 "xlink:href": e.question.itemSvgIcon
               }, null, 8, Ss)
             ], 2)) : m("", !0)
@@ -798,7 +798,7 @@ const je = /* @__PURE__ */ g({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = (o) => s.question.getLabelClass(o), e = (o) => s.question.getControlLabelClass(o), t = S({
+    const s = r, n = (o) => s.question.getLabelClass(o), e = (o) => s.question.getControlLabelClass(o), t = I({
       get: () => s.question.renderedValue,
       set: (o) => {
         const a = s.question;
@@ -811,17 +811,17 @@ const je = /* @__PURE__ */ g({
         role: "presentation",
         class: l(o.question.getItemClass(o.item))
       }, [
-        p("label", {
-          onMousedown: a[1] || (a[1] = (v) => o.question.onMouseDown()),
+        v("label", {
+          onMousedown: a[1] || (a[1] = (p) => o.question.onMouseDown()),
           class: l(n(o.item))
         }, [
-          N(p("input", {
+          N(v("input", {
             type: "radio",
             name: o.question.questionName,
             value: o.item.value,
             id: o.question.getItemId(o.item),
             "aria-errormessage": o.question.ariaErrormessage,
-            "onUpdate:modelValue": a[0] || (a[0] = (v) => t.value = v),
+            "onUpdate:modelValue": a[0] || (a[0] = (p) => t.value = p),
             disabled: !o.question.getItemEnabled(o.item),
             readonly: o.question.isReadOnlyAttr,
             class: l(o.question.cssClasses.itemControl)
@@ -836,7 +836,7 @@ const je = /* @__PURE__ */ g({
               key: 0,
               class: l(o.question.cssClasses.itemDecorator)
             }, [
-              p("use", {
+              v("use", {
                 "xlink:href": o.question.itemSvgIcon
               }, null, 8, Ds)
             ], 2)) : m("", !0)
@@ -867,11 +867,11 @@ const je = /* @__PURE__ */ g({
         class: l(e.question.cssClasses.root),
         ref_key: "root",
         ref: n,
-        style: I({
+        style: S({
           width: e.question.renderedCanvasWidth
         })
       }, [
-        N(p("div", {
+        N(v("div", {
           class: l(e.question.cssClasses.placeholder)
         }, [
           h(o, {
@@ -880,26 +880,26 @@ const je = /* @__PURE__ */ g({
         ], 2), [
           [E, e.question.needShowPlaceholder()]
         ]),
-        p("div", null, [
+        v("div", null, [
           e.question.backgroundImage ? (i(), u("img", {
             key: 0,
             class: l(e.question.cssClasses.backgroundImage),
             src: e.question.backgroundImage,
-            style: I({
+            style: S({
               width: e.question.renderedCanvasWidth
             })
           }, null, 14, Bs)) : m("", !0),
-          p("canvas", {
+          v("canvas", {
             tabindex: "-1",
             class: l(e.question.cssClasses.canvas),
-            onBlur: t[0] || (t[0] = (...v) => e.question.onBlur && e.question.onBlur(...v))
+            onBlur: t[0] || (t[0] = (...p) => e.question.onBlur && e.question.onBlur(...p))
           }, null, 34)
         ]),
         e.question.canShowClearButton ? (i(), u("div", {
           key: 0,
           class: l(e.question.cssClasses.controls)
         }, [
-          p("button", {
+          v("button", {
             type: "button",
             class: l(e.question.cssClasses.clearButton),
             title: e.question.clearButtonCaption,
@@ -965,7 +965,7 @@ const je = /* @__PURE__ */ g({
           alt: t.question.altText || t.question.title,
           width: t.question.renderedWidth,
           height: t.question.renderedHeight,
-          style: I({
+          style: S({
             objectFit: t.question.imageFit,
             width: t.question.renderedStyleWidth,
             height: t.question.renderedStyleHeight
@@ -986,7 +986,7 @@ const je = /* @__PURE__ */ g({
           src: w(e),
           width: t.question.renderedWidth,
           height: t.question.renderedHeight,
-          style: I({
+          style: S({
             objectFit: t.question.imageFit,
             width: t.question.renderedStyleWidth,
             height: t.question.renderedStyleHeight
@@ -1006,7 +1006,7 @@ const je = /* @__PURE__ */ g({
           src: w(e),
           width: t.question.renderedWidth,
           height: t.question.renderedHeight,
-          style: I({
+          style: S({
             objectFit: t.question.imageFit,
             width: t.question.renderedStyleWidth,
             height: t.question.renderedStyleHeight
@@ -1047,7 +1047,7 @@ const je = /* @__PURE__ */ g({
   setup(r) {
     const s = r, n = $(null);
     return P(s, n), (e, t) => {
-      const o = y("survey-string"), a = y("sv-file-choose-btn"), c = y("sv-action-bar"), v = y("sv-file-clean-btn"), d = y("sv-loading-indicator"), C = y("sv-file-video"), k = y("sv-file-preview");
+      const o = y("survey-string"), a = y("sv-file-choose-btn"), c = y("sv-action-bar"), p = y("sv-file-clean-btn"), d = y("sv-loading-indicator"), C = y("sv-file-video"), k = y("sv-file-preview");
       return i(), u("div", {
         class: l(e.question.fileRootCss),
         ref_key: "root",
@@ -1088,7 +1088,7 @@ const je = /* @__PURE__ */ g({
           placeholder: e.question.title,
           style: { color: "transparent" }
         }, null, 10, Us)) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(e.question.cssClasses.dragArea),
           onDrop: t[0] || (t[0] = (...f) => e.question.onDrop && e.question.onDrop(...f)),
           onDragover: t[1] || (t[1] = (...f) => e.question.onDragOver && e.question.onDragOver(...f)),
@@ -1099,14 +1099,14 @@ const je = /* @__PURE__ */ g({
             key: 0,
             class: l(e.question.getFileDecoratorCss())
           }, [
-            p("span", {
+            v("span", {
               class: l(e.question.cssClasses.dragAreaPlaceholder)
             }, [
               h(o, {
                 locString: e.question.locRenderedPlaceholder
               }, null, 8, ["locString"])
             ], 2),
-            p("div", {
+            v("div", {
               class: l(e.question.cssClasses.wrapper)
             }, [
               e.question.showChooseButton ? (i(), q(a, {
@@ -1123,7 +1123,7 @@ const je = /* @__PURE__ */ g({
               }, T(e.question.noFileChosenCaption), 3)) : m("", !0)
             ], 2)
           ], 2)) : m("", !0),
-          e.question.showRemoveButton ? (i(), q(v, {
+          e.question.showRemoveButton ? (i(), q(p, {
             key: 1,
             question: e.question,
             css: e.question.showRemoveButton
@@ -1142,7 +1142,7 @@ const je = /* @__PURE__ */ g({
             key: 4,
             question: e.question
           }, null, 8, ["question"])) : m("", !0),
-          e.question.showRemoveButtonBottom ? (i(), q(v, {
+          e.question.showRemoveButtonBottom ? (i(), q(p, {
             key: 5,
             question: e.question,
             css: e.question.showRemoveButtonBottom
@@ -1177,13 +1177,13 @@ const je = /* @__PURE__ */ g({
       ref_key: "root",
       ref: n
     }, [
-      p("legend", Qs, T(o.question.locTitle.renderedHtml), 1),
+      v("legend", Qs, T(o.question.locTitle.renderedHtml), 1),
       o.question.hasColumns ? m("", !0) : (i(!0), u(D, { key: 0 }, L(o.question.visibleChoices, (c) => (i(), q(R(e(c)), H({
         key: c.value
       }, t(c)), null, 16))), 128)),
-      o.question.hasColumns ? (i(!0), u(D, { key: 1 }, L(o.question.columns, (c, v) => (i(), u("div", {
+      o.question.hasColumns ? (i(!0), u(D, { key: 1 }, L(o.question.columns, (c, p) => (i(), u("div", {
         class: l(o.question.getColumnClass()),
-        key: v,
+        key: p,
         role: "presentation"
       }, [
         (i(!0), u(D, null, L(c, (d) => (i(), q(R(e(d)), H({
@@ -1200,7 +1200,7 @@ const je = /* @__PURE__ */ g({
     item: {}
   },
   setup(r) {
-    const s = r, n = (o) => s.question.getItemClass(o), e = S({
+    const s = r, n = (o) => s.question.getItemClass(o), e = I({
       get() {
         return s.question.value;
       },
@@ -1212,11 +1212,11 @@ const je = /* @__PURE__ */ g({
     B(() => s.item);
     const t = G(() => s.item.locImageLink);
     return (o, a) => {
-      const c = y("sv-svg-icon"), v = y("survey-string");
+      const c = y("sv-svg-icon"), p = y("survey-string");
       return i(), u("div", {
         class: l(n(o.item))
       }, [
-        p("label", {
+        v("label", {
           class: l(o.question.cssClasses.label)
         }, [
           o.question.multiSelect ? N((i(), u("input", {
@@ -1252,10 +1252,10 @@ const je = /* @__PURE__ */ g({
           }, null, 10, Js)), [
             [ee, e.value]
           ]),
-          p("div", {
+          v("div", {
             class: l(o.question.cssClasses.itemDecorator)
           }, [
-            p("div", {
+            v("div", {
               class: l(o.question.cssClasses.imageContainer)
             }, [
               o.question.cssClasses.checkedItemDecorator ? (i(), u("span", {
@@ -1275,7 +1275,7 @@ const je = /* @__PURE__ */ g({
                 src: w(t),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: I({ objectFit: o.question.imageFit }),
+                style: S({ objectFit: o.question.imageFit }),
                 alt: o.item.locText.renderedHtml,
                 onLoad: a[2] || (a[2] = (d) => {
                   o.question.onContentLoaded(o.item, d);
@@ -1291,7 +1291,7 @@ const je = /* @__PURE__ */ g({
                 src: w(t),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: I({ objectFit: o.question.imageFit }),
+                style: S({ objectFit: o.question.imageFit }),
                 onLoadedmetadata: a[4] || (a[4] = (d) => {
                   o.question.onContentLoaded(o.item, d);
                 }),
@@ -1302,7 +1302,7 @@ const je = /* @__PURE__ */ g({
               !w(t) || o.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: l(o.question.cssClasses.itemNoImage),
-                style: I({
+                style: S({
                   width: o.question.renderedImageWidth + "px",
                   height: o.question.renderedImageHeight + "px",
                   objectFit: o.question.imageFit
@@ -1319,7 +1319,7 @@ const je = /* @__PURE__ */ g({
               key: 0,
               class: l(o.question.cssClasses.itemText)
             }, [
-              h(v, {
+              h(p, {
                 locString: o.item.locText
               }, null, 8, ["locString"])
             ], 2)) : m("", !0)
@@ -1376,13 +1376,13 @@ const je = /* @__PURE__ */ g({
         "aria-describedby": t.question.a11y_input_ariaDescribedBy,
         "aria-invalid": t.question.a11y_input_ariaInvalid,
         "aria-errormessage": t.question.a11y_input_ariaErrormessage,
-        style: I({ resize: t.question.resizeStyle })
+        style: S({ resize: t.question.resizeStyle })
       }, null, 46, xs)) : !t.question.isReadOnlyRenderDiv() && t.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
         ref: n
       }, [
-        p("textarea", {
+        v("textarea", {
           readonly: t.question.isReadOnlyAttr,
           disabled: t.question.isDisabledAttr,
           value: t.question.value,
@@ -1411,7 +1411,7 @@ const je = /* @__PURE__ */ g({
           "aria-describedby": t.question.a11y_input_ariaDescribedBy,
           "aria-invalid": t.question.a11y_input_ariaInvalid,
           "aria-errormessage": t.question.a11y_input_ariaErrormessage,
-          style: I({ resize: t.question.resizeStyle })
+          style: S({ resize: t.question.resizeStyle })
         }, null, 46, en),
         h(a, {
           counter: t.question.characterCounter,
@@ -1469,7 +1469,7 @@ const ln = /* @__PURE__ */ g({
       s.question.onClick(a);
     }, t = (a) => {
       s.question.onKeyUp(a);
-    }, o = S({
+    }, o = I({
       get() {
         var a;
         return (a = s.question.value) != null ? a : "";
@@ -1480,13 +1480,13 @@ const ln = /* @__PURE__ */ g({
       }
     });
     return (a, c) => {
-      const v = y("sv-dropdown-option-item"), d = y("sv-svg-icon"), C = y("survey-other-choice");
+      const p = y("sv-dropdown-option-item"), d = y("sv-svg-icon"), C = y("survey-other-choice");
       return i(), u("div", {
         class: l(a.question.renderCssRoot),
         ref_key: "root",
         ref: n
       }, [
-        p("div", {
+        v("div", {
           class: l(a.question.cssClasses.selectWrapper)
         }, [
           a.question.isReadOnly ? (i(), u("div", {
@@ -1509,7 +1509,7 @@ const ln = /* @__PURE__ */ g({
             required: a.question.isRequired
           }, [
             a.question.allowClear ? (i(), u("option", tn, T(a.question.placeholder), 1)) : m("", !0),
-            (i(!0), u(D, null, L(a.question.visibleChoices, (k) => (i(), q(v, {
+            (i(!0), u(D, null, L(a.question.visibleChoices, (k) => (i(), q(p, {
               item: k,
               key: k.id
             }, null, 8, ["item"]))), 128))
@@ -1552,7 +1552,7 @@ const ln = /* @__PURE__ */ g({
     question: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = S(() => s.question.dropdownListModel), t = (b) => {
+    const s = r, n = $(null), e = I(() => s.question.dropdownListModel), t = (b) => {
       var A;
       (A = e.value) == null || A.onClick(b);
     }, o = (b) => {
@@ -1564,21 +1564,21 @@ const ln = /* @__PURE__ */ g({
     }, c = (b) => {
       var A;
       (A = e.value) == null || A.keyHandler(b);
-    }, v = () => {
+    }, p = () => {
       if (n.value) {
         const b = n.value, A = e.value.inputStringRendered;
         Be.isTwoValueEquals(A, b.value, !1, !0, !1) || (b.value = e.value.inputStringRendered);
       }
     }, d = (b) => {
-      s.question.onBlur(b), v();
+      s.question.onBlur(b), p();
     }, C = (b) => {
       s.question.onFocus(b);
     }, k = (b) => {
       e.value.inputStringRendered = b.target.value;
-    }, f = S(
+    }, f = I(
       () => s.question.showSelectedItemLocText
-    ), _ = S(() => s.question.selectedItemLocText);
-    return B(() => e.value), x(v), M(v), (b, A) => {
+    ), _ = I(() => s.question.selectedItemLocText);
+    return B(() => e.value), x(p), M(p), (b, A) => {
       const W = y("survey-string"), F = y("sv-svg-icon"), J = y("sv-popup");
       return i(), u("div", {
         class: l(b.question.cssClasses.selectWrapper),
@@ -1606,9 +1606,9 @@ const ln = /* @__PURE__ */ g({
             key: 0,
             class: l(b.question.cssClasses.hintPrefix)
           }, [
-            p("span", null, T(e.value.hintStringPrefix), 1)
+            v("span", null, T(e.value.hintStringPrefix), 1)
           ], 2)) : m("", !0),
-          p("div", {
+          v("div", {
             class: l(b.question.cssClasses.controlValue)
           }, [
             f.value ? (i(), q(W, {
@@ -1619,15 +1619,15 @@ const ln = /* @__PURE__ */ g({
               key: 1,
               class: l(b.question.cssClasses.hintSuffix)
             }, [
-              p("span", mn, T(e.value.inputStringRendered), 1),
-              p("span", null, T(e.value.hintStringSuffix), 1)
+              v("span", mn, T(e.value.inputStringRendered), 1),
+              v("span", null, T(e.value.hintStringSuffix), 1)
             ], 2)) : m("", !0),
             b.question.showInputFieldComponent ? (i(), q(R(b.question.inputFieldComponentName), {
               key: 2,
               item: e.value.getSelectedAction(),
               question: b.question
             }, null, 8, ["item", "question"])) : m("", !0),
-            p("input", {
+            v("input", {
               type: "text",
               ref_key: "inputElement",
               ref: n,
@@ -1680,7 +1680,7 @@ const ln = /* @__PURE__ */ g({
             key: 0,
             locString: b.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
-          p("div", null, T(b.question.readOnlyText), 1)
+          v("div", null, T(b.question.readOnlyText), 1)
         ], 10, pn)) : (i(), q(J, {
           key: 1,
           model: b.question.dropdownListModel.popupModel
@@ -1729,7 +1729,7 @@ const ln = /* @__PURE__ */ g({
     question: {}
   },
   setup(r) {
-    const s = r, n = S(() => {
+    const s = r, n = I(() => {
       const d = s.question;
       return d.dropdownListModel || (d.dropdownListModel = new Le(d)), s.question.dropdownListModel;
     }), e = (d) => {
@@ -1747,7 +1747,7 @@ const ln = /* @__PURE__ */ g({
     }, c = (d) => {
       var C;
       (C = n.value) == null || C.onBlur(d);
-    }, v = ne(() => s.question.selectedChoices);
+    }, p = ne(() => s.question.selectedChoices);
     return B(() => n.value), (d, C) => {
       const k = y("sv-tagbox-item"), f = y("sv-tagbox-filter"), _ = y("sv-svg-icon"), b = y("sv-popup"), A = y("survey-string");
       return i(), u("div", {
@@ -1772,10 +1772,10 @@ const ln = /* @__PURE__ */ g({
           "aria-activedescendant": n.value.ariaActivedescendant,
           required: d.question.isRequired ? !0 : null
         }, [
-          p("div", {
+          v("div", {
             class: l(d.question.cssClasses.controlValue)
           }, [
-            (i(!0), u(D, null, L(w(v), (W, F) => (i(), q(k, {
+            (i(!0), u(D, null, L(w(p), (W, F) => (i(), q(k, {
               item: W,
               question: d.question,
               key: "item" + F
@@ -1851,7 +1851,7 @@ const ln = /* @__PURE__ */ g({
       s.model.onFocus(a);
     };
     return B(() => s.model), (a, c) => {
-      const v = y("survey-string");
+      const p = y("survey-string");
       return i(), u("div", {
         class: l(a.question.cssClasses.hint)
       }, [
@@ -1859,12 +1859,12 @@ const ln = /* @__PURE__ */ g({
           key: 0,
           class: l(a.question.cssClasses.hintPrefix)
         }, [
-          p("span", null, T(a.model.hintStringPrefix), 1)
+          v("span", null, T(a.model.hintStringPrefix), 1)
         ], 2)) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(a.question.cssClasses.hintSuffixWrapper)
         }, [
-          a.question.showSelectedItemLocText ? (i(), q(v, {
+          a.question.showSelectedItemLocText ? (i(), q(p, {
             key: 0,
             locString: a.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
@@ -1872,10 +1872,10 @@ const ln = /* @__PURE__ */ g({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            p("span", Cn, T(a.model.inputStringRendered), 1),
-            p("span", null, T(a.model.hintStringSuffix), 1)
+            v("span", Cn, T(a.model.inputStringRendered), 1),
+            v("span", null, T(a.model.hintStringSuffix), 1)
           ], 2)) : m("", !0),
-          N(p("input", {
+          N(v("input", {
             type: "text",
             autocomplete: "off",
             "onUpdate:modelValue": c[0] || (c[0] = (d) => a.model.inputStringRendered = d),
@@ -1920,12 +1920,12 @@ const ln = /* @__PURE__ */ g({
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        p("div", fn, [
+        v("div", fn, [
           h(o, {
             locString: e.item.locText
           }, null, 8, ["locString"])
         ]),
-        p("div", {
+        v("div", {
           class: l(e.question.cssClasses.cleanItemButton),
           onClick: n
         }, [
@@ -1964,17 +1964,17 @@ const ln = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        o.question.selectToRankEnabled ? m("", !0) : (i(!0), u(D, { key: 0 }, L(o.question.renderedRankingChoices, (v, d) => (i(), q(R(e(v)), H({
-          key: v.value + "-" + d + "-item"
-        }, t(v, d)), null, 16))), 128)),
+        o.question.selectToRankEnabled ? m("", !0) : (i(!0), u(D, { key: 0 }, L(o.question.renderedRankingChoices, (p, d) => (i(), q(R(e(p)), H({
+          key: p.value + "-" + d + "-item"
+        }, t(p, d)), null, 16))), 128)),
         o.question.selectToRankEnabled ? (i(), u("div", {
           key: 1,
           class: l(o.question.getContainerClasses("from")),
           "data-ranking": "from-container"
         }, [
-          (i(!0), u(D, null, L(o.question.renderedUnRankingChoices, (v, d) => (i(), q(R(e(v)), H({
-            key: v.value + "-" + d + "-item"
-          }, t(v, d, !0)), null, 16))), 128)),
+          (i(!0), u(D, null, L(o.question.renderedUnRankingChoices, (p, d) => (i(), q(R(e(p)), H({
+            key: p.value + "-" + d + "-item"
+          }, t(p, d, !0)), null, 16))), 128)),
           o.question.renderedUnRankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: l(o.question.cssClasses.containerPlaceholder)
@@ -1993,9 +1993,9 @@ const ln = /* @__PURE__ */ g({
           class: l(o.question.getContainerClasses("to")),
           "data-ranking": "to-container"
         }, [
-          (i(!0), u(D, null, L(o.question.renderedRankingChoices, (v, d) => (i(), q(R(e(v)), H({
-            key: v.value + "-" + d + "-item"
-          }, t(v, d)), null, 16))), 128)),
+          (i(!0), u(D, null, L(o.question.renderedRankingChoices, (p, d) => (i(), q(R(e(p)), H({
+            key: p.value + "-" + d + "-item"
+          }, t(p, d)), null, 16))), 128)),
           o.question.renderedRankingChoices.length === 0 ? (i(), u("div", {
             key: 0,
             class: l(o.question.cssClasses.containerPlaceholder)
@@ -2021,7 +2021,7 @@ const ln = /* @__PURE__ */ g({
     unrankedItem: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = S(() => s.question.getNumberByIndex(s.index));
+    const s = r, n = I(() => s.question.getNumberByIndex(s.index));
     return B(() => s.item), (e, t) => (i(), u("div", {
       tabindex: e.question.getItemTabIndex(e.item),
       "data-sv-drop-target-ranking-item": e.index,
@@ -2046,27 +2046,27 @@ const ln = /* @__PURE__ */ g({
         );
       })
     }, [
-      p("div", Rn, [
-        p("div", {
+      v("div", Rn, [
+        v("div", {
           class: l(e.question.cssClasses.itemGhostNode)
         }, null, 2),
-        p("div", {
+        v("div", {
           class: l(e.question.cssClasses.itemContent)
         }, [
-          p("div", {
+          v("div", {
             class: l(e.question.cssClasses.itemIconContainer)
           }, [
             (i(), u("svg", {
               class: l(e.question.getIconHoverCss())
             }, [
-              p("use", {
+              v("use", {
                 "xlink:href": e.question.dragDropSvgIcon
               }, null, 8, Tn)
             ], 2)),
             (i(), u("svg", {
               class: l(e.question.getIconFocusCss())
             }, [
-              p("use", {
+              v("use", {
                 "xlink:href": e.question.arrowsSvgIcon
               }, null, 8, $n)
             ], 2))
@@ -2079,7 +2079,7 @@ const ln = /* @__PURE__ */ g({
             class: l(e.question.getItemIndexClasses(e.item))
           }, [
             (i(), u("svg", null, [
-              p("use", {
+              v("use", {
                 "xlink:href": e.question.dashSvgIcon
               }, null, 8, Dn)
             ]))
@@ -2111,7 +2111,7 @@ const ln = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Ln = { role: "radiogroup" }, An = /* @__PURE__ */ p("legend", {
+}), Ln = { role: "radiogroup" }, An = /* @__PURE__ */ v("legend", {
   role: "presentation",
   class: "sv-hidden"
 }, null, -1), Nn = /* @__PURE__ */ g({
@@ -2131,7 +2131,7 @@ const ln = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        p("fieldset", Ln, [
+        v("fieldset", Ln, [
           An,
           t.question.hasMinLabel ? (i(), u("span", {
             key: 0,
@@ -2141,10 +2141,10 @@ const ln = /* @__PURE__ */ g({
               locString: t.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (i(!0), u(D, null, L(t.question.renderedRateItems, (c, v) => (i(), q(R(t.question.itemComponent), {
-            key: e(v),
+          (i(!0), u(D, null, L(t.question.renderedRateItems, (c, p) => (i(), q(R(t.question.itemComponent), {
+            key: e(p),
             item: c,
-            index: v,
+            index: p,
             question: t.question
           }, null, 8, ["item", "index", "question"]))), 128)),
           t.question.hasMaxLabel ? (i(), u("span", {
@@ -2175,7 +2175,7 @@ const ln = /* @__PURE__ */ g({
         onMousedown: e[1] || (e[1] = (o) => n.question.onMouseDown()),
         class: l(n.question.getItemClassByText(n.item.itemValue, n.item.text))
       }, [
-        p("input", {
+        v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
           name: n.question.questionName,
@@ -2189,7 +2189,7 @@ const ln = /* @__PURE__ */ g({
           "aria-invalid": n.question.ariaInvalid,
           "aria-errormessage": n.question.ariaErrormessage
         }, null, 8, Pn),
-        p("span", {
+        v("span", {
           class: l(n.question.cssClasses.itemText),
           "data-text": n.item.text
         }, [
@@ -2214,12 +2214,12 @@ const ln = /* @__PURE__ */ g({
       return i(), u("label", {
         key: n.item.value,
         onMousedown: e[1] || (e[1] = (o) => n.question.onMouseDown()),
-        style: I(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
+        style: S(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
         class: l(n.question.getItemClass(n.item.itemValue, n.item.highlight)),
         onMouseover: e[2] || (e[2] = (o) => n.question.onItemMouseIn(n.item)),
         onMouseleave: e[3] || (e[3] = (o) => n.question.onItemMouseOut(n.item))
       }, [
-        p("input", {
+        v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
           name: n.question.questionName,
@@ -2259,7 +2259,7 @@ const ln = /* @__PURE__ */ g({
         onMouseover: e[2] || (e[2] = (o) => n.question.onItemMouseIn(n.item)),
         onMouseleave: e[3] || (e[3] = (o) => n.question.onItemMouseOut(n.item))
       }, [
-        p("input", {
+        v("input", {
           type: "radio",
           class: "sv-visuallyhidden",
           name: n.question.questionName,
@@ -2301,7 +2301,7 @@ const ln = /* @__PURE__ */ g({
     return B(() => s.item), (n, e) => {
       const t = y("survey-string");
       return i(), u("div", On, [
-        p("span", zn, T(n.item.title), 1),
+        v("span", zn, T(n.item.title), 1),
         n.item.description ? (i(), u("div", Un, [
           h(t, {
             locString: n.item.description
@@ -2350,7 +2350,7 @@ const Qn = /* @__PURE__ */ g({
       s.question.onSwitchClickModel(o);
     };
     return (o, a) => {
-      var v;
+      var p;
       const c = y("survey-string");
       return i(), u("div", {
         class: l(o.question.cssClasses.root),
@@ -2358,13 +2358,13 @@ const Qn = /* @__PURE__ */ g({
         ref: n,
         onKeydown: a[4] || (a[4] = (d) => o.question.onKeyDownCore(d))
       }, [
-        p("label", {
+        v("label", {
           class: l(o.question.getItemCss())
         }, [
-          N(p("input", {
+          N(v("input", {
             type: "checkbox",
             name: o.question.name,
-            value: (v = o.question.booleanValue) != null ? v : "",
+            value: (p = o.question.booleanValue) != null ? p : "",
             "onUpdate:modelValue": a[0] || (a[0] = (d) => o.question.booleanValue = d),
             class: l(o.question.cssClasses.control),
             id: o.question.inputId,
@@ -2381,11 +2381,11 @@ const Qn = /* @__PURE__ */ g({
           }, null, 42, jn), [
             [ie, o.question.booleanValue]
           ]),
-          p("div", {
+          v("div", {
             class: l(o.question.cssClasses.sliderGhost),
             onClick: a[1] || (a[1] = (d) => e(d, o.question.swapOrder))
           }, [
-            p("span", {
+            v("span", {
               class: l(o.question.getLabelCss(o.question.swapOrder))
             }, [
               h(c, {
@@ -2393,11 +2393,11 @@ const Qn = /* @__PURE__ */ g({
               }, null, 8, ["locString"])
             ], 2)
           ], 2),
-          p("div", {
+          v("div", {
             class: l(o.question.cssClasses.switch),
             onClick: a[2] || (a[2] = (d) => t(d))
           }, [
-            p("span", {
+            v("span", {
               class: l(o.question.cssClasses.slider)
             }, [
               o.question.cssClasses.sliderText && o.question.isDeterminated ? (i(), u("span", {
@@ -2410,11 +2410,11 @@ const Qn = /* @__PURE__ */ g({
               ], 2)) : m("", !0)
             ], 2)
           ], 2),
-          p("div", {
+          v("div", {
             class: l(o.question.cssClasses.sliderGhost),
             onClick: a[3] || (a[3] = (d) => e(d, !o.question.swapOrder))
           }, [
-            p("span", {
+            v("span", {
               class: l(o.question.getLabelCss(!o.question.swapOrder))
             }, [
               h(c, {
@@ -2447,7 +2447,7 @@ const Jn = /* @__PURE__ */ g({
         ref_key: "root",
         ref: s
       }, [
-        p("fieldset", {
+        v("fieldset", {
           role: "presentation",
           class: l(e.question.cssClasses.radioFieldset)
         }, [
@@ -2491,10 +2491,10 @@ const Jn = /* @__PURE__ */ g({
         role: "presentation",
         class: l(e.question.getRadioItemClass(e.question.cssClasses, e.value))
       }, [
-        p("label", {
+        v("label", {
           class: l(e.question.cssClasses.radioLabel)
         }, [
-          p("input", {
+          v("input", {
             type: "radio",
             name: e.question.name,
             value: e.value,
@@ -2513,12 +2513,12 @@ const Jn = /* @__PURE__ */ g({
               key: 0,
               class: l(e.question.cssClasses.itemRadioDecorator)
             }, [
-              p("use", {
+              v("use", {
                 "xlink:href": e.question.itemSvgIcon
               }, null, 8, Yn)
             ], 2)) : m("", !0)
           ], 2)) : m("", !0),
-          p("span", {
+          v("span", {
             class: l(e.question.cssClasses.radioControlLabel)
           }, [
             h(o, { locString: e.locText }, null, 8, ["locString"])
@@ -2527,7 +2527,7 @@ const Jn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), xn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], eo = ["xlink:href"], so = /* @__PURE__ */ p("span", { class: "check" }, null, -1), no = ["id"], oo = ["id"];
+}), xn = ["name", "value", "id", ".indeterminate", "disabled", "readonly", "aria-required", "aria-label", "aria-invalid", "aria-errormessage"], eo = ["xlink:href"], so = /* @__PURE__ */ v("span", { class: "check" }, null, -1), no = ["id"], oo = ["id"];
 se.Instance.registerRenderer(
   "boolean",
   "checkbox",
@@ -2543,23 +2543,23 @@ const to = /* @__PURE__ */ g({
   setup(r) {
     const s = r, n = $(null);
     return P(s, n), (e, t) => {
-      var v;
+      var p;
       const o = y("survey-element-title-content"), a = y("sv-title-actions"), c = y("survey-string");
       return i(), u("div", {
         class: l(e.question.cssClasses.rootCheckbox),
         ref_key: "root",
         ref: n
       }, [
-        p("div", {
+        v("div", {
           class: l(e.question.getCheckboxItemCss())
         }, [
-          p("label", {
+          v("label", {
             class: l(e.question.cssClasses.checkboxLabel)
           }, [
-            N(p("input", {
+            N(v("input", {
               type: "checkbox",
               name: e.question.name,
-              value: (v = e.question.booleanValue) != null ? v : "",
+              value: (p = e.question.booleanValue) != null ? p : "",
               "onUpdate:modelValue": t[0] || (t[0] = (d) => e.question.booleanValue = d),
               class: l(e.question.cssClasses.controlCheckbox),
               id: e.question.inputId,
@@ -2573,14 +2573,14 @@ const to = /* @__PURE__ */ g({
             }, null, 42, xn), [
               [ie, e.question.booleanValue]
             ]),
-            p("span", {
+            v("span", {
               class: l(e.question.cssClasses.checkboxMaterialDecorator)
             }, [
               e.question.svgIcon ? (i(), u("svg", {
                 key: 0,
                 class: l(e.question.cssClasses.checkboxItemDecorator)
               }, [
-                p("use", {
+                v("use", {
                   "xlink:href": e.question.svgIcon
                 }, null, 8, eo)
               ], 2)) : m("", !0),
@@ -2631,9 +2631,9 @@ const to = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        p("tbody", null, [
-          (i(!0), u(D, null, L(w(e), (c, v) => (i(), u(D, {
-            key: t.question.inputId + "rowkey" + v
+        v("tbody", null, [
+          (i(!0), u(D, null, L(w(e), (c, p) => (i(), u(D, {
+            key: t.question.inputId + "rowkey" + p
           }, [
             c.isVisible ? (i(), u("tr", {
               key: 0,
@@ -2663,7 +2663,7 @@ const to = /* @__PURE__ */ g({
   setup(r) {
     const s = r, n = (t) => re(t);
     B(() => s.cell.item.editor);
-    const e = S(() => s.cell.item);
+    const e = I(() => s.cell.item);
     return (t, o) => {
       const a = y("survey-string"), c = y("survey-errors");
       return t.cell.isErrorsCell ? (i(), q(c, {
@@ -2673,9 +2673,9 @@ const to = /* @__PURE__ */ g({
         key: 0,
         class: l(t.question.getItemLabelCss(e.value))
       }, [
-        p("span", {
+        v("span", {
           class: l(t.question.getItemTitleCss()),
-          style: I({ minWidth: t.question.itemTitleWidth, width: t.question.itemTitleWidth })
+          style: S({ minWidth: t.question.itemTitleWidth, width: t.question.itemTitleWidth })
         }, [
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
@@ -2694,7 +2694,7 @@ const to = /* @__PURE__ */ g({
         (i(), u("div", {
           key: e.value.editor.id,
           class: l(t.question.getItemCss()),
-          onFocusin: o[0] || (o[0] = (v) => e.value.focusIn())
+          onFocusin: o[0] || (o[0] = (p) => e.value.focusIn())
         }, [
           (i(), q(R(n(e.value.editor)), {
             question: e.value.editor
@@ -2734,28 +2734,28 @@ const to = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        p("fieldset", null, [
-          p("legend", ao, T(o.question.locTitle.renderedHtml), 1),
-          p("table", {
+        v("fieldset", null, [
+          v("legend", ao, T(o.question.locTitle.renderedHtml), 1),
+          v("table", {
             class: l(o.question.getTableCss())
           }, [
             o.question.showHeader ? (i(), u("thead", uo, [
-              p("tr", null, [
+              v("tr", null, [
                 o.question.hasRows ? (i(), u("td", mo)) : m("", !0),
-                (i(!0), u(D, null, L(o.question.visibleColumns, (v, d) => (i(), u("th", {
+                (i(!0), u(D, null, L(o.question.visibleColumns, (p, d) => (i(), u("th", {
                   key: d,
                   class: l(o.question.cssClasses.headerCell),
-                  style: I({
+                  style: S({
                     minWidth: o.question.columnMinWidth,
                     width: o.question.columnMinWidth
                   })
                 }, [
-                  (i(), q(R(o.question.getColumnHeaderWrapperComponentName(v)), {
-                    componentData: o.question.getColumnHeaderWrapperComponentData(v)
+                  (i(), q(R(o.question.getColumnHeaderWrapperComponentName(p)), {
+                    componentData: o.question.getColumnHeaderWrapperComponentData(p)
                   }, {
                     default: V(() => [
                       h(c, {
-                        locString: v.locText
+                        locString: p.locText
                       }, null, 8, ["locString"])
                     ]),
                     _: 2
@@ -2763,24 +2763,24 @@ const to = /* @__PURE__ */ g({
                 ], 6))), 128))
               ])
             ])) : m("", !0),
-            p("tbody", null, [
-              (i(!0), u(D, null, L(e.value, (v, d) => (i(), u("tr", {
-                key: "row_" + v.name + "_" + d,
-                class: l(v.rowClasses || void 0)
+            v("tbody", null, [
+              (i(!0), u(D, null, L(e.value, (p, d) => (i(), u("tr", {
+                key: "row_" + p.name + "_" + d,
+                class: l(p.rowClasses || void 0)
               }, [
-                N(p("td", {
-                  class: l(v.rowTextClasses),
-                  style: I({
+                N(v("td", {
+                  class: l(p.rowTextClasses),
+                  style: S({
                     minWidth: o.question.rowTitleWidth,
                     width: o.question.rowTitleWidth
                   })
                 }, [
-                  (i(), q(R(o.question.getRowHeaderWrapperComponentName(v)), {
-                    componentData: o.question.getRowHeaderWrapperComponentData(v)
+                  (i(), q(R(o.question.getRowHeaderWrapperComponentName(p)), {
+                    componentData: o.question.getRowHeaderWrapperComponentData(p)
                   }, {
                     default: V(() => [
                       h(c, {
-                        locString: v.locText
+                        locString: p.locText
                       }, null, 8, ["locString"])
                     ]),
                     _: 2
@@ -2790,22 +2790,22 @@ const to = /* @__PURE__ */ g({
                 ]),
                 o.question.hasCellText ? (i(!0), u(D, { key: 0 }, L(o.question.visibleColumns, (C, k) => (i(), u("td", {
                   key: k,
-                  class: l(o.question.getItemClass(v, C)),
-                  onClick: (f) => t(v, C)
+                  class: l(o.question.getItemClass(p, C)),
+                  onClick: (f) => t(p, C)
                 }, [
                   h(c, {
-                    locString: o.question.getCellDisplayLocText(v.name, C)
+                    locString: o.question.getCellDisplayLocText(p.name, C)
                   }, null, 8, ["locString"])
                 ], 10, co))), 128)) : m("", !0),
                 o.question.hasCellText ? m("", !0) : (i(!0), u(D, { key: 1 }, L(o.question.visibleColumns, (C, k) => (i(), u("td", {
                   key: k,
                   "data-responsive-title": C.locText.renderedHtml,
                   class: l(o.question.cssClasses.cell),
-                  onClick: (f) => t(v, C)
+                  onClick: (f) => t(p, C)
                 }, [
                   (i(), q(R(o.question.cellComponent), {
                     question: o.question,
-                    row: v,
+                    row: p,
                     column: C,
                     columnIndex: k
                   }, null, 8, ["question", "row", "column", "columnIndex"]))
@@ -2846,10 +2846,10 @@ const to = /* @__PURE__ */ g({
         ref_key: "root",
         ref: n
       }, [
-        (i(!0), u(D, null, L(t.row.cells, (c, v) => (i(), q(a, {
+        (i(!0), u(D, null, L(t.row.cells, (c, p) => (i(), q(a, {
           cell: c,
           question: t.question,
-          key: t.row.id + "_" + v
+          key: t.row.id + "_" + p
         }, null, 8, ["cell", "question"]))), 128))
       ], 42, yo)) : m("", !0);
     };
@@ -2870,7 +2870,7 @@ const to = /* @__PURE__ */ g({
         onMousedown: n[1] || (n[1] = (t) => s.question.onMouseDown()),
         class: l(s.question.getItemClass(s.row, s.column))
       }, [
-        N(p("input", {
+        N(v("input", {
           type: "radio",
           class: l(s.question.cssClasses.itemValue),
           name: s.row.fullName,
@@ -2889,14 +2889,14 @@ const to = /* @__PURE__ */ g({
         }, null, 10, go), [
           [ee, s.row.value]
         ]),
-        p("span", {
+        v("span", {
           class: l(s.question.cssClasses.materialDecorator)
         }, [
           s.question.itemSvgIcon ? (i(), u("svg", {
             key: 0,
             class: l(s.question.cssClasses.itemDecorator)
           }, [
-            p("use", {
+            v("use", {
               "xlink:href": s.question.itemSvgIcon
             }, null, 8, ho)
           ], 2)) : m("", !0)
@@ -2935,23 +2935,23 @@ const to = /* @__PURE__ */ g({
     question: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.question.renderedTable);
+    const s = r, n = I(() => s.question.renderedTable);
     return B(() => n.value), (e, t) => {
-      const o = y("survey-string"), a = y("survey-matrixheaderrequired"), c = y("survey-matrix-row"), v = y("survey-matrixdropdown-cell");
+      const o = y("survey-string"), a = y("survey-matrixheaderrequired"), c = y("survey-matrix-row"), p = y("survey-matrixdropdown-cell");
       return i(), u("div", {
-        style: I({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
+        style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: l(e.question.cssClasses.tableWrapper)
       }, [
-        p("table", {
+        v("table", {
           class: l(e.question.getTableCss())
         }, [
           n.value.showHeader ? (i(), u("thead", ko, [
-            p("tr", null, [
+            v("tr", null, [
               (i(!0), u(D, null, L(n.value.headerRow.cells, (d) => (i(), u(D, null, [
                 d.hasTitle ? (i(), u("th", {
                   key: "header_" + d.id,
                   class: l(d.className),
-                  style: I({ minWidth: d.minWidth, width: d.width })
+                  style: S({ minWidth: d.minWidth, width: d.width })
                 }, [
                   (i(), q(R(e.question.getColumnHeaderWrapperComponentName(d)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(d)
@@ -2972,12 +2972,12 @@ const to = /* @__PURE__ */ g({
                 d.hasTitle ? m("", !0) : (i(), u("td", {
                   class: l(d.className),
                   key: "header_" + d.id,
-                  style: I({ minWidth: d.minWidth, width: d.width })
+                  style: S({ minWidth: d.minWidth, width: d.width })
                 }, null, 6))
               ], 64))), 256))
             ])
           ])) : m("", !0),
-          p("tbody", null, [
+          v("tbody", null, [
             (i(!0), u(D, null, L(n.value.renderedRows, (d) => (i(), q(c, {
               key: e.question.inputId + "_" + d.id,
               row: d,
@@ -2985,8 +2985,8 @@ const to = /* @__PURE__ */ g({
             }, null, 8, ["row", "question"]))), 128))
           ]),
           n.value.showFooter ? (i(), u("tfoot", fo, [
-            p("tr", null, [
-              (i(!0), u(D, null, L(n.value.footerRow.cells, (d, C) => (i(), q(v, {
+            v("tr", null, [
+              (i(!0), u(D, null, L(n.value.footerRow.cells, (d, C) => (i(), q(p, {
                 cell: d,
                 question: e.question,
                 key: "footer_" + C
@@ -2997,7 +2997,7 @@ const to = /* @__PURE__ */ g({
       ], 6);
     };
   }
-}), Io = /* @__PURE__ */ p("span", null, "\xA0", -1), So = /* @__PURE__ */ g({
+}), Io = /* @__PURE__ */ v("span", null, "\xA0", -1), So = /* @__PURE__ */ g({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -3038,7 +3038,7 @@ const to = /* @__PURE__ */ g({
       };
       s.question.survey.matrixAfterCellRender(s.question, k), C && C.afterRenderCore(d);
     });
-    const c = S(() => {
+    const c = I(() => {
       const d = s.cell;
       if (d.hasPanel) {
         const C = d.panel, k = C.survey;
@@ -3049,7 +3049,7 @@ const to = /* @__PURE__ */ g({
         }
         return "survey-panel";
       }
-    }), v = S(() => {
+    }), p = I(() => {
       if (s.cell.hasPanel) {
         const C = s.cell.panel, k = C.survey;
         let f;
@@ -3065,10 +3065,11 @@ const to = /* @__PURE__ */ g({
     });
     return (d, C) => {
       const k = y("survey-errors"), f = y("sv-matrix-drag-drop-icon"), _ = y("sv-action-bar"), b = y("survey-string"), A = y("survey-radiogroup-item"), W = y("survey-checkbox-item"), F = y("survey-other-choice");
-      return i(), u("td", {
+      return d.cell.isVisible ? (i(), u("td", {
+        key: 0,
         class: l(d.cell.className),
         title: d.cell.getTitle(),
-        style: I(t()),
+        style: S(t()),
         colspan: d.cell.colSpans,
         onFocusin: C[0] || (C[0] = (J) => d.cell.focusIn()),
         ref_key: "root",
@@ -3087,7 +3088,7 @@ const to = /* @__PURE__ */ g({
           model: d.cell.item.getData(),
           handleClick: !1
         }, null, 8, ["model"])) : m("", !0),
-        d.cell.hasPanel ? (i(), q(R(c.value), z(H({ key: 3 }, v.value)), null, 16)) : m("", !0),
+        d.cell.hasPanel ? (i(), q(R(c.value), z(H({ key: 3 }, p.value)), null, 16)) : m("", !0),
         d.cell.showResponsiveTitle ? (i(), u("span", {
           key: 4,
           class: l(d.cell.responsiveTitleCss)
@@ -3158,7 +3159,7 @@ const to = /* @__PURE__ */ g({
           ]),
           _: 1
         }, 8, ["componentData"])) : m("", !0)
-      ], 46, Ro);
+      ], 46, Ro)) : m("", !0);
     };
   }
 }), $o = /* @__PURE__ */ g({
@@ -3183,7 +3184,7 @@ const to = /* @__PURE__ */ g({
           key: 0,
           class: l(t.question.cssClasses.footer)
         }, [
-          p("button", {
+          v("button", {
             type: "button",
             class: l(t.question.getAddRowButtonCss()),
             onClick: e
@@ -3191,7 +3192,7 @@ const to = /* @__PURE__ */ g({
             h(a, {
               locString: t.question.locAddRowText
             }, null, 8, ["locString"]),
-            p("span", {
+            v("span", {
               class: l(t.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)
@@ -3204,7 +3205,7 @@ const to = /* @__PURE__ */ g({
           key: 2,
           class: l(t.question.cssClasses.emptyRowsSection)
         }, [
-          p("div", {
+          v("div", {
             class: l(t.question.cssClasses.emptyRowsText)
           }, [
             h(a, {
@@ -3220,7 +3221,7 @@ const to = /* @__PURE__ */ g({
             h(a, {
               locString: t.question.locAddRowText
             }, null, 8, ["locString"]),
-            p("span", {
+            v("span", {
               class: l(t.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)) : m("", !0)
@@ -3229,7 +3230,7 @@ const to = /* @__PURE__ */ g({
           key: 3,
           class: l(t.question.cssClasses.footer)
         }, [
-          p("button", {
+          v("button", {
             type: "button",
             class: l(t.question.getAddRowButtonCss()),
             onClick: e
@@ -3237,7 +3238,7 @@ const to = /* @__PURE__ */ g({
             h(a, {
               locString: t.question.locAddRowText
             }, null, 8, ["locString"]),
-            p("span", {
+            v("span", {
               class: l(t.question.cssClasses.iconAdd)
             }, null, 2)
           ], 2)
@@ -3248,8 +3249,8 @@ const to = /* @__PURE__ */ g({
 });
 function le(r, s = !0) {
   return {
-    question: S(() => r.item.data.question),
-    row: s ? S(() => r.item.data.row) : void 0
+    question: I(() => r.item.data.question),
+    row: s ? I(() => r.item.data.row) : void 0
   };
 }
 const Do = ["disabled"], _o = /* @__PURE__ */ g({
@@ -3270,7 +3271,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
         h(a, {
           locString: w(n).locRemoveRowText
         }, null, 8, ["locString"]),
-        p("span", {
+        v("span", {
           class: l(w(n).cssClasses.iconRemove)
         }, null, 2)
       ], 10, Do);
@@ -3287,7 +3288,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
       key: 0,
       class: l(w(n).cssClasses.dragElementDecorator)
     }, [
-      p("use", {
+      v("use", {
         "xlink:href": w(n).iconDragElement
       }, null, 8, Bo)
     ], 2)) : (i(), u("span", {
@@ -3333,14 +3334,14 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
       n,
       (c) => {
         c.panelCountChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var p;
+          (p = e == null ? void 0 : e.proxy) == null || p.$forceUpdate();
         }, c.currentIndexChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var p;
+          (p = e == null ? void 0 : e.proxy) == null || p.$forceUpdate();
         }, c.renderModeChangedCallback = () => {
-          var v;
-          (v = e == null ? void 0 : e.proxy) == null || v.$forceUpdate();
+          var p;
+          (p = e == null ? void 0 : e.proxy) == null || p.$forceUpdate();
         };
       },
       (c) => {
@@ -3351,17 +3352,17 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
       }
     );
     const t = () => s.question.showLegacyNavigation, o = (c) => {
-      const v = s.question.getSurvey();
-      if (v) {
-        const d = v.getElementWrapperComponentName(c);
+      const p = s.question.getSurvey();
+      if (p) {
+        const d = p.getElementWrapperComponentName(c);
         if (d)
           return d;
       }
       return "panel";
     }, a = (c) => {
-      const v = s.question.getSurvey();
+      const p = s.question.getSurvey();
       let d;
-      return v && (d = v.getElementWrapperComponentData(c)), {
+      return p && (d = p.getElementWrapperComponentData(c)), {
         componentName: "survey-panel",
         componentData: {
           element: c,
@@ -3369,7 +3370,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
         }
       };
     };
-    return (c, v) => {
+    return (c, p) => {
       const d = y("survey-string"), C = y("sv-paneldynamic-add-btn"), k = y("survey-paneldynamicprogress"), f = y("sv-paneldynamic-remove-btn"), _ = y("survey-paneldynamicprogress-v2");
       return i(), u("div", {
         class: l(c.question.cssClasses.root),
@@ -3380,7 +3381,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
           key: 0,
           class: l(c.question.cssClasses.noEntriesPlaceholder)
         }, [
-          p("span", null, [
+          v("span", null, [
             h(d, {
               locString: c.question.locNoEntriesText
             }, null, 8, ["locString"])
@@ -3393,9 +3394,9 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
           key: 1,
           class: l(c.question.cssClasses.progress)
         }, [
-          p("div", {
+          v("div", {
             class: l(c.question.cssClasses.progressBar),
-            style: I({ width: c.question.progress }),
+            style: S({ width: c.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : m("", !0),
@@ -3403,13 +3404,13 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
           key: 2,
           question: c.question
         }, null, 8, ["question"])) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(c.question.cssClasses.panelsContainer)
         }, [
           (i(!0), u(D, null, L(c.question.renderedPanels, (b, A) => (i(), u(D, {
             key: b.id
           }, [
-            p("div", {
+            v("div", {
               class: l(c.question.getPanelWrapperCss(b))
             }, [
               (i(), q(R(o(b)), z(te(a(b))), null, 16)),
@@ -3447,15 +3448,15 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
   setup(r) {
     const s = r, n = () => s.question.isProgressTopShowing ? s.question.cssClasses.progressTop : s.question.cssClasses.progressBottom;
     return (e, t) => {
-      const o = y("sv-paneldynamic-prev-btn"), a = y("sv-paneldynamic-next-btn"), c = y("sv-paneldynamic-add-btn"), v = y("sv-paneldynamic-progress-text");
+      const o = y("sv-paneldynamic-prev-btn"), a = y("sv-paneldynamic-next-btn"), c = y("sv-paneldynamic-add-btn"), p = y("sv-paneldynamic-progress-text");
       return i(), u("div", {
         class: l(n())
       }, [
-        p("div", {
+        v("div", {
           style: { clear: "both" },
           class: l(n())
         }, [
-          p("div", {
+          v("div", {
             class: l(e.question.cssClasses.progressContainer)
           }, [
             h(o, {
@@ -3465,9 +3466,9 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
               key: 0,
               class: l(e.question.cssClasses.progress)
             }, [
-              p("div", {
+              v("div", {
                 class: l(e.question.cssClasses.progressBar),
-                style: I({ width: e.question.progress }),
+                style: S({ width: e.question.progress }),
                 role: "progressbar"
               }, null, 6)
             ], 2)) : m("", !0),
@@ -3478,7 +3479,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
           h(c, {
             data: { question: e.question }
           }, null, 8, ["data"]),
-          h(v, {
+          h(p, {
             data: { question: e.question }
           }, null, 8, ["data"])
         ], 2)
@@ -3497,16 +3498,16 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
         key: 0,
         class: l(s.question.cssClasses.footer)
       }, [
-        p("hr", {
+        v("hr", {
           class: l(s.question.cssClasses.separator)
         }, null, 2),
         s.question.isRangeShowing && s.question.isProgressBottomShowing ? (i(), u("div", {
           key: 0,
           class: l(s.question.cssClasses.progress)
         }, [
-          p("div", {
+          v("div", {
             class: l(s.question.cssClasses.progressBar),
-            style: I({ width: s.question.progress }),
+            style: S({ width: s.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : m("", !0),
@@ -3523,7 +3524,7 @@ const Do = ["disabled"], _o = /* @__PURE__ */ g({
   }
 });
 function Y(r) {
-  return S(
+  return I(
     () => r.item && r.item.data.question || r.data.question
   );
 }
@@ -3545,7 +3546,7 @@ const Eo = /* @__PURE__ */ g({
         class: l(w(n).getAddButtonCss()),
         onClick: e
       }, [
-        p("span", {
+        v("span", {
           class: l(w(n).cssClasses.buttonAddText)
         }, [
           h(a, {
@@ -3610,7 +3611,7 @@ const Eo = /* @__PURE__ */ g({
     data: {}
   },
   setup(r) {
-    const s = r, n = Y(s), e = S(
+    const s = r, n = Y(s), e = I(
       () => s.item && s.item.data.panel || s.data.panel
     ), t = (o) => {
       n.value.isInputReadOnly || n.value.removePanelUI(o);
@@ -3620,16 +3621,16 @@ const Eo = /* @__PURE__ */ g({
       return i(), u("button", {
         type: "button",
         class: l(w(n).getPanelRemoveButtonCss()),
-        onClick: a[0] || (a[0] = (v) => t(e.value))
+        onClick: a[0] || (a[0] = (p) => t(e.value))
       }, [
-        p("span", {
+        v("span", {
           class: l(w(n).cssClasses.buttonRemoveText)
         }, [
           h(c, {
             locString: w(n).locPanelRemoveText
           }, null, 8, ["locString"])
         ], 2),
-        p("span", {
+        v("span", {
           class: l(w(n).cssClasses.iconRemove)
         }, null, 2)
       ], 2);
@@ -3691,7 +3692,7 @@ const Eo = /* @__PURE__ */ g({
       placeholder: s.question.renderedCommentPlaceholder,
       "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
       "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
-      style: I({ resize: s.question.resizeStyle }),
+      style: S({ resize: s.question.resizeStyle }),
       onChange: n[0] || (n[0] = (e) => {
         s.question.onCommentChange(e);
       }),
@@ -3748,7 +3749,7 @@ const Eo = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const s = r, n = S(
+    const s = r, n = I(
       () => (s.element.isPanel ? s.element.cssClasses.panel : s.element.cssClasses) || {}
     );
     return (e, t) => {
@@ -3796,11 +3797,11 @@ const Eo = /* @__PURE__ */ g({
     css: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.element.getTitleToolbar());
+    const s = r, n = I(() => s.element.getTitleToolbar());
     return (e, t) => {
       const o = y("survey-string"), a = y("survey-element-title-content"), c = y("sv-action-bar");
       return i(), u("div", st, [
-        p("span", nt, [
+        v("span", nt, [
           e.element.isPage ? (i(), q(o, {
             key: 0,
             locString: e.element.locTitle
@@ -3826,7 +3827,7 @@ const Eo = /* @__PURE__ */ g({
 function at(r, s) {
   return i(), u("div", it, lt);
 }
-const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use", null, null, -1), mt = [
+const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ v("use", null, null, -1), mt = [
   dt
 ], ct = /* @__PURE__ */ g({
   __name: "SvgIcon",
@@ -3871,13 +3872,13 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     return (s, n) => {
       const e = y("survey-string");
       return i(), u("div", { key: s.errorKey }, [
-        p("span", {
+        v("span", {
           class: l(
             s.cssClasses ? s.cssClasses.error.icon || void 0 : "panel-error-icon"
           ),
           "aria-hidden": "true"
         }, null, 2),
-        p("span", {
+        v("span", {
           class: l(
             s.cssClasses ? s.cssClasses.error.item || void 0 : "panel-error-item"
           )
@@ -3915,9 +3916,9 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         class: l(o.model.getRootCss()),
         onClick: e
       }, [
-        (i(!0), u(D, null, L(w(t), (v) => (i(), q(c, {
-          key: v.id,
-          item: v
+        (i(!0), u(D, null, L(w(t), (p) => (i(), q(c, {
+          key: p.id,
+          item: p
         }, null, 8, ["item"]))), 128))
       ], 2)) : m("", !0);
     };
@@ -3928,7 +3929,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = S(
+    const s = r, n = I(
       () => s.item.component || "sv-action-bar-item"
     );
     return B(() => s.item), (e, t) => {
@@ -3937,7 +3938,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        p("div", qt, [
+        v("div", qt, [
           e.item.needSeparator ? (i(), q(o, { key: 0 })) : m("", !0),
           (i(), q(R(n.value), { item: e.item }, null, 8, ["item"]))
         ])
@@ -3965,8 +3966,8 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         onKeyup: e[1] || (e[1] = (a) => {
           a.stopPropagation();
         }),
-        onMousedown: e[2] || (e[2] = () => {
-          n.item.doMouseDown();
+        onMousedown: e[2] || (e[2] = (a) => {
+          n.item.doMouseDown(a);
         }),
         onFocus: e[3] || (e[3] = (a) => {
           n.item.doFocus(a);
@@ -4013,7 +4014,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         e.dispose();
       }
     ), (t, o) => {
-      const a = y("sv-svg-icon"), c = y("sv-popup"), v = X("key2click");
+      const a = y("sv-svg-icon"), c = y("sv-popup"), p = X("key2click");
       return i(), u(D, null, [
         N((i(), u("button", {
           type: "button",
@@ -4040,7 +4041,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
             class: l(t.item.getActionBarItemTitleCss())
           }, T(t.item.title), 3)) : m("", !0)
         ], 42, kt)), [
-          [v, { processEsc: !1, disableTabStop: t.item.disableTabStop }]
+          [p, { processEsc: !1, disableTabStop: t.item.disableTabStop }]
         ]),
         h(c, {
           model: t.item.popupModel,
@@ -4055,7 +4056,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.item && s.item.innerCss);
+    const s = r, n = I(() => s.item && s.item.innerCss);
     return (e, t) => (i(), u("div", {
       class: l(["sv-action-bar-separator", n.value])
     }, null, 2));
@@ -4067,17 +4068,17 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   },
   setup(r) {
     const s = r, n = $(null), e = (c) => {
-      const v = s.model;
-      v.filterString = c.target.value;
+      const p = s.model;
+      p.filterString = c.target.value;
     }, t = (c) => {
-      const v = s.model;
-      v.filterString = c.target.value, s.model.goToItems(c);
+      const p = s.model;
+      p.filterString = c.target.value, s.model.goToItems(c);
     }, o = (c) => {
       s.model.onMouseMove(c);
     }, a = ne(() => s.model.renderedActions);
     return B(() => s.model), M(() => {
       s.model.initListContainerHtmlElement(n.value);
-    }), (c, v) => {
+    }), (c, p) => {
       const d = y("sv-svg-icon"), C = y("sv-list-item");
       return i(), u("div", {
         class: l(c.model.cssClasses.root),
@@ -4088,7 +4089,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           key: 0,
           class: l(c.model.cssClasses.filter)
         }, [
-          p("div", {
+          v("div", {
             class: l(c.model.cssClasses.filterIcon)
           }, [
             h(d, {
@@ -4096,7 +4097,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
               size: "auto"
             })
           ], 2),
-          p("input", {
+          v("input", {
             type: "text",
             class: l(c.model.cssClasses.filterInput),
             "aria-label": c.model.filterStringPlaceholder,
@@ -4107,7 +4108,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           }, null, 42, St),
           c.model.showSearchClearButton && !!c.model.filterString ? (i(), u("button", {
             key: 0,
-            onClick: v[0] || (v[0] = (k) => {
+            onClick: p[0] || (p[0] = (k) => {
               c.model.onClickSearchClearButton(k);
             }),
             class: l(c.model.cssClasses.searchClearButtonIcon)
@@ -4118,10 +4119,10 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
             })
           ], 2)) : m("", !0)
         ], 2)) : m("", !0),
-        N(p("div", {
+        N(v("div", {
           class: l(c.model.cssClasses.emptyContainer)
         }, [
-          p("div", {
+          v("div", {
             class: l(c.model.cssClasses.emptyText),
             "aria-label": c.model.emptyMessage
           }, T(c.model.emptyMessage), 11, Rt)
@@ -4133,11 +4134,11 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           class: l(c.model.getListClass()),
           role: "listbox",
           id: c.model.elementId,
-          onMousedown: v[1] || (v[1] = (k) => {
+          onMousedown: p[1] || (p[1] = (k) => {
             k.preventDefault();
           }),
           onMousemove: o,
-          onKeydown: v[2] || (v[2] = (k) => {
+          onKeydown: p[2] || (p[2] = (k) => {
             c.model.onKeyDown(k);
           })
         }, [
@@ -4159,44 +4160,48 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.item.elementId), e = (t) => {
-      s.model.onItemClick(s.item), t.stopPropagation();
+    const s = r, n = I(() => s.item.elementId), e = (o) => {
+      s.model.onItemClick(s.item), o.stopPropagation();
     };
-    return B(() => s.item), M(() => {
+    B(() => s.item);
+    const t = I(
+      () => s.item.component || s.model.itemComponent
+    );
+    return M(() => {
       setTimeout(() => {
         s.model.onLastItemRended(s.item);
       });
-    }), (t, o) => {
-      const a = X("key2click");
+    }), (o, a) => {
+      const c = X("key2click");
       return N((i(), u("li", {
         role: "option",
-        "aria-selected": t.model.isItemSelected(t.item),
-        key: t.item.id,
+        "aria-selected": o.model.isItemSelected(o.item),
+        key: o.item.id,
         id: n.value,
-        onPointerdown: o[2] || (o[2] = (c) => t.model.onPointerDown(c, t.item)),
-        class: l(t.model.getItemClass(t.item)),
+        onPointerdown: a[2] || (a[2] = (p) => o.model.onPointerDown(p, o.item)),
+        class: l(o.model.getItemClass(o.item)),
         onClick: e,
-        tabindex: t.item.disableTabStop ? -1 : 0
+        tabindex: o.item.disableTabStop ? -1 : 0
       }, [
-        t.item.needSeparator ? (i(), u("div", {
+        o.item.needSeparator ? (i(), u("div", {
           key: 0,
-          class: l(t.model.cssClasses.itemSeparator)
+          class: l(o.model.cssClasses.itemSeparator)
         }, null, 2)) : m("", !0),
-        p("div", {
-          style: I({ paddingInlineStart: t.model.getItemIndent(t.item) }),
-          class: l(t.model.cssClasses.itemBody),
-          title: t.item.locTitle.calculatedText,
-          onMouseover: o[0] || (o[0] = (c) => t.model.onItemHover(t.item)),
-          onMouseleave: o[1] || (o[1] = (c) => t.model.onItemLeave(t.item))
+        v("div", {
+          style: S({ paddingInlineStart: o.model.getItemIndent(o.item) }),
+          class: l(o.model.cssClasses.itemBody),
+          title: o.item.locTitle.calculatedText,
+          onMouseover: a[0] || (a[0] = (p) => o.model.onItemHover(o.item)),
+          onMouseleave: a[1] || (a[1] = (p) => o.model.onItemLeave(o.item))
         }, [
-          (i(), q(R(t.item.component || "sv-list-item-content"), {
-            item: t.item,
-            model: t.model
+          (i(), q(R(t.value), {
+            item: o.item,
+            model: o.model
           }, null, 8, ["item", "model"]))
         ], 46, _t)
       ], 42, Dt)), [
-        [E, t.model.isItemVisible(t.item)],
-        [a, { processEsc: !1, disableTabStop: t.item.disableTabStop }]
+        [E, o.model.isItemVisible(o.item)],
+        [c, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
     };
   }
@@ -4238,13 +4243,13 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r;
     return B(() => s.item), (n, e) => {
-      const t = y("sv-list-item-content"), o = y("sv-popup");
+      const t = y("sv-popup");
       return i(), u(D, null, [
-        h(t, {
+        (i(), q(R("sv-list-item-content"), {
           item: n.item,
           model: n.model
-        }, null, 8, ["item", "model"]),
-        h(o, {
+        }, null, 8, ["item", "model"])),
+        h(t, {
           model: n.item.popupModel
         }, null, 8, ["model"])
       ], 64);
@@ -4318,9 +4323,9 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           e.model.clickOutside(a);
         })
       }, [
-        p("div", {
+        v("div", {
           class: "sv-popup__container",
-          style: I({
+          style: S({
             left: e.model.left,
             top: e.model.top,
             height: e.model.height,
@@ -4329,15 +4334,15 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           }),
           onClick: n
         }, [
-          p("div", Pt, [
+          v("div", Pt, [
             e.model.showHeader ? (i(), q(R(e.model.popupHeaderTemplate), {
               key: 0,
               model: e.model
             }, null, 8, ["model"])) : m("", !0),
-            p("div", Mt, [
+            v("div", Mt, [
               e.model.title ? (i(), u("div", Ht, T(e.model.title), 1)) : m("", !0),
-              p("div", Et, [
-                p("div", Wt, [
+              v("div", Et, [
+                v("div", Wt, [
                   (i(), q(R(e.model.contentComponentName), z(te(e.model.contentComponentData)), null, 16))
                 ])
               ]),
@@ -4362,7 +4367,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   setup(r) {
     return (s, n) => (i(), u("span", {
       class: "sv-popup__pointer",
-      style: I({
+      style: S({
         left: s.model.pointerTarget.left,
         top: s.model.pointerTarget.top
       })
@@ -4376,7 +4381,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     needRenderWrapper: {}
   },
   setup(r) {
-    const s = r, n = S(
+    const s = r, n = I(
       () => s.survey.getContainerContent(s.container)
     );
     return (e, t) => n.value.length > 0 ? (i(), u(D, { key: 0 }, [
@@ -4404,23 +4409,23 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.survey.progressValue + "%"), e = (o) => ae.getProgressTextInBarCss(o), t = (o) => ae.getProgressTextUnderBarCss(o);
+    const s = r, n = I(() => s.survey.progressValue + "%"), e = (o) => ae.getProgressTextInBarCss(o), t = (o) => ae.getProgressTextUnderBarCss(o);
     return (o, a) => (i(), u("div", {
       class: l(o.survey.getProgressCssClasses(o.container))
     }, [
-      p("div", {
+      v("div", {
         class: l(o.survey.css.progressBar),
-        style: I({ width: n.value }),
+        style: S({ width: n.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
         "aria-label": "progress"
       }, [
-        p("span", {
+        v("span", {
           class: l(e(o.survey.css))
         }, T(o.survey.progressText), 3)
       ], 6),
-      p("span", {
+      v("span", {
         class: l(t(o.survey.css))
       }, T(o.survey.progressText), 3)
     ], 2));
@@ -4433,15 +4438,15 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     container: {}
   },
   setup(r) {
-    const s = r, n = $(!1), e = $(!1), t = $(!1), o = $(!0), a = $(), c = S(() => s.survey.css);
-    let v = null;
+    const s = r, n = $(!1), e = $(!1), t = $(!1), o = $(!0), a = $(), c = I(() => s.survey.css);
+    let p = null;
     const d = (C) => {
       let k = a.value;
       k.scrollLeft += (C ? -1 : 1) * 70;
     };
     return M(() => {
       const C = a.value;
-      v = new He(s.model, C, {
+      p = new He(s.model, C, {
         onResize: (k) => {
           o.value = k, e.value = !k;
         },
@@ -4451,15 +4456,15 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         onUpdateSettings: () => {
           o.value = s.model.showItemTitles, t.value = !s.model.showItemTitles;
         },
-        container: S(() => s.container)
+        container: I(() => s.container)
       });
     }), j(() => {
-      v.dispose();
+      p.dispose();
     }), (C, k) => {
       const f = y("survey-string");
       return i(), u("div", {
         class: l(C.model.getRootCss(C.container)),
-        style: I({ maxWidth: C.model.progressWidth }),
+        style: S({ maxWidth: C.model.progressWidth }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4469,25 +4474,25 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           key: 0,
           class: l(C.survey.css.progressButtonsHeader)
         }, [
-          p("div", {
+          v("div", {
             class: l(C.survey.css.progressButtonsPageTitle),
             title: C.model.headerText
           }, T(C.model.headerText), 11, Ut)
         ], 2)) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(c.value.progressButtonsContainer)
         }, [
-          p("div", {
+          v("div", {
             class: l(C.model.getScrollButtonCss(n.value, !0)),
             onClick: k[0] || (k[0] = (_) => d(!0)),
             role: "button"
           }, null, 2),
-          p("div", {
+          v("div", {
             class: l(c.value.progressButtonsListContainer),
             ref_key: "progressButtonsListContainer",
             ref: a
           }, [
-            p("ul", {
+            v("ul", {
               class: l(c.value.progressButtonsList)
             }, [
               (i(!0), u(D, null, L(C.survey.visiblePages, (_, b) => (i(), u("li", {
@@ -4496,7 +4501,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
                 onClick: (A) => C.model.isListElementClickable(b) ? C.model.clickListElement(_) : null,
                 "data-page-number": C.model.getItemNumber(_)
               }, [
-                p("div", {
+                v("div", {
                   class: l(c.value.progressButtonsConnector)
                 }, null, 2),
                 o.value ? (i(), u("div", {
@@ -4513,21 +4518,21 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
                   class: l(c.value.progressButtonsPageDescription),
                   title: _.locNavigationDescription.renderedHtml
                 }, T(_.locNavigationDescription.renderedHtml), 11, jt)) : m("", !0),
-                p("div", {
+                v("div", {
                   class: l(c.value.progressButtonsButton)
                 }, [
-                  p("div", {
+                  v("div", {
                     class: l(c.value.progressButtonsButtonBackground)
                   }, null, 2),
-                  p("div", {
+                  v("div", {
                     class: l(c.value.progressButtonsButtonContent)
                   }, null, 2),
-                  p("span", null, T(C.model.getItemNumber(_)), 1)
+                  v("span", null, T(C.model.getItemNumber(_)), 1)
                 ], 2)
               ], 10, Kt))), 128))
             ], 2)
           ], 2),
-          p("div", {
+          v("div", {
             class: l(C.model.getScrollButtonCss(n.value, !1)),
             onClick: k[1] || (k[1] = (_) => d(!1)),
             role: "button"
@@ -4537,7 +4542,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
           key: 1,
           class: l(C.survey.css.progressButtonsFooter)
         }, [
-          p("div", {
+          v("div", {
             class: l(C.survey.css.progressButtonsPageTitle),
             title: C.model.footerText
           }, T(C.model.footerText), 11, Gt)
@@ -4587,15 +4592,15 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     survey: {}
   },
   setup(r) {
-    const s = r, n = $(), e = $(""), t = $(1), o = S(() => {
+    const s = r, n = $(), e = $(""), t = $(1), o = I(() => {
       const _ = s.survey ? s.survey : s.model;
       return Re(_);
-    }), a = S(() => o.value.activePage ? o.value.activePage.id : ""), c = () => {
+    }), a = I(() => o.value.activePage ? o.value.activePage.id : ""), c = () => {
       const _ = a.value;
       return !!o.value && _ + t.value.toString();
-    }, v = S(
+    }, p = I(
       () => o.value.showCompletedPage && o.value.state === "completed"
-    ), d = S(() => o.value.css), C = S(() => "page" + c()), k = () => v.value ? (e.value || (e.value = o.value.processedCompletedHtml), e.value) : "", f = (_) => {
+    ), d = I(() => o.value.css), C = I(() => "page" + c()), k = () => p.value ? (e.value || (e.value = o.value.processedCompletedHtml), e.value) : "", f = (_) => {
       if (!!_) {
         var b = n.value;
         b && _.afterRenderSurvey(b), _.renderCallback = () => {
@@ -4620,25 +4625,25 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       const A = y("sv-svg-bundle"), W = y("survey-popup-modal"), F = y("survey-header"), J = y("survey-page"), he = y("sv-brand-info"), Ce = y("sv-notifier");
       return i(), u("div", {
         class: l(o.value.getRootCss()),
-        style: I(o.value.themeVariables),
+        style: S(o.value.themeVariables),
         lang: o.value.locale || "en",
         dir: o.value.localeDir,
         ref_key: "root",
         ref: n
       }, [
         o.value.needRenderIcons ? (i(), q(A, { key: 0 })) : m("", !0),
-        p("div", {
+        v("div", {
           class: l(o.value.wrapperFormCss)
         }, [
           h(W),
           o.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
             class: l(d.value.rootBackgroundImage),
-            style: I(o.value.backgroundImageStyle)
+            style: S(o.value.backgroundImageStyle)
           }, null, 6)) : m("", !0),
-          p("form", Zt, [
+          v("form", Zt, [
             o.value.hasLogo ? m("", !0) : (i(), u("div", xt)),
-            p("div", {
+            v("div", {
               class: l(d.value.container)
             }, [
               o.value.headerView === "basic" ? (i(), q(F, {
@@ -4659,15 +4664,15 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                p("div", ei, [
+                v("div", ei, [
                   (i(), q(R("sv-components-container"), {
                     survey: o.value,
                     container: "center",
                     needRenderWrapper: !0
                   }, null, 8, ["survey"])),
-                  p("div", {
+                  v("div", {
                     class: l(o.value.bodyCss),
-                    style: I({ maxWidth: o.value.renderedWidth }),
+                    style: S({ maxWidth: o.value.renderedWidth }),
                     id: a.value
                   }, [
                     (i(), q(R("sv-components-container"), {
@@ -4700,8 +4705,8 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              v.value ? (i(), u("div", ni, [
-                p("div", {
+              p.value ? (i(), u("div", ni, [
+                v("div", {
                   innerHTML: k(),
                   class: l(o.value.completedCss)
                 }, null, 10, oi),
@@ -4746,11 +4751,11 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       return n.model.isDisplayed ? (i(), u("div", {
         key: 0,
         class: l(n.model.css),
-        style: I({ visibility: n.model.active ? "visible" : "hidden" }),
+        style: S({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
-        p("span", null, T(n.model.message), 1),
+        v("span", null, T(n.model.message), 1),
         h(t, {
           model: n.model.actionBar
         }, null, 8, ["model"])
@@ -4779,7 +4784,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         placeholder: s.question.otherPlaceholder,
         "aria-label": s.question.ariaLabel || s.question.a11y_input_ariaLabel,
         "aria-required": s.question.ariaRequired || s.question.a11y_input_ariaRequired,
-        style: I({ resize: s.question.resizeStyle }),
+        style: S({ resize: s.question.resizeStyle }),
         onChange: n[0] || (n[0] = (e) => {
           s.question.onOtherValueChange(e);
         }),
@@ -4819,11 +4824,11 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const s = r, n = U(), e = S(() => s.survey ? s.survey.getCss() : {});
-    S(() => {
+    const s = r, n = U(), e = I(() => s.survey ? s.survey.getCss() : {});
+    I(() => {
       var k;
       return (k = n.value) != null && k.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), S(() => {
+    }), I(() => {
       var k;
       return (k = n.value) == null ? void 0 : k.isExpanded;
     });
@@ -4833,7 +4838,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       n.value.hide(), s.onClose && s.onClose();
     }, a = () => {
       n.value.toggleFullScreen();
-    }, c = () => "SurveyComponent", v = () => {
+    }, c = () => "SurveyComponent", p = () => {
       n.value.onScroll();
     }, d = () => {
       let k = n.value.cssHeaderRoot;
@@ -4856,21 +4861,21 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       const _ = y("sv-svg-icon");
       return n.value.isShowing ? (i(), u("div", {
         key: 0,
-        style: I({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
+        style: S({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
         class: l(n.value.cssRoot),
-        onScroll: v
+        onScroll: p
       }, [
-        p("div", {
+        v("div", {
           class: l(n.value.cssRootContent)
         }, [
-          p("div", {
+          v("div", {
             class: l(d())
           }, [
             n.value.isCollapsed && !!n.value.locTitle ? (i(), u("div", {
               key: 0,
               class: l(n.value.cssHeaderTitleCollapsed)
             }, T(n.value.locTitle.renderedHtml), 3)) : m("", !0),
-            p("div", {
+            v("div", {
               class: l(n.value.cssHeaderButtonsContainer)
             }, [
               n.value.allowFullScreen ? (i(), u("div", {
@@ -4889,7 +4894,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
                   size: 16
                 }))
               ], 2)) : m("", !0),
-              p("div", {
+              v("div", {
                 class: l(n.value.cssHeaderCollapseButton),
                 onClick: t
               }, [
@@ -4916,7 +4921,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
               ], 2)) : m("", !0)
             ], 2)
           ], 2),
-          p("div", {
+          v("div", {
             class: l(n.value.cssBody)
           }, [
             (i(), q(R(c()), { survey: k.survey }, null, 8, ["survey"]))
@@ -4932,16 +4937,16 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = S(
+    const s = r, n = $(), e = I(
       () => s.question.customWidget.isDefaultRender
-    ), t = S(
+    ), t = I(
       () => !!s.question.customWidget.htmlTemplate
-    ), o = S(() => s.question.customWidget.htmlTemplate), a = S(() => "survey-" + s.question.getTemplate());
+    ), o = I(() => s.question.customWidget.htmlTemplate), a = I(() => "survey-" + s.question.getTemplate());
     return M(() => {
       s.question.customWidget.afterRender(s.question, n.value);
     }), j(() => {
       s.question.customWidget.willUnmount(s.question, n.value);
-    }), (c, v) => (i(), u("div", {
+    }), (c, p) => (i(), u("div", {
       ref_key: "root",
       ref: n
     }, [
@@ -4960,7 +4965,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   __name: "PopupModal",
   setup(r) {
     const s = U();
-    function n(t, o, a, c, v, d, C = "popup") {
+    function n(t, o, a, c, p, d, C = "popup") {
       const k = We(
         t,
         o,
@@ -4968,7 +4973,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
         c,
         void 0,
         void 0,
-        v,
+        p,
         d,
         C
       );
@@ -4978,7 +4983,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       const a = Fe(
         t,
         o
-      ), c = (v, d) => {
+      ), c = (p, d) => {
         d.isVisible || (s.value = void 0, a.dispose(), a.onVisibilityChanged.remove(c));
       };
       return a.onVisibilityChanged.add(c), a.model.isVisible = !0, s.value = a, a;
@@ -5019,7 +5024,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     P(s, n);
-    const e = S(() => s.question.contentPanel);
+    const e = I(() => s.question.contentPanel);
     return (t, o) => {
       const a = y("survey-panel");
       return i(), q(a, {
@@ -5040,14 +5045,14 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     P(s, n);
-    const e = S(() => s.question.contentQuestion), t = (o) => re(o);
+    const e = I(() => s.question.contentQuestion), t = (o) => re(o);
     return (o, a) => (i(), q(R(t(e.value)), {
       ref: n.value,
       question: e.value,
       css: o.css
     }, null, 8, ["question", "css"]));
   }
-}), hi = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), Ci = [
+}), hi = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), Ci = [
   hi
 ], pe = 440, bi = /* @__PURE__ */ g({
   __name: "TimerPanel",
@@ -5056,7 +5061,7 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = S(() => pe * s.model.progress), e = S(() => s.model.text);
+    const s = r, n = I(() => pe * s.model.progress), e = I(() => s.model.text);
     return B(() => s.model), (t, o) => t.model.isRunning && t.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
       class: l(t.model.rootCss)
@@ -5064,12 +5069,12 @@ const ut = /* @__PURE__ */ ge(tt, [["render", at]]), dt = /* @__PURE__ */ p("use
       t.model.showProgress ? (i(), u("svg", {
         key: 0,
         class: l(t.model.getProgressCss()),
-        style: I({ strokeDasharray: pe, strokeDashoffset: n.value })
+        style: S({ strokeDasharray: pe, strokeDashoffset: n.value })
       }, Ci, 6)) : m("", !0),
-      p("div", {
+      v("div", {
         class: l(t.model.textContainerCss)
       }, [
-        p("span", {
+        v("span", {
           class: l(t.model.majorTextCss)
         }, T(t.model.clockMajorText), 3),
         t.model.clockMinorText ? (i(), u("span", {
@@ -5110,17 +5115,17 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
       return n.survey.headerView === "advanced" ? (i(), u("div", {
         key: 0,
         class: l(n.model.headerClasses),
-        style: I({ height: n.model.renderedHeight })
+        style: S({ height: n.model.renderedHeight })
       }, [
         n.model.backgroundImage ? (i(), u("div", {
           key: 0,
           class: l(n.model.backgroundImageClasses),
-          style: I(n.model.backgroundImageStyle)
+          style: S(n.model.backgroundImageStyle)
         }, null, 6)) : m("", !0),
         n.survey.isMobile ? m("", !0) : (i(), u("div", {
           key: 1,
           class: l(n.model.contentClasses),
-          style: I({ maxWidth: n.model.maxWidth })
+          style: S({ maxWidth: n.model.maxWidth })
         }, [
           (i(!0), u(D, null, L(n.model.cells, (a, c) => (i(), q(t, {
             model: a,
@@ -5146,30 +5151,30 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
       const e = y("survey-element-title"), t = y("survey-string");
       return i(), u("div", {
         class: l(s.model.css),
-        style: I(s.model.style)
+        style: S(s.model.style)
       }, [
-        p("div", {
+        v("div", {
           class: "sv-header__cell-content",
-          style: I(s.model.contentStyle)
+          style: S(s.model.contentStyle)
         }, [
           s.model.showLogo ? (i(), u("div", Ti, [
-            p("div", {
+            v("div", {
               class: l(s.model.survey.logoClassNames)
             }, [
-              p("img", {
+              v("img", {
                 class: l(s.model.survey.css.logoImage),
                 src: s.model.survey.locLogo.renderedHtml,
                 width: s.model.survey.renderedLogoWidth,
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
-                style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+                style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
               }, null, 14, $i)
             ], 2)
           ])) : m("", !0),
           s.model.showTitle ? (i(), u("div", {
             key: 1,
             class: "sv-header__title",
-            style: I({ maxWidth: s.model.textAreaWidth })
+            style: S({ maxWidth: s.model.textAreaWidth })
           }, [
             h(e, {
               element: s.model.survey,
@@ -5179,7 +5184,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
           s.model.showDescription ? (i(), u("div", {
             key: 2,
             class: "sv-header__description",
-            style: I({ maxWidth: s.model.textAreaWidth })
+            style: S({ maxWidth: s.model.textAreaWidth })
           }, [
             s.model.survey.renderedHasDescription ? (i(), u("div", {
               key: 0,
@@ -5207,23 +5212,23 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
       const e = y("survey-element-title"), t = y("survey-string");
       return i(), u("div", _i, [
         s.model.survey.hasLogo ? (i(), u("div", Bi, [
-          p("div", {
+          v("div", {
             class: l(s.model.survey.logoClassNames)
           }, [
-            p("img", {
+            v("img", {
               class: l(s.model.survey.css.logoImage),
               src: s.model.survey.locLogo.renderedHtml,
               width: s.model.survey.renderedLogoWidth,
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
-              style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+              style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
             }, null, 14, Li)
           ], 2)
         ])) : m("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
           key: 1,
           class: "sv-header__title",
-          style: I({ maxWidth: s.model.renderedtextAreaWidth })
+          style: S({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           h(e, {
             element: s.model.survey,
@@ -5233,7 +5238,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
         s.model.survey.renderedHasDescription ? (i(), u("div", {
           key: 2,
           class: "sv-header__description",
-          style: I({ maxWidth: s.model.renderedtextAreaWidth })
+          style: S({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           s.model.survey.renderedHasDescription ? (i(), u("div", {
             key: 0,
@@ -5255,21 +5260,21 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = (v) => v.isPanel ? "survey-panel" : "survey-question", t = S(() => {
-      const v = s.element.survey;
-      if (v) {
-        const d = v.getElementWrapperComponentName(s.element);
+    const s = r, n = $(), e = (p) => p.isPanel ? "survey-panel" : "survey-question", t = I(() => {
+      const p = s.element.survey;
+      if (p) {
+        const d = p.getElementWrapperComponentName(s.element);
         if (d)
           return d;
       }
       return e(s.element);
-    }), o = (v) => v.cssClasses ? v.rootStyle : {}, a = S(() => {
-      const v = s.element, d = v.survey;
+    }), o = (p) => p.cssClasses ? p.rootStyle : {}, a = I(() => {
+      const p = s.element, d = p.survey;
       let C;
-      return d && (C = d.getElementWrapperComponentData(v)), {
-        componentName: e(v),
+      return d && (C = d.getElementWrapperComponentData(p)), {
+        componentName: e(p),
         componentData: {
-          element: v,
+          element: p,
           survey: d,
           row: s.row,
           css: s.css,
@@ -5278,24 +5283,24 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
       };
     }), c = K(
       () => s.element,
-      (v, d) => {
-        d && d.setWrapperElement(void 0), v.setWrapperElement(n.value);
+      (p, d) => {
+        d && d.setWrapperElement(void 0), p.setWrapperElement(n.value);
       }
     );
     return M(() => {
       s.element.setWrapperElement(n.value);
     }), O(() => {
       s.element.setWrapperElement(void 0), c();
-    }), (v, d) => (i(), u("div", {
+    }), (p, d) => (i(), u("div", {
       ref_key: "root",
       ref: n,
-      style: I(o(v.element)),
-      class: l(v.element.cssClasses.questionWrapper)
+      style: S(o(p.element)),
+      class: l(p.element.cssClasses.questionWrapper)
     }, [
-      v.row.isNeedRender ? (i(), q(R(t.value), z(H({ key: 0 }, a.value)), null, 16)) : v.element.skeletonComponentName ? (i(), q(R(v.element.skeletonComponentName), {
+      p.row.isNeedRender ? (i(), q(R(t.value), z(H({ key: 0 }, a.value)), null, 16)) : p.element.skeletonComponentName ? (i(), q(R(p.element.skeletonComponentName), {
         key: 1,
-        element: v.element,
-        css: v.css
+        element: p.element,
+        css: p.css
       }, null, 8, ["element", "css"])) : m("", !0)
     ], 6));
   }
@@ -5306,7 +5311,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
     componentData: {}
   },
   setup(r) {
-    const s = $e(), n = S(() => !!s.default);
+    const s = $e(), n = I(() => !!s.default);
     return (e, t) => n.value && !e.componentName ? De(e.$slots, "default", { key: 0 }) : (i(), q(R(e.componentName), z(H({ key: 1 }, e.componentData)), null, 16));
   }
 }), Mi = /* @__PURE__ */ g({
@@ -5323,7 +5328,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
         class: l(s.css),
         onClick: n[0] || (n[0] = (...t) => s.question.doClean && s.question.doClean(...t))
       }, [
-        p("span", null, T(s.question.clearButtonCaption), 1),
+        v("span", null, T(s.question.clearButtonCaption), 1),
         s.question.cssClasses.removeButtonIconId ? (i(), q(e, {
           key: 0,
           iconName: s.question.cssClasses.removeButtonIconId,
@@ -5350,7 +5355,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
         h(e, {
           item: s.question.closeCameraAction
         }, null, 8, ["item"]),
-        p("video", {
+        v("video", {
           autoplay: "",
           playsinline: "",
           id: s.question.videoId,
@@ -5369,7 +5374,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
     item: {}
   },
   setup(r) {
-    const s = r, n = S(
+    const s = r, n = I(
       () => {
         var e;
         return ((e = s.data) == null ? void 0 : e.question) || s.item.data.question;
@@ -5390,7 +5395,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
           iconName: n.value.cssClasses.chooseFileIconId,
           size: "auto"
         }, null, 8, ["title", "iconName"])) : m("", !0),
-        p("span", null, T(n.value.chooseButtonText), 1)
+        v("span", null, T(n.value.chooseButtonText), 1)
       ], 10, Wi)), [
         [a]
       ]);
@@ -5417,21 +5422,21 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
             key: 0,
             class: l(s.question.cssClasses.fileSign)
           }, [
-            p("a", {
+            v("a", {
               onClick: (a) => s.question.doDownloadFile(a, t),
               href: t.content,
               title: t.name,
               download: t.name,
-              style: I({ width: s.question.imageWidth })
+              style: S({ width: s.question.imageWidth })
             }, T(t.name), 13, Vi)
           ], 2)) : m("", !0),
-          p("div", {
+          v("div", {
             class: l(s.question.getImageWrapperCss(t))
           }, [
             s.question.canPreviewImage(t) ? (i(), u("img", {
               key: 0,
               src: t.content,
-              style: I({
+              style: S({
                 height: s.question.imageHeight,
                 width: s.question.imageWidth
               }),
@@ -5448,7 +5453,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
               class: l(s.question.getRemoveButtonCss()),
               onClick: (a) => s.question.doRemoveFile(t, a)
             }, [
-              p("span", {
+              v("span", {
                 class: l(s.question.cssClasses.removeFile)
               }, T(s.question.removeFileCaption), 3),
               s.question.cssClasses.removeFileSvgIconId ? (i(), q(e, {
@@ -5464,12 +5469,12 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
             key: 1,
             class: l(s.question.cssClasses.fileSignBottom)
           }, [
-            p("a", {
+            v("a", {
               onClick: (a) => s.question.doDownloadFile(a, t),
               href: t.content,
               title: t.name,
               download: t.name,
-              style: I({ width: s.question.imageWidth })
+              style: S({ width: s.question.imageWidth })
             }, T(t.name), 13, Ui)
           ], 2)) : m("", !0)
         ], 2)), [
@@ -5510,9 +5515,9 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
     index: {}
   },
   setup(r) {
-    const s = r, n = S(
+    const s = r, n = I(
       () => new Ve(s.question, s.item, s.index)
-    ), e = S({
+    ), e = I({
       get: () => s.question.renderedValue,
       set: (t) => {
         const o = s.question;
@@ -5526,7 +5531,7 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
         class: l(n.value.css.label),
         title: n.value.caption.renderedHtml
       }, [
-        N(p("input", {
+        N(v("input", {
           type: "radio",
           name: n.value.name,
           id: n.value.id,
@@ -5537,12 +5542,12 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
           "aria-errormessage": n.value.describedBy,
           disabled: n.value.readOnly,
           class: l(n.value.css.control),
-          "onUpdate:modelValue": o[0] || (o[0] = (v) => e.value = v),
+          "onUpdate:modelValue": o[0] || (o[0] = (p) => e.value = p),
           value: n.value.value
         }, null, 10, Gi), [
           [ee, e.value]
         ]),
-        p("div", {
+        v("div", {
           class: l(n.value.css.decorator)
         }, [
           n.value.iconName ? (i(), q(a, {
@@ -5571,17 +5576,17 @@ const Ii = /* @__PURE__ */ ge(ki, [["render", wi]]), Si = { key: 2 }, Ri = /* @_
     data: {}
   },
   setup(r) {
-    const s = r, n = S(() => s.data), e = G(() => n.value.locLogo);
+    const s = r, n = I(() => s.data), e = G(() => n.value.locLogo);
     return (t, o) => (i(), u("div", {
       class: l(n.value.logoClassNames)
     }, [
-      p("img", {
+      v("img", {
         class: l(n.value.css.logoImage),
         src: w(e),
         width: n.value.renderedLogoWidth,
         height: n.value.renderedLogoHeight,
         alt: n.value.locTitle.renderedHtml,
-        style: I({
+        style: S({
           objectFit: n.value.logoFit,
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight