survey-vue3-ui 1.9.119 → 1.9.120

package/survey-vue3-ui.es.js

@@ -137,14 +137,10 @@ const Ke = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        e.survey.isLogoBefore ? (i(), u("div", {
+        e.survey.isLogoBefore ? (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 0,
-          class: l(e.survey.logoClassNames)
-        }, [
-          (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
-            data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
-          }, null, 8, ["data"]))
-        ], 2)) : d("", !0),
+          data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
+        }, null, 8, ["data"])) : d("", !0),
         e.survey.renderedHasTitle ? (i(), u("div", {
           key: 1,
           class: l(e.survey.css.headerText),
@@ -163,14 +159,10 @@ const Ke = /* @__PURE__ */ h({
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
         ], 6)) : d("", !0),
-        e.survey.isLogoAfter ? (i(), u("div", {
+        e.survey.isLogoAfter ? (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
           key: 2,
-          class: l(e.survey.logoClassNames)
-        }, [
-          (i(), q(T(e.survey.getElementWrapperComponentName(e.survey, "logo-image")), {
-            data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
-          }, null, 8, ["data"]))
-        ], 2)) : d("", !0),
+          data: e.survey.getElementWrapperComponentData(e.survey, "logo-image")
+        }, null, 8, ["data"])) : d("", !0),
         c("div", {
           class: l(e.survey.css.headerClose)
         }, null, 2)
@@ -860,7 +852,7 @@ const Ke = /* @__PURE__ */ h({
   setup(r) {
     const s = r, o = D(null);
     return A(s, o), (e, n) => {
-      const t = v("survey-string"), a = v("sv-svg-icon");
+      const t = v("survey-string"), a = v("sv-svg-icon"), p = v("sv-loading-indicator");
       return i(), u("div", {
         class: l(e.question.cssClasses.root),
         ref_key: "root",
@@ -889,8 +881,9 @@ const Ke = /* @__PURE__ */ h({
           }, null, 14, _s)) : d("", !0),
           c("canvas", {
             tabindex: "0",
-            class: l(e.question.cssClasses.canvas)
-          }, null, 2)
+            class: l(e.question.cssClasses.canvas),
+            onBlur: n[0] || (n[0] = (...m) => e.question.onBlur && e.question.onBlur(...m))
+          }, null, 34)
         ]),
         e.question.canShowClearButton ? (i(), u("div", {
           key: 0,
@@ -900,7 +893,7 @@ const Ke = /* @__PURE__ */ h({
             type: "button",
             class: l(e.question.cssClasses.clearButton),
             title: e.question.clearButtonCaption,
-            onClick: n[0] || (n[0] = () => {
+            onClick: n[1] || (n[1] = () => {
               e.question.clearValue();
             })
           }, [
@@ -911,6 +904,12 @@ const Ke = /* @__PURE__ */ h({
               size: "auto"
             }, null, 8, ["iconName"])) : d("", !0)
           ], 10, Bs)
+        ], 2)) : d("", !0),
+        e.question.showLoadingIndicator ? (i(), u("div", {
+          key: 1,
+          class: l(e.question.cssClasses.loadingIndicator)
+        }, [
+          b(p)
         ], 2)) : d("", !0)
       ], 6);
     };
@@ -1504,7 +1503,7 @@ const tn = /* @__PURE__ */ h({
       disabled: !e.item.isEnabled
     }, S(f(o)), 9, rn));
   }
-}), an = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], un = { style: { visibility: "hidden" } }, dn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], mn = ["tabindex"], cn = ["id"], pn = /* @__PURE__ */ h({
+}), an = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], un = { style: { visibility: "hidden" } }, dn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], mn = ["id"], cn = /* @__PURE__ */ h({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1617,7 +1616,7 @@ const tn = /* @__PURE__ */ h({
             key: 1,
             class: l(k.question.cssClasses.cleanButton),
             onClick: a,
-            tabindex: k.question.showClearButton ? 0 : -1
+            "aria-hidden": "true"
           }, [
             b(O, {
               class: l(k.question.cssClasses.cleanButtonSvg),
@@ -1625,7 +1624,7 @@ const tn = /* @__PURE__ */ h({
               title: k.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
-          ], 10, mn)), [
+          ], 2)), [
             [M, k.question.showClearButton]
           ]) : d("", !0)
         ], 42, an)),
@@ -1640,7 +1639,7 @@ const tn = /* @__PURE__ */ h({
             locString: k.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
           c("div", null, S(k.question.readOnlyText), 1)
-        ], 10, cn)) : (i(), q(U, {
+        ], 10, mn)) : (i(), q(U, {
           key: 1,
           model: k.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
@@ -1659,7 +1658,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), vn = /* @__PURE__ */ h({
+}), pn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Tagbox",
   props: {
@@ -1682,7 +1681,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), yn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], qn = ["tabindex"], gn = ["id"], hn = /* @__PURE__ */ h({
+}), vn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], yn = ["id"], qn = /* @__PURE__ */ h({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1748,7 +1747,7 @@ const tn = /* @__PURE__ */ h({
             key: 0,
             class: l(y.question.cssClasses.cleanButton),
             onClick: t,
-            tabindex: y.question.showClearButton ? 0 : -1
+            "aria-hidden": "true"
           }, [
             b(N, {
               class: l(y.question.cssClasses.cleanButtonSvg),
@@ -1756,10 +1755,10 @@ const tn = /* @__PURE__ */ h({
               title: y.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
-          ], 10, qn)), [
+          ], 2)), [
             [M, y.question.showClearButton]
           ]) : d("", !0)
-        ], 42, yn)),
+        ], 42, vn)),
         y.question.isReadOnly ? (i(), u("div", {
           key: 2,
           disabled: "",
@@ -1767,14 +1766,15 @@ const tn = /* @__PURE__ */ h({
           class: l(y.question.getControlClass())
         }, [
           c("div", null, S(y.question.readOnlyText), 1)
-        ], 10, gn)) : (i(), q(k, {
+        ], 10, yn)) : (i(), q(k, {
           key: 1,
           model: o.value.popupModel
         }, null, 8, ["model"])),
         y.question.cssClasses.chevronButtonIconId ? (i(), u("div", {
           key: 3,
           class: l(y.question.cssClasses.chevronButton),
-          onPointerdown: n
+          onPointerdown: n,
+          "aria-hidden": "true"
         }, [
           b(N, {
             class: l(y.question.cssClasses.chevronButtonSvg),
@@ -1785,7 +1785,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Cn = { style: { visibility: "hidden" } }, bn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], kn = /* @__PURE__ */ h({
+}), gn = { style: { visibility: "hidden" } }, hn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], Cn = /* @__PURE__ */ h({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1824,7 +1824,7 @@ const tn = /* @__PURE__ */ h({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            c("span", Cn, S(a.model.inputStringRendered), 1),
+            c("span", gn, S(a.model.inputStringRendered), 1),
             c("span", null, S(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(c("input", {
@@ -1848,14 +1848,14 @@ const tn = /* @__PURE__ */ h({
             onKeydown: e,
             onBlur: n,
             onFocus: t
-          }, null, 42, bn), [
+          }, null, 42, hn), [
             [ke, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), fn = { class: "sv-tagbox__item-text" }, In = /* @__PURE__ */ h({
+}), bn = { class: "sv-tagbox__item-text" }, kn = /* @__PURE__ */ h({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1871,7 +1871,7 @@ const tn = /* @__PURE__ */ h({
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        c("div", fn, [
+        c("div", bn, [
           b(t, {
             locString: e.item.locText
           }, null, 8, ["locString"])
@@ -1889,7 +1889,7 @@ const tn = /* @__PURE__ */ h({
       ]);
     };
   }
-}), wn = /* @__PURE__ */ h({
+}), fn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Ranking",
   props: {
@@ -1910,50 +1910,61 @@ const tn = /* @__PURE__ */ h({
         data: s.question.getItemValueWrapperComponentData(t)
       }
     });
-    return (t, a) => (i(), u("div", {
-      class: l(t.question.rootClass),
-      ref_key: "root",
-      ref: o
-    }, [
-      t.question.selectToRankEnabled ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.rankingChoices, (p, m) => (i(), q(T(e(p)), H({
-        key: p.value + "-" + m + "-item"
-      }, n(p, m)), null, 16))), 128)),
-      t.question.selectToRankEnabled ? (i(), u("div", {
-        key: 1,
-        class: l(t.question.getContainerClasses("from")),
-        "data-ranking": "from-container"
-      }, [
-        (i(!0), u($, null, B(t.question.unRankingChoices, (p, m) => (i(), q(T(e(p)), H({
-          key: p.value + "-" + m + "-item"
-        }, n(p, m, !0)), null, 16))), 128)),
-        t.question.unRankingChoices.length === 0 ? (i(), u("div", {
-          key: 0,
-          class: l(t.question.cssClasses.containerPlaceholder)
-        }, S(t.question.selectToRankEmptyRankedAreaText), 3)) : d("", !0)
-      ], 2)) : d("", !0),
-      t.question.selectToRankEnabled ? (i(), u("div", {
-        key: 2,
-        class: l(t.question.cssClasses.containersDivider)
-      }, null, 2)) : d("", !0),
-      t.question.selectToRankEnabled ? (i(), u("div", {
-        key: 3,
-        class: l(t.question.getContainerClasses("to")),
-        "data-ranking": "to-container"
+    return (t, a) => {
+      const p = v("survey-string");
+      return i(), u("div", {
+        class: l(t.question.rootClass),
+        ref_key: "root",
+        ref: o
       }, [
-        (i(!0), u($, null, B(t.question.rankingChoices, (p, m) => (i(), q(T(e(p)), H({
-          key: p.value + "-" + m + "-item"
-        }, n(p, m)), null, 16))), 128)),
-        t.question.rankingChoices.length === 0 ? (i(), u("div", {
-          key: 0,
-          class: l(t.question.cssClasses.containerPlaceholder)
-        }, S(t.question.selectToRankEmptyUnrankedAreaText), 3)) : d("", !0)
-      ], 2)) : d("", !0)
-    ], 2));
+        t.question.selectToRankEnabled ? d("", !0) : (i(!0), u($, { key: 0 }, B(t.question.rankingChoices, (m, y) => (i(), q(T(e(m)), H({
+          key: m.value + "-" + y + "-item"
+        }, n(m, y)), null, 16))), 128)),
+        t.question.selectToRankEnabled ? (i(), u("div", {
+          key: 1,
+          class: l(t.question.getContainerClasses("from")),
+          "data-ranking": "from-container"
+        }, [
+          (i(!0), u($, null, B(t.question.unRankingChoices, (m, y) => (i(), q(T(e(m)), H({
+            key: m.value + "-" + y + "-item"
+          }, n(m, y, !0)), null, 16))), 128)),
+          t.question.unRankingChoices.length === 0 ? (i(), u("div", {
+            key: 0,
+            class: l(t.question.cssClasses.containerPlaceholder)
+          }, [
+            b(p, {
+              locString: t.question.locSelectToRankEmptyRankedAreaText
+            }, null, 8, ["locString"])
+          ], 2)) : d("", !0)
+        ], 2)) : d("", !0),
+        t.question.selectToRankEnabled ? (i(), u("div", {
+          key: 2,
+          class: l(t.question.cssClasses.containersDivider)
+        }, null, 2)) : d("", !0),
+        t.question.selectToRankEnabled ? (i(), u("div", {
+          key: 3,
+          class: l(t.question.getContainerClasses("to")),
+          "data-ranking": "to-container"
+        }, [
+          (i(!0), u($, null, B(t.question.rankingChoices, (m, y) => (i(), q(T(e(m)), H({
+            key: m.value + "-" + y + "-item"
+          }, n(m, y)), null, 16))), 128)),
+          t.question.rankingChoices.length === 0 ? (i(), u("div", {
+            key: 0,
+            class: l(t.question.cssClasses.containerPlaceholder)
+          }, [
+            b(p, {
+              locString: t.question.locSelectToRankEmptyUnrankedAreaText
+            }, null, 8, ["locString"])
+          ], 2)) : d("", !0)
+        ], 2)) : d("", !0)
+      ], 2);
+    };
   }
-}), Sn = ["tabindex", "data-sv-drop-target-ranking-item"], Rn = {
+}), In = ["tabindex", "data-sv-drop-target-ranking-item"], wn = {
   tabindex: "-1",
   style: { outline: "none" }
-}, Tn = ["xlink:href"], $n = ["xlink:href"], Dn = ["xlink:href"], _n = /* @__PURE__ */ h({
+}, Sn = ["xlink:href"], Rn = ["xlink:href"], Tn = ["xlink:href"], $n = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RankingItem",
   props: {
@@ -1982,7 +1993,7 @@ const tn = /* @__PURE__ */ h({
           );
         })
       }, [
-        c("div", Rn, [
+        c("div", wn, [
           c("div", {
             class: l(e.question.cssClasses.itemGhostNode)
           }, null, 2),
@@ -1997,14 +2008,14 @@ const tn = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.dragDropSvgIcon
-                }, null, 8, Tn)
+                }, null, 8, Sn)
               ], 2)),
               (i(), u("svg", {
                 class: l(e.question.getIconFocusCss())
               }, [
                 c("use", {
                   "xlink:href": e.question.arrowsSvgIcon
-                }, null, 8, $n)
+                }, null, 8, Rn)
               ], 2))
             ], 2),
             !e.unrankedItem && o.value ? (i(), u("div", {
@@ -2017,7 +2028,7 @@ const tn = /* @__PURE__ */ h({
               (i(), u("svg", null, [
                 c("use", {
                   "xlink:href": e.question.dashSvgIcon
-                }, null, 8, Dn)
+                }, null, 8, Tn)
               ]))
             ], 2)),
             c("div", {
@@ -2029,13 +2040,13 @@ const tn = /* @__PURE__ */ h({
             ], 2)
           ], 2)
         ])
-      ], 42, Sn);
+      ], 42, In);
     };
   }
-}), Bn = { role: "radiogroup" }, Ln = /* @__PURE__ */ c("legend", {
+}), Dn = { role: "radiogroup" }, _n = /* @__PURE__ */ c("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), Nn = /* @__PURE__ */ h({
+}, null, -1), Bn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Rating",
   props: {
@@ -2052,8 +2063,8 @@ const tn = /* @__PURE__ */ h({
         ref_key: "root",
         ref: o
       }, [
-        c("fieldset", Bn, [
-          Ln,
+        c("fieldset", Dn, [
+          _n,
           n.question.hasMinLabel ? (i(), u("span", {
             key: 0,
             class: l(n.question.cssClasses.minText)
@@ -2080,7 +2091,7 @@ const tn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
+}), Ln = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ h({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2108,7 +2119,7 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Pn),
+        }, null, 8, Ln),
         c("span", {
           class: l(o.question.cssClasses.itemText)
         }, [
@@ -2119,7 +2130,7 @@ const tn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ h({
+}), Pn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ h({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2150,7 +2161,7 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Mn),
+        }, null, 8, Pn),
         b(n, {
           iconName: o.question.getItemSmileyIconName(o.item.itemValue),
           size: "auto",
@@ -2159,7 +2170,7 @@ const tn = /* @__PURE__ */ h({
       ], 38);
     };
   }
-}), Wn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], En = /* @__PURE__ */ h({
+}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Hn = /* @__PURE__ */ h({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2189,7 +2200,7 @@ const tn = /* @__PURE__ */ h({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Wn),
+        }, null, 8, Mn),
         b(n, {
           class: l("sv-star"),
           iconName: o.question.itemStarIcon,
@@ -2205,10 +2216,10 @@ const tn = /* @__PURE__ */ h({
       ], 34);
     };
   }
-}), Vn = { class: "sd-rating-dropdown-item" }, On = { class: "sd-rating-dropdown-item_text" }, Fn = {
+}), Wn = { class: "sd-rating-dropdown-item" }, En = { class: "sd-rating-dropdown-item_text" }, Vn = {
   key: 0,
   class: "sd-rating-dropdown-item_description"
-}, zn = /* @__PURE__ */ h({
+}, On = /* @__PURE__ */ h({
   __name: "RatingDropdownItem",
   props: {
     item: {}
@@ -2217,9 +2228,9 @@ const tn = /* @__PURE__ */ h({
     const s = r;
     return L(() => s.item), (o, e) => {
       const n = v("survey-string");
-      return i(), u("div", Vn, [
-        c("span", On, S(o.item.title), 1),
-        o.item.description ? (i(), u("div", Fn, [
+      return i(), u("div", Wn, [
+        c("span", En, S(o.item.title), 1),
+        o.item.description ? (i(), u("div", Vn, [
           b(n, {
             locString: o.item.description
           }, null, 8, ["locString"])
@@ -2233,7 +2244,7 @@ ne.Instance.registerRenderer(
   "dropdown",
   "sv-rating-dropdown"
 );
-const Un = /* @__PURE__ */ h({
+const Fn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "RatingDropdown",
   props: {
@@ -2252,7 +2263,7 @@ const Un = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Kn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], jn = /* @__PURE__ */ h({
+}), zn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Un = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanSwitch",
   props: {
@@ -2291,7 +2302,7 @@ const Un = /* @__PURE__ */ h({
             "aria-label": t.question.ariaLabel,
             "aria-invalid": t.question.ariaInvalid,
             "aria-describedby": t.question.ariaDescribedBy
-          }, null, 42, Kn), [
+          }, null, 42, zn), [
             [G, t.question.booleanValue]
           ]),
           c("div", {
@@ -2345,7 +2356,7 @@ ne.Instance.registerRenderer(
   "radio",
   "sv-boolean-radio"
 );
-const Qn = /* @__PURE__ */ h({
+const Kn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanRadio",
   props: {
@@ -2380,7 +2391,7 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Gn = ["name", "value", "checked", "aria-describedby", "disabled"], Xn = ["xlink:href"], Jn = /* @__PURE__ */ h({
+}), jn = ["name", "value", "checked", "aria-describedby", "disabled"], Qn = ["xlink:href"], Gn = /* @__PURE__ */ h({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2410,7 +2421,7 @@ const Qn = /* @__PURE__ */ h({
             disabled: e.question.isInputReadOnly,
             class: l(e.question.cssClasses.itemRadioControl),
             onChange: o
-          }, null, 42, Gn),
+          }, null, 42, jn),
           e.question.cssClasses.materialRadioDecorator ? (i(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialRadioDecorator)
@@ -2421,7 +2432,7 @@ const Qn = /* @__PURE__ */ h({
             }, [
               c("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Xn)
+              }, null, 8, Qn)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           c("span", {
@@ -2433,13 +2444,13 @@ const Qn = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Yn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Zn = ["xlink:href"], xn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), eo = ["id"];
+}), Xn = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Jn = ["xlink:href"], Yn = /* @__PURE__ */ c("span", { class: "check" }, null, -1), Zn = ["id"];
 ne.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const so = /* @__PURE__ */ h({
+const xn = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "BooleanCheckbox",
   props: {
@@ -2475,7 +2486,7 @@ const so = /* @__PURE__ */ h({
               "aria-label": e.question.ariaLabel,
               "aria-invalid": e.question.ariaInvalid,
               "aria-describedby": e.question.ariaDescribedBy
-            }, null, 42, Yn), [
+            }, null, 42, Xn), [
               [G, e.question.booleanValue]
             ]),
             c("span", {
@@ -2487,9 +2498,9 @@ const so = /* @__PURE__ */ h({
               }, [
                 c("use", {
                   "xlink:href": e.question.svgIcon
-                }, null, 8, Zn)
+                }, null, 8, Jn)
               ], 2)) : d("", !0),
-              xn
+              Yn
             ], 2),
             e.question.isLabelRendered ? (i(), u("span", {
               key: 0,
@@ -2506,7 +2517,7 @@ const so = /* @__PURE__ */ h({
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])) : d("", !0)
-            ], 10, eo)) : d("", !0)
+            ], 10, Zn)) : d("", !0)
           ], 2),
           e.question.canRenderLabelDescription ? (i(), u("div", {
             key: 0,
@@ -2520,7 +2531,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), no = /* @__PURE__ */ h({
+}), eo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Multipletext",
   props: {
@@ -2558,7 +2569,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), oo = { key: 1 }, to = /* @__PURE__ */ h({
+}), so = { key: 1 }, no = /* @__PURE__ */ h({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2587,7 +2598,7 @@ const so = /* @__PURE__ */ h({
           b(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
-          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", oo, "\xA0")) : d("", !0),
+          e.value.editor.isRequireTextAfterTitle ? (i(), u("span", so, "\xA0")) : d("", !0),
           e.value.editor.isRequireTextAfterTitle ? (i(), u("span", {
             key: 2,
             "aria-hidden": "true",
@@ -2606,7 +2617,7 @@ const so = /* @__PURE__ */ h({
       ], 2));
     };
   }
-}), io = { class: "sv-hidden" }, ro = { key: 0 }, lo = { key: 0 }, ao = ["onClick"], uo = ["data-responsive-title", "onClick"], mo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], co = ["xlink:href"], po = /* @__PURE__ */ h({
+}), oo = { class: "sv-hidden" }, to = { key: 0 }, io = { key: 0 }, ro = ["onClick"], lo = ["data-responsive-title", "onClick"], ao = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], uo = ["xlink:href"], mo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Matrix",
   props: {
@@ -2638,13 +2649,13 @@ const so = /* @__PURE__ */ h({
         ref: o
       }, [
         c("fieldset", null, [
-          c("legend", io, S(t.question.locTitle.renderedHtml), 1),
+          c("legend", oo, S(t.question.locTitle.renderedHtml), 1),
           c("table", {
             class: l(t.question.getTableCss())
           }, [
-            t.question.showHeader ? (i(), u("thead", ro, [
+            t.question.showHeader ? (i(), u("thead", to, [
               c("tr", null, [
-                t.question.hasRows ? (i(), u("td", lo)) : d("", !0),
+                t.question.hasRows ? (i(), u("td", io)) : d("", !0),
                 (i(!0), u($, null, B(t.question.visibleColumns, (m, y) => (i(), u("th", {
                   key: y,
                   class: l(t.question.cssClasses.headerCell),
@@ -2699,7 +2710,7 @@ const so = /* @__PURE__ */ h({
                   b(p, {
                     locString: t.question.getCellDisplayLocText(m.name, g)
                   }, null, 8, ["locString"])
-                ], 10, ao))), 128)) : d("", !0),
+                ], 10, ro))), 128)) : d("", !0),
                 t.question.hasCellText ? d("", !0) : (i(!0), u($, { key: 1 }, B(t.question.visibleColumns, (g, I) => (i(), u("td", {
                   key: I,
                   "data-responsive-title": g.locText.renderedHtml,
@@ -2722,7 +2733,7 @@ const so = /* @__PURE__ */ h({
                       "aria-label": t.question.getCellAriaLabel(m.locText.renderedHtml, g.locText.renderedHtml),
                       "aria-invalid": t.question.a11y_input_ariaInvalid,
                       "aria-describedby": t.question.a11y_input_ariaDescribedBy
-                    }, null, 10, mo), [
+                    }, null, 10, ao), [
                       [se, m.value]
                     ]),
                     c("span", {
@@ -2734,7 +2745,7 @@ const so = /* @__PURE__ */ h({
                       }, [
                         c("use", {
                           "xlink:href": t.question.itemSvgIcon
-                        }, null, 8, co)
+                        }, null, 8, uo)
                       ], 2)) : d("", !0)
                     ], 2),
                     P(c("span", {
@@ -2747,7 +2758,7 @@ const so = /* @__PURE__ */ h({
                       [M, t.question.isMobile]
                     ])
                   ], 34)
-                ], 10, uo))), 128))
+                ], 10, lo))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2755,7 +2766,7 @@ const so = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), vo = /* @__PURE__ */ h({
+}), co = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDropdown",
   props: {
@@ -2772,7 +2783,7 @@ const so = /* @__PURE__ */ h({
       }, null, 8, ["question"]);
     };
   }
-}), yo = { key: 0 }, qo = ["data-sv-drop-target-matrix-row", "onPointerdown"], go = { key: 1 }, ho = /* @__PURE__ */ h({
+}), po = { key: 0 }, vo = ["data-sv-drop-target-matrix-row", "onPointerdown"], yo = { key: 1 }, qo = /* @__PURE__ */ h({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2801,7 +2812,7 @@ const so = /* @__PURE__ */ h({
         c("table", {
           class: l(e.question.getTableCss())
         }, [
-          o.value.showHeader ? (i(), u("thead", yo, [
+          o.value.showHeader ? (i(), u("thead", po, [
             c("tr", null, [
               (i(!0), u($, null, B(o.value.headerRow.cells, (m) => (i(), u($, null, [
                 m.hasTitle ? (i(), u("th", {
@@ -2848,10 +2859,10 @@ const so = /* @__PURE__ */ h({
                   question: e.question,
                   key: m.id + "_" + g
                 }, null, 8, ["cell", "question"]))), 128))
-              ], 42, qo)) : d("", !0)
+              ], 42, vo)) : d("", !0)
             ], 64))), 128))
           ]),
-          o.value.showFooter ? (i(), u("tfoot", go, [
+          o.value.showFooter ? (i(), u("tfoot", yo, [
             c("tr", null, [
               (i(!0), u($, null, B(o.value.footerRow.cells, (m, y) => (i(), q(p, {
                 cell: m,
@@ -2864,7 +2875,7 @@ const so = /* @__PURE__ */ h({
       ], 6);
     };
   }
-}), Co = /* @__PURE__ */ c("span", null, "\xA0", -1), bo = /* @__PURE__ */ h({
+}), go = /* @__PURE__ */ c("span", null, "\xA0", -1), ho = /* @__PURE__ */ h({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2873,14 +2884,14 @@ const so = /* @__PURE__ */ h({
   setup(r) {
     const s = r;
     return L(() => s.column), (o, e) => o.column.isRenderedRequired ? (i(), u($, { key: 0 }, [
-      Co,
+      go,
       o.column.isRenderedRequired ? (i(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
       }, S(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
-}), ko = ["data-responsive-title", "title", "colspan"], fo = /* @__PURE__ */ h({
+}), Co = ["data-responsive-title", "title", "colspan"], bo = /* @__PURE__ */ h({
   __name: "MatrixCell",
   props: {
     question: {},
@@ -2936,7 +2947,7 @@ const so = /* @__PURE__ */ h({
         title: g.cell.getTitle(),
         style: R(t()),
         colspan: g.cell.colSpans,
-        onFocusin: I[0] || (I[0] = (zi) => g.cell.focusIn()),
+        onFocusin: I[0] || (I[0] = (Fi) => g.cell.focusIn()),
         ref_key: "root",
         ref: e
       }, [
@@ -3016,10 +3027,10 @@ const so = /* @__PURE__ */ h({
           ]),
           _: 1
         }, 8, ["componentData"])) : d("", !0)
-      ], 46, ko);
+      ], 46, Co);
     };
   }
-}), Io = /* @__PURE__ */ h({
+}), ko = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3110,7 +3121,7 @@ function ie(r, s = !0) {
     row: s ? w(() => r.item.data.row) : void 0
   };
 }
-const wo = ["disabled"], So = /* @__PURE__ */ h({
+const fo = ["disabled"], Io = /* @__PURE__ */ h({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3131,10 +3142,10 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
         c("span", {
           class: l(f(o).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, wo);
+      ], 10, fo);
     };
   }
-}), Ro = ["xlink:href"], To = /* @__PURE__ */ h({
+}), wo = ["xlink:href"], So = /* @__PURE__ */ h({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3147,13 +3158,13 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
     }, [
       c("use", {
         "xlink:href": f(o).iconDragElement
-      }, null, 8, Ro)
+      }, null, 8, wo)
     ], 2)) : (i(), u("span", {
       key: 1,
       class: l(f(o).cssClasses.iconDrag)
     }, null, 2));
   }
-}), $o = ["aria-expanded", "aria-controls"], Do = /* @__PURE__ */ h({
+}), Ro = ["aria-expanded", "aria-controls"], To = /* @__PURE__ */ h({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3174,10 +3185,10 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
           iconName: f(o).getDetailPanelIconId(f(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, $o);
+      ], 10, Ro);
     };
   }
-}), _o = /* @__PURE__ */ h({
+}), $o = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3298,7 +3309,7 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Bo = /* @__PURE__ */ h({
+}), Do = /* @__PURE__ */ h({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3344,7 +3355,7 @@ const wo = ["disabled"], So = /* @__PURE__ */ h({
       ], 2);
     };
   }
-}), Lo = /* @__PURE__ */ h({
+}), _o = /* @__PURE__ */ h({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3386,7 +3397,7 @@ function Z(r) {
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const No = /* @__PURE__ */ h({
+const Bo = /* @__PURE__ */ h({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3407,7 +3418,7 @@ const No = /* @__PURE__ */ h({
       }, S(f(o).panelAddText), 3)
     ], 2)) : d("", !0);
   }
-}), Po = ["title"], Ao = /* @__PURE__ */ h({
+}), Lo = ["title"], No = /* @__PURE__ */ h({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3428,10 +3439,10 @@ const No = /* @__PURE__ */ h({
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Po);
+      ], 10, Lo);
     };
   }
-}), Mo = ["title"], Ho = /* @__PURE__ */ h({
+}), Po = ["title"], Ao = /* @__PURE__ */ h({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3452,10 +3463,10 @@ const No = /* @__PURE__ */ h({
           iconName: f(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Mo);
+      ], 10, Po);
     };
   }
-}), Wo = /* @__PURE__ */ h({
+}), Mo = /* @__PURE__ */ h({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
@@ -3480,7 +3491,7 @@ const No = /* @__PURE__ */ h({
       }, null, 2)
     ], 2));
   }
-}), Eo = /* @__PURE__ */ h({
+}), Ho = /* @__PURE__ */ h({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3492,7 +3503,7 @@ const No = /* @__PURE__ */ h({
       class: l(f(o).cssClasses.progressText)
     }, S(f(o).progressText), 3));
   }
-}), Vo = ["id"], Oo = /* @__PURE__ */ h({
+}), Wo = ["id"], Eo = /* @__PURE__ */ h({
   __name: "Errors",
   props: {
     element: {},
@@ -3530,16 +3541,16 @@ const No = /* @__PURE__ */ h({
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, Vo)) : d("", !0);
+      ], 10, Wo)) : d("", !0);
     };
   }
-}), Fo = { key: 0 }, zo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Uo = /* @__PURE__ */ h({
+}), Vo = { key: 0 }, Oo = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Fo = /* @__PURE__ */ h({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(r) {
-    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Fo, S(s.question.comment), 1)) : (i(), u("textarea", {
+    return (s, o) => s.question.isReadOnlyRenderDiv() ? (i(), u("div", Vo, S(s.question.comment), 1)) : (i(), u("textarea", {
       key: 1,
       id: s.question.commentId,
       readonly: s.question.isInputReadOnly,
@@ -3557,9 +3568,9 @@ const No = /* @__PURE__ */ h({
       onInput: o[1] || (o[1] = (e) => {
         s.question.onCommentInput(e);
       })
-    }, null, 46, zo));
+    }, null, 46, Oo));
   }
-}), Ko = /* @__PURE__ */ h({
+}), zo = /* @__PURE__ */ h({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3599,7 +3610,7 @@ const No = /* @__PURE__ */ h({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : d("", !0);
     };
   }
-}), jo = { key: 3 }, Qo = { key: 5 }, Go = { key: 7 }, Xo = /* @__PURE__ */ h({
+}), Uo = { key: 3 }, Ko = { key: 5 }, jo = { key: 7 }, Qo = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -3625,18 +3636,18 @@ const No = /* @__PURE__ */ h({
           class: l(s.element.cssTitleNumber),
           "aria-hidden": !0
         }, S(s.element.no), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", jo, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.no ? (i(), u("span", Uo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", {
           key: 4,
           class: l(s.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, S(s.element.requiredText), 3)) : d("", !0),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Qo, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextBeforeTitle ? (i(), u("span", Ko, "\xA0")) : d("", !0),
         s.element.isTitleRenderedAsString ? d("", !0) : (i(), q(e, {
           key: 6,
           locString: s.element.locTitle
         }, null, 8, ["locString"])),
-        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", Go, "\xA0")) : d("", !0),
+        !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", jo, "\xA0")) : d("", !0),
         !s.element.isTitleRenderedAsString && s.element.isRequireTextAfterTitle ? (i(), u("span", {
           key: 8,
           class: l(s.element.cssClasses.requiredText),
@@ -3645,7 +3656,7 @@ const No = /* @__PURE__ */ h({
       ], 64);
     };
   }
-}), Jo = { class: "sv-title-actions" }, Yo = { class: "sv-title-actions__title" }, Zo = /* @__PURE__ */ h({
+}), Go = { class: "sv-title-actions" }, Xo = { class: "sv-title-actions__title" }, Jo = /* @__PURE__ */ h({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3655,8 +3666,8 @@ const No = /* @__PURE__ */ h({
     const s = r, o = w(() => s.element.getTitleToolbar());
     return (e, n) => {
       const t = v("survey-string"), a = v("survey-element-title-content"), p = v("sv-action-bar");
-      return i(), u("div", Jo, [
-        c("span", Yo, [
+      return i(), u("div", Go, [
+        c("span", Xo, [
           e.element.isPage ? (i(), q(t, {
             key: 0,
             locString: e.element.locTitle
@@ -3676,15 +3687,15 @@ const No = /* @__PURE__ */ h({
   for (const [e, n] of s)
     o[e] = n;
   return o;
-}, xo = {}, et = { class: "sv-brand-info" }, st = /* @__PURE__ */ fe('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), nt = [
-  st
+}, Yo = {}, Zo = { class: "sv-brand-info" }, xo = /* @__PURE__ */ fe('<a class="sv-brand-info__logo" href="https://surveyjs.io/?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=landing_page"><img src="https://surveyjs.io/Content/Images/poweredby.svg"></a><div class="sv-brand-info__text"> Try and see how easy it is to <a href="https://surveyjs.io/create-survey?utm_source=built-in_links&amp;utm_medium=online_survey_tool&amp;utm_campaign=create_survey">create a survey</a></div><div class="sv-brand-info__terms"><a href="https://surveyjs.io/TermsOfUse">Terms of Use &amp; Privacy Statement</a></div>', 3), et = [
+  xo
 ];
-function ot(r, s) {
-  return i(), u("div", et, nt);
+function st(r, s) {
+  return i(), u("div", Zo, et);
 }
-const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use", null, null, -1), rt = [
-  it
-], lt = /* @__PURE__ */ h({
+const nt = /* @__PURE__ */ ge(Yo, [["render", st]]), ot = /* @__PURE__ */ c("use", null, null, -1), tt = [
+  ot
+], it = /* @__PURE__ */ h({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3713,9 +3724,9 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ref: o,
       class: "sv-svg-icon",
       role: "img"
-    }, rt, 512));
+    }, tt, 512));
   }
-}), at = /* @__PURE__ */ h({
+}), rt = /* @__PURE__ */ h({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3748,7 +3759,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 2)) : d("", !0);
     };
   }
-}), ut = ["id"], dt = { class: "sv-action__content" }, mt = /* @__PURE__ */ h({
+}), lt = ["id"], at = { class: "sv-action__content" }, ut = /* @__PURE__ */ h({
   __name: "Action",
   props: {
     item: {}
@@ -3763,17 +3774,17 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        c("div", dt, [
+        c("div", at, [
           e.item.needSeparator ? (i(), q(t, { key: 0 })) : d("", !0),
           (i(), q(T(o.value), { item: e.item }, null, 8, ["item"]))
         ])
-      ], 10, ut);
+      ], 10, lt);
     };
   }
-}), ct = ["disabled", "title", "aria-checked", "aria-expanded", "role"], pt = {
+}), dt = ["disabled", "title", "aria-checked", "aria-expanded", "role"], mt = {
   inheritAttrs: !1
-}, vt = /* @__PURE__ */ h({
-  ...pt,
+}, ct = /* @__PURE__ */ h({
+  ...mt,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3808,15 +3819,15 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
         }, S(o.item.title), 3)) : d("", !0)
-      ], 42, ct)), [
+      ], 42, dt)), [
         [t, { processEsc: !1, disableTabStop: o.item.disableTabStop }]
       ]);
     };
   }
-}), yt = ["disabled", "title", "role"], qt = {
+}), pt = ["disabled", "title", "role"], vt = {
   inheritAttrs: !1
-}, gt = /* @__PURE__ */ h({
-  ...qt,
+}, yt = /* @__PURE__ */ h({
+  ...vt,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -3859,7 +3870,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             key: 1,
             class: l(n.item.getActionBarItemTitleCss())
           }, S(n.item.title), 3)) : d("", !0)
-        ], 42, yt)), [
+        ], 42, pt)), [
           [m, { processEsc: !1, disableTabStop: n.item.disableTabStop }]
         ]),
         b(p, {
@@ -3869,7 +3880,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 64);
     };
   }
-}), ht = /* @__PURE__ */ h({
+}), qt = /* @__PURE__ */ h({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -3880,7 +3891,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       class: l(["sv-action-bar-separator", o.value])
     }, null, 2));
   }
-}), Ct = ["aria-label", "placeholder", "value"], bt = ["aria-label"], kt = ["id"], ft = /* @__PURE__ */ h({
+}), gt = ["aria-label", "placeholder", "value"], ht = ["aria-label"], Ct = ["id"], bt = /* @__PURE__ */ h({
   __name: "List",
   props: {
     model: {}
@@ -3924,7 +3935,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             value: a.model.filterString,
             onChange: e,
             onKeyup: n
-          }, null, 42, Ct),
+          }, null, 42, gt),
           a.model.showSearchClearButton && !!a.model.filterString ? (i(), u("button", {
             key: 0,
             onClick: p[0] || (p[0] = (g) => {
@@ -3944,7 +3955,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           c("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, S(a.model.emptyMessage), 11, bt)
+          }, S(a.model.emptyMessage), 11, ht)
         ], 2), [
           [M, a.model.isEmpty]
         ]),
@@ -3966,13 +3977,13 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             model: a.model,
             key: g.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, kt)), [
+        ], 42, Ct)), [
           [M, !a.model.isEmpty]
         ]) : d("", !0)
       ], 2);
     };
   }
-}), It = ["aria-selected", "id"], wt = ["title"], St = /* @__PURE__ */ h({
+}), kt = ["aria-selected", "id"], ft = ["title"], It = /* @__PURE__ */ h({
   __name: "ListItem",
   props: {
     model: {},
@@ -4021,14 +4032,14 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             key: 2,
             item: n.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 14, wt)
-      ], 42, It)), [
+        ], 14, ft)
+      ], 42, kt)), [
         [M, n.model.isItemVisible(n.item)],
         [m]
       ]);
     };
   }
-}), Rt = /* @__PURE__ */ h({
+}), wt = /* @__PURE__ */ h({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -4062,13 +4073,13 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 512);
     };
   }
-}), Tt = { class: "sv-popup__shadow" }, $t = { class: "sv-popup__body-content" }, Dt = {
+}), St = { class: "sv-popup__shadow" }, Rt = { class: "sv-popup__body-content" }, Tt = {
   key: 0,
   class: "sv-popup__body-header"
-}, _t = { class: "sv-popup__scrolling-content" }, Bt = { class: "sv-popup__content" }, Lt = {
+}, $t = { class: "sv-popup__scrolling-content" }, Dt = { class: "sv-popup__content" }, _t = {
   key: 1,
   class: "sv-popup__body-footer"
-}, Nt = /* @__PURE__ */ h({
+}, Bt = /* @__PURE__ */ h({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4107,19 +4118,19 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
           }),
           onClick: e
         }, [
-          c("div", Tt, [
+          c("div", St, [
             n.model.showHeader ? (i(), q(T(n.model.popupHeaderTemplate), {
               key: 0,
               model: n.model
             }, null, 8, ["model"])) : d("", !0),
-            c("div", $t, [
-              n.model.title ? (i(), u("div", Dt, S(n.model.title), 1)) : d("", !0),
-              c("div", _t, [
-                c("div", Bt, [
+            c("div", Rt, [
+              n.model.title ? (i(), u("div", Tt, S(n.model.title), 1)) : d("", !0),
+              c("div", $t, [
+                c("div", Dt, [
                   (i(), q(T(n.model.contentComponentName), F(ve(n.model.contentComponentData)), null, 16))
                 ])
               ]),
-              n.model.showFooter ? (i(), u("div", Lt, [
+              n.model.showFooter ? (i(), u("div", _t, [
                 b(a, {
                   model: n.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4132,7 +4143,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Pt = /* @__PURE__ */ h({
+}), Lt = /* @__PURE__ */ h({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4146,10 +4157,10 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       })
     }, null, 4));
   }
-}), At = {
+}), Nt = {
   key: 0,
   class: "sv-components-column"
-}, Mt = /* @__PURE__ */ h({
+}, Pt = /* @__PURE__ */ h({
   __name: "Container",
   props: {
     survey: {},
@@ -4161,7 +4172,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       () => s.survey.getContainerContent(s.container)
     );
     return (e, n) => o.value.length > 0 ? (i(), u($, { key: 0 }, [
-      e.needRenderWrapper ? (i(), u("div", At, [
+      e.needRenderWrapper ? (i(), u("div", Nt, [
         (i(!0), u($, null, B(o.value, (t, a) => (i(), q(T(t.component), {
           survey: e.survey,
           container: e.container,
@@ -4202,7 +4213,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       }, S(t.survey.progressText), 3)
     ], 2));
   }
-}), Ht = ["onClick"], Wt = ["title"], Et = ["title"], Vt = /* @__PURE__ */ h({
+}), At = ["onClick"], Mt = ["title"], Ht = ["title"], Wt = /* @__PURE__ */ h({
   __name: "ProgressButtons",
   props: {
     survey: {}
@@ -4250,12 +4261,12 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
               c("div", {
                 class: l(t.value.progressButtonsPageTitle),
                 title: k.renderedNavigationTitle
-              }, S(k.renderedNavigationTitle), 11, Wt),
+              }, S(k.renderedNavigationTitle), 11, Mt),
               c("div", {
                 class: l(t.value.progressButtonsPageDescription),
                 title: k.locNavigationDescription.renderedHtml
-              }, S(k.locNavigationDescription.renderedHtml), 11, Et)
-            ], 10, Ht))), 128))
+              }, S(k.locNavigationDescription.renderedHtml), 11, Ht)
+            ], 10, At))), 128))
           ], 2)
         ], 2),
         c("div", {
@@ -4266,7 +4277,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 2)
     ], 2));
   }
-}), Ot = /* @__PURE__ */ h({
+}), Et = /* @__PURE__ */ h({
   __name: "ProgressToc",
   props: {
     survey: {}
@@ -4298,10 +4309,10 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 2);
     };
   }
-}), Ft = { onsubmit: "return false;" }, zt = {
+}), Vt = { onsubmit: "return false;" }, Ot = {
   key: 0,
   class: "sv_custom_header"
-}, Ut = ["id"], Kt = { key: 2 }, jt = ["innerHTML"], Qt = ["innerHTML"], Gt = ["innerHTML"], me = /* @__PURE__ */ h({
+}, Ft = { class: "sv-components-column sv-components-column--expandable" }, zt = ["id"], Ut = { key: 2 }, Kt = ["innerHTML"], jt = ["innerHTML"], Qt = ["innerHTML"], me = /* @__PURE__ */ h({
   __name: "Survey",
   props: {
     model: {},
@@ -4345,8 +4356,8 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
             class: l(y.value.rootBackgroundImage),
             style: R(t.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          c("form", Ft, [
-            t.value.hasLogo ? d("", !0) : (i(), u("div", zt)),
+          c("form", Vt, [
+            t.value.hasLogo ? d("", !0) : (i(), u("div", Ot)),
             c("div", {
               class: l(y.value.container)
             }, [
@@ -4368,28 +4379,35 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                   container: "left",
                   needRenderWrapper: !0
                 }, null, 8, ["survey"])),
-                c("div", {
-                  class: l(t.value.bodyCss),
-                  style: R({ maxWidth: t.value.renderedWidth }),
-                  id: a.value
-                }, [
+                c("div", Ft, [
                   (i(), q(T("sv-components-container"), {
                     survey: t.value,
-                    container: "contentTop",
+                    container: "center",
                     needRenderWrapper: !0
                   }, null, 8, ["survey"])),
-                  (i(), q(E, {
-                    key: g.value,
-                    survey: t.value,
-                    page: t.value.activePage,
-                    css: y.value
-                  }, null, 8, ["survey", "page", "css"])),
-                  (i(), q(T("sv-components-container"), {
-                    survey: t.value,
-                    container: "contentBottom",
-                    needRenderWrapper: !0
-                  }, null, 8, ["survey"]))
-                ], 14, Ut),
+                  c("div", {
+                    class: l(t.value.bodyCss),
+                    style: R({ maxWidth: t.value.renderedWidth }),
+                    id: a.value
+                  }, [
+                    (i(), q(T("sv-components-container"), {
+                      survey: t.value,
+                      container: "contentTop",
+                      needRenderWrapper: !0
+                    }, null, 8, ["survey"])),
+                    (i(), q(E, {
+                      key: g.value,
+                      survey: t.value,
+                      page: t.value.activePage,
+                      css: y.value
+                    }, null, 8, ["survey", "page", "css"])),
+                    (i(), q(T("sv-components-container"), {
+                      survey: t.value,
+                      container: "contentBottom",
+                      needRenderWrapper: !0
+                    }, null, 8, ["survey"]))
+                  ], 14, zt)
+                ]),
                 (i(), q(T("sv-components-container"), {
                   survey: t.value,
                   container: "right",
@@ -4401,11 +4419,11 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              m.value ? (i(), u("div", Kt, [
+              m.value ? (i(), u("div", Ut, [
                 c("div", {
                   innerHTML: I(),
                   class: l(t.value.completedCss)
-                }, null, 10, jt),
+                }, null, 10, Kt),
                 (i(), q(T("sv-components-container"), {
                   survey: t.value,
                   container: "completePage",
@@ -4416,12 +4434,12 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
                 key: 3,
                 class: l(t.value.completedBeforeCss),
                 innerHTML: t.value.processedCompletedBeforeHtml
-              }, null, 10, Qt)) : d("", !0),
+              }, null, 10, jt)) : d("", !0),
               t.value.state === "loading" ? (i(), u("div", {
                 key: 4,
                 class: l(t.value.loadingBodyCss),
                 innerHTML: t.value.processedLoadingHtml
-              }, null, 10, Gt)) : d("", !0),
+              }, null, 10, Qt)) : d("", !0),
               t.value.state === "empty" ? (i(), u("div", {
                 key: 5,
                 class: l(y.value.bodyEmpty)
@@ -4436,7 +4454,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 6);
     };
   }
-}), Xt = /* @__PURE__ */ h({
+}), Gt = /* @__PURE__ */ h({
   __name: "Notifier",
   props: {
     model: {}
@@ -4460,7 +4478,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ]);
     };
   }
-}), Jt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Yt = { key: 1 }, Zt = /* @__PURE__ */ h({
+}), Xt = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Jt = { key: 1 }, Yt = /* @__PURE__ */ h({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4488,11 +4506,11 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         onInput: o[1] || (o[1] = (e) => {
           s.question.onOtherValueInput(e);
         })
-      }, null, 46, Jt)),
-      s.question.isReadOnlyRenderDiv() ? (i(), u("div", Yt, S(s.question.otherValue), 1)) : d("", !0)
+      }, null, 46, Xt)),
+      s.question.isReadOnlyRenderDiv() ? (i(), u("div", Jt, S(s.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), xt = ["disabled", "value", "title"], ei = /* @__PURE__ */ h({
+}), Zt = ["disabled", "value", "title"], xt = /* @__PURE__ */ h({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4508,7 +4526,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: n[0] || (n[0] = (...t) => e.item.action && e.item.action(...t))
-    }, null, 42, xt)) : d("", !0);
+    }, null, 42, Zt)) : d("", !0);
   }
 }), ce = /* @__PURE__ */ h({
   __name: "PopupSurvey",
@@ -4607,7 +4625,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 6)) : d("", !0);
     };
   }
-}), si = ["innerHTML"], ni = /* @__PURE__ */ h({
+}), ei = ["innerHTML"], si = /* @__PURE__ */ h({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -4630,7 +4648,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       n.value ? (i(), u("div", {
         key: 0,
         innerHTML: t.value
-      }, null, 8, si)) : d("", !0),
+      }, null, 8, ei)) : d("", !0),
       e.value ? (i(), q(T(a.value), {
         key: 1,
         question: p.question,
@@ -4638,7 +4656,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), oi = /* @__PURE__ */ h({
+}), ni = /* @__PURE__ */ h({
   __name: "PopupModal",
   setup(r) {
     const s = j();
@@ -4680,7 +4698,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), ti = /* @__PURE__ */ h({
+}), oi = /* @__PURE__ */ h({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4692,7 +4710,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       class: l(o.remainingCharacterCounter)
     }, S(o.counter.remainingCharacterCounter), 3));
   }
-}), ii = /* @__PURE__ */ h({
+}), ti = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -4713,7 +4731,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       }, null, 8, ["element", "css"]);
     };
   }
-}), ri = /* @__PURE__ */ h({
+}), ii = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -4730,9 +4748,9 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       css: t.css
     }, null, 8, ["question", "css"]));
   }
-}), li = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), ai = [
-  li
-], pe = 440, ui = /* @__PURE__ */ h({
+}), ri = /* @__PURE__ */ c("use", { "xlink:href": "#icon-timercircle" }, null, -1), li = [
+  ri
+], pe = 440, ai = /* @__PURE__ */ h({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -4748,7 +4766,7 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
         key: 0,
         class: l(n.model.getProgressCss()),
         style: R({ strokeDasharray: pe, strokeDashoffset: o.value })
-      }, ai, 6)) : d("", !0),
+      }, li, 6)) : d("", !0),
       c("div", {
         class: l(n.model.textContainerCss)
       }, [
@@ -4767,17 +4785,17 @@ const tt = /* @__PURE__ */ ge(xo, [["render", ot]]), it = /* @__PURE__ */ c("use
       [M, n.model.isRunning && !n.model.showTimerAsClock]
     ]);
   }
-}), di = {}, mi = { class: "sd-loading-indicator" };
-function ci(r, s) {
+}), ui = {}, di = { class: "sd-loading-indicator" };
+function mi(r, s) {
   const o = v("sv-svg-icon");
-  return i(), u("div", mi, [
+  return i(), u("div", di, [
     b(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @__PURE__ */ h({
+const ci = /* @__PURE__ */ ge(ui, [["render", mi]]), pi = { key: 2 }, vi = /* @__PURE__ */ h({
   __name: "Header",
   props: {
     model: {},
@@ -4809,16 +4827,16 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
             key: p
           }, null, 8, ["model"]))), 128))
         ], 6)),
-        o.survey.isMobile ? (i(), u("div", vi, [
+        o.survey.isMobile ? (i(), u("div", pi, [
           b(t, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), qi = {
+}), yi = {
   key: 0,
   class: "sv-header__logo"
-}, gi = ["src", "width", "height", "alt"], hi = /* @__PURE__ */ h({
+}, qi = ["src", "width", "height", "alt"], gi = /* @__PURE__ */ h({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -4834,7 +4852,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
           class: "sv-header__cell-content",
           style: R(s.model.contentStyle)
         }, [
-          s.model.showLogo ? (i(), u("div", qi, [
+          s.model.showLogo ? (i(), u("div", yi, [
             c("div", {
               class: l(s.model.survey.logoClassNames)
             }, [
@@ -4845,7 +4863,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
                 height: s.model.survey.renderedLogoHeight,
                 alt: s.model.survey.locTitle.renderedHtml,
                 style: R({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-              }, null, 14, gi)
+              }, null, 14, qi)
             ], 2)
           ])) : d("", !0),
           s.model.showTitle ? (i(), u("div", {
@@ -4876,10 +4894,10 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       ], 6);
     };
   }
-}), Ci = { class: "sv-header--mobile" }, bi = {
+}), hi = { class: "sv-header--mobile" }, Ci = {
   key: 0,
   class: "sv-header__logo"
-}, ki = ["src", "width", "height", "alt"], fi = /* @__PURE__ */ h({
+}, bi = ["src", "width", "height", "alt"], ki = /* @__PURE__ */ h({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -4887,8 +4905,8 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
   setup(r) {
     return (s, o) => {
       const e = v("survey-element-title"), n = v("survey-string");
-      return i(), u("div", Ci, [
-        s.model.survey.hasLogo ? (i(), u("div", bi, [
+      return i(), u("div", hi, [
+        s.model.survey.hasLogo ? (i(), u("div", Ci, [
           c("div", {
             class: l(s.model.survey.logoClassNames)
           }, [
@@ -4899,7 +4917,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
               height: s.model.survey.renderedLogoHeight,
               alt: s.model.survey.locTitle.renderedHtml,
               style: R({ objectFit: s.model.survey.logoFit, width: s.model.survey.renderedStyleLogoWidth, height: s.model.survey.renderedStyleLogoHeight })
-            }, null, 14, ki)
+            }, null, 14, bi)
           ], 2)
         ])) : d("", !0),
         s.model.survey.hasTitle ? (i(), u("div", {
@@ -4929,7 +4947,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       ]);
     };
   }
-}), Ii = /* @__PURE__ */ h({
+}), fi = /* @__PURE__ */ h({
   __name: "Element",
   props: {
     element: {},
@@ -4970,7 +4988,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       }, null, 8, ["element", "css"])) : d("", !0)
     ], 6));
   }
-}), wi = /* @__PURE__ */ h({
+}), Ii = /* @__PURE__ */ h({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
@@ -4980,7 +4998,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
     const s = Se(), o = w(() => !!s.default);
     return (e, n) => o.value && !e.componentName ? Re(e.$slots, "default", { key: 0 }) : (i(), q(T(e.componentName), F(H({ key: 1 }, e.componentData)), null, 16));
   }
-}), Si = /* @__PURE__ */ h({
+}), wi = /* @__PURE__ */ h({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5004,7 +5022,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       ], 2);
     };
   }
-}), Ri = ["id"], Ti = /* @__PURE__ */ h({
+}), Si = ["id"], Ri = /* @__PURE__ */ h({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5026,14 +5044,14 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
           playsinline: "",
           id: s.question.videoId,
           class: l(s.question.cssClasses.video)
-        }, null, 10, Ri),
+        }, null, 10, Si),
         b(e, {
           item: s.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), $i = ["for", "aria-label"], Di = /* @__PURE__ */ h({
+}), Ti = ["for", "aria-label"], $i = /* @__PURE__ */ h({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -5061,12 +5079,12 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
         c("span", null, S(o.value.chooseButtonText), 1)
-      ], 10, $i)), [
+      ], 10, Ti)), [
         [a]
       ]);
     };
   }
-}), _i = ["onClick", "href", "title", "download"], Bi = ["src"], Li = ["onClick"], Ni = ["onClick", "href", "title", "download"], Pi = /* @__PURE__ */ h({
+}), Di = ["onClick", "href", "title", "download"], _i = ["src"], Bi = ["onClick"], Li = ["onClick", "href", "title", "download"], Ni = /* @__PURE__ */ h({
   __name: "FilePreview",
   props: {
     question: {}
@@ -5092,7 +5110,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
               title: n.name,
               download: n.name,
               style: R({ width: s.question.imageWidth })
-            }, S(n.name), 13, _i)
+            }, S(n.name), 13, Di)
           ], 2)) : d("", !0),
           c("div", {
             class: l(s.question.getImageWrapperCss(n))
@@ -5105,7 +5123,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
                 width: s.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, Bi)) : d("", !0),
+            }, null, 12, _i)) : d("", !0),
             s.question.defaultImage(n) ? (i(), q(e, {
               key: 1,
               iconName: s.question.cssClasses.defaultImageIconId,
@@ -5127,7 +5145,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
                 iconName: s.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, Li)) : d("", !0)
+            ], 10, Bi)) : d("", !0)
           ], 2),
           n.name && s.question.cssClasses.fileSignBottom ? (i(), u("div", {
             key: 1,
@@ -5139,7 +5157,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
               title: n.name,
               download: n.name,
               style: R({ width: s.question.imageWidth })
-            }, S(n.name), 13, Ni)
+            }, S(n.name), 13, Li)
           ], 2)) : d("", !0)
         ], 2)), [
           [M, n && s.question.isPreviewVisible(t)]
@@ -5147,7 +5165,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       ], 2)) : d("", !0);
     };
   }
-}), Ai = /* @__PURE__ */ h({
+}), Pi = /* @__PURE__ */ h({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -5171,7 +5189,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
       ], 2);
     };
   }
-}), Mi = ["title"], Hi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Wi = ["title"], Ei = /* @__PURE__ */ h({
+}), Ai = ["title"], Mi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "disabled", "value"], Hi = ["title"], Wi = /* @__PURE__ */ h({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -5208,7 +5226,7 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
           class: l(o.value.css.control),
           "onUpdate:modelValue": t[0] || (t[0] = (m) => e.value = m),
           value: o.value.value
-        }, null, 10, Hi), [
+        }, null, 10, Mi), [
           [se, e.value]
         ]),
         c("div", {
@@ -5228,12 +5246,12 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
             b(p, {
               locString: o.value.caption
             }, null, 8, ["locString"])
-          ], 10, Wi)) : d("", !0)
+          ], 10, Hi)) : d("", !0)
         ], 2)
-      ], 10, Mi);
+      ], 10, Ai);
     };
   }
-}), Vi = ["src", "width", "height", "alt"], Oi = /* @__PURE__ */ h({
+}), Ei = ["src", "width", "height", "alt"], Vi = /* @__PURE__ */ h({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
@@ -5241,23 +5259,27 @@ const pi = /* @__PURE__ */ ge(di, [["render", ci]]), vi = { key: 2 }, yi = /* @_
   },
   setup(r) {
     const s = r, o = w(() => s.data), e = Q(() => o.value.locLogo);
-    return (n, t) => (i(), u("img", {
-      class: l(o.value.css.logoImage),
-      src: f(e),
-      width: o.value.renderedLogoWidth,
-      height: o.value.renderedLogoHeight,
-      alt: o.value.locTitle.renderedHtml,
-      style: R({
-        objectFit: o.value.logoFit,
-        width: o.value.renderedStyleLogoWidth,
-        height: o.value.renderedStyleLogoHeight
-      })
-    }, null, 14, Vi));
+    return (n, t) => (i(), u("div", {
+      class: l(o.value.logoClassNames)
+    }, [
+      c("img", {
+        class: l(o.value.css.logoImage),
+        src: f(e),
+        width: o.value.renderedLogoWidth,
+        height: o.value.renderedLogoHeight,
+        alt: o.value.locTitle.renderedHtml,
+        style: R({
+          objectFit: o.value.logoFit,
+          width: o.value.renderedStyleLogoWidth,
+          height: o.value.renderedStyleLogoHeight
+        })
+      }, null, 14, Ei)
+    ], 2));
   }
 });
 Oe.platform = "vue3";
-function Fi(r) {
-  r.component("SurveyComponent", me), r.component("PopupSurveyComponent", ce), r.component("survey", me), r.component("popup-survey", ce), r.component("survey-header", je), r.component("sv-logo-image", Oi), r.component("survey-page", Ke), r.component("survey-row", Qe), r.component("survey-question", Je), r.component("survey-panel", es), r.component("survey-element-header", ss), r.component("survey-string", ns), r.component("sv-string-viewer", is), r.component("sv-string-editor", ls), r.component("sv-skeleton", us), r.component("survey-text", cs), r.component("survey-text-input", qs), r.component("survey-checkbox", ks), r.component("survey-checkbox-item", Ss), r.component("survey-radiogroup", Rs), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ns), r.component("survey-html", As), r.component("survey-image", Es), r.component("survey-expression", Vs), r.component("survey-file", zs), r.component("sv-file-choose-btn", Di), r.component("sv-file-clean-btn", Si), r.component("sv-file-preview", Pi), r.component("sv-file-video", Ti), r.component("survey-imagepicker", Ks), r.component("survey-imagepicker-item", Js), r.component("survey-comment", xs), r.component("survey-dropdown", en), r.component("sv-dropdown-select", tn), r.component("sv-dropdown-option-item", ln), r.component("sv-dropdown", pn), r.component("survey-tagbox", vn), r.component("sv-tagbox", hn), r.component("sv-tagbox-item", In), r.component("sv-tagbox-filter", kn), r.component("survey-ranking", wn), r.component("survey-ranking-item", _n), r.component("survey-rating", Nn), r.component("sv-rating-item", An), r.component("sv-rating-item-smiley", Hn), r.component("sv-rating-item-star", En), r.component("sv-rating-dropdown", Un), r.component("sv-rating-dropdown-item", zn), r.component("survey-boolean", jn), r.component("sv-boolean-radio", Qn), r.component("sv-boolean-radio-item", Jn), r.component("sv-boolean-checkbox", so), r.component("survey-multipletext", no), r.component("survey-multipletext-item", to), r.component("survey-matrix", po), r.component("survey-matrixdropdown", vo), r.component("survey-matrixtable", ho), r.component("survey-matrixheaderrequired", bo), r.component("survey-matrixcell", fo), r.component("survey-matrixdynamic", Io), r.component("sv-matrix-remove-button", So), r.component("sv-matrix-drag-drop-icon", To), r.component("sv-matrix-detail-button", Do), r.component("survey-paneldynamic", _o), r.component("survey-paneldynamicprogress", Bo), r.component("survey-paneldynamicprogress-v2", Lo), r.component("sv-paneldynamic-add-btn", No), r.component("sv-paneldynamic-next-btn", Ao), r.component("sv-paneldynamic-prev-btn", Ho), r.component("sv-paneldynamic-remove-btn", Wo), r.component("sv-paneldynamic-progress-text", Eo), r.component("sv-components-container", Mt), r.component("sv-progress-buttons", Vt), r.component("sv-progress-toc", Ot), r.component("sv-progress-pages", x), r.component("sv-progress-questions", x), r.component("sv-progress-correctquestions", x), r.component("sv-progress-requiredquestions", x), r.component("survey-errors", Oo), r.component("survey-question-comment", Uo), r.component("survey-element-title", Ko), r.component("survey-element-title-content", Xo), r.component("sv-title-actions", Zo), r.component("sv-brand-info", tt), r.component("sv-svg-icon", lt), r.component("sv-action-bar", at), r.component("sv-action", mt), r.component("sv-action-bar-item", vt), r.component("sv-action-bar-item-dropdown", gt), r.component("sv-action-bar-separator", ht), r.component("sv-list", ft), r.component("sv-list-item", St), r.component("sv-popup", Rt), r.component("sv-popup-container", Nt), r.component("popup-pointer", Pt), r.component("sv-notifier", Xt), r.component("survey-other-choice", Zt), r.component("sv-nav-btn", ei), r.component("survey-customwidget", ni), r.component("survey-popup-modal", oi), r.component("sv-character-counter", ti), r.component("survey-composite", ii), r.component("survey-custom", ri), r.component("sv-timerpanel", ui), r.component("sv-loading-indicator", pi), r.component("sv-header", yi), r.component("sv-header-cell", hi), r.component("sv-header-mobile", fi), r.component("sv-template-renderer", wi), r.component("survey-element", Ii), r.component("survey-buttongroup", Ai), r.component("sv-button-group-item", Ei), r.directive("key2click", {
+function Oi(r) {
+  r.component("SurveyComponent", me), r.component("PopupSurveyComponent", ce), r.component("survey", me), r.component("popup-survey", ce), r.component("survey-header", je), r.component("sv-logo-image", Vi), r.component("survey-page", Ke), r.component("survey-row", Qe), r.component("survey-question", Je), r.component("survey-panel", es), r.component("survey-element-header", ss), r.component("survey-string", ns), r.component("sv-string-viewer", is), r.component("sv-string-editor", ls), r.component("sv-skeleton", us), r.component("survey-text", cs), r.component("survey-text-input", qs), r.component("survey-checkbox", ks), r.component("survey-checkbox-item", Ss), r.component("survey-radiogroup", Rs), r.component("survey-radiogroup-item", Ds), r.component("survey-signaturepad", Ns), r.component("survey-html", As), r.component("survey-image", Es), r.component("survey-expression", Vs), r.component("survey-file", zs), r.component("sv-file-choose-btn", $i), r.component("sv-file-clean-btn", wi), r.component("sv-file-preview", Ni), r.component("sv-file-video", Ri), r.component("survey-imagepicker", Ks), r.component("survey-imagepicker-item", Js), r.component("survey-comment", xs), r.component("survey-dropdown", en), r.component("sv-dropdown-select", tn), r.component("sv-dropdown-option-item", ln), r.component("sv-dropdown", cn), r.component("survey-tagbox", pn), r.component("sv-tagbox", qn), r.component("sv-tagbox-item", kn), r.component("sv-tagbox-filter", Cn), r.component("survey-ranking", fn), r.component("survey-ranking-item", $n), r.component("survey-rating", Bn), r.component("sv-rating-item", Nn), r.component("sv-rating-item-smiley", An), r.component("sv-rating-item-star", Hn), r.component("sv-rating-dropdown", Fn), r.component("sv-rating-dropdown-item", On), r.component("survey-boolean", Un), r.component("sv-boolean-radio", Kn), r.component("sv-boolean-radio-item", Gn), r.component("sv-boolean-checkbox", xn), r.component("survey-multipletext", eo), r.component("survey-multipletext-item", no), r.component("survey-matrix", mo), r.component("survey-matrixdropdown", co), r.component("survey-matrixtable", qo), r.component("survey-matrixheaderrequired", ho), r.component("survey-matrixcell", bo), r.component("survey-matrixdynamic", ko), r.component("sv-matrix-remove-button", Io), r.component("sv-matrix-drag-drop-icon", So), r.component("sv-matrix-detail-button", To), r.component("survey-paneldynamic", $o), r.component("survey-paneldynamicprogress", Do), r.component("survey-paneldynamicprogress-v2", _o), r.component("sv-paneldynamic-add-btn", Bo), r.component("sv-paneldynamic-next-btn", No), r.component("sv-paneldynamic-prev-btn", Ao), r.component("sv-paneldynamic-remove-btn", Mo), r.component("sv-paneldynamic-progress-text", Ho), r.component("sv-components-container", Pt), r.component("sv-progress-buttons", Wt), r.component("sv-progress-toc", Et), r.component("sv-progress-pages", x), r.component("sv-progress-questions", x), r.component("sv-progress-correctquestions", x), r.component("sv-progress-requiredquestions", x), r.component("survey-errors", Eo), r.component("survey-question-comment", Fo), r.component("survey-element-title", zo), r.component("survey-element-title-content", Qo), r.component("sv-title-actions", Jo), r.component("sv-brand-info", nt), r.component("sv-svg-icon", it), r.component("sv-action-bar", rt), r.component("sv-action", ut), r.component("sv-action-bar-item", ct), r.component("sv-action-bar-item-dropdown", yt), r.component("sv-action-bar-separator", qt), r.component("sv-list", bt), r.component("sv-list-item", It), r.component("sv-popup", wt), r.component("sv-popup-container", Bt), r.component("popup-pointer", Lt), r.component("sv-notifier", Gt), r.component("survey-other-choice", Yt), r.component("sv-nav-btn", xt), r.component("survey-customwidget", si), r.component("survey-popup-modal", ni), r.component("sv-character-counter", oi), r.component("survey-composite", ti), r.component("survey-custom", ii), r.component("sv-timerpanel", ai), r.component("sv-loading-indicator", ci), r.component("sv-header", vi), r.component("sv-header-cell", gi), r.component("sv-header-mobile", ki), r.component("sv-template-renderer", Ii), r.component("survey-element", fi), r.component("survey-buttongroup", Pi), r.component("sv-button-group-item", Wi), r.directive("key2click", {
     mounted: function(s, o) {
       const e = { ...o.value };
       if (e.disableTabStop) {
@@ -5272,13 +5294,13 @@ function Fi(r) {
     }
   });
 }
-const ji = {
+const Ki = {
   install(r) {
-    Fi(r);
+    Oi(r);
   }
 };
 export {
-  ji as surveyPlugin,
+  Ki as surveyPlugin,
   L as useBase,
   Q as useLocString,
   A as useQuestion