survey-vue3-ui 2.2.1 → 2.2.3

package/survey-vue3-ui.es.js

@@ -1,7 +1,7 @@
 var Me = Object.defineProperty;
 var Ie = (u, e, n) => e in u ? Me(u, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : u[e] = n;
 var J = (u, e, n) => (Ie(u, typeof e != "symbol" ? e + "" : e, n), n);
-import { defineComponent as y, computed as H, openBlock as i, createBlock as g, resolveDynamicComponent as ge, normalizeProps as de, guardReactiveProps as me, createSlots as Ve, renderList as V, withCtx as A, renderSlot as x, shallowReactive as Se, watch as W, onBeforeUnmount as O, onMounted as Z, ref as k, shallowRef as E, watchEffect as Re, triggerRef as oe, unref as w, isRef as Te, nextTick as ye, createElementBlock as a, normalizeClass as r, createVNode as c, createCommentVNode as p, Fragment as M, mergeProps as $, normalizeStyle as f, createElementVNode as v, onUnmounted as D, withDirectives as B, vShow as P, toDisplayString as I, vModelRadio as se, vModelCheckbox as ie, vModelSelect as Be, onUpdated as j, vModelText as Ze, getCurrentInstance as he, createStaticVNode as $e, toRaw as De, Teleport as Ae, useSlots as Pe } from "vue";
+import { defineComponent as y, computed as H, openBlock as i, createBlock as g, resolveDynamicComponent as ge, normalizeProps as de, guardReactiveProps as me, createSlots as Ve, renderList as V, withCtx as D, renderSlot as x, shallowReactive as Se, watch as W, onBeforeUnmount as O, onMounted as Z, ref as f, shallowRef as E, watchEffect as Re, triggerRef as oe, unref as w, isRef as Te, nextTick as ye, createElementBlock as a, normalizeClass as r, createVNode as c, createCommentVNode as p, Fragment as M, mergeProps as $, normalizeStyle as k, createElementVNode as v, onUnmounted as P, withDirectives as B, vShow as A, toDisplayString as I, vModelRadio as se, vModelCheckbox as ie, vModelSelect as Be, onUpdated as z, vModelText as Ze, getCurrentInstance as he, createStaticVNode as $e, toRaw as De, Teleport as Ae, useSlots as Pe } from "vue";
 import { Base as Ne, ScrollViewModel as Ee, RendererFactory as G, Helpers as We, DropdownMultiSelectListModel as Fe, doKey2ClickUp as qe, createSvg as Oe, doKey2ClickDown as ze, doKey2ClickBlur as Ue, ActionDropdownViewModel as Qe, createPopupViewModel as Ke, SurveyProgressModel as pe, ProgressButtonsResponsivityManager as je, addIconsToThemeSet as we, SvgRegistry as _, PopupSurveyModel as Ge, settings as te, createPopupModalViewModel as Xe, ButtonGroupItemModel as Je, SurveyModel as Ye } from "survey-core";
 const ee = class ee {
   constructor() {
@@ -38,7 +38,7 @@ const m = /* @__PURE__ */ y({
     return (s, o) => (i(), g(ge(n.value), de(me(s.$attrs)), Ve({ _: 2 }, [
       V(s.$slots, (t, l) => ({
         name: l,
-        fn: A((d) => [
+        fn: D((d) => [
           x(s.$slots, l, de(me(d)))
         ])
       }))
@@ -112,8 +112,8 @@ function T(u, e, n, s) {
     u.question.beforeDestroyQuestionElement(e.value);
   });
 }
-function z(u) {
-  const e = k(), n = (t) => {
+function U(u) {
+  const e = f(), n = (t) => {
     e.value = t.renderedHtml;
   }, s = (t) => {
     e.value = t.renderedHtml, t.onStringChanged.add(n);
@@ -148,7 +148,7 @@ const ss = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = () => {
+    const e = u, n = f(null), s = () => {
       e.survey && n.value && e.survey.afterRenderPage(n.value);
     }, o = H(() => e.page._showDescription);
     return S(
@@ -187,7 +187,7 @@ const ss = /* @__PURE__ */ y({
       }, {
         componentData: t.page.getSurvey().getRowWrapperComponentData(d)
       }), {
-        default: A(() => [
+        default: D(() => [
           c(m, {
             is: "survey-row",
             row: d,
@@ -205,7 +205,7 @@ const ss = /* @__PURE__ */ y({
     survey: {}
   },
   setup(u) {
-    const e = u, n = k();
+    const e = u, n = f();
     return Z(() => {
       var s = n.value;
       s && e.survey && e.survey.afterRenderHeader(s);
@@ -223,7 +223,7 @@ const ss = /* @__PURE__ */ y({
       s.survey.renderedHasTitle ? (i(), a("div", {
         key: 1,
         class: r(s.survey.css.headerText),
-        style: f({ maxWidth: s.survey.titleMaxWidth })
+        style: k({ maxWidth: s.survey.titleMaxWidth })
       }, [
         c(m, {
           is: "survey-element-title",
@@ -258,7 +258,7 @@ const ss = /* @__PURE__ */ y({
     survey: {}
   },
   setup(u) {
-    const e = u, n = k();
+    const e = u, n = f();
     let s;
     return S(
       () => e.row,
@@ -300,7 +300,7 @@ const ss = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = (q) => q.cssContent, o = () => e.element.getRootStyle(), t = H(() => e.element.singleInputQuestion);
+    const e = u, n = f(null), s = (q) => q.cssContent, o = () => e.element.getRootStyle(), t = H(() => e.element.singleInputQuestion);
     S(() => e.element);
     const l = () => {
       n.value && e.element.afterRender(n.value);
@@ -309,20 +309,20 @@ const ss = /* @__PURE__ */ y({
       () => {
         l();
       }
-    ), C = H(() => e.element.customWidget ? "survey-customwidget" : e.element.isDefaultRendering() ? "survey-" + e.element.getTemplate() : e.element.getComponentName()), b = H(() => e.element.survey.getQuestionContentWrapperComponentName(e.element)), h = H(() => ({
+    ), C = H(() => e.element.customWidget ? "survey-customwidget" : e.element.isDefaultRendering() ? "survey-" + e.element.getTemplate() : e.element.getComponentName()), L = H(() => e.element.survey.getQuestionContentWrapperComponentName(e.element)), h = H(() => ({
       componentData: {
         question: e.element,
         data: e.element.survey.getElementWrapperComponentData(e.element)
       }
     }));
-    return D(() => {
+    return P(() => {
       d();
-    }), (q, L) => (i(), a("div", {
+    }), (q, b) => (i(), a("div", {
       class: r(q.element.getRootCss()),
-      style: f(o()),
+      style: k(o()),
       ref_key: "root",
       ref: n,
-      onFocusin: L[0] || (L[0] = (R) => q.element.focusIn()),
+      onFocusin: b[0] || (b[0] = (R) => q.element.focusIn()),
       id: q.element.id,
       role: q.element.ariaRole,
       "aria-required": q.element.ariaRequired,
@@ -364,13 +364,13 @@ const ss = /* @__PURE__ */ y({
         key: t.value.id
       }, null, 8, ["css", "element", "survey"])) : (i(), g(m, $({
         key: 5,
-        is: b.value
+        is: L.value
       }, h.value), {
-        default: A(() => [
+        default: D(() => [
           v("div", {
             class: r(s(q.element) || void 0),
             "aria-hidden": q.element.contentAriaHidden,
-            style: f({ display: q.element.renderedIsExpanded ? void 0 : "none" }),
+            style: k({ display: q.element.renderedIsExpanded ? void 0 : "none" }),
             role: "presentation"
           }, [
             c(m, {
@@ -432,7 +432,7 @@ const ss = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = H(() => e.element.survey);
+    const e = u, n = f(null), s = H(() => e.element.survey);
     return S(() => e.element), Z(() => {
       e.element.survey && e.element.afterRender(n.value);
     }), (o, t) => o.element.getIsContentVisible() ? (i(), a("div", {
@@ -462,7 +462,7 @@ const ss = /* @__PURE__ */ y({
       o.element.renderedIsExpanded ? (i(), a("div", {
         key: 3,
         id: o.element.contentId,
-        style: f({ paddingLeft: o.element.innerPaddingLeft }),
+        style: k({ paddingLeft: o.element.innerPaddingLeft }),
         class: r(o.element.cssClasses.panel.content),
         role: o.element.ariaRole,
         "aria-labelledby": o.element.ariaLabelledBy,
@@ -474,7 +474,7 @@ const ss = /* @__PURE__ */ y({
         }, {
           componentData: o.element.getSurvey().getRowWrapperComponentData(l)
         }), {
-          default: A(() => [
+          default: D(() => [
             c(m, {
               is: "survey-row",
               row: l,
@@ -507,7 +507,7 @@ const ss = /* @__PURE__ */ y({
     return (o, t) => (i(), a("div", {
       class: r(o.element.cssHeader),
       onClick: n,
-      style: f(s())
+      style: k(s())
     }, [
       c(m, {
         is: "survey-element-title",
@@ -524,7 +524,7 @@ const ss = /* @__PURE__ */ y({
           locString: o.element.locDescription
         }, null, 8, ["locString"])
       ], 10, vs)), [
-        [P, o.element.hasDescription]
+        [A, o.element.hasDescription]
       ]) : p("", !0),
       o.element.hasAdditionalTitleToolbar ? (i(), g(m, {
         key: 1,
@@ -550,7 +550,7 @@ const ss = /* @__PURE__ */ y({
     locString: {}
   },
   setup(u) {
-    const e = u, n = z(() => e.locString), s = e.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
+    const e = u, n = U(() => e.locString), s = e.locString.allowLineBreaks ? "sv-string-viewer sv-string-viewer--multiline" : "sv-string-viewer";
     return (o, t) => o.locString.hasHtml ? (i(), a("span", {
       key: 0,
       class: r(w(s)),
@@ -597,7 +597,7 @@ const ss = /* @__PURE__ */ y({
     return S(() => e.element), (n, s) => (i(), a("div", {
       class: "sv-skeleton-element",
       id: n.element.id,
-      style: f({ height: n.element.skeletonHeight })
+      style: k({ height: n.element.skeletonHeight })
     }, null, 12, ws));
   }
 }), Ls = { class: "sv-scroll__container" }, ks = /* @__PURE__ */ v("div", { class: "sv-scroll__scrollbar-sizer" }, null, -1), fs = [
@@ -613,10 +613,10 @@ const ss = /* @__PURE__ */ y({
     n.onInnerHeightChanged = (o) => {
       e.onInnerHeightChanged && e.onInnerHeightChanged(o);
     };
-    const s = k();
+    const s = f();
     return Z(() => {
       n.setRootElement(s.value);
-    }), D(() => {
+    }), P(() => {
       n.setRootElement(void 0), n.unsubscribeRootElement();
     }), (o, t) => e.disabled ? x(o.$slots, "default", { key: 0 }) : (i(), a("div", {
       key: 1,
@@ -645,7 +645,7 @@ const ss = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), a("div", {
       key: 0,
       ref_key: "root",
@@ -685,7 +685,7 @@ const ss = /* @__PURE__ */ y({
   setup(u, { expose: e }) {
     const n = u, s = function(l) {
       n.getRef && n.getRef(l);
-    }, o = k(null);
+    }, o = f(null);
     e({ root: o }), S(() => n.question);
     const t = H(() => n.question.inputStyle);
     return (l, d) => l.question.getMaxLength() ? (i(), a("div", {
@@ -702,7 +702,7 @@ const ss = /* @__PURE__ */ y({
         max: l.question.renderedMax,
         step: l.question.renderedStep,
         size: l.question.renderedInputSize,
-        style: f(t.value),
+        style: k(t.value),
         id: l.question.inputId,
         list: l.question.dataListId,
         placeholder: l.question.renderedPlaceholder,
@@ -748,7 +748,7 @@ const ss = /* @__PURE__ */ y({
       max: l.question.renderedMax,
       step: l.question.renderedStep,
       size: l.question.renderedInputSize,
-      style: f(t.value),
+      style: k(t.value),
       id: l.question.inputId,
       list: l.question.dataListId,
       placeholder: l.question.renderedPlaceholder,
@@ -789,7 +789,7 @@ const ss = /* @__PURE__ */ y({
     showLegend: { type: Boolean }
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (t) => e.question.getItemValueWrapperComponentName(t) || e.question.itemComponent, o = (t) => ({
       componentName: e.question.itemComponent,
@@ -838,10 +838,10 @@ const ss = /* @__PURE__ */ y({
           class: r(t.question.getColumnClass()),
           role: "presentation"
         }, [
-          (i(!0), a(M, null, V(d, (b) => (i(), g(m, $({
-            key: b.value,
-            is: s(b)
-          }, o(b)), null, 16, ["is"]))), 128))
+          (i(!0), a(M, null, V(d, (L) => (i(), g(m, $({
+            key: L.value,
+            is: s(L)
+          }, o(L)), null, 16, ["is"]))), 128))
         ], 2))), 128)) : p("", !0)
       ], 2)) : p("", !0),
       t.question.hasFootItems ? (i(!0), a(M, { key: 5 }, V(t.question.footItems, (d) => (i(), g(m, $({
@@ -881,7 +881,7 @@ const ss = /* @__PURE__ */ y({
 function Le(u, e, n) {
   Z(() => {
     n.value && (e().isDesignMode || u().setRootElement(n.value));
-  }), D(() => {
+  }), P(() => {
     e().isDesignMode || u().setRootElement(void 0);
   }), S(u, (s, o) => {
     e().isDesignMode || (s && n.value && s.setRootElement(n.value), o && o.setRootElement(void 0));
@@ -897,7 +897,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     ariaLabel: {}
   },
   setup(u) {
-    const e = k(), n = u;
+    const e = f(), n = u;
     Le(
       () => n.item,
       () => n.question,
@@ -974,7 +974,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     ariaLabel: {}
   },
   setup(u) {
-    const e = k(), n = u, s = (l) => n.question.getLabelClass(l), o = (l) => n.question.getControlLabelClass(l), t = H({
+    const e = f(), n = u, s = (l) => n.question.getLabelClass(l), o = (l) => n.question.getControlLabelClass(l), t = H({
       get: () => n.question.renderedValue,
       set: (l) => {
         const d = n.question;
@@ -1041,12 +1041,12 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.root),
       ref_key: "root",
       ref: n,
-      style: f({
+      style: k({
         width: s.question.renderedCanvasWidth
       })
     }, [
@@ -1058,7 +1058,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           locString: s.question.locRenderedPlaceholder
         }, null, 8, ["locString"])
       ], 2), [
-        [P, s.question.needShowPlaceholder()]
+        [A, s.question.needShowPlaceholder()]
       ]),
       v("div", null, [
         s.question.backgroundImage ? (i(), a("img", {
@@ -1066,7 +1066,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           role: "presentation",
           class: r(s.question.cssClasses.backgroundImage),
           src: s.question.backgroundImage,
-          style: f({
+          style: k({
             width: s.question.renderedCanvasWidth
           })
         }, null, 14, Us)) : p("", !0),
@@ -1113,9 +1113,9 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
-    const s = z(() => e.question.locHtml);
+    const s = U(() => e.question.locHtml);
     return (o, t) => (i(), a("div", {
       ref_key: "root",
       ref: n,
@@ -1130,9 +1130,9 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
-    const s = z(() => e.question.locImageLink);
+    const s = U(() => e.question.locImageLink);
     return (o, t) => (i(), a("div", {
       class: r(o.question.cssClasses.root),
       ref_key: "root",
@@ -1145,7 +1145,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         alt: o.question.altText || o.question.title,
         width: o.question.renderedWidth,
         height: o.question.renderedHeight,
-        style: f({
+        style: k({
           objectFit: o.question.imageFit,
           width: o.question.renderedStyleWidth,
           height: o.question.renderedStyleHeight
@@ -1157,7 +1157,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           o.question.onErrorHandler();
         })
       }, null, 46, Js)), [
-        [P, w(s) && !o.question.contentNotLoaded]
+        [A, w(s) && !o.question.contentNotLoaded]
       ]) : p("", !0),
       o.question.renderedMode === "video" ? B((i(), a("video", {
         key: 1,
@@ -1166,7 +1166,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         src: w(s),
         width: o.question.renderedWidth,
         height: o.question.renderedHeight,
-        style: f({
+        style: k({
           objectFit: o.question.imageFit,
           width: o.question.renderedStyleWidth,
           height: o.question.renderedStyleHeight
@@ -1178,7 +1178,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           o.question.onErrorHandler();
         })
       }, null, 46, Ys)), [
-        [P, w(s) && !o.question.contentNotLoaded]
+        [A, w(s) && !o.question.contentNotLoaded]
       ]) : p("", !0),
       o.question.renderedMode === "youtube" ? (i(), a("iframe", {
         key: 2,
@@ -1187,7 +1187,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         title: o.question.renderedAltText,
         width: o.question.renderedWidth,
         height: o.question.renderedHeight,
-        style: f({
+        style: k({
           objectFit: o.question.imageFit,
           width: o.question.renderedStyleWidth,
           height: o.question.renderedStyleHeight
@@ -1212,7 +1212,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.root),
       ref_key: "root",
@@ -1226,7 +1226,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.fileRootCss),
       ref_key: "root",
@@ -1332,7 +1332,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (t) => e.question.getItemValueWrapperComponentName(t) || Ce, o = (t) => ({
       componentName: Ce,
@@ -1344,7 +1344,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     });
     return (t, l) => (i(), a("fieldset", {
       class: r(t.question.getSelectBaseRootCss()),
-      style: f(t.question.getContainerStyle()),
+      style: k(t.question.getContainerStyle()),
       ref_key: "root",
       ref: n
     }, [
@@ -1358,10 +1358,10 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         key: C,
         role: "presentation"
       }, [
-        (i(!0), a(M, null, V(d, (b) => (i(), g(m, $({
-          key: b.value,
-          is: s(b)
-        }, o(b)), null, 16, ["is"]))), 128))
+        (i(!0), a(M, null, V(d, (L) => (i(), g(m, $({
+          key: L.value,
+          is: s(L)
+        }, o(L)), null, 16, ["is"]))), 128))
       ], 2))), 128)) : p("", !0)
     ], 6));
   }
@@ -1383,7 +1383,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       }
     });
     S(() => e.item);
-    const o = z(() => e.item.locImageLink);
+    const o = U(() => e.item.locImageLink);
     return (t, l) => (i(), a("div", {
       class: r(n(t.item))
     }, [
@@ -1448,7 +1448,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               src: w(o),
               width: t.question.renderedImageWidth,
               height: t.question.renderedImageHeight,
-              style: f({ objectFit: t.question.imageFit }),
+              style: k({ objectFit: t.question.imageFit }),
               alt: t.item.locText.renderedHtml,
               onLoad: l[2] || (l[2] = (d) => {
                 t.question.onContentLoaded(t.item, d);
@@ -1464,7 +1464,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               src: w(o),
               width: t.question.renderedImageWidth,
               height: t.question.renderedImageHeight,
-              style: f({ objectFit: t.question.imageFit }),
+              style: k({ objectFit: t.question.imageFit }),
               onLoadedmetadata: l[4] || (l[4] = (d) => {
                 t.question.onContentLoaded(t.item, d);
               }),
@@ -1475,7 +1475,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             !w(o) || t.item.contentNotLoaded ? (i(), a("div", {
               key: 3,
               class: r(t.question.cssClasses.itemNoImage),
-              style: f({
+              style: k({
                 width: t.question.renderedImageWidth + "px",
                 height: t.question.renderedImageHeight + "px",
                 objectFit: t.question.imageFit
@@ -1509,7 +1509,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k();
+    const e = u, n = f();
     function s(o) {
       n.value = o;
     }
@@ -1545,7 +1545,7 @@ const Ps = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.renderCssRoot),
       ref_key: "root",
@@ -1578,7 +1578,7 @@ const y1 = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (l) => {
       e.question.onClick(l);
@@ -1655,7 +1655,7 @@ const y1 = /* @__PURE__ */ y({
     item: {}
   },
   setup(u) {
-    const e = u, n = z(() => e.item.locText);
+    const e = u, n = U(() => e.item.locText);
     return S(() => e.item), (s, o) => (i(), a("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
@@ -1667,40 +1667,40 @@ const y1 = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = H(() => e.question.dropdownListModel), o = (L) => {
+    const e = u, n = f(null), s = H(() => e.question.dropdownListModel), o = (b) => {
       var R;
-      (R = s.value) == null || R.onClick(L);
-    }, t = (L) => {
+      (R = s.value) == null || R.onClick(b);
+    }, t = (b) => {
       var R;
-      (R = s.value) == null || R.keyHandler(L);
+      (R = s.value) == null || R.keyHandler(b);
     }, l = () => {
       if (n.value) {
-        const L = n.value, R = s.value.inputStringRendered;
-        We.isTwoValueEquals(R, L.value, !1, !0, !1) || (L.value = s.value.inputStringRendered);
+        const b = n.value, R = s.value.inputStringRendered;
+        We.isTwoValueEquals(R, b.value, !1, !0, !1) || (b.value = s.value.inputStringRendered);
       }
-    }, d = (L) => {
-      e.question.onBlur(L), l();
-    }, C = (L) => {
-      e.question.onFocus(L);
-    }, b = (L) => {
-      s.value.inputStringRendered = L.target.value;
+    }, d = (b) => {
+      e.question.onBlur(b), l();
+    }, C = (b) => {
+      e.question.onFocus(b);
+    }, L = (b) => {
+      s.value.inputStringRendered = b.target.value;
     }, h = H(
       () => e.question.showSelectedItemLocText
     ), q = H(() => e.question.selectedItemLocText);
-    return S(() => s.value), j(l), Z(l), (L, R) => {
-      var N, Q, K, ue;
+    return S(() => s.value), z(l), Z(l), (b, R) => {
+      var N, K, j, ue;
       return i(), a("div", {
-        class: r(L.question.cssClasses.selectWrapper),
+        class: r(b.question.cssClasses.selectWrapper),
         onClick: o
       }, [
-        L.question.isReadOnly ? p("", !0) : (i(), a("div", {
+        b.question.isReadOnly ? p("", !0) : (i(), a("div", {
           key: 0,
-          id: L.question.inputId,
-          disabled: L.question.isDisabledAttr ? !0 : null,
+          id: b.question.inputId,
+          disabled: b.question.isDisabledAttr ? !0 : null,
           tabindex: s.value.noTabIndex ? void 0 : 0,
           onKeydown: t,
           onBlur: d,
-          class: r(L.question.getControlClass()),
+          class: r(b.question.getControlClass()),
           role: s.value.ariaQuestionRole,
           "aria-required": s.value.ariaQuestionRequired,
           "aria-invalid": s.value.ariaQuestionInvalid,
@@ -1711,16 +1711,16 @@ const y1 = /* @__PURE__ */ y({
           "aria-describedby": s.value.ariaQuestionDescribedby,
           "aria-controls": s.value.ariaQuestionControls,
           "aria-activedescendant": s.value.ariaQuestionActivedescendant,
-          required: L.question.isRequired ? !0 : null
+          required: b.question.isRequired ? !0 : null
         }, [
           s.value.showHintPrefix ? (i(), a("div", {
             key: 0,
-            class: r(L.question.cssClasses.hintPrefix)
+            class: r(b.question.cssClasses.hintPrefix)
           }, [
             v("span", null, I(s.value.hintStringPrefix), 1)
           ], 2)) : p("", !0),
           v("div", {
-            class: r(L.question.cssClasses.controlValue)
+            class: r(b.question.cssClasses.controlValue)
           }, [
             h.value ? (i(), g(m, {
               key: 0,
@@ -1729,26 +1729,27 @@ const y1 = /* @__PURE__ */ y({
             }, null, 8, ["locString"])) : p("", !0),
             s.value.showHintString ? (i(), a("div", {
               key: 1,
-              class: r(L.question.cssClasses.hintSuffix)
+              class: r(b.question.cssClasses.hintSuffix)
             }, [
               v("span", b1, I(s.value.inputStringRendered), 1),
               v("span", null, I(s.value.hintStringSuffix), 1)
             ], 2)) : p("", !0),
-            L.question.showInputFieldComponent ? (i(), g(m, {
+            b.question.showInputFieldComponent ? (i(), g(m, {
               key: 2,
-              is: L.question.inputFieldComponentName,
+              is: b.question.inputFieldComponentName,
               item: s.value.getSelectedAction(),
-              question: L.question
+              question: b.question
             }, null, 8, ["is", "item", "question"])) : p("", !0),
-            v("input", {
+            s.value.needRenderInput ? (i(), a("input", {
+              key: 3,
               type: "text",
               ref_key: "inputElement",
               ref: n,
-              class: r(L.question.cssClasses.filterStringInput),
-              disabled: L.question.isDisabledAttr,
+              class: r(b.question.cssClasses.filterStringInput),
+              disabled: b.question.isDisabledAttr,
               autocomplete: "off",
               inputmode: s.value.inputMode,
-              id: L.question.getInputId(),
+              id: b.question.getInputId(),
               tabindex: s.value.noTabIndex ? void 0 : -1,
               readonly: s.value.filterReadOnly ? !0 : void 0,
               role: s.value.ariaInputRole,
@@ -1762,47 +1763,48 @@ const y1 = /* @__PURE__ */ y({
               "aria-describedby": s.value.ariaInputDescribedby,
               "aria-activedescendant": s.value.ariaInputActivedescendant,
               placeholder: s.value.placeholderRendered,
-              onInput: b,
+              onInput: L,
               onBlur: d,
               onFocus: C
-            }, null, 42, L1)
+            }, null, 42, L1)) : p("", !0)
           ], 2),
           c(m, {
             is: "sv-action-bar",
             model: s.value.editorButtons
           }, null, 8, ["model"])
         ], 42, w1)),
-        L.question.isReadOnly ? (i(), a("div", {
+        b.question.isInputReadOnly ? p("", !0) : (i(), g(m, {
+          key: 1,
+          is: "sv-popup",
+          model: s.value.popupModel
+        }, null, 8, ["model"])),
+        b.question.isReadOnly ? (i(), a("div", {
           key: 2,
-          id: L.question.inputId,
+          id: b.question.inputId,
           role: (N = s.value) == null ? void 0 : N.ariaQuestionRole,
-          "aria-label": (Q = s.value) == null ? void 0 : Q.ariaQuestionLabel,
-          "aria-labelledby": (K = s.value) == null ? void 0 : K.ariaQuestionLabelledby,
+          "aria-label": (K = s.value) == null ? void 0 : K.ariaQuestionLabel,
+          "aria-labelledby": (j = s.value) == null ? void 0 : j.ariaQuestionLabelledby,
           "aria-describedby": (ue = s.value) == null ? void 0 : ue.ariaQuestionDescribedby,
           "aria-expanded": !1,
           "aria-readonly": !0,
           "aria-disabled": !0,
-          tabindex: L.question.isDisabledAttr ? void 0 : 0,
-          class: r(L.question.getControlClass())
+          tabindex: b.question.isDisabledAttr ? void 0 : 0,
+          class: r(b.question.getControlClass())
         }, [
           v("div", {
-            class: r(L.question.cssClasses.controlValue)
+            class: r(b.question.cssClasses.controlValue)
           }, [
-            L.question.locReadOnlyText ? (i(), g(m, {
+            b.question.locReadOnlyText ? (i(), g(m, {
               key: 0,
               is: "survey-string",
-              locString: L.question.locReadOnlyText
+              locString: b.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2),
           c(m, {
             is: "sv-action-bar",
             model: s.value.editorButtons
           }, null, 8, ["model"])
-        ], 10, k1)) : (i(), g(m, {
-          key: 1,
-          is: "sv-popup",
-          model: s.value.popupModel
-        }, null, 8, ["model"]))
+        ], 10, k1)) : p("", !0)
       ], 2);
     };
   }
@@ -1813,7 +1815,7 @@ const y1 = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.renderCssRoot),
       ref_key: "root",
@@ -1850,7 +1852,7 @@ const y1 = /* @__PURE__ */ y({
       (C = n.value) == null || C.onBlur(d);
     }, l = ne(() => e.question.selectedChoices);
     return S(() => n.value), (d, C) => {
-      var b, h, q, L;
+      var L, h, q, b;
       return i(), a("div", {
         class: r(d.question.cssClasses.selectWrapper),
         onClick: s
@@ -1884,24 +1886,30 @@ const y1 = /* @__PURE__ */ y({
               question: d.question,
               key: "item" + N
             }, null, 8, ["item", "question"]))), 128)),
-            c(m, {
+            n.value.needRenderInput ? (i(), g(m, {
+              key: 0,
               is: "sv-tagbox-filter",
               model: n.value,
               question: d.question
-            }, null, 8, ["model", "question"])
+            }, null, 8, ["model", "question"])) : p("", !0)
           ], 2),
           c(m, {
             is: "sv-action-bar",
             model: n.value.editorButtons
           }, null, 8, ["model"])
         ], 42, M1)),
+        d.question.isInputReadOnly ? p("", !0) : (i(), g(m, {
+          key: 1,
+          is: "sv-popup",
+          model: n.value.popupModel
+        }, null, 8, ["model"])),
         d.question.isReadOnly ? (i(), a("div", {
           key: 2,
           id: d.question.inputId,
-          role: (b = n.value) == null ? void 0 : b.ariaQuestionRole,
+          role: (L = n.value) == null ? void 0 : L.ariaQuestionRole,
           "aria-label": (h = n.value) == null ? void 0 : h.ariaQuestionLabel,
           "aria-labelledby": (q = n.value) == null ? void 0 : q.ariaQuestionLabelledby,
-          "aria-describedby": (L = n.value) == null ? void 0 : L.ariaQuestionDescribedby,
+          "aria-describedby": (b = n.value) == null ? void 0 : b.ariaQuestionDescribedby,
           "aria-expanded": !1,
           "aria-readonly": !0,
           "aria-disabled": !0,
@@ -1921,11 +1929,7 @@ const y1 = /* @__PURE__ */ y({
             is: "sv-action-bar",
             model: n.value.editorButtons
           }, null, 8, ["model"])
-        ], 10, I1)) : (i(), g(m, {
-          key: 1,
-          is: "sv-popup",
-          model: n.value.popupModel
-        }, null, 8, ["model"]))
+        ], 10, I1)) : p("", !0)
       ], 2);
     };
   }
@@ -1981,7 +1985,7 @@ const y1 = /* @__PURE__ */ y({
         B(v("input", {
           type: "text",
           autocomplete: "off",
-          "onUpdate:modelValue": C[0] || (C[0] = (b) => l.value = b),
+          "onUpdate:modelValue": C[0] || (C[0] = (L) => l.value = L),
           class: r(d.question.cssClasses.filterStringInput),
           placeholder: d.model.filterStringPlaceholder,
           disabled: d.question.isDisabledAttr,
@@ -2049,7 +2053,7 @@ const y1 = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (t) => e.question.getItemValueWrapperComponentName(t) || "survey-ranking-item", o = (t, l, d) => ({
       componentName: "survey-ranking-item",
@@ -2227,7 +2231,7 @@ const y1 = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (o) => e.question.getInputId(o);
     return (o, t) => (i(), a("div", {
@@ -2316,7 +2320,7 @@ const y1 = /* @__PURE__ */ y({
     return S(() => e.item), (n, s) => (i(), a("label", {
       key: n.item.value,
       onMousedown: s[1] || (s[1] = (o) => n.question.onMouseDown()),
-      style: f(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
+      style: k(n.question.getItemStyle(n.item.itemValue, n.item.highlight)),
       class: r(n.question.getItemClass(n.item.itemValue, n.item.highlight)),
       onMouseover: s[2] || (s[2] = (o) => n.question.onItemMouseIn(n.item)),
       onMouseleave: s[3] || (s[3] = (o) => n.question.onItemMouseOut(n.item)),
@@ -2422,7 +2426,7 @@ const on = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.rootDropdown),
       ref_key: "root",
@@ -2441,7 +2445,7 @@ const on = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = (t, l) => {
       e.question.onLabelClick(t, l);
@@ -2537,7 +2541,7 @@ const an = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = k(null);
+    const e = f(null);
     return T(u, e), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.rootRadio),
       ref_key: "root",
@@ -2639,7 +2643,7 @@ const yn = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.rootCheckbox),
       ref_key: "root",
@@ -2722,7 +2726,7 @@ const yn = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = ne(() => e.question.getRows());
+    const e = u, n = f(null), s = ne(() => e.question.getRows());
     return T(e, n), (o, t) => (i(), a("table", {
       class: r(o.question.getQuestionRootCss()),
       ref_key: "root",
@@ -2771,7 +2775,7 @@ const yn = /* @__PURE__ */ y({
     }, [
       v("span", {
         class: r(o.question.getItemTitleCss()),
-        style: f({
+        style: k({
           minWidth: o.question.itemTitleWidth,
           width: o.question.itemTitleWidth
         })
@@ -2908,7 +2912,7 @@ const yn = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = k(null);
+    const e = u, n = f(null), s = f(null);
     return T(e, n), Z(() => {
       e.question.refreshInputRange(s.value);
     }), (o, t) => (i(), a("div", {
@@ -2950,15 +2954,15 @@ const yn = /* @__PURE__ */ y({
         }, [
           v("div", {
             class: r(o.question.cssClasses.inverseTrackLeft),
-            style: f({ width: o.question.getTrackPercentLeft() + "%" })
+            style: k({ width: o.question.getTrackPercentLeft() + "%" })
           }, null, 6),
           v("div", {
             class: r(o.question.cssClasses.inverseTrackRight),
-            style: f({ width: o.question.getTrackPercentRight() + "%" })
+            style: k({ width: o.question.getTrackPercentRight() + "%" })
           }, null, 6),
           v("div", {
             class: r(o.question.cssClasses.rangeTrack),
-            style: f({ left: o.question.getTrackPercentLeft() + "%", right: o.question.getTrackPercentRight() + "%" })
+            style: k({ left: o.question.getTrackPercentLeft() + "%", right: o.question.getTrackPercentRight() + "%" })
           }, null, 6),
           (i(!0), a(M, null, V(o.question.renderedValue, (l, d) => (i(), a(M, { key: d }, [
             v("input", {
@@ -3000,7 +3004,7 @@ const yn = /* @__PURE__ */ y({
             }, null, 42, Sn),
             v("div", {
               class: r(o.question.getThumbContainerCss(d)),
-              style: f({ left: o.question.getPercent(l) + "%" })
+              style: k({ left: o.question.getPercent(l) + "%" })
             }, [
               o.question.tooltipVisibility !== "never" ? (i(), a("div", {
                 key: 0,
@@ -3050,7 +3054,7 @@ const yn = /* @__PURE__ */ y({
     const e = u;
     return S(() => e.item), (n, s) => (i(), a("div", {
       class: r(n.question.getLabelCss(n.item.locText)),
-      style: f({ left: n.question.getPercent(n.item.value) + "%" }),
+      style: k({ left: n.question.getPercent(n.item.value) + "%" }),
       onPointerup: s[0] || (s[0] = (o) => {
         n.question.handleLabelPointerUp(o, n.item.value);
       })
@@ -3078,7 +3082,7 @@ const yn = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = E();
+    const e = u, n = f(null), s = E();
     T(
       e,
       n,
@@ -3112,7 +3116,7 @@ const yn = /* @__PURE__ */ y({
               (i(!0), a(M, null, V(t.question.visibleColumns, (d, C) => (i(), a("th", {
                 key: C,
                 class: r(t.question.cssClasses.headerCell),
-                style: f({
+                style: k({
                   minWidth: t.question.columnMinWidth,
                   width: t.question.columnMinWidth
                 })
@@ -3121,7 +3125,7 @@ const yn = /* @__PURE__ */ y({
                   is: t.question.getColumnHeaderWrapperComponentName(d),
                   componentData: t.question.getColumnHeaderWrapperComponentData(d)
                 }, {
-                  default: A(() => [
+                  default: D(() => [
                     c(m, {
                       is: "survey-string",
                       locString: d.locText
@@ -3139,7 +3143,7 @@ const yn = /* @__PURE__ */ y({
             }, [
               B(v("td", {
                 class: r(d.rowTextClasses),
-                style: f({
+                style: k({
                   minWidth: t.question.rowTitleWidth,
                   width: t.question.rowTitleWidth
                 })
@@ -3148,7 +3152,7 @@ const yn = /* @__PURE__ */ y({
                   is: t.question.getRowHeaderWrapperComponentName(d),
                   componentData: t.question.getRowHeaderWrapperComponentData(d)
                 }, {
-                  default: A(() => [
+                  default: D(() => [
                     c(m, {
                       is: "survey-string",
                       locString: d.locText
@@ -3157,29 +3161,29 @@ const yn = /* @__PURE__ */ y({
                   _: 2
                 }, 1032, ["is", "componentData"])
               ], 6), [
-                [P, t.question.hasRows]
+                [A, t.question.hasRows]
               ]),
-              t.question.hasCellText ? (i(!0), a(M, { key: 0 }, V(t.question.visibleColumns, (b, h) => (i(), a("td", {
+              t.question.hasCellText ? (i(!0), a(M, { key: 0 }, V(t.question.visibleColumns, (L, h) => (i(), a("td", {
                 key: h,
-                class: r(t.question.getItemClass(d, b)),
-                onClick: (q) => o(d, b)
+                class: r(t.question.getItemClass(d, L)),
+                onClick: (q) => o(d, L)
               }, [
                 c(m, {
                   is: "survey-string",
-                  locString: t.question.getCellDisplayLocText(d.name, b)
+                  locString: t.question.getCellDisplayLocText(d.name, L)
                 }, null, 8, ["locString"])
               ], 10, An))), 128)) : p("", !0),
-              t.question.hasCellText ? p("", !0) : (i(!0), a(M, { key: 1 }, V(t.question.visibleColumns, (b, h) => (i(), a("td", {
+              t.question.hasCellText ? p("", !0) : (i(!0), a(M, { key: 1 }, V(t.question.visibleColumns, (L, h) => (i(), a("td", {
                 key: h,
-                "data-responsive-title": b.locText.renderedHtml,
+                "data-responsive-title": L.locText.renderedHtml,
                 class: r(t.question.cssClasses.cell),
-                onClick: (q) => o(d, b)
+                onClick: (q) => o(d, L)
               }, [
                 c(m, {
                   is: t.question.cellComponent,
                   question: t.question,
                   row: d,
-                  column: b,
+                  column: L,
                   columnIndex: h
                 }, null, 8, ["is", "question", "row", "column", "columnIndex"])
               ], 10, Pn))), 128))
@@ -3196,7 +3200,7 @@ const yn = /* @__PURE__ */ y({
     row: {}
   },
   setup(u) {
-    const e = u, n = k();
+    const e = u, n = f();
     S(() => e.row);
     const s = W(
       () => e.row,
@@ -3206,11 +3210,11 @@ const yn = /* @__PURE__ */ y({
     );
     return Z(() => {
       e.row.setRootElement(n.value);
-    }), D(() => {
+    }), P(() => {
       e.row.setRootElement(void 0), s();
     }), (o, t) => o.row.visible ? (i(), a("tr", {
       key: 0,
-      "data-sv-drop-target-matrix-row": o.row.row && o.row.row.id,
+      "data-sv-drop-target-matrix-row": o.row.dropTargetId,
       onPointerdown: t[0] || (t[0] = (l) => o.question.onPointerDown(l, o.row.row)),
       class: r(o.row.className),
       ref_key: "root",
@@ -3293,7 +3297,7 @@ const yn = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), g(m, {
       is: "survey-matrixtable",
       question: s.question,
@@ -3309,7 +3313,7 @@ const yn = /* @__PURE__ */ y({
   setup(u) {
     const e = u, n = H(() => e.question.renderedTable);
     return S(() => n.value), (s, o) => (i(), a("div", {
-      style: f({ overflowX: s.question.showHorizontalScroll ? "scroll" : "" }),
+      style: k({ overflowX: s.question.showHorizontalScroll ? "scroll" : "" }),
       class: r(s.question.cssClasses.tableWrapper)
     }, [
       v("table", {
@@ -3321,13 +3325,13 @@ const yn = /* @__PURE__ */ y({
               t.hasTitle ? (i(), a("th", {
                 key: "header_" + t.id,
                 class: r(t.className),
-                style: f({ minWidth: t.minWidth, width: t.width })
+                style: k({ minWidth: t.minWidth, width: t.width })
               }, [
                 c(m, {
                   is: s.question.getColumnHeaderWrapperComponentName(t),
                   componentData: s.question.getColumnHeaderWrapperComponentData(t)
                 }, {
-                  default: A(() => [
+                  default: D(() => [
                     c(m, {
                       is: "survey-string",
                       locString: t.locTitle
@@ -3345,7 +3349,7 @@ const yn = /* @__PURE__ */ y({
               t.hasTitle ? p("", !0) : (i(), a("td", {
                 class: r(t.className),
                 key: "header_" + t.id,
-                style: f({ minWidth: t.minWidth, width: t.width })
+                style: k({ minWidth: t.minWidth, width: t.width })
               }, null, 6))
             ], 64))), 256))
           ])
@@ -3394,7 +3398,7 @@ const yn = /* @__PURE__ */ y({
     cell: {}
   },
   setup(u) {
-    const e = u, n = k(!1), s = k(), o = () => e.cell.width || e.cell.minWidth ? { width: e.cell.width, minWidth: e.cell.minWidth } : null, t = () => e.cell.question.parentQuestion.getCellAriaLabel(e.cell.row, e.cell.column), l = () => {
+    const e = u, n = f(!1), s = f(), o = () => e.cell.width || e.cell.minWidth ? { width: e.cell.width, minWidth: e.cell.minWidth } : null, t = () => e.cell.question.parentQuestion.getCellAriaLabel(e.cell.row, e.cell.column), l = () => {
       !e.cell.hasQuestion || !e.question || !e.question.survey || (n.value = e.cell.question.isVisible);
     }, d = (h) => re(h);
     l(), Z(() => {
@@ -3403,31 +3407,31 @@ const yn = /* @__PURE__ */ y({
       e.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
         l();
       });
-      const h = s.value, q = e.cell.question, L = {
+      const h = s.value, q = e.cell.question, b = {
         cell: e.cell.cell,
         cellQuestion: q,
         htmlElement: h,
         row: e.cell.row,
         column: e.cell.cell.column
       };
-      e.question.survey.matrixAfterCellRender(L), q && q.afterRenderCore(h);
+      e.question.survey.matrixAfterCellRender(b), q && q.afterRenderCore(h);
     });
     const C = H(() => {
       const h = e.cell;
       if (h.hasPanel) {
-        const q = h.panel, L = q.survey;
-        if (L) {
-          const R = L.getElementWrapperComponentName(q);
+        const q = h.panel, b = q.survey;
+        if (b) {
+          const R = b.getElementWrapperComponentName(q);
           if (R)
             return R;
         }
         return "survey-panel";
       }
-    }), b = H(() => {
+    }), L = H(() => {
       if (e.cell.hasPanel) {
-        const q = e.cell.panel, L = q.survey;
+        const q = e.cell.panel, b = q.survey;
         let R;
-        return L && (R = L.getElementWrapperComponentData(q)), {
+        return b && (R = b.getElementWrapperComponentData(q)), {
           componentName: "survey-panel",
           componentData: {
             element: q,
@@ -3441,9 +3445,9 @@ const yn = /* @__PURE__ */ y({
       key: 0,
       class: r(h.cell.className),
       title: h.cell.getTitle(),
-      style: f(o()),
+      style: k(o()),
       colspan: h.cell.colSpans,
-      onFocusin: q[0] || (q[0] = (L) => h.cell.focusIn()),
+      onFocusin: q[0] || (q[0] = (b) => h.cell.focusIn()),
       ref_key: "root",
       ref: s
     }, [
@@ -3466,7 +3470,7 @@ const yn = /* @__PURE__ */ y({
       h.cell.hasPanel ? (i(), g(m, $({
         key: 3,
         is: C.value
-      }, b.value), null, 16, ["is"])) : p("", !0),
+      }, L.value), null, 16, ["is"])) : p("", !0),
       h.cell.showResponsiveTitle ? (i(), a("span", {
         key: 4,
         class: r(h.cell.responsiveTitleCss)
@@ -3490,7 +3494,7 @@ const yn = /* @__PURE__ */ y({
           is: h.question.getCellWrapperComponentName(h.cell.cell),
           componentData: h.question.getCellWrapperComponentData(h.cell.cell)
         }, {
-          default: A(() => [
+          default: D(() => [
             c(m, {
               is: d(h.cell.question),
               question: h.cell.question
@@ -3508,7 +3512,7 @@ const yn = /* @__PURE__ */ y({
           is: h.question.getCellWrapperComponentName(h.cell.cell),
           componentData: h.question.getCellWrapperComponentData(h.cell.cell)
         }, {
-          default: A(() => [
+          default: D(() => [
             h.cell.isRadio ? (i(), g(m, {
               is: "survey-radiogroup-item",
               key: h.cell.item.value,
@@ -3534,14 +3538,14 @@ const yn = /* @__PURE__ */ y({
           question: h.cell.question
         }, null, 8, ["question"])) : p("", !0)
       ], 2)), [
-        [P, n.value]
+        [A, n.value]
       ]) : p("", !0),
       h.cell.hasTitle ? (i(), g(m, {
         key: 6,
         is: h.question.getCellWrapperComponentName(h.cell),
         componentData: h.question.getCellWrapperComponentData(h.cell)
       }, {
-        default: A(() => [
+        default: D(() => [
           h.cell.hasTitle ? (i(), g(m, {
             key: 0,
             is: "survey-string",
@@ -3563,7 +3567,7 @@ const yn = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = () => {
       e.question.addRowUI();
@@ -3736,7 +3740,7 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = he();
+    const e = u, n = f(null), s = he();
     T(
       e,
       n,
@@ -3800,7 +3804,7 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
       }, [
         v("div", {
           class: r(l.question.cssClasses.progressBar),
-          style: f({ width: l.question.progress }),
+          style: k({ width: l.question.progress }),
           role: "progressbar",
           "aria-label": l.question.progressBarAriaLabel
         }, null, 14, rt)
@@ -3808,7 +3812,7 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
       v("div", {
         class: r(l.question.cssClasses.panelsContainer)
       }, [
-        (i(!0), a(M, null, V(l.question.renderedPanels, (C, b) => (i(), a(M, {
+        (i(!0), a(M, null, V(l.question.renderedPanels, (C, L) => (i(), a(M, {
           key: C.id
         }, [
           v("div", {
@@ -3823,7 +3827,7 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
               data: { question: l.question, panel: C }
             }, null, 8, ["data"])) : p("", !0)
           ], 2),
-          l.question.isRenderModeList && b < l.question.visiblePanelCount - 1 ? (i(), a("hr", {
+          l.question.isRenderModeList && L < l.question.visiblePanelCount - 1 ? (i(), a("hr", {
             class: r(l.question.cssClasses.separator),
             key: "separator" + C.id
           }, null, 2)) : p("", !0)
@@ -3863,7 +3867,7 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
           }, [
             v("div", {
               class: r(s.question.cssClasses.progressBar),
-              style: f({ width: s.question.progress }),
+              style: k({ width: s.question.progress }),
               role: "progressbar",
               "aria-label": s.question.progressBarAriaLabel
             }, null, 14, at)
@@ -3903,12 +3907,12 @@ const et = ["disabled"], st = /* @__PURE__ */ y({
       }, [
         v("div", {
           class: r(e.question.cssClasses.progressBar),
-          style: f({ width: e.question.progress }),
+          style: k({ width: e.question.progress }),
           role: "progressbar",
           "aria-label": e.question.progressBarAriaLabel
         }, null, 14, dt)
       ], 2)) : p("", !0),
-      e.question.footerToolbar.visibleActions.length ? (i(), a("div", {
+      e.question.showFooterToolbar ? (i(), a("div", {
         key: 1,
         class: r(e.question.cssClasses.footerButtonsContainer)
       }, [
@@ -4067,7 +4071,7 @@ const vt = ["id"], Ct = /* @__PURE__ */ y({
     location: {}
   },
   setup(u) {
-    const e = k();
+    const e = f();
     return (n, s) => n.element.hasVisibleErrors ? (i(), a("div", {
       key: 0,
       role: "alert",
@@ -4121,7 +4125,7 @@ const vt = ["id"], Ct = /* @__PURE__ */ y({
         e(o);
       })
     }, {
-      default: A(() => [
+      default: D(() => [
         !n.element.isExpanded && n.element.getCssTitleExpandableSvg() ? (i(), g(m, {
           key: 0,
           is: "sv-svg-icon",
@@ -4249,7 +4253,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     title: {}
   },
   setup(u) {
-    const e = u, n = k(), s = () => {
+    const e = u, n = f(), s = () => {
       Oe(
         e.size,
         e.width,
@@ -4259,7 +4263,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         e.title
       );
     };
-    return j(() => {
+    return z(() => {
       s();
     }), Z(() => {
       s();
@@ -4306,28 +4310,34 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     handleClick: { type: Boolean, default: !0 }
   },
   setup(u) {
-    const e = u, n = k(null), s = (t) => {
-      e.handleClick && t.stopPropagation();
+    const e = u, n = f(null), s = (l) => {
+      e.handleClick && l.stopPropagation();
     };
-    S(() => e.model);
+    S(() => e.model, void 0, (l) => {
+      l.resetResponsivityManager();
+    });
     const o = ne(() => e.model.renderedActions);
-    return Z(() => {
-      e.model.hasActions && e.model.initResponsivityManager(n.value);
-    }), D(() => {
-      e.model.resetResponsivityManager();
-    }), (t, l) => t.model.hasActions ? (i(), a("div", {
+    function t() {
+      e.model.hasVisibleActions && e.model.initResponsivityManager(n.value);
+    }
+    return z(() => {
+      t();
+    }), Z(() => {
+      t();
+    }), (l, d) => l.model.hasActions ? (i(), a("div", {
       key: 0,
       ref_key: "root",
       ref: n,
-      class: r(t.model.getRootCss()),
+      style: k(l.model.getRootStyle()),
+      class: r(l.model.getRootCss()),
       onClick: s
     }, [
-      (i(!0), a(M, null, V(w(o), (d) => (i(), g(m, {
+      (i(!0), a(M, null, V(w(o), (C) => (i(), g(m, {
         is: "sv-action",
-        key: d.renderedId,
-        item: d
+        key: C.renderedId,
+        item: C
       }, null, 8, ["item"]))), 128))
-    ], 2)) : p("", !0);
+    ], 6)) : p("", !0);
   }
 }), jt = ["id"], Gt = { class: "sv-action__content" }, Xt = /* @__PURE__ */ y({
   __name: "Action",
@@ -4335,7 +4345,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     item: {}
   },
   setup(u) {
-    const e = k(), n = u, s = H(
+    const e = f(), n = u, s = H(
       () => n.item.component || "sv-action-bar-item"
     );
     return S(() => n.item), Z(() => {
@@ -4344,8 +4354,8 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         o.mode = t, ye(() => {
           l(t, e.value);
         });
-      };
-    }), D(() => {
+      }, o.afterRender();
+    }), P(() => {
       const o = n.item;
       o.updateModeCallback = void 0;
     }), (o, t) => (i(), a("div", {
@@ -4366,7 +4376,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
       ])
     ], 10, jt));
   }
-}), U = {
+}), Q = {
   mounted: function(u, e) {
     const n = Object.assign(
       {
@@ -4428,7 +4438,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         class: r(n.item.getActionBarItemTitleCss())
       }, I(n.item.title), 3)) : p("", !0)
     ], 42, Jt)), [
-      [w(U), { processEsc: !1, disableTabStop: n.item.disableTabStop }]
+      [w(Q), { processEsc: !1, disableTabStop: n.item.disableTabStop }]
     ]);
   }
 }), xt = ["disabled", "title", "role"], eo = {
@@ -4477,7 +4487,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
           class: r(s.item.getActionBarItemTitleCss())
         }, I(s.item.title), 3)) : p("", !0)
       ], 42, xt)), [
-        [w(U), { processEsc: !1, disableTabStop: s.item.disableTabStop }]
+        [w(Q), { processEsc: !1, disableTabStop: s.item.disableTabStop }]
       ]),
       c(m, {
         is: "sv-popup",
@@ -4502,7 +4512,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     model: {}
   },
   setup(u) {
-    const e = u, n = k(null), s = (d) => {
+    const e = u, n = f(null), s = (d) => {
       const C = e.model;
       C.filterString = d.target.value;
     }, o = (d) => {
@@ -4513,7 +4523,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     }, l = ne(() => e.model.renderedActions);
     return S(() => e.model), Z(() => {
       e.model.initListContainerHtmlElement(n.value);
-    }), D(() => {
+    }), P(() => {
       e.model && (e.model.removeScrollEventListener(), e.model.initListContainerHtmlElement(void 0));
     }), (d, C) => (i(), a("div", {
       class: r(d.model.cssClasses.root),
@@ -4544,8 +4554,8 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         }, null, 42, to),
         d.model.showSearchClearButton && d.model.filterString ? (i(), a("button", {
           key: 0,
-          onClick: C[0] || (C[0] = (b) => {
-            d.model.onClickSearchClearButton(b);
+          onClick: C[0] || (C[0] = (L) => {
+            d.model.onClickSearchClearButton(L);
           }),
           class: r(d.model.cssClasses.searchClearButtonIcon)
         }, [
@@ -4564,7 +4574,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
           "aria-label": d.model.emptyMessage
         }, I(d.model.emptyMessage), 11, oo)
       ], 2), [
-        [P, d.model.isEmpty]
+        [A, d.model.isEmpty]
       ]),
       d.model.renderElements ? B((i(), a("ul", {
         key: 1,
@@ -4572,22 +4582,22 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         role: d.model.listRole,
         "aria-label": d.model.a11ya11y_input_ariaLabel,
         id: d.model.elementId,
-        onMousedown: C[1] || (C[1] = (b) => {
-          b.preventDefault();
+        onMousedown: C[1] || (C[1] = (L) => {
+          L.preventDefault();
         }),
         onMousemove: t,
-        onKeydown: C[2] || (C[2] = (b) => {
-          d.model.onKeyDown(b);
+        onKeydown: C[2] || (C[2] = (L) => {
+          d.model.onKeyDown(L);
         })
       }, [
-        (i(!0), a(M, null, V(w(l), (b) => (i(), g(m, {
+        (i(!0), a(M, null, V(w(l), (L) => (i(), g(m, {
           is: "sv-list-item",
-          item: b,
+          item: L,
           model: d.model,
-          key: b.id
+          key: L.id
         }, null, 8, ["item", "model"]))), 128))
       ], 42, io)), [
-        [P, !d.model.isEmpty]
+        [A, !d.model.isEmpty]
       ]) : p("", !0)
     ], 2));
   }
@@ -4625,7 +4635,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         class: r(t.model.cssClasses.itemSeparator)
       }, null, 2)) : p("", !0),
       v("div", {
-        style: f(t.model.getItemStyle(t.item)),
+        style: k(t.model.getItemStyle(t.item)),
         class: r(t.model.cssClasses.itemBody),
         title: t.item.getTooltip(),
         onMouseover: l[0] || (l[0] = (d) => t.model.onItemHover(t.item)),
@@ -4638,8 +4648,8 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         }, null, 8, ["is", "item", "model"])
       ], 46, ao)
     ], 42, lo)), [
-      [P, t.model.isItemVisible(t.item)],
-      [w(U), { processEsc: !1, disableTabStop: t.item.disableTabStop }]
+      [A, t.model.isItemVisible(t.item)],
+      [w(Q), { processEsc: !1, disableTabStop: t.item.disableTabStop }]
     ]);
   }
 }), mo = /* @__PURE__ */ y({
@@ -4697,7 +4707,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     model: {}
   },
   setup(u) {
-    const e = u, n = E(), s = k(null), o = () => {
+    const e = u, n = E(), s = f(null), o = () => {
       const t = s.value;
       t && n.value.setComponentElement(t);
     };
@@ -4709,7 +4719,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
       { immediate: !0 }
     ), S(() => n.value), Z(() => {
       o();
-    }), D(() => {
+    }), P(() => {
       n.value.dispose();
     }), (t, l) => (i(), a("div", {
       ref_key: "root",
@@ -4736,7 +4746,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     const e = u, n = (s) => {
       s.stopPropagation();
     };
-    return S(() => e.model), j(() => {
+    return S(() => e.model), z(() => {
       const s = e.model;
       s.isVisible && !s.isPositionSet && e.model.updateOnShowing();
     }), Z(() => {
@@ -4753,7 +4763,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     }, [
       v("div", {
         class: "sv-popup__container",
-        style: f({
+        style: k({
           left: s.model.left,
           top: s.model.top,
           height: s.model.height,
@@ -4785,7 +4795,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
         ])
       ], 4)
     ], 34)), [
-      [P, s.model.isVisible]
+      [A, s.model.isVisible]
     ]);
   }
 }), wo = /* @__PURE__ */ y({
@@ -4796,7 +4806,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
   setup(u) {
     return (e, n) => (i(), a("span", {
       class: "sv-popup__pointer",
-      style: f({
+      style: k({
         left: e.model.pointerTarget.left,
         top: e.model.pointerTarget.top
       })
@@ -4848,7 +4858,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     }, [
       v("div", {
         class: r(t.survey.css.progressBar),
-        style: f({ width: n.value }),
+        style: k({ width: n.value }),
         role: "progressbar",
         "aria-valuemin": "0",
         "aria-valuemax": "100",
@@ -4871,9 +4881,9 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
     container: {}
   },
   setup(u) {
-    const e = u, n = k(!1), s = k(!1), o = k(!1), t = k(!0), l = k(), d = H(() => e.survey.css);
+    const e = u, n = f(!1), s = f(!1), o = f(!1), t = f(!0), l = f(), d = H(() => e.survey.css);
     let C = null;
-    const b = (h) => {
+    const L = (h) => {
       let q = l.value;
       q.scrollLeft += (h ? -1 : 1) * 70;
     };
@@ -4895,7 +4905,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
       C.dispose();
     }), (h, q) => (i(), a("div", {
       class: r(h.model.getRootCss(h.container)),
-      style: f({ maxWidth: h.model.progressWidth }),
+      style: k({ maxWidth: h.model.progressWidth }),
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -4915,7 +4925,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
       }, [
         v("div", {
           class: r(h.model.getScrollButtonCss(n.value, !0)),
-          onClick: q[0] || (q[0] = (L) => b(!0)),
+          onClick: q[0] || (q[0] = (b) => L(!0)),
           role: "button"
         }, null, 2),
         v("div", {
@@ -4926,11 +4936,11 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
           v("ul", {
             class: r(d.value.progressButtonsList)
           }, [
-            (i(!0), a(M, null, V(h.survey.visiblePages, (L, R) => (i(), a("li", {
+            (i(!0), a(M, null, V(h.survey.visiblePages, (b, R) => (i(), a("li", {
               key: "listelement" + R,
               class: r(h.model.getListElementCss(R)),
-              onClick: (N) => h.model.isListElementClickable(R) ? h.model.clickListElement(L) : null,
-              "data-page-number": h.model.getItemNumber(L)
+              onClick: (N) => h.model.isListElementClickable(R) ? h.model.clickListElement(b) : null,
+              "data-page-number": h.model.getItemNumber(b)
             }, [
               v("div", {
                 class: r(d.value.progressButtonsConnector)
@@ -4938,18 +4948,18 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
               t.value ? (i(), a("div", {
                 key: 0,
                 class: r(d.value.progressButtonsPageTitle),
-                title: L.renderedNavigationTitle
+                title: b.renderedNavigationTitle
               }, [
                 c(m, {
                   is: "survey-string",
-                  locString: L.locNavigationTitle
+                  locString: b.locNavigationTitle
                 }, null, 8, ["locString"])
               ], 10, Mo)) : p("", !0),
               t.value ? (i(), a("div", {
                 key: 1,
                 class: r(d.value.progressButtonsPageDescription),
-                title: L.locNavigationDescription.renderedHtml
-              }, I(L.locNavigationDescription.renderedHtml), 11, Io)) : p("", !0),
+                title: b.locNavigationDescription.renderedHtml
+              }, I(b.locNavigationDescription.renderedHtml), 11, Io)) : p("", !0),
               v("div", {
                 class: r(d.value.progressButtonsButton)
               }, [
@@ -4959,14 +4969,14 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
                 v("div", {
                   class: r(d.value.progressButtonsButtonContent)
                 }, null, 2),
-                v("span", null, I(h.model.getItemNumber(L)), 1)
+                v("span", null, I(h.model.getItemNumber(b)), 1)
               ], 2)
             ], 10, Ho))), 128))
           ], 2)
         ], 2),
         v("div", {
           class: r(h.model.getScrollButtonCss(n.value, !1)),
-          onClick: q[1] || (q[1] = (L) => b(!1)),
+          onClick: q[1] || (q[1] = (b) => L(!1)),
           role: "button"
         }, null, 2)
       ], 2),
@@ -5009,7 +5019,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
           model: n.model.popupModel
         }, null, 8, ["model"])
       ])), [
-        [w(U)]
+        [w(Q)]
       ]) : (i(), g(m, {
         key: 1,
         is: "sv-list",
@@ -5019,7 +5029,7 @@ const Ft = /* @__PURE__ */ Dt(At, [["render", Wt]]), Ot = /* @__PURE__ */ v("use
   }
 });
 /*!
- * surveyjs - Survey JavaScript library v2.2.1
+ * surveyjs - Survey JavaScript library v2.2.3
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5087,7 +5097,7 @@ var To = {
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
 /*!
- * surveyjs - Survey JavaScript library v2.2.1
+ * surveyjs - Survey JavaScript library v2.2.3
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5168,7 +5178,7 @@ const ae = /* @__PURE__ */ y({
     survey: {}
   },
   setup(u) {
-    const e = u, n = k(), s = k(""), o = k(1), t = H(() => {
+    const e = u, n = f(), s = f(""), o = f(1), t = H(() => {
       const R = e.survey ? e.survey : e.model;
       return De(R);
     }), l = H(() => t.value.activePage ? t.value.activePage.id : ""), d = () => {
@@ -5176,30 +5186,30 @@ const ae = /* @__PURE__ */ y({
       return !!t.value && R + o.value.toString();
     }, C = H(
       () => t.value.showCompletedPage && t.value.state === "completed"
-    ), b = H(() => t.value.css), h = H(() => "page" + d()), q = () => C.value ? (s.value || (s.value = t.value.processedCompletedHtml), s.value) : "", L = (R) => {
+    ), L = H(() => t.value.css), h = H(() => "page" + d()), q = () => C.value ? (s.value || (s.value = t.value.processedCompletedHtml), s.value) : "", b = (R) => {
       if (R) {
         var N = n.value;
         N && R.afterRenderSurvey(N), R.renderCallback = () => {
-          var Q, K;
-          o.value++, (K = (Q = he()) == null ? void 0 : Q.proxy) == null || K.$forceUpdate();
+          var K, j;
+          o.value++, (j = (K = he()) == null ? void 0 : K.proxy) == null || j.$forceUpdate();
         }, R.startTimerFromUI();
       }
     };
     return S(
       () => t.value,
       (R, N) => {
-        R && N && L(R);
+        R && N && b(R);
       },
       (R) => {
         R.stopTimer(), R.renderCallback = void 0;
       }
     ), Z(() => {
-      L(t.value);
-    }), D(() => {
+      b(t.value);
+    }), P(() => {
       t.value.stopTimer(), t.value.beforeDestroySurveyElement(), t.value.renderCallback = void 0;
     }), (R, N) => (i(), a("div", {
       class: r(t.value.getRootCss()),
-      style: f(t.value.themeVariables),
+      style: k(t.value.themeVariables),
       lang: t.value.locale || "en",
       dir: t.value.localeDir,
       ref_key: "root",
@@ -5209,7 +5219,7 @@ const ae = /* @__PURE__ */ y({
         is: "sv-scroll",
         disabled: t.value.rootScrollDisabled
       }, {
-        default: A(() => [
+        default: D(() => [
           t.value.needRenderIcons ? (i(), g(m, {
             key: 0,
             is: "sv-svg-bundle"
@@ -5220,18 +5230,18 @@ const ae = /* @__PURE__ */ y({
             c(m, { is: "survey-popup-modal" }),
             t.value.renderBackgroundImage ? (i(), a("div", {
               key: 0,
-              class: r(b.value.rootBackgroundImage),
-              style: f(t.value.backgroundImageStyle)
+              class: r(L.value.rootBackgroundImage),
+              style: k(t.value.backgroundImageStyle)
             }, null, 6)) : p("", !0),
             v("form", Zo, [
               c(m, {
                 is: "sv-scroll",
                 disabled: t.value.formScrollDisabled
               }, {
-                default: A(() => [
+                default: D(() => [
                   t.value.hasLogo ? p("", !0) : (i(), a("div", $o)),
                   v("div", {
-                    class: r(b.value.container)
+                    class: r(L.value.container)
                   }, [
                     t.value.headerView === "basic" ? (i(), g(m, {
                       key: 0,
@@ -5263,7 +5273,7 @@ const ae = /* @__PURE__ */ y({
                         }, null, 8, ["survey"]),
                         v("div", {
                           class: r(t.value.bodyCss),
-                          style: f({ maxWidth: t.value.renderedWidth }),
+                          style: k({ maxWidth: t.value.renderedWidth }),
                           id: l.value
                         }, [
                           c(m, {
@@ -5277,7 +5287,7 @@ const ae = /* @__PURE__ */ y({
                             key: h.value,
                             survey: t.value,
                             page: t.value.activePage,
-                            css: b.value
+                            css: L.value
                           }, null, 8, ["survey", "page", "css"])),
                           c(m, {
                             is: "sv-components-container",
@@ -5328,7 +5338,7 @@ const ae = /* @__PURE__ */ y({
                     }, null, 10, Wo)) : p("", !0),
                     t.value.state === "empty" ? (i(), a("div", {
                       key: 5,
-                      class: r(b.value.bodyEmpty)
+                      class: r(L.value.bodyEmpty)
                     }, I(t.value.emptySurveyText), 3)) : p("", !0)
                   ], 2)
                 ]),
@@ -5355,7 +5365,7 @@ const ae = /* @__PURE__ */ y({
     return S(() => e.model), (n, s) => n.model.isDisplayed ? (i(), a("div", {
       key: 0,
       class: r(n.model.css),
-      style: f({ visibility: n.model.active ? "visible" : "hidden" }),
+      style: k({ visibility: n.model.active ? "visible" : "hidden" }),
       role: "alert",
       "aria-live": "polite"
     }, [
@@ -5421,25 +5431,25 @@ const ae = /* @__PURE__ */ y({
     }, l = () => {
       n.value.onScroll();
     }, d = () => {
-      let b = n.value.cssHeaderRoot;
-      return n.value.isCollapsed && (b += " " + n.value.cssRootCollapsedMod), b;
+      let L = n.value.cssHeaderRoot;
+      return n.value.isCollapsed && (L += " " + n.value.cssRootCollapsedMod), L;
     };
     S(() => n.value);
     const C = W(
       () => e.survey,
-      (b) => {
-        const h = new Ge(null, b);
+      (L) => {
+        const h = new Ge(null, L);
         e.isExpanded !== void 0 && (h.isExpanded = e.isExpanded), e.closeOnCompleteTimeout !== void 0 && (h.closeOnCompleteTimeout = e.closeOnCompleteTimeout), e.allowClose !== void 0 && (h.allowClose = e.allowClose), e.allowFullScreen !== void 0 && (h.allowFullScreen = e.allowFullScreen), h.isShowing = !0, n.value = h;
       },
       {
         immediate: !0
       }
     );
-    return D(() => {
+    return P(() => {
       C();
-    }), (b, h) => n.value.isShowing ? (i(), a("div", {
+    }), (L, h) => n.value.isShowing ? (i(), a("div", {
       key: 0,
-      style: f({
+      style: k({
         maxWidth: n.value.renderedWidth,
         width: n.value.renderedWidth
       }),
@@ -5510,7 +5520,7 @@ const ae = /* @__PURE__ */ y({
         v("div", {
           class: r(n.value.cssBody)
         }, [
-          c(ae, { survey: b.survey }, null, 8, ["survey"])
+          c(ae, { survey: L.survey }, null, 8, ["survey"])
         ], 2)
       ], 2)
     ], 38)) : p("", !0);
@@ -5522,7 +5532,7 @@ const ae = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(), s = H(
+    const e = u, n = f(), s = H(
       () => e.question.customWidget.isDefaultRender
     ), o = H(
       () => !!e.question.customWidget.htmlTemplate
@@ -5560,7 +5570,7 @@ const ae = /* @__PURE__ */ y({
       };
       return t.onVisibilityChanged.add(l), t.model.isVisible = !0, e.value = t, t;
     }
-    return te.showDialog || (te.showDialog = n, D(() => {
+    return te.showDialog || (te.showDialog = n, P(() => {
       te.showDialog = void 0;
     })), (s, o) => e.value ? (i(), g(Ae, {
       key: 0,
@@ -5579,16 +5589,16 @@ const ae = /* @__PURE__ */ y({
     getRef: { type: Function }
   },
   setup(u) {
-    const e = u, n = k(
+    const e = u, n = f(
       null
     ), s = function(t) {
       n.value = t, e.getRef && e.getRef(t);
     }, o = H(() => e.model.getTextValue() || "");
     return Z(() => {
       e.model.setElement(n.value);
-    }), j(() => {
+    }), z(() => {
       e.model.setElement(n.value);
-    }), D(() => {
+    }), P(() => {
       e.model.resetElement();
     }), (t, l) => (i(), a("textarea", {
       ref: (d) => s(d),
@@ -5622,7 +5632,7 @@ const ae = /* @__PURE__ */ y({
       "aria-describedby": t.model.ariaDescribedBy,
       "aria-invalid": t.model.ariaInvalid,
       "aria-errormessage": t.model.ariaErrormessage,
-      style: f({ resize: t.model.question.resizeStyle })
+      style: k({ resize: t.model.question.resizeStyle })
     }, null, 46, Xo));
   }
 }), Yo = /* @__PURE__ */ y({
@@ -5645,7 +5655,7 @@ const ae = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = H(() => e.question.contentPanel);
     return (o, t) => (i(), g(m, {
@@ -5664,7 +5674,7 @@ const ae = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     T(e, n);
     const s = H(() => e.question.contentQuestion), o = (t) => re(t);
     return (t, l) => (i(), g(m, {
@@ -5691,7 +5701,7 @@ const ae = /* @__PURE__ */ y({
       o.model.showProgress ? (i(), a("svg", {
         key: 0,
         class: r(o.model.getProgressCss()),
-        style: f({ strokeDasharray: ce, strokeDashoffset: n.value })
+        style: k({ strokeDasharray: ce, strokeDashoffset: n.value })
       }, si, 6)) : p("", !0),
       v("div", {
         class: r(o.model.textContainerCss)
@@ -5708,7 +5718,7 @@ const ae = /* @__PURE__ */ y({
       key: 1,
       class: r(o.model.survey.getCss().timerRoot)
     }, I(s.value), 3)), [
-      [P, o.model.isRunning && !o.model.showTimerAsClock]
+      [A, o.model.isRunning && !o.model.showTimerAsClock]
     ]);
   }
 }), ti = { class: "sd-loading-indicator" }, oi = /* @__PURE__ */ y({
@@ -5735,22 +5745,22 @@ const ae = /* @__PURE__ */ y({
       return n.survey = e.survey, e.model;
     }), Z(() => {
       e.model.processResponsiveness();
-    }), j(() => {
+    }), z(() => {
       e.model.processResponsiveness();
     }), (n, s) => n.survey.headerView === "advanced" && !n.model.isEmpty ? (i(), a("div", {
       key: 0,
       class: r(n.model.headerClasses),
-      style: f({ height: n.model.renderedHeight })
+      style: k({ height: n.model.renderedHeight })
     }, [
       n.model.backgroundImage ? (i(), a("div", {
         key: 0,
         class: r(n.model.backgroundImageClasses),
-        style: f(n.model.backgroundImageStyle)
+        style: k(n.model.backgroundImageStyle)
       }, null, 6)) : p("", !0),
       n.survey.isMobile ? p("", !0) : (i(), a("div", {
         key: 1,
         class: r(n.model.contentClasses),
-        style: f({ maxWidth: n.model.maxWidth })
+        style: k({ maxWidth: n.model.maxWidth })
       }, [
         (i(!0), a(M, null, V(n.model.cells, (o, t) => (i(), g(m, {
           is: "sv-header-cell",
@@ -5777,11 +5787,11 @@ const ae = /* @__PURE__ */ y({
   setup(u) {
     return (e, n) => (i(), a("div", {
       class: r(e.model.css),
-      style: f(e.model.style)
+      style: k(e.model.style)
     }, [
       v("div", {
         class: "sv-header__cell-content",
-        style: f(e.model.contentStyle)
+        style: k(e.model.contentStyle)
       }, [
         e.model.showLogo ? (i(), a("div", li, [
           v("div", {
@@ -5793,14 +5803,14 @@ const ae = /* @__PURE__ */ y({
               width: e.model.survey.renderedLogoWidth,
               height: e.model.survey.renderedLogoHeight,
               alt: e.model.survey.locTitle.renderedHtml,
-              style: f({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
+              style: k({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
             }, null, 14, ai)
           ], 2)
         ])) : p("", !0),
         e.model.showTitle ? (i(), a("div", {
           key: 1,
           class: "sv-header__title",
-          style: f({ maxWidth: e.model.textAreaWidth })
+          style: k({ maxWidth: e.model.textAreaWidth })
         }, [
           c(m, {
             is: "survey-element-title",
@@ -5811,7 +5821,7 @@ const ae = /* @__PURE__ */ y({
         e.model.showDescription ? (i(), a("div", {
           key: 2,
           class: "sv-header__description",
-          style: f({ maxWidth: e.model.textAreaWidth })
+          style: k({ maxWidth: e.model.textAreaWidth })
         }, [
           e.model.survey.renderedHasDescription ? (i(), a("div", {
             key: 0,
@@ -5846,14 +5856,14 @@ const ae = /* @__PURE__ */ y({
             width: e.model.survey.renderedLogoWidth,
             height: e.model.survey.renderedLogoHeight,
             alt: e.model.survey.locTitle.renderedHtml,
-            style: f({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
+            style: k({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
           }, null, 14, pi)
         ], 2)
       ])) : p("", !0),
       e.model.survey.hasTitle ? (i(), a("div", {
         key: 1,
         class: "sv-header__title",
-        style: f({ maxWidth: e.model.renderedTextAreaWidth })
+        style: k({ maxWidth: e.model.renderedTextAreaWidth })
       }, [
         c(m, {
           is: "survey-element-title",
@@ -5864,7 +5874,7 @@ const ae = /* @__PURE__ */ y({
       e.model.survey.renderedHasDescription ? (i(), a("div", {
         key: 2,
         class: "sv-header__description",
-        style: f({ maxWidth: e.model.renderedTextAreaWidth })
+        style: k({ maxWidth: e.model.renderedTextAreaWidth })
       }, [
         e.model.survey.renderedHasDescription ? (i(), a("div", {
           key: 0,
@@ -5886,22 +5896,22 @@ const ae = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    const e = u, n = k(), s = (C) => C.isPanel ? "survey-panel" : "survey-question", o = H(() => {
+    const e = u, n = f(), s = (C) => C.isPanel ? "survey-panel" : "survey-question", o = H(() => {
       const C = e.element.survey;
       if (C) {
-        const b = C.getElementWrapperComponentName(e.element);
-        if (b)
-          return b;
+        const L = C.getElementWrapperComponentName(e.element);
+        if (L)
+          return L;
       }
       return s(e.element);
     }), t = (C) => C.cssClasses ? C.rootStyle : {}, l = H(() => {
-      const C = e.element, b = C.survey;
+      const C = e.element, L = C.survey;
       let h;
-      return b && (h = b.getElementWrapperComponentData(C)), {
+      return L && (h = L.getElementWrapperComponentData(C)), {
         componentName: s(C),
         componentData: {
           element: C,
-          survey: b,
+          survey: L,
           row: e.row,
           css: e.css,
           data: h
@@ -5909,18 +5919,18 @@ const ae = /* @__PURE__ */ y({
       };
     }), d = W(
       () => e.element,
-      (C, b) => {
-        b && b.setWrapperElement(void 0), C.setWrapperElement(n.value);
+      (C, L) => {
+        L && L.setWrapperElement(void 0), C.setWrapperElement(n.value);
       }
     );
     return Z(() => {
       e.element.setWrapperElement(n.value);
-    }), D(() => {
+    }), P(() => {
       e.element.setWrapperElement(void 0), d();
-    }), (C, b) => (i(), a("div", {
+    }), (C, L) => (i(), a("div", {
       ref_key: "root",
       ref: n,
-      style: f(t(C.element)),
+      style: k(t(C.element)),
       class: r(C.element.cssClasses.questionWrapper)
     }, [
       C.row.isNeedRender ? (i(), g(m, $({
@@ -6028,7 +6038,7 @@ const ae = /* @__PURE__ */ y({
       }, null, 8, ["title", "iconName"])) : p("", !0),
       v("span", null, I(n.value.chooseButtonText), 1)
     ], 10, qi)), [
-      [w(U)]
+      [w(Q)]
     ]);
   }
 }), bi = /* @__PURE__ */ y({
@@ -6055,7 +6065,7 @@ const ae = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k();
+    const e = u, n = f();
     return T(e, n), (s, o) => (i(), a("div", {
       role: "group",
       class: r(s.question.cssClasses.root),
@@ -6143,7 +6153,7 @@ const Ii = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    const e = u, n = k(null);
+    const e = u, n = f(null);
     return T(e, n), (s, o) => (i(), a("div", {
       class: r(s.question.cssClasses.rootDropdown),
       ref_key: "root",
@@ -6162,7 +6172,7 @@ const Ii = /* @__PURE__ */ y({
     data: {}
   },
   setup(u) {
-    const e = u, n = H(() => e.data), s = z(() => n.value.locLogo);
+    const e = u, n = H(() => e.data), s = U(() => n.value.locLogo);
     return (o, t) => (i(), a("div", {
       class: r(n.value.logoClassNames)
     }, [
@@ -6172,7 +6182,7 @@ const Ii = /* @__PURE__ */ y({
         width: n.value.renderedLogoWidth,
         height: n.value.renderedLogoHeight,
         alt: n.value.locTitle.renderedHtml,
-        style: f({
+        style: k({
           objectFit: n.value.logoFit,
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight
@@ -6183,19 +6193,19 @@ const Ii = /* @__PURE__ */ y({
 }), Ri = /* @__PURE__ */ y({
   __name: "SvgBundle",
   setup(u) {
-    const e = k(), n = () => {
+    const e = f(), n = () => {
       e.value && (e.value.innerHTML = _.iconsRenderedHtml());
     };
     return Z(() => {
       n(), _.onIconsChanged.add(n);
-    }), D(() => {
+    }), P(() => {
       _.onIconsChanged.remove(n);
     }), (s, o) => B((i(), a("svg", {
       id: "sv-icon-holder-global-container",
       ref_key: "root",
       ref: e
     }, null, 512)), [
-      [P, !1]
+      [A, !1]
     ]);
   }
 }), Ti = ["id"], Bi = /* @__PURE__ */ y({
@@ -6238,7 +6248,7 @@ const Ii = /* @__PURE__ */ y({
           href: e.item.content,
           title: e.item.name,
           download: e.item.name,
-          style: f({ width: e.question.imageWidth })
+          style: k({ width: e.question.imageWidth })
         }, I(e.item.name), 13, Zi)
       ], 2)) : p("", !0),
       v("div", {
@@ -6247,7 +6257,7 @@ const Ii = /* @__PURE__ */ y({
         e.question.canPreviewImage(e.item) ? (i(), a("img", {
           key: 0,
           src: e.item.content,
-          style: f({
+          style: k({
             height: e.question.imageHeight,
             width: e.question.imageWidth
           }),
@@ -6287,11 +6297,11 @@ const Ii = /* @__PURE__ */ y({
           href: e.item.content,
           title: e.item.name,
           download: e.item.name,
-          style: f({ width: e.question.imageWidth })
+          style: k({ width: e.question.imageWidth })
         }, I(e.item.name), 13, Di)
       ], 2)) : p("", !0)
     ], 2)), [
-      [P, e.item]
+      [A, e.item]
     ]);
   }
 });
@@ -6311,7 +6321,7 @@ He(
 );
 const Fi = {
   install(u) {
-    u.component("SurveyComponent", ae), u.component("PopupSurveyComponent", fe), u.directive("key2click", U), He((e, n) => {
+    u.component("SurveyComponent", ae), u.component("PopupSurveyComponent", fe), u.directive("key2click", Q), He((e, n) => {
       u.component(e, n), F.Instance.registerComponent(e, e);
     });
   }
@@ -6321,10 +6331,10 @@ export {
   fe as PopupSurveyComponent,
   ae as SurveyComponent,
   m as SvComponent,
-  U as key2ClickDirective,
+  Q as key2ClickDirective,
   Fi as surveyPlugin,
   S as useBase,
   ne as useComputedArray,
-  z as useLocString,
+  U as useLocString,
   T as useQuestion
 };