survey-vue3-ui 1.10.2 → 1.10.3

package/survey-vue3-ui.es.js

@@ -1,4 +1,4 @@
-import { shallowReactive as Ce, watch as K, onBeforeUnmount as G, onMounted as M, ref as $, shallowRef as U, watchEffect as be, triggerRef as se, unref as w, isRef as ke, defineComponent as h, computed as I, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as a, createVNode as C, createCommentVNode as d, Fragment as _, renderList as D, createBlock as g, resolveDynamicComponent as T, normalizeProps as z, mergeProps as H, withCtx as F, normalizeStyle as S, createElementVNode as p, onUnmounted as O, guardReactiveProps as ne, withDirectives as P, vShow as E, toDisplayString as R, vModelRadio as x, vModelCheckbox as oe, vModelSelect as fe, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Ie, resolveDirective as X, toRaw as Se, Teleport as Re, useSlots as Te, renderSlot as $e } from "vue";
+import { shallowReactive as Ce, watch as K, onBeforeUnmount as G, onMounted as M, ref as $, shallowRef as U, watchEffect as be, triggerRef as se, unref as w, isRef as ke, defineComponent as h, computed as S, resolveComponent as y, openBlock as i, createElementBlock as u, normalizeClass as a, createVNode as C, createCommentVNode as d, Fragment as _, renderList as D, createBlock as g, resolveDynamicComponent as T, normalizeProps as z, mergeProps as H, withCtx as F, normalizeStyle as I, createElementVNode as p, onUnmounted as O, guardReactiveProps as ne, withDirectives as P, vShow as E, toDisplayString as R, vModelRadio as x, vModelCheckbox as oe, vModelSelect as fe, onUpdated as te, vModelText as we, getCurrentInstance as ie, createStaticVNode as Ie, resolveDirective as X, toRaw as Se, Teleport as Re, useSlots as Te, renderSlot as $e } from "vue";
 import { Base as _e, RendererFactory as ee, DropdownListModel as De, Helpers as Be, DropdownMultiSelectListModel as Le, doKey2ClickUp as ye, createSvg as Ne, ActionDropdownViewModel as Pe, getActionDropdownButtonTarget as Ae, createPopupViewModel as Me, SurveyProgressModel as de, ProgressButtonsResponsivityManager as Ee, PopupSurveyModel as He, settings as j, createDialogOptions as We, createPopupModalViewModel as Ve, ButtonGroupItemModel as Fe, SvgRegistry as Oe, SurveyModel as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Ke } from "survey-core";
 _e.createPropertiesHash = () => Ce({});
 function Qe(r) {
@@ -85,7 +85,7 @@ const je = /* @__PURE__ */ h({
   setup(r) {
     const s = r, n = $(null), e = () => {
       s.survey && n.value && s.survey.afterRenderPage(n.value);
-    }, o = I(() => s.page._showDescription);
+    }, o = S(() => s.page._showDescription);
     return B(
       () => s.page,
       () => {
@@ -155,7 +155,7 @@ const je = /* @__PURE__ */ h({
         e.survey.renderedHasTitle ? (i(), u("div", {
           key: 1,
           class: a(e.survey.css.headerText),
-          style: S({ maxWidth: e.survey.titleMaxWidth })
+          style: I({ maxWidth: e.survey.titleMaxWidth })
         }, [
           C(t, {
             element: e.survey,
@@ -231,7 +231,7 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => s.element.showErrorOnTop), o = I(() => s.element.showErrorOnBottom), t = (k) => k.cssContent, l = () => s.element.getRootStyle();
+    const s = r, n = $(null), e = S(() => s.element.showErrorOnTop), o = S(() => s.element.showErrorOnBottom), t = (k) => k.cssContent, l = () => s.element.getRootStyle();
     B(() => s.element);
     const m = () => {
       n.value && s.element.afterRender(n.value);
@@ -240,7 +240,7 @@ const je = /* @__PURE__ */ h({
       () => {
         m();
       }
-    ), c = I(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), q = I(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), f = I(() => ({
+    ), c = S(() => s.element.customWidget ? "survey-customwidget" : s.element.isDefaultRendering() ? "survey-" + s.element.getTemplate() : s.element.getComponentName()), q = S(() => s.element.survey.getQuestionContentWrapperComponentName(s.element)), f = S(() => ({
       componentData: {
         question: s.element,
         data: s.element.survey.getElementWrapperComponentData(s.element)
@@ -252,7 +252,7 @@ const je = /* @__PURE__ */ h({
       const b = y("survey-errors"), N = y("survey-element-header"), W = y("survey-string"), V = y("survey-question-comment");
       return i(), u("div", {
         class: a(k.element.getRootCss()),
-        style: S(l()),
+        style: I(l()),
         ref_key: "root",
         ref: n,
         onFocusin: L[0] || (L[0] = (Q) => k.element.focusIn()),
@@ -343,7 +343,7 @@ const je = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => s.element.survey);
+    const s = r, n = $(null), e = S(() => s.element.survey);
     return B(() => s.element), M(() => {
       s.element.survey && s.element.survey.afterRenderPanel(s.element, n.value);
     }), (o, t) => {
@@ -372,7 +372,7 @@ const je = /* @__PURE__ */ h({
         o.element.renderedIsExpanded ? (i(), u("div", {
           key: 3,
           id: o.element.contentId,
-          style: S({ paddingLeft: o.element.innerPaddingLeft }),
+          style: I({ paddingLeft: o.element.innerPaddingLeft }),
           class: a(o.element.cssClasses.panel.content)
         }, [
           (i(!0), u(_, null, D(o.element.visibleRows, (q) => (i(), g(T(o.element.getSurvey().getRowWrapperComponentName(q)), z(H({
@@ -544,7 +544,7 @@ const je = /* @__PURE__ */ h({
       n.getRef && n.getRef(l);
     }, o = $(null);
     s({ root: o }), B(() => n.question);
-    const t = I(() => n.question.inputStyle);
+    const t = S(() => n.question.inputStyle);
     return (l, m) => {
       const v = y("sv-character-counter");
       return l.question.getMaxLength() ? (i(), u("div", {
@@ -560,7 +560,7 @@ const je = /* @__PURE__ */ h({
           max: l.question.renderedMax,
           step: l.question.renderedStep,
           size: l.question.renderedInputSize,
-          style: S(t.value),
+          style: I(t.value),
           id: l.question.inputId,
           list: l.question.dataListId,
           placeholder: l.question.renderedPlaceholder,
@@ -594,7 +594,7 @@ const je = /* @__PURE__ */ h({
         max: l.question.renderedMax,
         step: l.question.renderedStep,
         size: l.question.renderedInputSize,
-        style: S(t.value),
+        style: I(t.value),
         id: l.question.inputId,
         list: l.question.dataListId,
         placeholder: l.question.renderedPlaceholder,
@@ -790,7 +790,7 @@ const je = /* @__PURE__ */ h({
     hideLabel: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), o = I({
+    const s = r, n = (t) => s.question.getLabelClass(t), e = (t) => s.question.getControlLabelClass(t), o = S({
       get: () => s.question.renderedValue,
       set: (t) => {
         const l = s.question;
@@ -858,7 +858,7 @@ const je = /* @__PURE__ */ h({
         class: a(e.question.cssClasses.root),
         ref_key: "root",
         ref: n,
-        style: S({
+        style: I({
           width: e.question.renderedCanvasWidth
         })
       }, [
@@ -876,7 +876,7 @@ const je = /* @__PURE__ */ h({
             key: 0,
             class: a(e.question.cssClasses.backgroundImage),
             src: e.question.backgroundImage,
-            style: S({
+            style: I({
               width: e.question.renderedCanvasWidth
             })
           }, null, 14, Bs)) : d("", !0),
@@ -956,7 +956,7 @@ const je = /* @__PURE__ */ h({
           alt: o.question.altText || o.question.title,
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
@@ -977,7 +977,7 @@ const je = /* @__PURE__ */ h({
           src: w(e),
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
@@ -997,7 +997,7 @@ const je = /* @__PURE__ */ h({
           src: w(e),
           width: o.question.renderedWidth,
           height: o.question.renderedHeight,
-          style: S({
+          style: I({
             objectFit: o.question.imageFit,
             width: o.question.renderedStyleWidth,
             height: o.question.renderedStyleHeight
@@ -1246,7 +1246,7 @@ const je = /* @__PURE__ */ h({
                 src: w(e),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: S({ objectFit: o.question.imageFit }),
+                style: I({ objectFit: o.question.imageFit }),
                 alt: o.item.locText.renderedHtml,
                 onLoad: t[2] || (t[2] = (v) => {
                   o.question.onContentLoaded(o.item, v);
@@ -1262,7 +1262,7 @@ const je = /* @__PURE__ */ h({
                 src: w(e),
                 width: o.question.renderedImageWidth,
                 height: o.question.renderedImageHeight,
-                style: S({ objectFit: o.question.imageFit }),
+                style: I({ objectFit: o.question.imageFit }),
                 onLoadedmetadata: t[4] || (t[4] = (v) => {
                   o.question.onContentLoaded(o.item, v);
                 }),
@@ -1273,7 +1273,7 @@ const je = /* @__PURE__ */ h({
               !w(e) || o.item.contentNotLoaded ? (i(), u("div", {
                 key: 3,
                 class: a(o.question.cssClasses.itemNoImage),
-                style: S({
+                style: I({
                   width: o.question.renderedImageWidth + "px",
                   height: o.question.renderedImageHeight + "px",
                   objectFit: o.question.imageFit
@@ -1341,7 +1341,7 @@ const je = /* @__PURE__ */ h({
         "aria-describedby": o.question.a11y_input_ariaDescribedBy,
         "aria-invalid": o.question.a11y_input_ariaInvalid,
         "aria-errormessage": o.question.a11y_input_ariaErrormessage,
-        style: S({ resize: o.question.resizeStyle })
+        style: I({ resize: o.question.resizeStyle })
       }, null, 46, Zs)) : !o.question.isReadOnlyRenderDiv() && o.question.getMaxLength() ? (i(), u("div", {
         key: 1,
         ref_key: "root",
@@ -1370,7 +1370,7 @@ const je = /* @__PURE__ */ h({
           "aria-describedby": o.question.a11y_input_ariaDescribedBy,
           "aria-invalid": o.question.a11y_input_ariaInvalid,
           "aria-errormessage": o.question.a11y_input_ariaErrormessage,
-          style: S({ resize: o.question.resizeStyle })
+          style: I({ resize: o.question.resizeStyle })
         }, null, 46, xs),
         C(l, {
           counter: o.question.characterCounter,
@@ -1428,7 +1428,7 @@ const rn = /* @__PURE__ */ h({
       s.question.onClick(l);
     }, o = (l) => {
       s.question.onKeyUp(l);
-    }, t = I({
+    }, t = S({
       get() {
         var l;
         return (l = s.question.value) != null ? l : "";
@@ -1511,7 +1511,7 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, n = $(null), e = I(() => {
+    const s = r, n = $(null), e = S(() => {
       const b = s.question;
       return b.dropdownListModel || (b.dropdownListModel = new De(b)), s.question.dropdownListModel;
     }), o = (b) => {
@@ -1539,9 +1539,9 @@ const rn = /* @__PURE__ */ h({
       (N = e.value) == null || N.onFocus(b);
     }, f = (b) => {
       e.value.inputStringRendered = b.target.value;
-    }, k = I(
+    }, k = S(
       () => s.question.showSelectedItemLocText
-    ), L = I(() => s.question.selectedItemLocText);
+    ), L = S(() => s.question.selectedItemLocText);
     return B(() => e.value), te(v), M(v), (b, N) => {
       const W = y("survey-string"), V = y("sv-svg-icon"), Q = y("sv-popup");
       return i(), u("div", {
@@ -1690,7 +1690,7 @@ const rn = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, n = I(() => {
+    const s = r, n = S(() => {
       const c = s.question;
       return c.dropdownListModel || (c.dropdownListModel = new Le(c)), s.question.dropdownListModel;
     }), e = (c) => {
@@ -1981,7 +1981,7 @@ const rn = /* @__PURE__ */ h({
     unrankedItem: { type: Boolean }
   },
   setup(r) {
-    const s = r, n = I(() => s.question.getNumberByIndex(s.index));
+    const s = r, n = S(() => s.question.getNumberByIndex(s.index));
     return B(() => s.item), (e, o) => {
       const t = y("survey-string");
       return i(), u("div", {
@@ -2159,7 +2159,7 @@ const rn = /* @__PURE__ */ h({
       return i(), u("label", {
         key: n.item.value,
         onMousedown: e[1] || (e[1] = (t) => n.question.onMouseDown()),
-        style: S(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
+        style: I(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
         class: a(n.question.getItemClass(n.item.itemValue, n.item.highlight)),
         onMouseover: e[2] || (e[2] = (t) => n.question.onItemMouseIn(n.item)),
         onMouseleave: e[3] || (e[3] = (t) => n.question.onItemMouseOut(n.item))
@@ -2340,7 +2340,8 @@ const zn = /* @__PURE__ */ h({
             onClick: l[2] || (l[2] = (c) => o(c))
           }, [
             p("span", {
-              class: a(t.question.cssClasses.slider)
+              class: a(t.question.cssClasses.slider),
+              style: I({ marginLeft: t.question.thumbMargin })
             }, [
               t.question.cssClasses.sliderText && t.question.isDeterminated ? (i(), u("span", {
                 key: 0,
@@ -2350,7 +2351,7 @@ const zn = /* @__PURE__ */ h({
                   locString: t.question.getCheckedLabel()
                 }, null, 8, ["locString"])
               ], 2)) : d("", !0)
-            ], 2)
+            ], 6)
           ], 2),
           p("div", {
             class: a(t.question.cssClasses.sliderGhost),
@@ -2603,7 +2604,7 @@ const so = /* @__PURE__ */ h({
   setup(r) {
     const s = r, n = (o) => re(o);
     B(() => s.cell.item.editor);
-    const e = I(() => s.cell.item);
+    const e = S(() => s.cell.item);
     return (o, t) => {
       const l = y("survey-string"), m = y("survey-errors");
       return o.cell.isErrorsCell ? (i(), g(m, {
@@ -2615,7 +2616,7 @@ const so = /* @__PURE__ */ h({
       }, [
         p("span", {
           class: a(o.question.getItemTitleCss()),
-          style: S({ minWidth: o.question.itemTitleWidth, width: o.question.itemTitleWidth })
+          style: I({ minWidth: o.question.itemTitleWidth, width: o.question.itemTitleWidth })
         }, [
           e.value.editor.isRequireTextBeforeTitle || e.value.editor.isRequireTextOnStart ? (i(), u("span", {
             key: 0,
@@ -2685,7 +2686,7 @@ const so = /* @__PURE__ */ h({
                 (i(!0), u(_, null, D(t.question.visibleColumns, (v, c) => (i(), u("th", {
                   key: c,
                   class: a(t.question.cssClasses.headerCell),
-                  style: S({
+                  style: I({
                     minWidth: t.question.columnMinWidth,
                     width: t.question.columnMinWidth
                   })
@@ -2710,7 +2711,7 @@ const so = /* @__PURE__ */ h({
               }, [
                 P(p("td", {
                   class: a(v.rowTextClasses),
-                  style: S({
+                  style: I({
                     minWidth: t.question.rowTitleWidth,
                     width: t.question.rowTitleWidth
                   })
@@ -2874,7 +2875,7 @@ const so = /* @__PURE__ */ h({
     question: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.question.renderedTable);
+    const s = r, n = S(() => s.question.renderedTable);
     return B(
       () => n.value,
       (e) => {
@@ -2891,7 +2892,7 @@ const so = /* @__PURE__ */ h({
     ), (e, o) => {
       const t = y("survey-string"), l = y("survey-matrixheaderrequired"), m = y("survey-matrix-row"), v = y("survey-matrixdropdown-cell");
       return i(), u("div", {
-        style: S({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
+        style: I({ overflowX: e.question.showHorizontalScroll ? "scroll" : "" }),
         class: a(e.question.cssClasses.tableWrapper)
       }, [
         p("table", {
@@ -2903,7 +2904,7 @@ const so = /* @__PURE__ */ h({
                 c.hasTitle ? (i(), u("th", {
                   key: "header_" + c.id,
                   class: a(c.className),
-                  style: S({ minWidth: c.minWidth, width: c.width })
+                  style: I({ minWidth: c.minWidth, width: c.width })
                 }, [
                   (i(), g(T(e.question.getColumnHeaderWrapperComponentName(c)), {
                     componentData: e.question.getColumnHeaderWrapperComponentData(c)
@@ -2924,7 +2925,7 @@ const so = /* @__PURE__ */ h({
                 c.hasTitle ? d("", !0) : (i(), u("td", {
                   class: a(c.className),
                   key: "header_" + c.id,
-                  style: S({ minWidth: c.minWidth, width: c.width })
+                  style: I({ minWidth: c.minWidth, width: c.width })
                 }, null, 6))
               ], 64))), 256))
             ])
@@ -2988,7 +2989,7 @@ const so = /* @__PURE__ */ h({
       };
       s.question.survey.matrixAfterCellRender(s.question, k), f && f.afterRenderCore(q);
     });
-    const v = I(() => {
+    const v = S(() => {
       const q = s.cell;
       if (q.hasPanel) {
         const f = q.panel, k = f.survey;
@@ -2999,7 +3000,7 @@ const so = /* @__PURE__ */ h({
         }
         return "survey-panel";
       }
-    }), c = I(() => {
+    }), c = S(() => {
       if (s.cell.hasPanel) {
         const f = s.cell.panel, k = f.survey;
         let L;
@@ -3019,7 +3020,7 @@ const so = /* @__PURE__ */ h({
         class: a(q.cell.className),
         "data-responsive-title": o(),
         title: q.cell.getTitle(),
-        style: S(t()),
+        style: I(t()),
         colspan: q.cell.colSpans,
         onFocusin: f[0] || (f[0] = (ue) => q.cell.focusIn()),
         ref_key: "root",
@@ -3191,8 +3192,8 @@ const so = /* @__PURE__ */ h({
 });
 function ae(r, s = !0) {
   return {
-    question: I(() => r.item.data.question),
-    row: s ? I(() => r.item.data.row) : void 0
+    question: S(() => r.item.data.question),
+    row: s ? S(() => r.item.data.row) : void 0
   };
 }
 const Ro = ["disabled"], To = /* @__PURE__ */ h({
@@ -3338,7 +3339,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         }, [
           p("div", {
             class: a(m.question.cssClasses.progressBar),
-            style: S({ width: m.question.progress }),
+            style: I({ width: m.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3410,7 +3411,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
             }, [
               p("div", {
                 class: a(e.question.cssClasses.progressBar),
-                style: S({ width: e.question.progress }),
+                style: I({ width: e.question.progress }),
                 role: "progressbar"
               }, null, 6)
             ], 2)) : d("", !0),
@@ -3449,7 +3450,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
         }, [
           p("div", {
             class: a(s.question.cssClasses.progressBar),
-            style: S({ width: s.question.progress }),
+            style: I({ width: s.question.progress }),
             role: "progressbar"
           }, null, 6)
         ], 2)) : d("", !0),
@@ -3466,7 +3467,7 @@ const Ro = ["disabled"], To = /* @__PURE__ */ h({
   }
 });
 function Y(r) {
-  return I(
+  return S(
     () => r.item && r.item.data.question || r.data.question
   );
 }
@@ -3553,7 +3554,7 @@ const Ao = /* @__PURE__ */ h({
     data: {}
   },
   setup(r) {
-    const s = r, n = Y(s), e = I(
+    const s = r, n = Y(s), e = S(
       () => s.item && s.item.data.panel || s.data.panel
     ), o = (t) => {
       n.value.isInputReadOnly || n.value.removePanelUI(t);
@@ -3633,7 +3634,7 @@ const Ao = /* @__PURE__ */ h({
       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: S({ resize: s.question.resizeStyle }),
+      style: I({ resize: s.question.resizeStyle }),
       onChange: n[0] || (n[0] = (e) => {
         s.question.onCommentChange(e);
       }),
@@ -3690,7 +3691,7 @@ const Ao = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => (s.element.isPanel ? s.element.cssClasses.panel : s.element.cssClasses) || {}
     );
     return (e, o) => {
@@ -3738,7 +3739,7 @@ const Ao = /* @__PURE__ */ h({
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.element.getTitleToolbar());
+    const s = r, n = S(() => s.element.getTitleToolbar());
     return (e, o) => {
       const t = y("survey-string"), l = y("survey-element-title-content"), m = y("sv-action-bar");
       return i(), u("div", Zo, [
@@ -3870,7 +3871,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => s.item.component || "sv-action-bar-item"
     );
     return B(() => s.item), (e, o) => {
@@ -3991,7 +3992,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.item && s.item.innerCss);
+    const s = r, n = S(() => s.item && s.item.innerCss);
     return (e, o) => (i(), u("div", {
       class: a(["sv-action-bar-separator", n.value])
     }, null, 2));
@@ -4095,7 +4096,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     item: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.item.elementId), e = (o) => {
+    const s = r, n = S(() => s.item.elementId), e = (o) => {
       s.model.onItemClick(s.item), o.stopPropagation();
     };
     return B(() => s.item), M(() => {
@@ -4119,7 +4120,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           class: a(o.model.cssClasses.itemSeparator)
         }, null, 2)) : d("", !0),
         p("div", {
-          style: S({ paddingInlineStart: o.model.getItemIndent(o.item) }),
+          style: I({ paddingInlineStart: o.model.getItemIndent(o.item) }),
           class: a(o.model.cssClasses.itemBody),
           title: o.item.locTitle.calculatedText
         }, [
@@ -4210,7 +4211,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       }, [
         p("div", {
           class: "sv-popup__container",
-          style: S({
+          style: I({
             left: e.model.left,
             top: e.model.top,
             height: e.model.height,
@@ -4252,7 +4253,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     return (s, n) => (i(), u("span", {
       class: "sv-popup__pointer",
-      style: S({
+      style: I({
         left: s.model.pointerTarget.left,
         top: s.model.pointerTarget.top
       })
@@ -4269,7 +4270,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     needRenderWrapper: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => s.survey.getContainerContent(s.container)
     );
     return (e, o) => n.value.length > 0 ? (i(), u(_, { key: 0 }, [
@@ -4294,13 +4295,13 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.survey.progressValue + "%"), e = (t) => de.getProgressTextInBarCss(t), o = (t) => de.getProgressTextUnderBarCss(t);
+    const s = r, n = S(() => s.survey.progressValue + "%"), e = (t) => de.getProgressTextInBarCss(t), o = (t) => de.getProgressTextUnderBarCss(t);
     return (t, l) => (i(), u("div", {
       class: a(t.survey.getProgressCssClasses(t.container))
     }, [
       p("div", {
         class: a(t.survey.css.progressBar),
-        style: S({ width: n.value }),
+        style: I({ width: n.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4323,7 +4324,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     container: {}
   },
   setup(r) {
-    const s = r, n = $(!1), e = $(!1), o = $(!1), t = $(!0), l = $(), m = I(() => s.survey.css);
+    const s = r, n = $(!1), e = $(!1), o = $(!1), t = $(!0), l = $(), m = S(() => s.survey.css);
     let v = null;
     const c = (q) => {
       let f = l.value;
@@ -4341,7 +4342,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
         onUpdateSettings: () => {
           t.value = s.model.showItemTitles, o.value = !s.model.showItemTitles;
         },
-        container: I(() => s.container)
+        container: S(() => s.container)
       });
     }), G(() => {
       v.dispose();
@@ -4349,7 +4350,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       const k = y("survey-string");
       return i(), u("div", {
         class: a(q.model.getRootCss(q.container)),
-        style: S({ maxWidth: q.model.progressWidth }),
+        style: I({ maxWidth: q.model.progressWidth }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4477,15 +4478,15 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     survey: {}
   },
   setup(r) {
-    const s = r, n = $(), e = $(""), o = $(1), t = I(() => {
+    const s = r, n = $(), e = $(""), o = $(1), t = S(() => {
       const k = s.survey ? s.survey : s.model;
       return Se(k);
-    }), l = I(() => t.value.activePage ? t.value.activePage.id : ""), m = () => {
+    }), l = S(() => t.value.activePage ? t.value.activePage.id : ""), m = () => {
       const k = l.value;
       return !!t.value && k + o.value.toString();
-    }, v = I(
+    }, v = S(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), c = I(() => t.value.css), q = I(() => "page" + m()), f = () => v.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
+    ), c = S(() => t.value.css), q = S(() => "page" + m()), f = () => v.value ? (e.value || (e.value = t.value.processedCompletedHtml), e.value) : "";
     return B(() => t.value), M(() => {
       if (!!t.value) {
         var k = n.value;
@@ -4500,7 +4501,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       const b = y("sv-svg-bundle"), N = y("survey-popup-modal"), W = y("survey-header"), V = y("survey-page"), Q = y("sv-brand-info"), ue = y("sv-notifier");
       return i(), u("div", {
         class: a(t.value.getRootCss()),
-        style: S(t.value.themeVariables),
+        style: I(t.value.themeVariables),
         ref_key: "root",
         ref: n
       }, [
@@ -4512,7 +4513,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
           t.value.renderBackgroundImage ? (i(), u("div", {
             key: 0,
             class: a(c.value.rootBackgroundImage),
-            style: S(t.value.backgroundImageStyle)
+            style: I(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
           p("form", jt, [
             t.value.hasLogo ? d("", !0) : (i(), u("div", Gt)),
@@ -4545,7 +4546,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
                   }, null, 8, ["survey"])),
                   p("div", {
                     class: a(t.value.bodyCss),
-                    style: S({ maxWidth: t.value.renderedWidth }),
+                    style: I({ maxWidth: t.value.renderedWidth }),
                     id: l.value
                   }, [
                     (i(), g(T("sv-components-container"), {
@@ -4624,7 +4625,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       return n.model.isDisplayed ? (i(), u("div", {
         key: 0,
         class: a(n.model.css),
-        style: S({ visibility: n.model.active ? "visible" : "hidden" }),
+        style: I({ visibility: n.model.active ? "visible" : "hidden" }),
         role: "alert",
         "aria-live": "polite"
       }, [
@@ -4656,7 +4657,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__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: S({ resize: s.question.resizeStyle }),
+        style: I({ resize: s.question.resizeStyle }),
         onChange: n[0] || (n[0] = (e) => {
           s.question.onOtherValueChange(e);
         }),
@@ -4695,11 +4696,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     closeOnCompleteTimeout: {}
   },
   setup(r) {
-    const s = r, n = U(), e = I(() => s.survey ? s.survey.getCss() : {});
-    I(() => {
+    const s = r, n = U(), e = S(() => s.survey ? s.survey.getCss() : {});
+    S(() => {
       var f;
       return (f = n.value) != null && f.isExpanded ? e.value.window.header.buttonCollapsed : e.value.window.header.buttonExpanded;
-    }), I(() => {
+    }), S(() => {
       var f;
       return (f = n.value) == null ? void 0 : f.isExpanded;
     });
@@ -4732,7 +4733,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       const L = y("sv-svg-icon");
       return n.value.isShowing ? (i(), u("div", {
         key: 0,
-        style: S({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
+        style: I({ maxWidth: n.value.renderedWidth, width: n.value.renderedWidth }),
         class: a(n.value.cssRoot),
         onScroll: v
       }, [
@@ -4808,11 +4809,11 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = I(
+    const s = r, n = $(), e = S(
       () => s.question.customWidget.isDefaultRender
-    ), o = I(
+    ), o = S(
       () => !!s.question.customWidget.htmlTemplate
-    ), t = I(() => s.question.customWidget.htmlTemplate), l = I(() => "survey-" + s.question.getTemplate());
+    ), t = S(() => s.question.customWidget.htmlTemplate), l = S(() => "survey-" + s.question.getTemplate());
     return M(() => {
       s.question.customWidget.afterRender(s.question, n.value);
     }), G(() => {
@@ -4895,7 +4896,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     A(s, n);
-    const e = I(() => s.question.contentPanel);
+    const e = S(() => s.question.contentPanel);
     return (o, t) => {
       const l = y("survey-panel");
       return i(), g(l, {
@@ -4916,7 +4917,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
   setup(r) {
     const s = r, n = $(null);
     A(s, n);
-    const e = I(() => s.question.contentQuestion), o = (t) => re(t);
+    const e = S(() => s.question.contentQuestion), o = (t) => re(t);
     return (t, l) => (i(), g(T(o(e.value)), {
       ref: n.value,
       question: e.value,
@@ -4932,7 +4933,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
     css: {}
   },
   setup(r) {
-    const s = r, n = I(() => qe * s.model.progress), e = I(() => s.model.text);
+    const s = r, n = S(() => qe * s.model.progress), e = S(() => s.model.text);
     return B(() => s.model), (o, t) => o.model.isRunning && o.model.showTimerAsClock ? (i(), u("div", {
       key: 0,
       class: a(o.model.rootCss)
@@ -4940,7 +4941,7 @@ const rt = /* @__PURE__ */ he(st, [["render", it]]), lt = /* @__PURE__ */ p("use
       o.model.showProgress ? (i(), u("svg", {
         key: 0,
         class: a(o.model.getProgressCss()),
-        style: S({ strokeDasharray: qe, strokeDashoffset: n.value })
+        style: I({ strokeDasharray: qe, strokeDashoffset: n.value })
       }, vi, 6)) : d("", !0),
       p("div", {
         class: a(o.model.textContainerCss)
@@ -4985,17 +4986,17 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       const o = y("sv-header-cell"), t = y("sv-header-mobile");
       return i(), u("div", {
         class: a(n.model.headerClasses),
-        style: S({ height: n.model.renderedHeight })
+        style: I({ height: n.model.renderedHeight })
       }, [
         n.model.backgroundImage ? (i(), u("div", {
           key: 0,
           class: a(n.model.backgroundImageClasses),
-          style: S(n.model.backgroundImageStyle)
+          style: I(n.model.backgroundImageStyle)
         }, null, 6)) : d("", !0),
         n.survey.isMobile ? d("", !0) : (i(), u("div", {
           key: 1,
           class: a(n.model.contentClasses),
-          style: S({ maxWidth: n.model.maxWidth })
+          style: I({ maxWidth: n.model.maxWidth })
         }, [
           (i(!0), u(_, null, D(n.model.cells, (l, m) => (i(), g(o, {
             model: l,
@@ -5021,11 +5022,11 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
       const e = y("survey-element-title"), o = y("survey-string");
       return i(), u("div", {
         class: a(s.model.css),
-        style: S(s.model.style)
+        style: I(s.model.style)
       }, [
         p("div", {
           class: "sv-header__cell-content",
-          style: S(s.model.contentStyle)
+          style: I(s.model.contentStyle)
         }, [
           s.model.showLogo ? (i(), u("div", fi, [
             p("div", {
@@ -5037,14 +5038,14 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
                 width: s.model.survey.renderedLogoWidth,
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
-                style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+                style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
               }, null, 14, wi)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
             key: 1,
             class: "sv-header__title",
-            style: S({ maxWidth: s.model.textAreaWidth })
+            style: I({ maxWidth: s.model.textAreaWidth })
           }, [
             C(e, {
               element: s.model.survey,
@@ -5054,7 +5055,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           s.model.showDescription ? (i(), u("div", {
             key: 2,
             class: "sv-header__description",
-            style: S({ maxWidth: s.model.textAreaWidth })
+            style: I({ maxWidth: s.model.textAreaWidth })
           }, [
             s.model.survey.renderedHasDescription ? (i(), u("div", {
               key: 0,
@@ -5091,14 +5092,14 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               width: s.model.survey.renderedLogoWidth,
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
-              style: S({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
+              style: I({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
             }, null, 14, Ti)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
           key: 1,
           class: "sv-header__title",
-          style: S({ maxWidth: s.model.renderedtextAreaWidth })
+          style: I({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           C(e, {
             element: s.model.survey,
@@ -5108,7 +5109,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         s.model.survey.renderedHasDescription ? (i(), u("div", {
           key: 2,
           class: "sv-header__description",
-          style: S({ maxWidth: s.model.renderedtextAreaWidth })
+          style: I({ maxWidth: s.model.renderedtextAreaWidth })
         }, [
           s.model.survey.renderedHasDescription ? (i(), u("div", {
             key: 0,
@@ -5130,7 +5131,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     css: {}
   },
   setup(r) {
-    const s = r, n = $(), e = (v) => v.isPanel ? "survey-panel" : "survey-question", o = I(() => {
+    const s = r, n = $(), e = (v) => v.isPanel ? "survey-panel" : "survey-question", o = S(() => {
       const v = s.element.survey;
       if (v) {
         const c = v.getElementWrapperComponentName(s.element);
@@ -5138,7 +5139,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
           return c;
       }
       return e(s.element);
-    }), t = (v) => v.cssClasses ? v.rootStyle : {}, l = I(() => {
+    }), t = (v) => v.cssClasses ? v.rootStyle : {}, l = S(() => {
       const v = s.element, c = v.survey;
       let q;
       return c && (q = c.getElementWrapperComponentData(v)), {
@@ -5164,7 +5165,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     }), (v, c) => (i(), u("div", {
       ref_key: "root",
       ref: n,
-      style: S(t(v.element)),
+      style: I(t(v.element)),
       class: a(v.element.cssClasses.questionWrapper)
     }, [
       v.row.isNeedRender ? (i(), g(T(o.value), z(H({ key: 0 }, l.value)), null, 16)) : v.element.skeletonComponentName ? (i(), g(T(v.element.skeletonComponentName), {
@@ -5181,7 +5182,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     componentData: {}
   },
   setup(r) {
-    const s = Te(), n = I(() => !!s.default);
+    const s = Te(), n = S(() => !!s.default);
     return (e, o) => n.value && !e.componentName ? $e(e.$slots, "default", { key: 0 }) : (i(), g(T(e.componentName), z(H({ key: 1 }, e.componentData)), null, 16));
   }
 }), Bi = /* @__PURE__ */ h({
@@ -5244,7 +5245,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     item: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => {
         var e;
         return ((e = s.data) == null ? void 0 : e.question) || s.item.data.question;
@@ -5296,7 +5297,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               href: o.content,
               title: o.name,
               download: o.name,
-              style: S({ width: s.question.imageWidth })
+              style: I({ width: s.question.imageWidth })
             }, R(o.name), 13, Mi)
           ], 2)) : d("", !0),
           p("div", {
@@ -5305,7 +5306,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
             s.question.canPreviewImage(o) ? (i(), u("img", {
               key: 0,
               src: o.content,
-              style: S({
+              style: I({
                 height: s.question.imageHeight,
                 width: s.question.imageWidth
               }),
@@ -5343,7 +5344,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
               href: o.content,
               title: o.name,
               download: o.name,
-              style: S({ width: s.question.imageWidth })
+              style: I({ width: s.question.imageWidth })
             }, R(o.name), 13, Wi)
           ], 2)) : d("", !0)
         ], 2)), [
@@ -5384,9 +5385,9 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     index: {}
   },
   setup(r) {
-    const s = r, n = I(
+    const s = r, n = S(
       () => new Fe(s.question, s.item, s.index)
-    ), e = I({
+    ), e = S({
       get: () => s.question.renderedValue,
       set: (o) => {
         const t = s.question;
@@ -5445,7 +5446,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
     data: {}
   },
   setup(r) {
-    const s = r, n = I(() => s.data), e = J(() => n.value.locLogo);
+    const s = r, n = S(() => s.data), e = J(() => n.value.locLogo);
     return (o, t) => (i(), u("div", {
       class: a(n.value.logoClassNames)
     }, [
@@ -5455,7 +5456,7 @@ const Ci = /* @__PURE__ */ he(yi, [["render", hi]]), bi = { key: 2 }, ki = /* @_
         width: n.value.renderedLogoWidth,
         height: n.value.renderedLogoHeight,
         alt: n.value.locTitle.renderedHtml,
-        style: S({
+        style: I({
           objectFit: n.value.logoFit,
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight