survey-vue3-ui 1.9.116 → 1.9.117

package/survey-vue3-ui.es.js

@@ -1,5 +1,5 @@
-import { shallowReactive as ce, watch as K, onBeforeUnmount as j, onMounted as A, ref as $, shallowRef as O, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as J, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as S, renderList as B, createBlock as y, createElementVNode as p, normalizeStyle as w, onUnmounted as W, withDirectives as P, resolveDynamicComponent as N, vShow as _, toDisplayString as I, vModelCheckbox as U, vModelRadio as Z, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
-import { Base as fe, RendererFactory as Y, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Te, ActionDropdownViewModel as Re, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as _e, doKey2ClickBlur as Ae } from "survey-core";
+import { shallowReactive as ce, watch as K, onBeforeUnmount as j, onMounted as _, ref as $, shallowRef as O, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as J, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as l, createVNode as C, createCommentVNode as d, Fragment as S, renderList as B, createBlock as y, createElementVNode as p, normalizeStyle as w, onUnmounted as W, withDirectives as P, resolveDynamicComponent as N, vShow as A, toDisplayString as I, vModelCheckbox as U, vModelRadio as Z, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as Y, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Te, ActionDropdownViewModel as Re, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as _e } from "survey-core";
 fe.createPropertiesHash = () => ce({});
 function Ee(r) {
   return !r || r.__vueImplemented ? !1 : (r.createArrayCoreHandler = (n, o) => {
@@ -40,7 +40,7 @@ function L(r, n, o) {
   });
 }
 function H(r, n, o, e) {
-  L(() => r.question, o, e), A(() => {
+  L(() => r.question, o, e), _(() => {
     r.question && r.question.afterRenderQuestionElement(n.value);
   }), j(() => {
     r.question.beforeDestroyQuestionElement(n.value);
@@ -77,7 +77,7 @@ const We = /* @__PURE__ */ g({
     const n = r, o = $(null);
     L(() => n.page);
     const e = R(() => n.page._showDescription), s = R(() => n.page.rows);
-    return A(() => {
+    return _(() => {
       n.survey && n.survey.afterRenderPage(o.value);
     }), J(() => {
       n.survey.afterRenderPage(o.value);
@@ -118,7 +118,7 @@ const We = /* @__PURE__ */ g({
   },
   setup(r) {
     const n = r, o = $(), e = z(() => n.survey.locLogo);
-    return A(() => {
+    return _(() => {
       var s = o.value;
       s && n.survey && n.survey.afterRenderHeader(s);
     }), (s, i) => {
@@ -198,7 +198,7 @@ const We = /* @__PURE__ */ g({
     const n = r, o = R(
       () => n.row.visibleElements
     ), e = $();
-    return L(() => n.row), A(() => {
+    return L(() => n.row), _(() => {
       if (n.row && !n.row.isNeedRender) {
         const s = e.value;
         setTimeout(() => {
@@ -323,7 +323,7 @@ const We = /* @__PURE__ */ g({
             }, null, 8, ["locString"])
           ], 2)) : d("", !0)
         ], 2), [
-          [_, m.element.isPanel || !m.element.isCollapsed]
+          [A, m.element.isPanel || !m.element.isCollapsed]
         ]),
         !m.element.isPanel && m.element.hasTitleOnBottom ? (t(), y(f, {
           key: 2,
@@ -351,7 +351,7 @@ const We = /* @__PURE__ */ g({
   },
   setup(r) {
     const n = r, o = $(!1), e = $(null), s = R(() => n.question.rows), i = R(() => n.question.survey), a = R(() => o.value);
-    return L(() => n.question), A(() => {
+    return L(() => n.question), _(() => {
       n.question.survey && n.question.survey.afterRenderPanel(n.question, e.value), o.value = n.question.isCollapsed;
       const c = n.question;
       c.stateChangedCallback = () => {
@@ -431,7 +431,7 @@ const We = /* @__PURE__ */ g({
             locString: e.element.locDescription
           }, null, 8, ["locString"])
         ], 2)), [
-          [_, e.element.hasDescription]
+          [A, e.element.hasDescription]
         ]) : d("", !0),
         e.element.additionalTitleToolbar ? (t(), y(c, {
           key: 1,
@@ -922,7 +922,7 @@ const We = /* @__PURE__ */ g({
             locString: e.question.locPlaceholder
           }, null, 8, ["locString"])
         ], 2), [
-          [_, e.question.needShowPlaceholder()]
+          [A, e.question.needShowPlaceholder()]
         ]),
         p("div", null, [
           e.question.backgroundImage ? (t(), u("img", {
@@ -977,7 +977,7 @@ const We = /* @__PURE__ */ g({
       innerHTML: k(e)
     }, null, 10, Ds));
   }
-}), Ms = ["src", "alt", "width", "height"], Ns = ["src", "width", "height"], Hs = ["src", "width", "height"], _s = /* @__PURE__ */ g({
+}), Ms = ["src", "alt", "width", "height"], Ns = ["src", "width", "height"], Hs = ["src", "width", "height"], As = /* @__PURE__ */ g({
   __name: "Image",
   props: {
     question: {}
@@ -1012,7 +1012,7 @@ const We = /* @__PURE__ */ g({
             s.question.onErrorHandler();
           })
         }, null, 46, Ms)), [
-          [_, k(e) && !s.question.contentNotLoaded]
+          [A, k(e) && !s.question.contentNotLoaded]
         ]) : d("", !0),
         s.question.renderedMode === "video" ? P((t(), u("video", {
           key: 1,
@@ -1033,7 +1033,7 @@ const We = /* @__PURE__ */ g({
             s.question.onErrorHandler();
           })
         }, null, 46, Ns)), [
-          [_, k(e) && !s.question.contentNotLoaded]
+          [A, k(e) && !s.question.contentNotLoaded]
         ]) : d("", !0),
         s.question.renderedMode === "youtube" ? (t(), u("iframe", {
           key: 2,
@@ -1059,7 +1059,7 @@ const We = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), As = /* @__PURE__ */ g({
+}), _s = /* @__PURE__ */ g({
   __name: "Expression",
   props: {
     question: {}
@@ -1539,7 +1539,7 @@ const sn = /* @__PURE__ */ g({
       disabled: !e.item.isEnabled
     }, I(k(o)), 9, nn));
   }
-}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
+}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "placeholder"], an = ["tabindex"], un = ["id"], dn = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1576,7 +1576,7 @@ const sn = /* @__PURE__ */ g({
     }, f = R(
       () => n.question.showSelectedItemLocText
     ), M = R(() => n.question.selectedItemLocText);
-    return L(() => e.value), J(v), A(v), (h, D) => {
+    return L(() => e.value), J(v), _(v), (h, D) => {
       const E = q("survey-string"), V = q("sv-svg-icon"), G = q("sv-popup");
       return t(), u("div", {
         class: l(h.question.cssClasses.selectWrapper),
@@ -1586,7 +1586,7 @@ const sn = /* @__PURE__ */ g({
           key: 0,
           id: h.question.inputId,
           disabled: h.question.isInputReadOnly ? !0 : null,
-          tabindex: e.value.inputReadOnly ? void 0 : 0,
+          tabindex: e.value.noTabIndex ? void 0 : 0,
           onKeydown: c,
           onBlur: m,
           class: l(h.question.getControlClass()),
@@ -1635,8 +1635,8 @@ const sn = /* @__PURE__ */ g({
               inputmode: e.value.inputMode,
               role: e.value.filterStringEnabled ? h.question.ariaRole : void 0,
               id: h.question.getInputId(),
-              tabindex: e.value.inputReadOnly ? void 0 : -1,
-              readonly: e.value.searchEnabled ? void 0 : !0,
+              tabindex: e.value.noTabIndex ? void 0 : -1,
+              readonly: e.value.filterReadOnly ? !0 : void 0,
               "aria-expanded": h.question.ariaExpanded === null ? void 0 : h.question.ariaExpanded === "true",
               "aria-controls": e.value.listElementId,
               "aria-label": h.question.a11y_input_ariaLabel,
@@ -1651,7 +1651,8 @@ const sn = /* @__PURE__ */ g({
           h.question.allowClear && h.question.cssClasses.cleanButtonIconId ? P((t(), u("div", {
             key: 1,
             class: l(h.question.cssClasses.cleanButton),
-            onClick: a
+            onClick: a,
+            tabindex: h.question.showClearButton ? 0 : -1
           }, [
             C(V, {
               class: l(h.question.cssClasses.cleanButtonSvg),
@@ -1659,8 +1660,8 @@ const sn = /* @__PURE__ */ g({
               title: h.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
-          ], 2)), [
-            [_, h.question.showClearButton]
+          ], 10, an)), [
+            [A, h.question.showClearButton]
           ]) : d("", !0)
         ], 42, tn)),
         h.question.isReadOnly ? (t(), u("div", {
@@ -1674,14 +1675,15 @@ const sn = /* @__PURE__ */ g({
             locString: h.question.selectedItemLocText
           }, null, 8, ["locString"])) : d("", !0),
           p("div", null, I(h.question.readOnlyText), 1)
-        ], 10, an)) : (t(), y(G, {
+        ], 10, un)) : (t(), y(G, {
           key: 1,
           model: h.question.dropdownListModel.popupModel
         }, null, 8, ["model"])),
         h.question.cssClasses.chevronButtonIconId ? (t(), u("div", {
           key: 3,
           class: l(h.question.cssClasses.chevronButton),
-          onPointerdown: i
+          onPointerdown: i,
+          "aria-hidden": "true"
         }, [
           C(V, {
             class: l(h.question.cssClasses.chevronButtonSvg),
@@ -1692,7 +1694,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), dn = /* @__PURE__ */ g({
+}), mn = /* @__PURE__ */ g({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1714,7 +1716,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), mn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], cn = ["id"], pn = /* @__PURE__ */ g({
+}), cn = ["id", "tabindex", "disabled", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], pn = ["tabindex"], vn = ["id"], qn = /* @__PURE__ */ g({
   __name: "Tagbox",
   props: {
     question: {}
@@ -1748,7 +1750,7 @@ const sn = /* @__PURE__ */ g({
         m.question.isReadOnly ? d("", !0) : (t(), u("div", {
           key: 0,
           id: m.question.inputId,
-          tabindex: o.value.inputReadOnly ? void 0 : 0,
+          tabindex: o.value.noTabIndex ? void 0 : 0,
           disabled: m.question.isInputReadOnly ? !0 : null,
           onKeydown: a,
           onBlur: c,
@@ -1779,7 +1781,8 @@ const sn = /* @__PURE__ */ g({
           m.question.allowClear && m.question.cssClasses.cleanButtonIconId ? P((t(), u("div", {
             key: 0,
             class: l(m.question.cssClasses.cleanButton),
-            onClick: i
+            onClick: i,
+            tabindex: m.question.showClearButton ? 0 : -1
           }, [
             C(M, {
               class: l(m.question.cssClasses.cleanButtonSvg),
@@ -1787,10 +1790,10 @@ const sn = /* @__PURE__ */ g({
               title: m.question.clearCaption,
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
-          ], 2)), [
-            [_, m.question.showClearButton]
+          ], 10, pn)), [
+            [A, m.question.showClearButton]
           ]) : d("", !0)
-        ], 42, mn)),
+        ], 42, cn)),
         m.question.isReadOnly ? (t(), u("div", {
           key: 2,
           disabled: "",
@@ -1798,7 +1801,7 @@ const sn = /* @__PURE__ */ g({
           class: l(m.question.getControlClass())
         }, [
           p("div", null, I(m.question.readOnlyText), 1)
-        ], 10, cn)) : (t(), y(h, {
+        ], 10, vn)) : (t(), y(h, {
           key: 1,
           model: o.value.popupModel
         }, null, 8, ["model"])),
@@ -1816,7 +1819,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
+}), yn = { style: { visibility: "hidden" } }, gn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-activedescendant", "id", "readonly", "size"], hn = /* @__PURE__ */ g({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1855,7 +1858,7 @@ const sn = /* @__PURE__ */ g({
             key: 1,
             class: l(a.question.cssClasses.hintSuffix)
           }, [
-            p("span", vn, I(a.model.inputStringRendered), 1),
+            p("span", yn, I(a.model.inputStringRendered), 1),
             p("span", null, I(a.model.hintStringSuffix), 1)
           ], 2)) : d("", !0),
           P(p("input", {
@@ -1873,20 +1876,20 @@ const sn = /* @__PURE__ */ g({
             "aria-labelledby": a.question.a11y_input_ariaLabelledBy,
             "aria-activedescendant": a.model.ariaActivedescendant,
             id: a.question.getInputId(),
-            readonly: a.model.searchEnabled ? void 0 : !0,
+            readonly: a.model.filterReadOnly ? !0 : void 0,
             size: a.model.inputStringRendered ? void 0 : 1,
             onChange: o,
             onKeydown: e,
             onBlur: s,
             onFocus: i
-          }, null, 42, qn), [
+          }, null, 42, gn), [
             [qe, a.model.inputStringRendered]
           ])
         ], 2)
       ], 2);
     };
   }
-}), gn = { class: "sv-tagbox__item-text" }, hn = /* @__PURE__ */ g({
+}), Cn = { class: "sv-tagbox__item-text" }, bn = /* @__PURE__ */ g({
   __name: "TagboxItem",
   props: {
     question: {},
@@ -1902,7 +1905,7 @@ const sn = /* @__PURE__ */ g({
         class: "sv-tagbox__item",
         key: e.item.key
       }, [
-        p("div", gn, [
+        p("div", Cn, [
           C(i, {
             locString: e.item.locText
           }, null, 8, ["locString"])
@@ -1920,7 +1923,7 @@ const sn = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Cn = /* @__PURE__ */ g({
+}), kn = /* @__PURE__ */ g({
   __name: "Ranking",
   props: {
     question: {}
@@ -1994,10 +1997,10 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), bn = ["tabindex", "data-sv-drop-target-ranking-item"], kn = {
+}), fn = ["tabindex", "data-sv-drop-target-ranking-item"], In = {
   tabindex: "-1",
   style: { outline: "none" }
-}, fn = ["xlink:href"], In = ["xlink:href"], wn = ["xlink:href"], Sn = /* @__PURE__ */ g({
+}, wn = ["xlink:href"], Sn = ["xlink:href"], Tn = ["xlink:href"], Rn = /* @__PURE__ */ g({
   __name: "RankingItem",
   props: {
     index: {},
@@ -2029,7 +2032,7 @@ const sn = /* @__PURE__ */ g({
           );
         })
       }, [
-        p("div", kn, [
+        p("div", In, [
           p("div", {
             class: l(o.cssClasses.itemGhostNode)
           }, null, 2),
@@ -2044,14 +2047,14 @@ const sn = /* @__PURE__ */ g({
               }, [
                 p("use", {
                   "xlink:href": o.question.dragDropSvgIcon
-                }, null, 8, fn)
+                }, null, 8, wn)
               ], 2)),
               (t(), u("svg", {
                 class: l(o.question.getIconFocusCss())
               }, [
                 p("use", {
                   "xlink:href": o.question.arrowsSvgIcon
-                }, null, 8, In)
+                }, null, 8, Sn)
               ], 2))
             ], 2),
             !o.unrankedItem && o.indexText ? (t(), u("div", {
@@ -2064,7 +2067,7 @@ const sn = /* @__PURE__ */ g({
               (t(), u("svg", null, [
                 p("use", {
                   "xlink:href": o.question.dashSvgIcon
-                }, null, 8, wn)
+                }, null, 8, Tn)
               ]))
             ], 2)),
             p("div", {
@@ -2074,13 +2077,13 @@ const sn = /* @__PURE__ */ g({
             ], 2)
           ], 2)
         ])
-      ], 42, bn);
+      ], 42, fn);
     };
   }
-}), Tn = { role: "radiogroup" }, Rn = /* @__PURE__ */ p("legend", {
+}), $n = { role: "radiogroup" }, Bn = /* @__PURE__ */ p("legend", {
   role: "presentation",
   class: "sv-hidden"
-}, null, -1), $n = /* @__PURE__ */ g({
+}, null, -1), Ln = /* @__PURE__ */ g({
   __name: "Rating",
   props: {
     question: {}
@@ -2096,8 +2099,8 @@ const sn = /* @__PURE__ */ g({
         ref_key: "root",
         ref: o
       }, [
-        p("fieldset", Tn, [
-          Rn,
+        p("fieldset", $n, [
+          Bn,
           s.question.hasMinLabel ? (t(), u("span", {
             key: 0,
             class: l(s.question.cssClasses.minText)
@@ -2124,7 +2127,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Bn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Ln = /* @__PURE__ */ g({
+}), Dn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Pn = /* @__PURE__ */ g({
   __name: "RatingItem",
   props: {
     question: {},
@@ -2152,7 +2155,7 @@ const sn = /* @__PURE__ */ g({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Bn),
+        }, null, 8, Dn),
         p("span", {
           class: l(o.question.cssClasses.itemText)
         }, [
@@ -2163,7 +2166,7 @@ const sn = /* @__PURE__ */ g({
       ], 34);
     };
   }
-}), Dn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Pn = /* @__PURE__ */ g({
+}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ g({
   __name: "RatingItemSmiley",
   props: {
     question: {},
@@ -2194,7 +2197,7 @@ const sn = /* @__PURE__ */ g({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Dn),
+        }, null, 8, Mn),
         C(s, {
           iconName: o.question.getItemSmileyIconName(o.item.itemValue),
           size: "auto",
@@ -2203,7 +2206,7 @@ const sn = /* @__PURE__ */ g({
       ], 38);
     };
   }
-}), Mn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Nn = /* @__PURE__ */ g({
+}), Hn = ["name", "id", "value", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ g({
   __name: "RatingItemStar",
   props: {
     question: {},
@@ -2233,7 +2236,7 @@ const sn = /* @__PURE__ */ g({
           "aria-label": o.question.ariaLabel,
           "aria-invalid": o.question.ariaInvalid,
           "aria-describedby": o.question.ariaDescribedBy
-        }, null, 8, Mn),
+        }, null, 8, Hn),
         C(s, {
           class: l("sv-star"),
           iconName: o.question.itemStarIcon,
@@ -2255,7 +2258,7 @@ Y.Instance.registerRenderer(
   "dropdown",
   "sv-rating-dropdown"
 );
-const Hn = /* @__PURE__ */ g({
+const _n = /* @__PURE__ */ g({
   __name: "RatingDropdown",
   props: {
     question: {}
@@ -2273,7 +2276,7 @@ const Hn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), _n = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], An = /* @__PURE__ */ g({
+}), En = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Wn = /* @__PURE__ */ g({
   __name: "BooleanSwitch",
   props: {
     question: {}
@@ -2311,7 +2314,7 @@ const Hn = /* @__PURE__ */ g({
             "aria-label": i.question.ariaLabel,
             "aria-invalid": i.question.ariaInvalid,
             "aria-describedby": i.question.ariaDescribedBy
-          }, null, 10, _n), [
+          }, null, 10, En), [
             [U, i.question.booleanValue]
           ]),
           p("div", {
@@ -2365,7 +2368,7 @@ Y.Instance.registerRenderer(
   "radio",
   "sv-boolean-radio"
 );
-const En = /* @__PURE__ */ g({
+const Vn = /* @__PURE__ */ g({
   __name: "BooleanRadio",
   props: {
     question: {}
@@ -2399,7 +2402,7 @@ const En = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Wn = ["name", "value", "checked", "aria-describedby", "disabled"], Vn = ["xlink:href"], Fn = /* @__PURE__ */ g({
+}), Fn = ["name", "value", "checked", "aria-describedby", "disabled"], On = ["xlink:href"], zn = /* @__PURE__ */ g({
   __name: "BooleanRadioItem",
   props: {
     question: {},
@@ -2429,7 +2432,7 @@ const En = /* @__PURE__ */ g({
             disabled: e.question.isInputReadOnly,
             class: l(e.question.cssClasses.itemRadioControl),
             onChange: o
-          }, null, 42, Wn),
+          }, null, 42, Fn),
           e.question.cssClasses.materialRadioDecorator ? (t(), u("span", {
             key: 0,
             class: l(e.question.cssClasses.materialRadioDecorator)
@@ -2440,7 +2443,7 @@ const En = /* @__PURE__ */ g({
             }, [
               p("use", {
                 "xlink:href": e.question.itemSvgIcon
-              }, null, 8, Vn)
+              }, null, 8, On)
             ], 2)) : d("", !0)
           ], 2)) : d("", !0),
           p("span", {
@@ -2452,13 +2455,13 @@ const En = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), On = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], zn = ["xlink:href"], Un = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Kn = ["id"];
+}), Un = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Kn = ["xlink:href"], jn = /* @__PURE__ */ p("span", { class: "check" }, null, -1), Qn = ["id"];
 Y.Instance.registerRenderer(
   "boolean",
   "checkbox",
   "sv-boolean-checkbox"
 );
-const jn = /* @__PURE__ */ g({
+const Gn = /* @__PURE__ */ g({
   __name: "BooleanCheckbox",
   props: {
     question: {},
@@ -2493,7 +2496,7 @@ const jn = /* @__PURE__ */ g({
               "aria-label": e.question.ariaLabel,
               "aria-invalid": e.question.ariaInvalid,
               "aria-describedby": e.question.ariaDescribedBy
-            }, null, 10, On), [
+            }, null, 10, Un), [
               [U, e.question.booleanValue]
             ]),
             p("span", {
@@ -2505,9 +2508,9 @@ const jn = /* @__PURE__ */ g({
               }, [
                 p("use", {
                   "xlink:href": e.question.svgIcon
-                }, null, 8, zn)
+                }, null, 8, Kn)
               ], 2)) : d("", !0),
-              Un
+              jn
             ], 2),
             e.question.isLabelRendered ? (t(), u("span", {
               key: 0,
@@ -2524,7 +2527,7 @@ const jn = /* @__PURE__ */ g({
                 element: e.question,
                 css: e.css
               }, null, 8, ["element", "css"])) : d("", !0)
-            ], 10, Kn)) : d("", !0)
+            ], 10, Qn)) : d("", !0)
           ], 2),
           e.question.canRenderLabelDescription ? (t(), u("div", {
             key: 0,
@@ -2538,7 +2541,7 @@ const jn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Qn = /* @__PURE__ */ g({
+}), Xn = /* @__PURE__ */ g({
   __name: "Multipletext",
   props: {
     question: {}
@@ -2575,7 +2578,7 @@ const jn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Gn = { key: 1 }, Xn = /* @__PURE__ */ g({
+}), Jn = { key: 1 }, Yn = /* @__PURE__ */ g({
   __name: "MultipletextItem",
   props: {
     question: {},
@@ -2604,7 +2607,7 @@ const jn = /* @__PURE__ */ g({
           C(a, {
             locString: e.value.locTitle
           }, null, 8, ["locString"]),
-          e.value.editor.isRequireTextAfterTitle ? (t(), u("span", Gn, "\xA0")) : d("", !0),
+          e.value.editor.isRequireTextAfterTitle ? (t(), u("span", Jn, "\xA0")) : d("", !0),
           e.value.editor.isRequireTextAfterTitle ? (t(), u("span", {
             key: 2,
             "aria-hidden": "true",
@@ -2623,7 +2626,7 @@ const jn = /* @__PURE__ */ g({
       ], 2));
     };
   }
-}), Jn = { class: "sv-hidden" }, Yn = { key: 0 }, Zn = { key: 0 }, xn = ["onClick"], eo = ["data-responsive-title", "onClick"], so = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], no = ["xlink:href"], oo = /* @__PURE__ */ g({
+}), Zn = { class: "sv-hidden" }, xn = { key: 0 }, eo = { key: 0 }, so = ["onClick"], no = ["data-responsive-title", "onClick"], oo = ["name", "onUpdate:modelValue", "value", "disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], to = ["xlink:href"], io = /* @__PURE__ */ g({
   __name: "Matrix",
   props: {
     question: {}
@@ -2654,13 +2657,13 @@ const jn = /* @__PURE__ */ g({
         ref: o
       }, [
         p("fieldset", null, [
-          p("legend", Jn, I(i.question.locTitle.renderedHtml), 1),
+          p("legend", Zn, I(i.question.locTitle.renderedHtml), 1),
           p("table", {
             class: l(i.question.getTableCss())
           }, [
-            i.question.showHeader ? (t(), u("thead", Yn, [
+            i.question.showHeader ? (t(), u("thead", xn, [
               p("tr", null, [
-                i.question.hasRows ? (t(), u("td", Zn)) : d("", !0),
+                i.question.hasRows ? (t(), u("td", eo)) : d("", !0),
                 (t(!0), u(S, null, B(i.question.visibleColumns, (v, m) => (t(), u("th", {
                   key: m,
                   class: l(i.question.cssClasses.headerCell),
@@ -2691,7 +2694,7 @@ const jn = /* @__PURE__ */ g({
                     locString: v.locText
                   }, null, 8, ["locString"])
                 ], 6), [
-                  [_, i.question.hasRows]
+                  [A, i.question.hasRows]
                 ]),
                 i.question.hasCellText ? (t(!0), u(S, { key: 0 }, B(i.question.visibleColumns, (b, T) => (t(), u("td", {
                   key: T,
@@ -2701,7 +2704,7 @@ const jn = /* @__PURE__ */ g({
                   C(c, {
                     locString: i.question.getCellDisplayLocText(v.name, b)
                   }, null, 8, ["locString"])
-                ], 10, xn))), 128)) : d("", !0),
+                ], 10, so))), 128)) : d("", !0),
                 i.question.hasCellText ? d("", !0) : (t(!0), u(S, { key: 1 }, B(i.question.visibleColumns, (b, T) => (t(), u("td", {
                   key: T,
                   "data-responsive-title": b.locText.renderedHtml,
@@ -2721,10 +2724,10 @@ const jn = /* @__PURE__ */ g({
                       disabled: i.question.isInputReadOnly,
                       id: i.question.inputId + "_" + v.name + "_" + T,
                       "aria-required": i.question.ariaRequired,
-                      "aria-label": b.locText.renderedHtml,
+                      "aria-label": i.question.getCellAriaLabel(v.locText.renderedHtml, b.locText.renderedHtml),
                       "aria-invalid": i.question.ariaInvalid,
                       "aria-describedby": i.question.ariaDescribedBy
-                    }, null, 10, so), [
+                    }, null, 10, oo), [
                       [Z, v.value]
                     ]),
                     p("span", {
@@ -2736,7 +2739,7 @@ const jn = /* @__PURE__ */ g({
                       }, [
                         p("use", {
                           "xlink:href": i.question.itemSvgIcon
-                        }, null, 8, no)
+                        }, null, 8, to)
                       ], 2)) : d("", !0)
                     ], 2),
                     P(p("span", {
@@ -2746,10 +2749,10 @@ const jn = /* @__PURE__ */ g({
                         locString: b.locText
                       }, null, 8, ["locString"])
                     ], 2), [
-                      [_, i.question.isMobile]
+                      [A, i.question.isMobile]
                     ])
                   ], 34)
-                ], 10, eo))), 128))
+                ], 10, no))), 128))
               ], 2))), 128))
             ])
           ], 2)
@@ -2757,7 +2760,7 @@ const jn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), to = /* @__PURE__ */ g({
+}), lo = /* @__PURE__ */ g({
   __name: "MatrixDropdown",
   props: {
     question: {}
@@ -2773,7 +2776,7 @@ const jn = /* @__PURE__ */ g({
       }, null, 8, ["question"]);
     };
   }
-}), io = { key: 0 }, lo = ["data-sv-drop-target-matrix-row"], ro = { key: 1 }, ao = /* @__PURE__ */ g({
+}), ro = { key: 0 }, ao = ["data-sv-drop-target-matrix-row"], uo = { key: 1 }, mo = /* @__PURE__ */ g({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -2802,7 +2805,7 @@ const jn = /* @__PURE__ */ g({
         p("table", {
           class: l(e.question.getTableCss())
         }, [
-          o.value.showHeader ? (t(), u("thead", io, [
+          o.value.showHeader ? (t(), u("thead", ro, [
             p("tr", null, [
               (t(!0), u(S, null, B(o.value.headerRow.cells, (v) => (t(), u(S, null, [
                 v.hasTitle ? (t(), u("th", {
@@ -2841,10 +2844,10 @@ const jn = /* @__PURE__ */ g({
                   question: e.question,
                   key: v.id + "_" + b
                 }, null, 8, ["cell", "question"]))), 128))
-              ], 10, lo)) : d("", !0)
+              ], 10, ao)) : d("", !0)
             ], 64))), 128))
           ]),
-          o.value.showFooter ? (t(), u("tfoot", ro, [
+          o.value.showFooter ? (t(), u("tfoot", uo, [
             p("tr", null, [
               (t(!0), u(S, null, B(o.value.footerRow.cells, (v, m) => (t(), y(c, {
                 cell: v,
@@ -2857,7 +2860,7 @@ const jn = /* @__PURE__ */ g({
       ], 6);
     };
   }
-}), uo = /* @__PURE__ */ p("span", null, "\xA0", -1), mo = /* @__PURE__ */ g({
+}), co = /* @__PURE__ */ p("span", null, "\xA0", -1), po = /* @__PURE__ */ g({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -2866,14 +2869,14 @@ const jn = /* @__PURE__ */ g({
   setup(r) {
     const n = r;
     return L(() => n.column), (o, e) => o.column.isRenderedRequired ? (t(), u(S, { key: 0 }, [
-      uo,
+      co,
       o.column.isRenderedRequired ? (t(), u("span", {
         key: 0,
         class: l(o.question.cssClasses.cellRequiredText)
       }, I(o.column.requiredText), 3)) : d("", !0)
     ], 64)) : d("", !0);
   }
-}), co = ["data-responsive-title", "title", "colspan"], po = /* @__PURE__ */ g({
+}), vo = ["data-responsive-title", "title", "colspan"], qo = /* @__PURE__ */ g({
   __name: "MatrixCell",
   props: {
     question: {},
@@ -2881,7 +2884,7 @@ const jn = /* @__PURE__ */ g({
   },
   setup(r) {
     const n = r, o = $(!1), e = $(), s = () => n.cell.headers, i = () => !!n.cell.width || !!n.cell.minWidth ? { width: n.cell.width, minWidth: n.cell.minWidth } : null, a = () => n.cell.index || "", c = () => o.value = n.cell.question.isVisible, v = (m) => se(m);
-    return A(() => {
+    return _(() => {
       if (!n.cell.hasQuestion || !n.question || !n.question.survey)
         return;
       c(), n.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
@@ -2933,13 +2936,13 @@ const jn = /* @__PURE__ */ g({
             key: 0,
             question: m.cell.question
           }, null, 8, ["question"])), [
-            [_, o.value]
+            [A, o.value]
           ]) : d("", !0),
           !m.cell.isChoice && !m.cell.question.isDefaultRendering() ? P((t(), y(N(m.cell.question.getComponentName()), {
             key: 1,
             question: m.cell.question
           }, null, 8, ["question"])), [
-            [_, o.value]
+            [A, o.value]
           ]) : d("", !0),
           m.cell.isRadio ? (t(), y(h, {
             key: m.cell.item.value,
@@ -2970,10 +2973,10 @@ const jn = /* @__PURE__ */ g({
           key: 6,
           class: l(m.question.cssClasses.cellRequiredText)
         }, I(m.cell.requiredText), 3)) : d("", !0)
-      ], 46, co);
+      ], 46, vo);
     };
   }
-}), vo = /* @__PURE__ */ g({
+}), yo = /* @__PURE__ */ g({
   __name: "MatrixDynamic",
   props: {
     question: {}
@@ -3063,7 +3066,7 @@ function ne(r, n = !0) {
     row: n ? R(() => r.item.data.row) : void 0
   };
 }
-const qo = ["disabled"], yo = /* @__PURE__ */ g({
+const go = ["disabled"], ho = /* @__PURE__ */ g({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3084,10 +3087,10 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
         p("span", {
           class: l(k(o).cssClasses.iconRemove)
         }, null, 2)
-      ], 10, qo);
+      ], 10, go);
     };
   }
-}), go = ["xlink:href"], ho = /* @__PURE__ */ g({
+}), Co = ["xlink:href"], bo = /* @__PURE__ */ g({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3100,13 +3103,13 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
     }, [
       p("use", {
         "xlink:href": k(o).iconDragElement
-      }, null, 8, go)
+      }, null, 8, Co)
     ], 2)) : (t(), u("span", {
       key: 1,
       class: l(k(o).cssClasses.iconDrag)
     }, null, 2));
   }
-}), Co = ["aria-expanded", "aria-controls"], bo = /* @__PURE__ */ g({
+}), ko = ["aria-expanded", "aria-controls"], fo = /* @__PURE__ */ g({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3127,10 +3130,10 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
           iconName: k(o).getDetailPanelIconId(k(e)),
           size: "auto"
         }, null, 8, ["class", "iconName"])
-      ], 10, Co);
+      ], 10, ko);
     };
   }
-}), ko = /* @__PURE__ */ g({
+}), Io = /* @__PURE__ */ g({
   __name: "PanelDynamic",
   props: {
     question: {},
@@ -3235,7 +3238,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), fo = /* @__PURE__ */ g({
+}), wo = /* @__PURE__ */ g({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3281,7 +3284,7 @@ const qo = ["disabled"], yo = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Io = /* @__PURE__ */ g({
+}), So = /* @__PURE__ */ g({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3323,7 +3326,7 @@ function Q(r) {
     () => r.item && r.item.data.question || r.data.question
   );
 }
-const wo = /* @__PURE__ */ g({
+const To = /* @__PURE__ */ g({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3344,7 +3347,7 @@ const wo = /* @__PURE__ */ g({
       }, I(k(o).panelAddText), 3)
     ], 2)) : d("", !0);
   }
-}), So = ["title"], To = /* @__PURE__ */ g({
+}), Ro = ["title"], $o = /* @__PURE__ */ g({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3365,10 +3368,10 @@ const wo = /* @__PURE__ */ g({
           iconName: k(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, So);
+      ], 10, Ro);
     };
   }
-}), Ro = ["title"], $o = /* @__PURE__ */ g({
+}), Bo = ["title"], Lo = /* @__PURE__ */ g({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -3389,10 +3392,10 @@ const wo = /* @__PURE__ */ g({
           iconName: k(o).cssClasses.progressBtnIcon,
           size: "auto"
         }, null, 8, ["iconName"])
-      ], 10, Ro);
+      ], 10, Bo);
     };
   }
-}), Bo = /* @__PURE__ */ g({
+}), Do = /* @__PURE__ */ g({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
@@ -3417,7 +3420,7 @@ const wo = /* @__PURE__ */ g({
       }, null, 2)
     ], 2));
   }
-}), Lo = /* @__PURE__ */ g({
+}), Po = /* @__PURE__ */ g({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -3429,7 +3432,7 @@ const wo = /* @__PURE__ */ g({
       class: l(k(o).cssClasses.progressText)
     }, I(k(o).progressText), 3));
   }
-}), Do = ["id"], Po = /* @__PURE__ */ g({
+}), Mo = ["id"], No = /* @__PURE__ */ g({
   __name: "Errors",
   props: {
     element: {},
@@ -3467,17 +3470,17 @@ const wo = /* @__PURE__ */ g({
             }, null, 8, ["locString"])
           ], 2)
         ]))), 128))
-      ], 10, Do)) : d("", !0);
+      ], 10, Mo)) : d("", !0);
     };
   }
-}), Mo = { key: 0 }, No = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ho = /* @__PURE__ */ g({
+}), Ho = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], _o = /* @__PURE__ */ g({
   __name: "QuestionComment",
   props: {
     question: {},
     commentClass: {}
   },
   setup(r) {
-    return (n, o) => n.question.isReadOnlyRenderDiv() ? (t(), u("div", Mo, I(n.question.comment), 1)) : (t(), u("textarea", {
+    return (n, o) => n.question.isReadOnlyRenderDiv() ? (t(), u("div", Ho, I(n.question.comment), 1)) : (t(), u("textarea", {
       key: 1,
       id: n.question.commentId,
       readonly: n.question.isInputReadOnly,
@@ -3494,10 +3497,13 @@ const wo = /* @__PURE__ */ g({
       }),
       onInput: o[1] || (o[1] = (e) => {
         n.question.onCommentInput(e);
+      }),
+      onCompositionUpdate: o[2] || (o[2] = (e) => {
+        n.question.onCompositionUpdateComment(e);
       })
-    }, null, 46, No));
+    }, null, 46, Ao));
   }
-}), _o = /* @__PURE__ */ g({
+}), Eo = /* @__PURE__ */ g({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3537,7 +3543,7 @@ const wo = /* @__PURE__ */ g({
       }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : d("", !0);
     };
   }
-}), Ao = { class: "sv-vue-title-additional-div" }, Eo = { key: 3 }, Wo = { key: 5 }, Vo = { key: 7 }, Fo = /* @__PURE__ */ g({
+}), Wo = { class: "sv-vue-title-additional-div" }, Vo = { key: 3 }, Fo = { key: 5 }, Oo = { key: 7 }, zo = /* @__PURE__ */ g({
   __name: "TitleContent",
   props: {
     element: {},
@@ -3546,7 +3552,7 @@ const wo = /* @__PURE__ */ g({
   setup(r) {
     return (n, o) => {
       const e = q("survey-string");
-      return t(), u("div", Ao, [
+      return t(), u("div", Wo, [
         n.element.isTitleRenderedAsString ? (t(), y(e, {
           key: 0,
           locString: n.element.locTitle
@@ -3562,18 +3568,18 @@ const wo = /* @__PURE__ */ g({
           class: l(n.element.cssTitleNumber),
           "aria-hidden": !0
         }, I(n.element.no), 3)) : d("", !0),
-        !n.element.isTitleRenderedAsString && n.element.no ? (t(), u("span", Eo, "\xA0")) : d("", !0),
+        !n.element.isTitleRenderedAsString && n.element.no ? (t(), u("span", Vo, "\xA0")) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", {
           key: 4,
           class: l(n.element.cssClasses.requiredText),
           "aria-hidden": !0
         }, I(n.element.requiredText), 3)) : d("", !0),
-        !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", Wo, "\xA0")) : d("", !0),
+        !n.element.isTitleRenderedAsString && n.element.isRequireTextBeforeTitle ? (t(), u("span", Fo, "\xA0")) : d("", !0),
         n.element.isTitleRenderedAsString ? d("", !0) : (t(), y(e, {
           key: 6,
           locString: n.element.locTitle
         }, null, 8, ["locString"])),
-        !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (t(), u("span", Vo, "\xA0")) : d("", !0),
+        !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (t(), u("span", Oo, "\xA0")) : d("", !0),
         !n.element.isTitleRenderedAsString && n.element.isRequireTextAfterTitle ? (t(), u("span", {
           key: 8,
           class: l(n.element.cssClasses.requiredText),
@@ -3582,7 +3588,7 @@ const wo = /* @__PURE__ */ g({
       ]);
     };
   }
-}), Oo = { class: "sv-title-actions" }, zo = { class: "sv-title-actions__title" }, Uo = /* @__PURE__ */ g({
+}), Uo = { class: "sv-title-actions" }, Ko = { class: "sv-title-actions__title" }, jo = /* @__PURE__ */ g({
   __name: "TitleActions",
   props: {
     element: {},
@@ -3592,8 +3598,8 @@ const wo = /* @__PURE__ */ g({
     const n = r, o = R(() => n.element.getTitleToolbar());
     return (e, s) => {
       const i = q("survey-string"), a = q("survey-element-title-content"), c = q("sv-action-bar");
-      return t(), u("div", Oo, [
-        p("span", zo, [
+      return t(), u("div", Uo, [
+        p("span", Ko, [
           e.element.isPage ? (t(), y(i, {
             key: 0,
             locString: e.element.locTitle
@@ -3613,15 +3619,15 @@ const wo = /* @__PURE__ */ g({
   for (const [e, s] of n)
     o[e] = s;
   return o;
-}, Ko = {}, jo = { class: "sv-brand-info" }, Qo = /* @__PURE__ */ ge('<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), Go = [
-  Qo
+}, Qo = {}, Go = { class: "sv-brand-info" }, Xo = /* @__PURE__ */ ge('<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), Jo = [
+  Xo
 ];
-function Xo(r, n) {
-  return t(), u("div", jo, Go);
+function Yo(r, n) {
+  return t(), u("div", Go, Jo);
 }
-const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /* @__PURE__ */ p("use", null, null, -1), xo = [
-  Zo
-], et = /* @__PURE__ */ g({
+const Zo = /* @__PURE__ */ me(Qo, [["render", Yo]]), xo = /* @__PURE__ */ p("use", null, null, -1), et = [
+  xo
+], st = /* @__PURE__ */ g({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -3643,17 +3649,16 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     };
     return J(() => {
       e();
-    }), A(() => {
+    }), _(() => {
       e();
     }), (s, i) => (t(), u("svg", {
       ref_key: "svgIconElement",
       ref: o,
       class: "sv-svg-icon",
-      role: "img",
-      "aria-label": s.title
-    }, xo, 8, Yo));
+      role: "img"
+    }, et, 512));
   }
-}), st = /* @__PURE__ */ g({
+}), nt = /* @__PURE__ */ g({
   __name: "ActionBar",
   props: {
     model: {},
@@ -3662,7 +3667,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
   },
   setup(r) {
     const n = r, o = $(null);
-    return L(() => n.model), A(() => {
+    return L(() => n.model), _(() => {
       !n.model.hasActions || n.model.initResponsivityManager(o.value);
     }), W(() => {
       n.model.resetResponsivityManager();
@@ -3684,7 +3689,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 2)) : d("", !0);
     };
   }
-}), nt = ["id"], ot = { class: "sv-action__content" }, tt = /* @__PURE__ */ g({
+}), ot = ["id"], tt = { class: "sv-action__content" }, it = /* @__PURE__ */ g({
   __name: "Action",
   props: {
     item: {}
@@ -3699,14 +3704,14 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         class: l(e.item.getActionRootCss()),
         id: e.item.id
       }, [
-        p("div", ot, [
+        p("div", tt, [
           e.item.needSeparator ? (t(), y(i, { key: 0 })) : d("", !0),
           (t(), y(N(o.value), { item: e.item }, null, 8, ["item"]))
         ])
-      ], 10, nt);
+      ], 10, ot);
     };
   }
-}), it = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], lt = /* @__PURE__ */ g({
+}), lt = ["disabled", "title", "aria-checked", "aria-expanded", "role", "tabindex"], rt = /* @__PURE__ */ g({
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -3742,10 +3747,10 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           key: 1,
           class: l(o.item.getActionBarItemTitleCss())
         }, I(o.item.title), 3)) : d("", !0)
-      ], 42, it);
+      ], 42, lt);
     };
   }
-}), rt = ["disabled", "title", "role", "tabindex"], at = /* @__PURE__ */ g({
+}), at = ["disabled", "title", "role", "tabindex"], ut = /* @__PURE__ */ g({
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -3789,7 +3794,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             key: 1,
             class: l(s.item.getActionBarItemTitleCss())
           }, I(s.item.title), 3)) : d("", !0)
-        ], 42, rt),
+        ], 42, at),
         C(c, {
           model: s.item.popupModel,
           getTarget: k(o)
@@ -3797,7 +3802,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 64);
     };
   }
-}), ut = /* @__PURE__ */ g({
+}), dt = /* @__PURE__ */ g({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -3808,7 +3813,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       class: l(["sv-action-bar-separator", o.value])
     }, null, 2));
   }
-}), dt = ["aria-label", "placeholder", "value"], mt = ["aria-label"], ct = ["id"], pt = /* @__PURE__ */ g({
+}), mt = ["aria-label", "placeholder", "value"], ct = ["aria-label"], pt = ["id"], vt = /* @__PURE__ */ g({
   __name: "List",
   props: {
     model: {}
@@ -3823,7 +3828,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     }, i = (a) => {
       n.model.onMouseMove(a);
     };
-    return L(() => n.model), A(() => {
+    return L(() => n.model), _(() => {
       n.model.initListContainerHtmlElement(o.value);
     }), (a, c) => {
       const v = q("sv-svg-icon"), m = q("sv-list-item");
@@ -3852,7 +3857,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             value: a.model.filterString,
             onChange: e,
             onKeyup: s
-          }, null, 42, dt),
+          }, null, 42, mt),
           a.model.showSearchClearButton && !!a.model.filterString ? (t(), u("button", {
             key: 0,
             onClick: c[0] || (c[0] = (b) => {
@@ -3872,9 +3877,9 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           p("div", {
             class: l(a.model.cssClasses.emptyText),
             "aria-label": a.model.emptyMessage
-          }, I(a.model.emptyMessage), 11, mt)
+          }, I(a.model.emptyMessage), 11, ct)
         ], 2), [
-          [_, a.model.isEmpty]
+          [A, a.model.isEmpty]
         ]),
         a.model.renderElements ? P((t(), u("ul", {
           key: 1,
@@ -3894,13 +3899,13 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             model: a.model,
             key: b.id
           }, null, 8, ["item", "model"]))), 128))
-        ], 42, ct)), [
-          [_, !a.model.isEmpty]
+        ], 42, pt)), [
+          [A, !a.model.isEmpty]
         ]) : d("", !0)
       ], 2);
     };
   }
-}), vt = ["aria-selected", "id"], qt = ["title"], yt = /* @__PURE__ */ g({
+}), qt = ["aria-selected", "id"], yt = ["title"], gt = /* @__PURE__ */ g({
   __name: "ListItem",
   props: {
     model: {},
@@ -3910,7 +3915,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     const n = r, o = R(() => n.item.elementId), e = (s) => {
       n.model.onItemClick(n.item), s.stopPropagation();
     };
-    return L(() => n.item), A(() => {
+    return L(() => n.item), _(() => {
       setTimeout(() => {
         n.model.onLastItemRended(n.item);
       });
@@ -3948,14 +3953,14 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             key: 2,
             item: s.item
           }, null, 8, ["item"])) : d("", !0)
-        ], 14, qt)
-      ], 10, vt)), [
-        [_, s.model.isItemVisible(s.item)],
+        ], 14, yt)
+      ], 10, qt)), [
+        [A, s.model.isItemVisible(s.item)],
         [v]
       ]);
     };
   }
-}), gt = /* @__PURE__ */ g({
+}), ht = /* @__PURE__ */ g({
   __name: "Popup",
   props: {
     getTarget: { type: Function },
@@ -3971,7 +3976,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         o.value.dispose(), o.value = te(s, void 0);
       },
       { immediate: !0 }
-    ), L(() => o.value), A(() => {
+    ), L(() => o.value), _(() => {
       const s = e.value;
       o.value.setComponentElement(
         s,
@@ -3989,13 +3994,13 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 512);
     };
   }
-}), ht = { class: "sv-popup__shadow" }, Ct = { class: "sv-popup__body-content" }, bt = {
+}), Ct = { class: "sv-popup__shadow" }, bt = { class: "sv-popup__body-content" }, kt = {
   key: 0,
   class: "sv-popup__body-header"
-}, kt = { class: "sv-popup__scrolling-content" }, ft = { class: "sv-popup__content" }, It = {
+}, ft = { class: "sv-popup__scrolling-content" }, It = { class: "sv-popup__content" }, wt = {
   key: 1,
   class: "sv-popup__body-footer"
-}, wt = /* @__PURE__ */ g({
+}, St = /* @__PURE__ */ g({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4032,19 +4037,19 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           }),
           onClick: e
         }, [
-          p("div", ht, [
+          p("div", Ct, [
             s.model.showHeader ? (t(), y(N(s.model.popupHeaderTemplate), {
               key: 0,
               model: s.model
             }, null, 8, ["model"])) : d("", !0),
-            p("div", Ct, [
-              s.model.title ? (t(), u("div", bt, I(s.model.title), 1)) : d("", !0),
-              p("div", kt, [
-                p("div", ft, [
+            p("div", bt, [
+              s.model.title ? (t(), u("div", kt, I(s.model.title), 1)) : d("", !0),
+              p("div", ft, [
+                p("div", It, [
                   (t(), y(N(s.model.contentComponentName), he(Ce(s.model.contentComponentData)), null, 16))
                 ])
               ]),
-              s.model.showFooter ? (t(), u("div", It, [
+              s.model.showFooter ? (t(), u("div", wt, [
                 C(a, {
                   model: s.model.footerToolbar
                 }, null, 8, ["model"])
@@ -4053,11 +4058,11 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           ])
         ], 4)
       ], 34)), [
-        [_, s.model.isVisible]
+        [A, s.model.isVisible]
       ]);
     };
   }
-}), St = /* @__PURE__ */ g({
+}), Tt = /* @__PURE__ */ g({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4071,10 +4076,10 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       })
     }, null, 4));
   }
-}), Tt = {
+}), Rt = {
   key: 0,
   class: "sv-components-column"
-}, Rt = /* @__PURE__ */ g({
+}, $t = /* @__PURE__ */ g({
   __name: "Container",
   props: {
     survey: {},
@@ -4086,7 +4091,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       () => n.survey.getContainerContent(n.container)
     );
     return (e, s) => o.value.length > 0 ? (t(), u(S, { key: 0 }, [
-      e.needRenderWrapper ? (t(), u("div", Tt, [
+      e.needRenderWrapper ? (t(), u("div", Rt, [
         (t(!0), u(S, null, B(o.value, (i, a) => (t(), y(N(i.component), {
           survey: e.survey,
           container: e.container,
@@ -4127,7 +4132,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, I(i.survey.progressText), 3)
     ], 2));
   }
-}), $t = ["onClick"], Bt = ["title"], Lt = ["title"], Dt = /* @__PURE__ */ g({
+}), Bt = ["onClick"], Lt = ["title"], Dt = ["title"], Pt = /* @__PURE__ */ g({
   __name: "ProgressButtons",
   props: {
     survey: {}
@@ -4141,7 +4146,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       let M = s.value;
       M.scrollLeft += (f ? -1 : 1) * 70;
     };
-    return A(() => {
+    return _(() => {
       const f = s.value;
       a = setInterval(() => {
         e.value = f.scrollWidth > f.offsetWidth;
@@ -4175,12 +4180,12 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
               p("div", {
                 class: l(i.value.progressButtonsPageTitle),
                 title: h.renderedNavigationTitle
-              }, I(h.renderedNavigationTitle), 11, Bt),
+              }, I(h.renderedNavigationTitle), 11, Lt),
               p("div", {
                 class: l(i.value.progressButtonsPageDescription),
                 title: h.locNavigationDescription.renderedHtml
-              }, I(h.locNavigationDescription.renderedHtml), 11, Lt)
-            ], 10, $t))), 128))
+              }, I(h.locNavigationDescription.renderedHtml), 11, Dt)
+            ], 10, Bt))), 128))
           ], 2)
         ], 2),
         p("div", {
@@ -4191,7 +4196,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 2)
     ], 2));
   }
-}), Pt = /* @__PURE__ */ g({
+}), Mt = /* @__PURE__ */ g({
   __name: "ProgressToc",
   props: {
     survey: {}
@@ -4223,10 +4228,10 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 2);
     };
   }
-}), Mt = { onsubmit: "return false;" }, Nt = {
+}), Nt = { onsubmit: "return false;" }, Ht = {
   key: 0,
   class: "sv_custom_header"
-}, Ht = ["id"], _t = { key: 2 }, At = ["innerHTML"], Et = ["innerHTML"], Wt = ["innerHTML"], re = /* @__PURE__ */ g({
+}, At = ["id"], _t = { key: 2 }, Et = ["innerHTML"], Wt = ["innerHTML"], Vt = ["innerHTML"], re = /* @__PURE__ */ g({
   __name: "Survey",
   props: {
     model: {},
@@ -4242,7 +4247,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     }, v = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
     ), m = R(() => i.value.css), b = R(() => "page" + c()), T = () => v.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
-    return L(() => i.value), A(() => {
+    return L(() => i.value), _(() => {
       if (!!i.value) {
         i.value.needRenderIcons && De.renderIcons();
         var f = o.value;
@@ -4270,8 +4275,8 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
             class: l(m.value.rootBackgroundImage),
             style: w(i.value.backgroundImageStyle)
           }, null, 6)) : d("", !0),
-          p("form", Mt, [
-            i.value.hasLogo ? d("", !0) : (t(), u("div", Nt)),
+          p("form", Nt, [
+            i.value.hasLogo ? d("", !0) : (t(), u("div", Ht)),
             p("div", {
               class: l(m.value.container)
             }, [
@@ -4314,7 +4319,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                     container: "contentBottom",
                     needRenderWrapper: !0
                   }, null, 8, ["survey"]))
-                ], 14, Ht),
+                ], 14, At),
                 (t(), y(N("sv-components-container"), {
                   survey: i.value,
                   container: "right",
@@ -4330,7 +4335,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                 p("div", {
                   innerHTML: T(),
                   class: l(i.value.completedCss)
-                }, null, 10, At),
+                }, null, 10, Et),
                 (t(), y(N("sv-components-container"), {
                   survey: i.value,
                   container: "completePage",
@@ -4341,12 +4346,12 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
                 key: 3,
                 class: l(i.value.completedBeforeCss),
                 innerHTML: i.value.processedCompletedBeforeHtml
-              }, null, 10, Et)) : d("", !0),
+              }, null, 10, Wt)) : d("", !0),
               i.value.state === "loading" ? (t(), u("div", {
                 key: 4,
                 class: l(i.value.loadingBodyCss),
                 innerHTML: i.value.processedLoadingHtml
-              }, null, 10, Wt)) : d("", !0),
+              }, null, 10, Vt)) : d("", !0),
               i.value.state === "empty" ? (t(), u("div", {
                 key: 5,
                 class: l(m.value.bodyEmpty)
@@ -4361,7 +4366,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 6);
     };
   }
-}), Vt = /* @__PURE__ */ g({
+}), Ft = /* @__PURE__ */ g({
   __name: "Notifier",
   props: {
     model: {}
@@ -4381,11 +4386,11 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
           model: o.model.actionBar
         }, null, 8, ["model"])
       ], 6)), [
-        [_, o.model.isDisplayed]
+        [A, o.model.isDisplayed]
       ]);
     };
   }
-}), Ft = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Ot = { key: 1 }, zt = /* @__PURE__ */ g({
+}), Ot = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], zt = { key: 1 }, Ut = /* @__PURE__ */ g({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -4412,12 +4417,15 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         }),
         onInput: o[1] || (o[1] = (e) => {
           n.question.onOtherValueInput(e);
+        }),
+        onCompositionUpdate: o[2] || (o[2] = (e) => {
+          n.question.onCompositionUpdateOtherValue(e);
         })
-      }, null, 46, Ft)),
-      n.question.isReadOnlyRenderDiv() ? (t(), u("div", Ot, I(n.question.otherValue), 1)) : d("", !0)
+      }, null, 46, Ot)),
+      n.question.isReadOnlyRenderDiv() ? (t(), u("div", zt, I(n.question.otherValue), 1)) : d("", !0)
     ], 2));
   }
-}), Ut = ["disabled", "value", "title"], Kt = /* @__PURE__ */ g({
+}), Kt = ["disabled", "value", "title"], jt = /* @__PURE__ */ g({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -4433,7 +4441,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       title: e.item.getTooltip(),
       onMousedown: o,
       onClick: s[0] || (s[0] = (...i) => e.item.action && e.item.action(...i))
-    }, null, 42, Ut)) : d("", !0);
+    }, null, 42, Kt)) : d("", !0);
   }
 }), ae = /* @__PURE__ */ g({
   __name: "PopupSurvey",
@@ -4532,7 +4540,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 6)) : d("", !0);
     };
   }
-}), jt = ["innerHTML"], Qt = /* @__PURE__ */ g({
+}), Qt = ["innerHTML"], Gt = /* @__PURE__ */ g({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -4544,7 +4552,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
     ), s = R(
       () => !!n.question.customWidget.htmlTemplate
     ), i = R(() => n.question.customWidget.htmlTemplate), a = R(() => "survey-" + n.question.getTemplate());
-    return A(() => {
+    return _(() => {
       n.question.customWidget.afterRender(n.question, o.value);
     }), j(() => {
       n.question.customWidget.willUnmount(n.question, o.value);
@@ -4555,7 +4563,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       s.value ? (t(), u("div", {
         key: 0,
         innerHTML: i.value
-      }, null, 8, jt)) : d("", !0),
+      }, null, 8, Qt)) : d("", !0),
       e.value ? (t(), y(N(a.value), {
         key: 1,
         question: c.question,
@@ -4563,7 +4571,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, null, 8, ["question", "css"])) : d("", !0)
     ], 512));
   }
-}), Gt = /* @__PURE__ */ g({
+}), Xt = /* @__PURE__ */ g({
   __name: "PopupModal",
   setup(r) {
     const n = O();
@@ -4605,7 +4613,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       ], 8, ["to"])) : d("", !0);
     };
   }
-}), Xt = /* @__PURE__ */ g({
+}), Jt = /* @__PURE__ */ g({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -4617,7 +4625,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       class: l(o.remainingCharacterCounter)
     }, I(o.counter.remainingCharacterCounter), 3));
   }
-}), Jt = /* @__PURE__ */ g({
+}), Yt = /* @__PURE__ */ g({
   __name: "Composite",
   props: {
     question: {},
@@ -4637,7 +4645,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       }, null, 8, ["question", "css"]);
     };
   }
-}), Yt = /* @__PURE__ */ g({
+}), Zt = /* @__PURE__ */ g({
   __name: "Custom",
   props: {
     question: {},
@@ -4653,9 +4661,9 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       css: i.css
     }, null, 8, ["question", "css"]));
   }
-}), Zt = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), xt = [
-  Zt
-], ue = 440, ei = /* @__PURE__ */ g({
+}), xt = /* @__PURE__ */ p("use", { "xlink:href": "#icon-timercircle" }, null, -1), ei = [
+  xt
+], ue = 440, si = /* @__PURE__ */ g({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -4671,7 +4679,7 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
         key: 0,
         class: l(s.model.getProgressCss()),
         style: w({ strokeDasharray: ue, strokeDashoffset: o.value })
-      }, xt, 6)) : d("", !0),
+      }, ei, 6)) : d("", !0),
       p("div", {
         class: l(s.model.textContainerCss)
       }, [
@@ -4687,20 +4695,20 @@ const Jo = /* @__PURE__ */ me(Ko, [["render", Xo]]), Yo = ["aria-label"], Zo = /
       key: 1,
       class: l(s.model.survey.getCss().timerRoot)
     }, I(e.value), 3)), [
-      [_, s.model.isRunning && !s.model.showTimerAsClock]
+      [A, s.model.isRunning && !s.model.showTimerAsClock]
     ]);
   }
-}), si = {}, ni = { class: "sd-loading-indicator" };
-function oi(r, n) {
+}), ni = {}, oi = { class: "sd-loading-indicator" };
+function ti(r, n) {
   const o = q("sv-svg-icon");
-  return t(), u("div", ni, [
+  return t(), u("div", oi, [
     C(o, {
       iconName: "icon-loading",
       size: "'auto'"
     })
   ]);
 }
-const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @__PURE__ */ g({
+const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = { key: 2 }, ri = /* @__PURE__ */ g({
   __name: "Header",
   props: {
     model: {},
@@ -4726,16 +4734,16 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
         }, [
           (t(!0), u(S, null, B(o.model.cells, (a) => (t(), y(s, { model: a }, null, 8, ["model"]))), 256))
         ], 6)),
-        o.survey.isMobile ? (t(), u("div", ii, [
+        o.survey.isMobile ? (t(), u("div", li, [
           C(i, { model: o.model }, null, 8, ["model"])
         ])) : d("", !0)
       ], 6);
     };
   }
-}), ri = {
+}), ai = {
   key: 0,
   class: "sv-header__logo"
-}, ai = ["src", "width", "height", "alt"], ui = /* @__PURE__ */ g({
+}, ui = ["src", "width", "height", "alt"], di = /* @__PURE__ */ g({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -4751,7 +4759,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
           class: "sv-header__cell-content",
           style: w(n.model.contentStyle)
         }, [
-          n.model.showLogo ? (t(), u("div", ri, [
+          n.model.showLogo ? (t(), u("div", ai, [
             p("div", {
               class: l(n.model.survey.logoClassNames)
             }, [
@@ -4762,7 +4770,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
                 height: n.model.survey.renderedLogoHeight,
                 alt: n.model.survey.locTitle.renderedHtml,
                 style: w({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
-              }, null, 14, ai)
+              }, null, 14, ui)
             ], 2)
           ])) : d("", !0),
           n.model.showTitle ? (t(), u("div", {
@@ -4793,10 +4801,10 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
       ], 6);
     };
   }
-}), di = { class: "sv-header--mobile" }, mi = {
+}), mi = { class: "sv-header--mobile" }, ci = {
   key: 0,
   class: "sv-header__logo"
-}, ci = ["src", "width", "height", "alt"], pi = /* @__PURE__ */ g({
+}, pi = ["src", "width", "height", "alt"], vi = /* @__PURE__ */ g({
   __name: "HeaderMobile",
   props: {
     model: {}
@@ -4804,8 +4812,8 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
   setup(r) {
     return (n, o) => {
       const e = q("survey-element-title"), s = q("survey-string");
-      return t(), u("div", di, [
-        n.model.survey.hasLogo ? (t(), u("div", mi, [
+      return t(), u("div", mi, [
+        n.model.survey.hasLogo ? (t(), u("div", ci, [
           p("div", {
             class: l(n.model.survey.logoClassNames)
           }, [
@@ -4816,7 +4824,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
               height: n.model.survey.renderedLogoHeight,
               alt: n.model.survey.locTitle.renderedHtml,
               style: w({ objectFit: n.model.survey.logoFit, width: n.model.survey.renderedStyleLogoWidth, height: n.model.survey.renderedStyleLogoHeight })
-            }, null, 14, ci)
+            }, null, 14, pi)
           ], 2)
         ])) : d("", !0),
         n.model.survey.hasTitle ? (t(), u("div", {
@@ -4846,7 +4854,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
       ]);
     };
   }
-}), vi = /* @__PURE__ */ g({
+}), qi = /* @__PURE__ */ g({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -4870,7 +4878,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
       ], 2);
     };
   }
-}), qi = ["id"], yi = /* @__PURE__ */ g({
+}), yi = ["id"], gi = /* @__PURE__ */ g({
   __name: "FileVideo",
   props: {
     question: {}
@@ -4892,14 +4900,14 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
           playsinline: "",
           id: n.question.videoId,
           class: l(n.question.cssClasses.video)
-        }, null, 10, qi),
+        }, null, 10, yi),
         C(e, {
           item: n.question.takePictureAction
         }, null, 8, ["item"])
       ], 2);
     };
   }
-}), gi = ["for", "aria-label"], hi = /* @__PURE__ */ g({
+}), hi = ["for", "aria-label"], Ci = /* @__PURE__ */ g({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -4927,12 +4935,12 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
           size: "auto"
         }, null, 8, ["title", "iconName"])) : d("", !0),
         p("span", null, I(o.value.chooseButtonText), 1)
-      ], 10, gi)), [
+      ], 10, hi)), [
         [a]
       ]);
     };
   }
-}), Ci = ["onClick", "href", "title", "download"], bi = ["src"], ki = ["onClick"], fi = ["onClick", "href", "title", "download"], Ii = /* @__PURE__ */ g({
+}), bi = ["onClick", "href", "title", "download"], ki = ["src"], fi = ["onClick"], Ii = ["onClick", "href", "title", "download"], wi = /* @__PURE__ */ g({
   __name: "FilePreview",
   props: {
     question: {}
@@ -4958,7 +4966,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
               title: s.name,
               download: s.name,
               style: w({ width: n.question.imageWidth })
-            }, I(s.name), 13, Ci)
+            }, I(s.name), 13, bi)
           ], 2)) : d("", !0),
           p("div", {
             class: l(n.question.getImageWrapperCss(s))
@@ -4971,7 +4979,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
                 width: n.question.imageWidth
               }),
               alt: "File preview"
-            }, null, 12, bi)) : d("", !0),
+            }, null, 12, ki)) : d("", !0),
             n.question.defaultImage(s) ? (t(), y(e, {
               key: 1,
               iconName: n.question.cssClasses.defaultImageIconId,
@@ -4993,7 +5001,7 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
                 iconName: n.question.cssClasses.removeFileSvgIconId,
                 size: "auto"
               }, null, 8, ["title", "class", "iconName"])) : d("", !0)
-            ], 10, ki)) : d("", !0)
+            ], 10, fi)) : d("", !0)
           ], 2),
           s.name && n.question.cssClasses.fileSignBottom ? (t(), u("div", {
             key: 1,
@@ -5005,35 +5013,35 @@ const ti = /* @__PURE__ */ me(si, [["render", oi]]), ii = { key: 2 }, li = /* @_
               title: s.name,
               download: s.name,
               style: w({ width: n.question.imageWidth })
-            }, I(s.name), 13, fi)
+            }, I(s.name), 13, Ii)
           ], 2)) : d("", !0)
         ], 2)), [
-          [_, s && n.question.isPreviewVisible(i)]
+          [A, s && n.question.isPreviewVisible(i)]
         ])), 128))
       ], 2)) : d("", !0);
     };
   }
 });
 He.platform = "vue3";
-function wi(r) {
-  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", Oe), r.component("survey-page", We), r.component("survey-row", ze), r.component("survey-element", Ke), r.component("survey-panel", Ge), r.component("survey-element-header", Xe), r.component("survey-string", Je), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", hs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Ts), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", _s), r.component("survey-expression", As), r.component("survey-file", Vs), r.component("sv-file-choose-btn", hi), r.component("sv-file-clean-btn", vi), r.component("sv-file-preview", Ii), r.component("sv-file-video", yi), r.component("survey-imagepicker", Os), r.component("survey-imagepicker-item", Qs), r.component("survey-comment", Js), r.component("survey-dropdown", Ys), r.component("sv-dropdown-select", sn), r.component("sv-dropdown-option-item", on), r.component("sv-dropdown", un), r.component("survey-tagbox", dn), r.component("sv-tagbox", pn), r.component("sv-tagbox-item", hn), r.component("sv-tagbox-filter", yn), r.component("survey-ranking", Cn), r.component("survey-ranking-item", Sn), r.component("survey-rating", $n), r.component("sv-rating-item", Ln), r.component("sv-rating-item-smiley", Pn), r.component("sv-rating-item-star", Nn), r.component("sv-rating-dropdown", Hn), r.component("survey-boolean", An), r.component("sv-boolean-radio", En), r.component("sv-boolean-radio-item", Fn), r.component("sv-boolean-checkbox", jn), r.component("survey-multipletext", Qn), r.component("survey-multipletext-item", Xn), r.component("survey-matrix", oo), r.component("survey-matrixdropdown", to), r.component("survey-matrixtable", ao), r.component("survey-matrixheaderrequired", mo), r.component("survey-matrixcell", po), r.component("survey-matrixdynamic", vo), r.component("sv-matrix-remove-button", yo), r.component("sv-matrix-drag-drop-icon", ho), r.component("sv-matrix-detail-button", bo), r.component("survey-paneldynamic", ko), r.component("survey-paneldynamicprogress", fo), r.component("survey-paneldynamicprogress-v2", Io), r.component("sv-paneldynamic-add-btn", wo), r.component("sv-paneldynamic-next-btn", To), r.component("sv-paneldynamic-prev-btn", $o), r.component("sv-paneldynamic-remove-btn", Bo), r.component("sv-paneldynamic-progress-text", Lo), r.component("sv-components-container", Rt), r.component("sv-progress-buttons", Dt), r.component("sv-progress-toc", Pt), r.component("sv-progress-pages", X), r.component("sv-progress-questions", X), r.component("sv-progress-correctquestions", X), r.component("sv-progress-requiredquestions", X), r.component("survey-errors", Po), r.component("survey-question-comment", Ho), r.component("survey-element-title", _o), r.component("survey-element-title-content", Fo), r.component("sv-title-actions", Uo), r.component("sv-brand-info", Jo), r.component("sv-svg-icon", et), r.component("sv-action-bar", st), r.component("sv-action", tt), r.component("sv-action-bar-item", lt), r.component("sv-action-bar-item-dropdown", at), r.component("sv-action-bar-separator", ut), r.component("sv-list", pt), r.component("sv-list-item", yt), r.component("sv-popup", gt), r.component("sv-popup-container", wt), r.component("popup-pointer", St), r.component("sv-notifier", Vt), r.component("survey-other-choice", zt), r.component("sv-nav-btn", Kt), r.component("survey-customwidget", Qt), r.component("survey-popup-modal", Gt), r.component("sv-character-counter", Xt), r.component("survey-composite", Jt), r.component("survey-custom", Yt), r.component("sv-timerpanel", ei), r.component("sv-loading-indicator", ti), r.component("sv-header", li), r.component("sv-header-cell", ui), r.component("sv-header-mobile", pi), r.directive("key2click", {
+function Si(r) {
+  r.component("SurveyComponent", re), r.component("PopupSurveyComponent", ae), r.component("survey", re), r.component("popup-survey", ae), r.component("survey-header", Oe), r.component("survey-page", We), r.component("survey-row", ze), r.component("survey-element", Ke), r.component("survey-panel", Ge), r.component("survey-element-header", Xe), r.component("survey-string", Je), r.component("sv-string-viewer", xe), r.component("sv-string-editor", ss), r.component("sv-skeleton", os), r.component("survey-text", ls), r.component("survey-text-input", ds), r.component("survey-checkbox", ps), r.component("survey-checkbox-item", hs), r.component("survey-radiogroup", fs), r.component("survey-radiogroup-item", Ts), r.component("survey-signaturepad", Ls), r.component("survey-html", Ps), r.component("survey-image", As), r.component("survey-expression", _s), r.component("survey-file", Vs), r.component("sv-file-choose-btn", Ci), r.component("sv-file-clean-btn", qi), r.component("sv-file-preview", wi), r.component("sv-file-video", gi), r.component("survey-imagepicker", Os), r.component("survey-imagepicker-item", Qs), r.component("survey-comment", Js), r.component("survey-dropdown", Ys), r.component("sv-dropdown-select", sn), r.component("sv-dropdown-option-item", on), r.component("sv-dropdown", dn), r.component("survey-tagbox", mn), r.component("sv-tagbox", qn), r.component("sv-tagbox-item", bn), r.component("sv-tagbox-filter", hn), r.component("survey-ranking", kn), r.component("survey-ranking-item", Rn), r.component("survey-rating", Ln), r.component("sv-rating-item", Pn), r.component("sv-rating-item-smiley", Nn), r.component("sv-rating-item-star", An), r.component("sv-rating-dropdown", _n), r.component("survey-boolean", Wn), r.component("sv-boolean-radio", Vn), r.component("sv-boolean-radio-item", zn), r.component("sv-boolean-checkbox", Gn), r.component("survey-multipletext", Xn), r.component("survey-multipletext-item", Yn), r.component("survey-matrix", io), r.component("survey-matrixdropdown", lo), r.component("survey-matrixtable", mo), r.component("survey-matrixheaderrequired", po), r.component("survey-matrixcell", qo), r.component("survey-matrixdynamic", yo), r.component("sv-matrix-remove-button", ho), r.component("sv-matrix-drag-drop-icon", bo), r.component("sv-matrix-detail-button", fo), r.component("survey-paneldynamic", Io), r.component("survey-paneldynamicprogress", wo), r.component("survey-paneldynamicprogress-v2", So), r.component("sv-paneldynamic-add-btn", To), r.component("sv-paneldynamic-next-btn", $o), r.component("sv-paneldynamic-prev-btn", Lo), r.component("sv-paneldynamic-remove-btn", Do), r.component("sv-paneldynamic-progress-text", Po), r.component("sv-components-container", $t), r.component("sv-progress-buttons", Pt), r.component("sv-progress-toc", Mt), 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", No), r.component("survey-question-comment", _o), r.component("survey-element-title", Eo), r.component("survey-element-title-content", zo), r.component("sv-title-actions", jo), r.component("sv-brand-info", Zo), r.component("sv-svg-icon", st), r.component("sv-action-bar", nt), r.component("sv-action", it), r.component("sv-action-bar-item", rt), r.component("sv-action-bar-item-dropdown", ut), r.component("sv-action-bar-separator", dt), r.component("sv-list", vt), r.component("sv-list-item", gt), r.component("sv-popup", ht), r.component("sv-popup-container", St), r.component("popup-pointer", Tt), r.component("sv-notifier", Ft), r.component("survey-other-choice", Ut), r.component("sv-nav-btn", jt), r.component("survey-customwidget", Gt), r.component("survey-popup-modal", Xt), r.component("sv-character-counter", Jt), r.component("survey-composite", Yt), r.component("survey-custom", Zt), r.component("sv-timerpanel", si), r.component("sv-loading-indicator", ii), r.component("sv-header", ri), r.component("sv-header-cell", di), r.component("sv-header-mobile", vi), r.directive("key2click", {
     mounted: function(n, o) {
       const e = { ...o.value };
       e.disableTabStop || (n.tabIndex = 0), n.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), de(s, e), !1)), n.addEventListener("keydown", (s) => {
-        _e(s, e);
+        Ae(s, e);
       }), n.addEventListener("blur", (s) => {
-        Ae(s);
+        _e(s);
       });
     }
   });
 }
-const Ri = {
+const $i = {
   install(r) {
-    wi(r);
+    Si(r);
   }
 };
 export {
-  Ri as surveyPlugin,
+  $i as surveyPlugin,
   L as useBase,
   z as useLocString,
   H as useQuestion