survey-vue3-ui 2.3.8 → 2.3.10

package/survey-vue3-ui.es.js

@@ -1,7 +1,7 @@
 var Ie = Object.defineProperty;
 var Ve = (u, e, n) => e in u ? Ie(u, e, { enumerable: !0, configurable: !0, writable: !0, value: n }) : u[e] = n;
 var K = (u, e, n) => (Ve(u, typeof e != "symbol" ? e + "" : e, n), n);
-import { defineComponent as y, computed as f, openBlock as i, createBlock as c, resolveDynamicComponent as ye, normalizeProps as ae, guardReactiveProps as ue, createSlots as Se, renderList as V, withCtx as D, renderSlot as X, watch as N, onBeforeUpdate as Re, onUpdated as E, onBeforeMount as Te, onMounted as T, onBeforeUnmount as z, ref as k, unref as w, isRef as de, customRef as Be, nextTick as he, createElementBlock as a, normalizeClass as l, createVNode as C, createCommentVNode as p, Fragment as H, mergeProps as $, normalizeStyle as L, createElementVNode as v, onUnmounted as P, withDirectives as B, vShow as A, toDisplayString as M, vModelCheckbox as se, vModelRadio as qe, vModelSelect as Ze, vModelText as $e, shallowRef as _, createStaticVNode as De, toRaw as Ae, triggerRef as Pe, Teleport as Ne, useSlots as Ee } from "vue";
+import { defineComponent as y, computed as f, openBlock as i, createBlock as C, resolveDynamicComponent as ye, normalizeProps as ae, guardReactiveProps as ue, createSlots as Se, renderList as V, withCtx as D, renderSlot as X, watch as N, onBeforeUpdate as Re, onUpdated as E, onBeforeMount as Te, onMounted as T, onBeforeUnmount as z, ref as k, unref as w, isRef as de, customRef as Be, nextTick as he, createElementBlock as a, normalizeClass as l, createVNode as c, createCommentVNode as p, Fragment as M, mergeProps as $, normalizeStyle as L, createElementVNode as v, onUnmounted as P, withDirectives as B, vShow as A, toDisplayString as H, vModelCheckbox as se, vModelRadio as qe, vModelSelect as Ze, vModelText as $e, shallowRef as _, createStaticVNode as De, toRaw as Ae, triggerRef as Pe, Teleport as Ne, useSlots as Ee } from "vue";
 import { ScrollViewModel as We, RendererFactory as U, Helpers as Fe, DropdownMultiSelectListModel as Oe, doKey2ClickUp as we, createSvg as ze, doKey2ClickDown as Ue, doKey2ClickBlur as Qe, ActionDropdownViewModel as Ke, createPopupViewModel as je, SurveyProgressModel as me, ProgressButtonsResponsivityManager as Ge, addIconsToThemeSet as be, SvgRegistry as J, PopupSurveyModel as Je, settings as ee, createPopupModalViewModel as Xe, ButtonGroupItemModel as Ye, SurveyModel as _e } from "survey-core";
 const Y = class Y {
   constructor() {
@@ -35,7 +35,7 @@ const d = /* @__PURE__ */ y({
     const e = u, n = f(
       () => W.Instance.getComponent(e.is)
     );
-    return (s, t) => (i(), c(ye(n.value), ae(ue(s.$attrs)), Se({ _: 2 }, [
+    return (s, t) => (i(), C(ye(n.value), ae(ue(s.$attrs)), Se({ _: 2 }, [
       V(s.$slots, (o, r) => ({
         name: r,
         fn: D((m) => [
@@ -190,7 +190,7 @@ const ns = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "survey-element-title",
         element: o.page,
         css: o.css
@@ -199,23 +199,23 @@ const ns = /* @__PURE__ */ y({
         key: 0,
         class: l(o.page.cssClasses.page.description)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: o.page.locDescription
         }, null, 8, ["locString"])
       ], 2)) : p("", !0),
-      C(d, {
+      c(d, {
         is: "survey-errors",
         element: o.page
       }, null, 8, ["element"]),
-      (i(!0), a(H, null, V(o.page.visibleRows, (m) => (i(), c(d, $({
+      (i(!0), a(M, null, V(o.page.visibleRows, (m) => (i(), C(d, $({
         key: m.id,
         is: o.page.getSurvey().getRowWrapperComponentName(m)
       }, {
         componentData: o.page.getSurvey().getRowWrapperComponentData(m)
       }), {
         default: D(() => [
-          C(d, {
+          c(d, {
             is: "survey-row",
             row: m,
             survey: o.survey,
@@ -242,7 +242,7 @@ const ns = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      s.survey.isLogoBefore ? (i(), c(d, {
+      s.survey.isLogoBefore ? (i(), C(d, {
         key: 0,
         is: s.survey.getElementWrapperComponentName(s.survey, "logo-image"),
         data: s.survey.getElementWrapperComponentData(s.survey, "logo-image")
@@ -252,7 +252,7 @@ const ns = /* @__PURE__ */ y({
         class: l(s.survey.css.headerText),
         style: L({ maxWidth: s.survey.titleMaxWidth })
       }, [
-        C(d, {
+        c(d, {
           is: "survey-element-title",
           element: s.survey,
           css: s.survey.css
@@ -261,13 +261,13 @@ const ns = /* @__PURE__ */ y({
           key: 0,
           class: l(s.survey.css.description)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: s.survey.locDescription
           }, null, 8, ["locString"])
         ], 2)) : p("", !0)
       ], 6)) : p("", !0),
-      s.survey.isLogoAfter ? (i(), c(d, {
+      s.survey.isLogoAfter ? (i(), C(d, {
         key: 2,
         is: s.survey.getElementWrapperComponentName(s.survey, "logo-image"),
         data: s.survey.getElementWrapperComponentData(s.survey, "logo-image")
@@ -307,7 +307,7 @@ const ns = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), a(H, null, V(t.row.visibleElements, (r) => (i(), c(d, {
+      (i(!0), a(M, null, V(t.row.visibleElements, (r) => (i(), C(d, {
         is: "survey-element",
         row: t.row,
         css: t.css,
@@ -316,7 +316,7 @@ const ns = /* @__PURE__ */ y({
       }, null, 8, ["row", "css", "element"]))), 128))
     ], 2));
   }
-}), is = ["id", "role", "aria-required", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], rs = ["aria-hidden"], ls = ["id"], as = {
+}), is = ["id", "role", "aria-required", "aria-invalid", "aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "data-name"], rs = ["aria-hidden", "data-sv-drop-target-matrix", "data-sv-drop-target-matrix-row"], ls = ["id"], as = {
   inheritAttrs: !1
 }, us = /* @__PURE__ */ y({
   ...as,
@@ -360,36 +360,36 @@ const ns = /* @__PURE__ */ y({
       "aria-expanded": q.element.ariaExpanded,
       "data-name": q.element.name
     }, [
-      q.element.singleInputHasActions ? (i(), c(d, {
+      q.element.singleInputHasActions ? (i(), C(d, {
         key: 0,
         is: "sv-breadcrumbs",
         model: q.element.singleInputActions,
         css: q.element.cssClasses
       }, null, 8, ["model", "css"])) : p("", !0),
-      q.element.showErrorsAboveQuestion ? (i(), c(d, {
+      q.element.showErrorsAboveQuestion ? (i(), C(d, {
         key: 1,
         is: "survey-errors",
         element: q.element,
         location: "top"
       }, null, 8, ["element"])) : p("", !0),
-      !q.element.singleInputHideHeader && q.element.hasTitleOnLeftTop ? (i(), c(d, {
+      !q.element.singleInputHideHeader && q.element.hasTitleOnLeftTop ? (i(), C(d, {
         key: 2,
         is: "survey-element-header",
         element: q.element,
         css: q.element.cssClasses
       }, null, 8, ["element", "css"])) : p("", !0),
-      q.element.singleInputSummary ? (i(), c(d, {
+      q.element.singleInputSummary ? (i(), C(d, {
         key: 3,
         is: "sv-single-input-summary",
         css: q.element.cssClasses,
         summary: q.element.singleInputSummary
-      }, null, 8, ["css", "summary"])) : o.value ? (i(), c(d, {
+      }, null, 8, ["css", "summary"])) : o.value ? (i(), C(d, {
         is: "survey-question",
         css: q.css,
         element: o.value,
         survey: q.survey,
         key: o.value.id
-      }, null, 8, ["css", "element", "survey"])) : (i(), c(d, $({
+      }, null, 8, ["css", "element", "survey"])) : (i(), C(d, $({
         key: 5,
         is: S.value
       }, h.value), {
@@ -398,9 +398,11 @@ const ns = /* @__PURE__ */ y({
             class: l(s(q.element) || void 0),
             "aria-hidden": q.element.contentAriaHidden,
             style: L({ display: q.element.renderedIsExpanded ? void 0 : "none" }),
-            role: "presentation"
+            role: "presentation",
+            "data-sv-drop-target-matrix": q.element.dragDropMatrixAttribute,
+            "data-sv-drop-target-matrix-row": q.element.dragDropMatrixAttribute
           }, [
-            C(d, {
+            c(d, {
               is: g.value,
               question: q.element
             }, null, 8, ["is", "question"]),
@@ -409,12 +411,12 @@ const ns = /* @__PURE__ */ y({
               class: l(q.element.getCommentAreaCss())
             }, [
               v("div", null, [
-                C(d, {
+                c(d, {
                   is: "survey-string",
                   locString: q.element.locCommentText
                 }, null, 8, ["locString"])
               ]),
-              C(d, {
+              c(d, {
                 is: "survey-question-comment",
                 question: q.element
               }, null, 8, ["question"])
@@ -424,7 +426,7 @@ const ns = /* @__PURE__ */ y({
               class: l(q.element.cssDescription),
               id: q.element.ariaDescriptionId
             }, [
-              C(d, {
+              c(d, {
                 is: "survey-string",
                 locString: q.element.locDescription
               }, null, 8, ["locString"])
@@ -433,13 +435,13 @@ const ns = /* @__PURE__ */ y({
         ]),
         _: 1
       }, 16, ["is"])),
-      q.element.hasTitleOnBottom ? (i(), c(d, {
+      q.element.hasTitleOnBottom ? (i(), C(d, {
         key: 6,
         is: "survey-element-header",
         element: q.element,
         css: q.css
       }, null, 8, ["element", "css"])) : p("", !0),
-      q.element.showErrorsBelowQuestion ? (i(), c(d, {
+      q.element.showErrorsBelowQuestion ? (i(), C(d, {
         key: 7,
         is: "survey-errors",
         element: q.element,
@@ -470,18 +472,18 @@ const ns = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      t.element.showErrorsAbovePanel ? (i(), c(d, {
+      t.element.showErrorsAbovePanel ? (i(), C(d, {
         key: 0,
         is: "survey-errors",
         element: t.element
       }, null, 8, ["element"])) : p("", !0),
-      t.element.hasTitle || t.element.hasDescription ? (i(), c(d, {
+      t.element.hasTitle || t.element.hasDescription ? (i(), C(d, {
         key: 1,
         is: "survey-element-header",
         element: t.element,
         css: t.css
       }, null, 8, ["element", "css"])) : p("", !0),
-      t.element.showErrorsAbovePanel ? p("", !0) : (i(), c(d, {
+      t.element.showErrorsAbovePanel ? p("", !0) : (i(), C(d, {
         key: 2,
         is: "survey-errors",
         element: t.element
@@ -495,14 +497,14 @@ const ns = /* @__PURE__ */ y({
         "aria-labelledby": t.element.ariaLabelledBy,
         "aria-label": t.element.ariaLabel
       }, [
-        (i(!0), a(H, null, V(t.element.visibleRows, (r) => (i(), c(d, $({
+        (i(!0), a(M, null, V(t.element.visibleRows, (r) => (i(), C(d, $({
           key: r.id,
           is: t.element.getSurvey().getRowWrapperComponentName(r)
         }, {
           componentData: t.element.getSurvey().getRowWrapperComponentData(r)
         }), {
           default: D(() => [
-            C(d, {
+            c(d, {
               is: "survey-row",
               row: r,
               survey: s.value,
@@ -511,7 +513,7 @@ const ns = /* @__PURE__ */ y({
           ]),
           _: 2
         }, 1040, ["is"]))), 128)),
-        C(d, {
+        c(d, {
           is: "sv-action-bar",
           model: t.element.getFooterToolbar()
         }, null, 8, ["model"])
@@ -536,7 +538,7 @@ const ns = /* @__PURE__ */ y({
       onClick: n,
       style: L(s())
     }, [
-      C(d, {
+      c(d, {
         is: "survey-element-title",
         element: t.element,
         css: t.css
@@ -546,14 +548,14 @@ const ns = /* @__PURE__ */ y({
         class: l(t.element.cssDescription),
         id: t.element.ariaDescriptionId
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: t.element.locDescription
         }, null, 8, ["locString"])
       ], 10, Cs)), [
         [A, t.element.hasDescription]
       ]) : p("", !0),
-      t.element.hasAdditionalTitleToolbar ? (i(), c(d, {
+      t.element.hasAdditionalTitleToolbar ? (i(), C(d, {
         key: 1,
         is: "sv-action-bar",
         model: t.element.additionalTitleToolbar
@@ -566,7 +568,7 @@ const ns = /* @__PURE__ */ y({
     locString: {}
   },
   setup(u) {
-    return (e, n) => (i(), c(d, {
+    return (e, n) => (i(), C(d, {
       is: e.locString.renderAs,
       locString: e.locString.renderAsData
     }, null, 8, ["is", "locString"]));
@@ -585,7 +587,7 @@ const ns = /* @__PURE__ */ y({
     }, null, 10, ys)) : (i(), a("span", {
       key: 1,
       class: l(w(s))
-    }, M(w(n)), 3));
+    }, H(w(n)), 3));
   }
 }), qs = ["innerHTML"], ws = /* @__PURE__ */ y({
   __name: "StringEditor",
@@ -612,7 +614,7 @@ const ns = /* @__PURE__ */ y({
       contenteditable: "true",
       onBlur: n,
       onClick: s
-    }, M(t.locString.renderedHtml), 33));
+    }, H(t.locString.renderedHtml), 33));
   }
 }), bs = ["id"], Ls = /* @__PURE__ */ y({
   __name: "Skeleton",
@@ -627,9 +629,9 @@ const ns = /* @__PURE__ */ y({
       style: L({ height: n.element.skeletonHeight })
     }, null, 12, bs));
   }
-}), ks = { class: "sv-scroll__container" }, fs = /* @__PURE__ */ v("div", { class: "sv-scroll__scrollbar-sizer" }, null, -1), Hs = [
+}), ks = { class: "sv-scroll__container" }, fs = /* @__PURE__ */ v("div", { class: "sv-scroll__scrollbar-sizer" }, null, -1), Ms = [
   fs
-], Ms = /* @__PURE__ */ y({
+], Hs = /* @__PURE__ */ y({
   __name: "Scroll",
   props: {
     disabled: {},
@@ -662,7 +664,7 @@ const ns = /* @__PURE__ */ y({
       v("div", {
         class: "sv-scroll__scrollbar",
         onScroll: o[1] || (o[1] = () => w(n).onScrollScrollbar())
-      }, Hs, 32)
+      }, Ms, 32)
     ], 512));
   }
 }), Is = ["id"], Vs = ["value"], Ss = /* @__PURE__ */ y({
@@ -677,24 +679,24 @@ const ns = /* @__PURE__ */ y({
       key: 0,
       ref_key: "root",
       ref: n
-    }, M(s.question.value), 513)) : s.question.dataListId ? (i(), a("div", {
+    }, H(s.question.value), 513)) : s.question.dataListId ? (i(), a("div", {
       key: 1,
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "survey-text-input",
         question: s.question
       }, null, 8, ["question"]),
       v("datalist", {
         id: s.question.dataListId
       }, [
-        (i(!0), a(H, null, V(s.question.dataList, (o, r) => (i(), a("option", {
+        (i(!0), a(M, null, V(s.question.dataList, (o, r) => (i(), a("option", {
           key: r,
           value: o
         }, null, 8, Vs))), 128))
       ], 8, Is)
-    ], 512)) : (i(), c(d, {
+    ], 512)) : (i(), C(d, {
       key: 2,
       is: "survey-text-input",
       question: s.question,
@@ -758,7 +760,7 @@ const ns = /* @__PURE__ */ y({
         "aria-invalid": r.question.a11y_input_ariaInvalid,
         "aria-errormessage": r.question.a11y_input_ariaErrormessage
       }, null, 46, Ts),
-      C(d, {
+      c(d, {
         is: "sv-character-counter",
         counter: r.question.characterCounter,
         remainingCharacterCounter: r.question.cssClasses.remainingCharacterCounter
@@ -838,12 +840,12 @@ const ns = /* @__PURE__ */ y({
       "aria-invalid": o.question.a11y_input_ariaInvalid,
       "aria-errormessage": o.question.a11y_input_ariaErrormessage
     }, [
-      o.showLegend ? (i(), a("legend", $s, M(o.question.locTitle.renderedHtml), 1)) : p("", !0),
-      o.question.hasHeadItems ? (i(!0), a(H, { key: 1 }, V(o.question.headItems, (m) => (i(), c(d, $({
+      o.showLegend ? (i(), a("legend", $s, H(o.question.locTitle.renderedHtml), 1)) : p("", !0),
+      o.question.hasHeadItems ? (i(!0), a(M, { key: 1 }, V(o.question.headItems, (m) => (i(), C(d, $({
         key: m.value,
         is: s(m)
       }, t(m)), null, 16, ["is"]))), 128)) : p("", !0),
-      !o.question.hasColumns && !o.question.blockedRow ? (i(!0), a(H, { key: 2 }, V(o.question.bodyItems, (m) => (i(), c(d, $({
+      !o.question.hasColumns && !o.question.blockedRow ? (i(!0), a(M, { key: 2 }, V(o.question.bodyItems, (m) => (i(), C(d, $({
         key: m.value,
         is: s(m)
       }, t(m)), null, 16, ["is"]))), 128)) : p("", !0),
@@ -851,7 +853,7 @@ const ns = /* @__PURE__ */ y({
         key: 3,
         class: l(o.question.cssClasses.rootRow)
       }, [
-        !o.question.hasColumns && o.question.blockedRow ? (i(!0), a(H, { key: 0 }, V(o.question.dataChoices, (m) => (i(), c(d, $({
+        !o.question.hasColumns && o.question.blockedRow ? (i(!0), a(M, { key: 0 }, V(o.question.dataChoices, (m) => (i(), C(d, $({
           key: m.value,
           is: s(m)
         }, t(m)), null, 16, ["is"]))), 128)) : p("", !0)
@@ -860,18 +862,18 @@ const ns = /* @__PURE__ */ y({
         key: 4,
         class: l(o.question.cssClasses.rootMultiColumn)
       }, [
-        o.question.hasColumns ? (i(!0), a(H, { key: 0 }, V(o.question.columns, (m, g) => (i(), a("div", {
+        o.question.hasColumns ? (i(!0), a(M, { key: 0 }, V(o.question.columns, (m, g) => (i(), a("div", {
           key: g,
           class: l(o.question.getColumnClass()),
           role: "presentation"
         }, [
-          (i(!0), a(H, null, V(m, (S) => (i(), c(d, $({
+          (i(!0), a(M, null, V(m, (S) => (i(), C(d, $({
             key: S.value,
             is: s(S)
           }, t(S)), null, 16, ["is"]))), 128))
         ], 2))), 128)) : p("", !0)
       ], 2)) : p("", !0),
-      o.question.hasFootItems ? (i(!0), a(H, { key: 5 }, V(o.question.footItems, (m) => (i(), c(d, $({
+      o.question.hasFootItems ? (i(!0), a(M, { key: 5 }, V(o.question.footItems, (m) => (i(), C(d, $({
         key: m.value,
         is: s(m)
       }, t(m)), null, 16, ["is"]))), 128)) : p("", !0),
@@ -880,7 +882,7 @@ const ns = /* @__PURE__ */ y({
           type: "button",
           class: l(o.question.cssClasses.clearButton),
           onClick: r[0] || (r[0] = () => {
-            o.question.clearValue(!0);
+            o.question.clearValueFromUI();
           }),
           value: o.question.clearButtonCaption
         }, null, 10, As)
@@ -894,7 +896,7 @@ const ns = /* @__PURE__ */ y({
     question: {}
   },
   setup(u) {
-    return (e, n) => (i(), c(Le, {
+    return (e, n) => (i(), C(Le, {
       question: e.question,
       "show-legend": !0
     }, null, 8, ["question"]));
@@ -928,7 +930,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     const s = (t) => {
       n.question.clickItemHandler(n.item, t.target.checked);
     };
-    return (t, o) => (i(), a(H, null, [
+    return (t, o) => (i(), a(M, null, [
       v("div", {
         role: "presentation",
         class: l(t.question.getItemClass(t.item)),
@@ -970,15 +972,21 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             key: 1,
             class: l(t.question.cssClasses.controlLabel)
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: t.item.locText
             }, null, 8, ["locString"])
           ], 2))
         ], 2)
       ], 2),
-      t.item.isCommentShowing ? (i(), c(d, {
+      t.item.isPanelShowing ? (i(), C(d, {
         key: 0,
+        is: "survey-panel",
+        element: t.item.panel,
+        cssClasses: t.question.cssClasses
+      }, null, 8, ["element", "cssClasses"])) : p("", !0),
+      t.item.isCommentShowing ? (i(), C(d, {
+        key: 1,
         is: "survey-other-choice",
         question: t.question,
         item: t.item
@@ -992,7 +1000,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
     question: {}
   },
   setup(u) {
-    return (e, n) => (i(), c(Le, { question: e.question }, null, 8, ["question"]));
+    return (e, n) => (i(), C(Le, { question: e.question }, null, 8, ["question"]));
   }
 }), Os = ["name", "value", "id", "aria-errormessage", "checked", "disabled", "readonly", "aria-label"], zs = ["xlink:href"], Us = /* @__PURE__ */ y({
   inheritAttrs: !1,
@@ -1011,7 +1019,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       () => n.item,
       () => n.question,
       e
-    ), (r, m) => (i(), a(H, null, [
+    ), (r, m) => (i(), a(M, null, [
       v("div", {
         role: "presentation",
         class: l(r.question.getItemClass(r.item)),
@@ -1054,15 +1062,21 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             key: 1,
             class: l(t(r.item))
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: r.item.locText
             }, null, 8, ["locString"])
           ], 2))
         ], 34)
       ], 2),
-      r.item.isCommentShowing ? (i(), c(d, {
+      r.item.isPanelShowing ? (i(), C(d, {
         key: 0,
+        is: "survey-panel",
+        element: r.item.panel,
+        cssClasses: r.question.cssClasses
+      }, null, 8, ["element", "cssClasses"])) : p("", !0),
+      r.item.isCommentShowing ? (i(), C(d, {
+        key: 1,
         is: "survey-other-choice",
         question: r.question,
         item: r.item
@@ -1088,7 +1102,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       B(v("div", {
         class: l(s.question.cssClasses.placeholder)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.question.locRenderedPlaceholder
         }, null, 8, ["locString"])
@@ -1121,11 +1135,11 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           class: l(s.question.cssClasses.clearButton),
           title: s.question.clearButtonCaption,
           onClick: t[1] || (t[1] = () => {
-            s.question.clearValue(!0);
+            s.question.clearValueFromUI();
           })
         }, [
           s.question.cssClasses.clearButtonIconId ? p("", !0) : (i(), a("span", js, "✖")),
-          s.question.cssClasses.clearButtonIconId ? (i(), c(d, {
+          s.question.cssClasses.clearButtonIconId ? (i(), C(d, {
             key: 1,
             is: "sv-svg-icon",
             iconName: s.question.cssClasses.clearButtonIconId,
@@ -1137,7 +1151,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         key: 1,
         class: l(s.question.cssClasses.loadingIndicator)
       }, [
-        C(d, { is: "sv-loading-indicator" })
+        c(d, { is: "sv-loading-indicator" })
       ], 2)) : p("", !0)
     ], 6));
   }
@@ -1232,7 +1246,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
         key: 3,
         class: l(t.question.cssClasses.noImage)
       }, [
-        C(d, {
+        c(d, {
           is: "sv-svg-icon",
           iconName: t.question.cssClasses.noImageSvgIconId,
           size: 48
@@ -1254,7 +1268,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref: n,
       "aria-live": "polite",
       "aria-label": s.question.formatedValue
-    }, M(s.question.formatedValue), 11, s1));
+    }, H(s.question.formatedValue), 11, s1));
   }
 }), t1 = ["id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "multiple", "title", "accept", "capture"], o1 = ["id", "multiple", "placeholder"], i1 = ["id", "multiple", "placeholder"], r1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
@@ -1323,7 +1337,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             key: 0,
             class: l(s.question.cssClasses.dragAreaPlaceholder)
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: s.question.locRenderedPlaceholder
             }, null, 8, ["locString"])
@@ -1331,7 +1345,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           v("div", {
             class: l(s.question.cssClasses.wrapper)
           }, [
-            s.question.actionsContainerVisible ? (i(), c(d, {
+            s.question.actionsContainerVisible ? (i(), C(d, {
               key: 0,
               is: "sv-action-bar",
               model: s.question.actionsContainer
@@ -1342,19 +1356,19 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
           key: 1,
           class: l(s.question.cssClasses.loadingIndicator)
         }, [
-          C(d, { is: "sv-loading-indicator" })
+          c(d, { is: "sv-loading-indicator" })
         ], 2)) : p("", !0),
-        s.question.isPlayingVideo ? (i(), c(d, {
+        s.question.isPlayingVideo ? (i(), C(d, {
           key: 2,
           is: "sv-file-video",
           question: s.question
         }, null, 8, ["question"])) : p("", !0),
-        s.question.allowShowPreview ? (i(), c(d, {
+        s.question.allowShowPreview ? (i(), C(d, {
           key: 3,
           is: "sv-file-preview",
           question: s.question
         }, null, 8, ["question"])) : p("", !0),
-        s.question.fileNavigatorVisible ? (i(), c(d, {
+        s.question.fileNavigatorVisible ? (i(), C(d, {
           key: 4,
           is: "sv-action-bar",
           model: s.question.fileNavigator
@@ -1385,17 +1399,17 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref_key: "root",
       ref: n
     }, [
-      v("legend", l1, M(o.question.locTitle.renderedHtml), 1),
-      o.question.hasColumns ? p("", !0) : (i(!0), a(H, { key: 0 }, V(o.question.visibleChoices, (m) => (i(), c(d, $({
+      v("legend", l1, H(o.question.locTitle.renderedHtml), 1),
+      o.question.hasColumns ? p("", !0) : (i(!0), a(M, { key: 0 }, V(o.question.visibleChoices, (m) => (i(), C(d, $({
         key: m.value,
         is: s(m)
       }, t(m)), null, 16, ["is"]))), 128)),
-      o.question.hasColumns ? (i(!0), a(H, { key: 1 }, V(o.question.columns, (m, g) => (i(), a("div", {
+      o.question.hasColumns ? (i(!0), a(M, { key: 1 }, V(o.question.columns, (m, g) => (i(), a("div", {
         class: l(o.question.getColumnClass()),
         key: g,
         role: "presentation"
       }, [
-        (i(!0), a(H, null, V(m, (S) => (i(), c(d, $({
+        (i(!0), a(M, null, V(m, (S) => (i(), C(d, $({
           key: S.value,
           is: s(S)
         }, t(S)), null, 16, ["is"]))), 128))
@@ -1471,7 +1485,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
               class: l(o.question.cssClasses.checkedItemDecorator),
               "aria-hidden": "true"
             }, [
-              o.question.cssClasses.checkedItemSvgIconId ? (i(), c(d, {
+              o.question.cssClasses.checkedItemSvgIconId ? (i(), C(d, {
                 key: 0,
                 is: "sv-svg-icon",
                 class: l(o.question.cssClasses.checkedItemSvgIcon),
@@ -1518,7 +1532,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
                 objectFit: o.question.imageFit
               })
             }, [
-              C(d, {
+              c(d, {
                 is: "sv-svg-icon",
                 class: l(o.question.cssClasses.itemNoImageSvgIcon),
                 iconName: o.question.cssClasses.itemNoImageSvgIconId,
@@ -1530,7 +1544,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
             key: 0,
             class: l(o.question.cssClasses.itemText)
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: o.item.locText
             }, null, 8, ["locString"])
@@ -1555,16 +1569,16 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-text-area",
         model: t.question.textAreaModel
       }, null, 8, ["model"]),
-      C(d, {
+      c(d, {
         is: "sv-character-counter",
         counter: t.question.characterCounter,
         remainingCharacterCounter: t.question.cssClasses.remainingCharacterCounter
       }, null, 8, ["counter", "remainingCharacterCounter"])
-    ], 512)) : !t.question.isReadOnlyRenderDiv() && !t.question.getMaxLength() ? (i(), c(d, {
+    ], 512)) : !t.question.isReadOnlyRenderDiv() && !t.question.getMaxLength() ? (i(), C(d, {
       key: 1,
       is: "sv-text-area",
       "get-ref": s,
@@ -1573,7 +1587,7 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       key: 2,
       ref_key: "root",
       ref: n
-    }, M(t.question.value), 513));
+    }, H(t.question.value), 513));
   }
 }), c1 = /* @__PURE__ */ y({
   inheritAttrs: !1,
@@ -1590,11 +1604,11 @@ const Ns = ["name", "checked", "value", "id", "disabled", "readonly", "required"
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-dropdown",
         question: o.question
       }, null, 8, ["question"]),
-      t.value ? (i(), c(d, {
+      t.value ? (i(), C(d, {
         key: 0,
         is: "survey-other-choice",
         question: o.question,
@@ -1646,7 +1660,7 @@ const q1 = /* @__PURE__ */ y({
           disabled: "",
           id: r.question.inputId,
           class: l(r.question.getControlClass())
-        }, M(r.question.readOnlyText), 11, h1)) : B((i(), a("select", {
+        }, H(r.question.readOnlyText), 11, h1)) : B((i(), a("select", {
           key: 0,
           id: r.question.inputId,
           "onUpdate:modelValue": m[0] || (m[0] = (g) => o.value = g),
@@ -1660,8 +1674,8 @@ const q1 = /* @__PURE__ */ y({
           "aria-errormessage": r.question.a11y_input_ariaErrormessage,
           required: r.question.isRequired
         }, [
-          r.question.allowClear ? (i(), a("option", y1, M(r.question.placeholder), 1)) : p("", !0),
-          (i(!0), a(H, null, V(r.question.visibleChoices, (g) => (i(), c(d, {
+          r.question.allowClear ? (i(), a("option", y1, H(r.question.placeholder), 1)) : p("", !0),
+          (i(!0), a(M, null, V(r.question.visibleChoices, (g) => (i(), C(d, {
             is: "sv-dropdown-option-item",
             item: g,
             key: g.id
@@ -1674,7 +1688,7 @@ const q1 = /* @__PURE__ */ y({
           class: l(r.question.cssClasses.chevronButton),
           "aria-hidden": "true"
         }, [
-          C(d, {
+          c(d, {
             is: "sv-svg-icon",
             class: l(r.question.cssClasses.chevronButtonSvg),
             iconName: r.question.cssClasses.chevronButtonIconId,
@@ -1682,7 +1696,7 @@ const q1 = /* @__PURE__ */ y({
           }, null, 8, ["class", "iconName"])
         ], 2)) : p("", !0)
       ], 2),
-      r.question.isShowingChoiceComment ? (i(), c(d, {
+      r.question.isShowingChoiceComment ? (i(), C(d, {
         key: 0,
         is: "survey-other-choice",
         question: r.question,
@@ -1700,9 +1714,9 @@ const q1 = /* @__PURE__ */ y({
     return I(() => e.item), (s, t) => (i(), a("option", {
       value: s.item.value,
       disabled: !s.item.isEnabled
-    }, M(w(n)), 9, w1));
+    }, H(w(n)), 9, w1));
   }
-}), L1 = ["id", "disabled", "tabindex", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-activedescendant", "required"], k1 = { style: { visibility: "hidden" } }, f1 = ["disabled", "inputmode", "id", "tabindex", "readonly", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], H1 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], M1 = /* @__PURE__ */ y({
+}), L1 = ["id", "disabled", "tabindex", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-describedby", "aria-controls", "aria-activedescendant", "required"], k1 = { style: { visibility: "hidden" } }, f1 = ["disabled", "inputmode", "id", "tabindex", "readonly", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-controls", "aria-label", "aria-labelledby", "aria-describedby", "aria-activedescendant", "placeholder"], M1 = ["id", "role", "aria-label", "aria-labelledby", "aria-describedby", "tabindex"], H1 = /* @__PURE__ */ y({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1758,12 +1772,12 @@ const q1 = /* @__PURE__ */ y({
             key: 0,
             class: l(b.question.cssClasses.hintPrefix)
           }, [
-            v("span", null, M(s.value.hintStringPrefix), 1)
+            v("span", null, H(s.value.hintStringPrefix), 1)
           ], 2)) : p("", !0),
           v("div", {
             class: l(b.question.cssClasses.controlValue)
           }, [
-            h.value ? (i(), c(d, {
+            h.value ? (i(), C(d, {
               key: 0,
               is: "survey-string",
               locString: q.value
@@ -1772,10 +1786,10 @@ const q1 = /* @__PURE__ */ y({
               key: 1,
               class: l(b.question.cssClasses.hintSuffix)
             }, [
-              v("span", k1, M(s.value.inputStringRendered), 1),
-              v("span", null, M(s.value.hintStringSuffix), 1)
+              v("span", k1, H(s.value.inputStringRendered), 1),
+              v("span", null, H(s.value.hintStringSuffix), 1)
             ], 2)) : p("", !0),
-            b.question.showInputFieldComponent ? (i(), c(d, {
+            b.question.showInputFieldComponent ? (i(), C(d, {
               key: 2,
               is: b.question.inputFieldComponentName,
               item: s.value.getSelectedAction(),
@@ -1809,12 +1823,12 @@ const q1 = /* @__PURE__ */ y({
               onFocus: g
             }, null, 42, f1)) : p("", !0)
           ], 2),
-          C(d, {
+          c(d, {
             is: "sv-action-bar",
             model: s.value.editorButtons
           }, null, 8, ["model"])
         ], 42, L1)),
-        b.question.isInputReadOnly ? p("", !0) : (i(), c(d, {
+        b.question.isInputReadOnly ? p("", !0) : (i(), C(d, {
           key: 1,
           is: "sv-popup",
           model: s.value.popupModel
@@ -1835,17 +1849,17 @@ const q1 = /* @__PURE__ */ y({
           v("div", {
             class: l(b.question.cssClasses.controlValue)
           }, [
-            b.question.locReadOnlyText ? (i(), c(d, {
+            b.question.locReadOnlyText ? (i(), C(d, {
               key: 0,
               is: "survey-string",
               locString: b.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2),
-          C(d, {
+          c(d, {
             is: "sv-action-bar",
             model: s.value.editorButtons
           }, null, 8, ["model"])
-        ], 10, H1)) : p("", !0)
+        ], 10, M1)) : p("", !0)
       ], 2);
     };
   }
@@ -1862,11 +1876,11 @@ const q1 = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-tagbox",
         question: s.question
       }, null, 8, ["question"]),
-      s.question.isOtherSelected ? (i(), c(d, {
+      s.question.isOtherSelected ? (i(), C(d, {
         key: 0,
         is: "survey-other-choice",
         question: s.question,
@@ -1922,25 +1936,25 @@ const q1 = /* @__PURE__ */ y({
           v("div", {
             class: l(r.question.cssClasses.controlValue)
           }, [
-            (i(!0), a(H, null, V(r.question.selectedChoices, (b, Z) => (i(), c(d, {
+            (i(!0), a(M, null, V(r.question.selectedChoices, (b, Z) => (i(), C(d, {
               is: "sv-tagbox-item",
               item: b,
               question: r.question,
               key: "item" + Z
             }, null, 8, ["item", "question"]))), 128)),
-            n.value.needRenderInput ? (i(), c(d, {
+            n.value.needRenderInput ? (i(), C(d, {
               key: 0,
               is: "sv-tagbox-filter",
               model: n.value,
               question: r.question
             }, null, 8, ["model", "question"])) : p("", !0)
           ], 2),
-          C(d, {
+          c(d, {
             is: "sv-action-bar",
             model: n.value.editorButtons
           }, null, 8, ["model"])
         ], 42, V1)),
-        r.question.isInputReadOnly ? p("", !0) : (i(), c(d, {
+        r.question.isInputReadOnly ? p("", !0) : (i(), C(d, {
           key: 1,
           is: "sv-popup",
           model: n.value.popupModel
@@ -1961,13 +1975,13 @@ const q1 = /* @__PURE__ */ y({
           v("div", {
             class: l(r.question.cssClasses.controlValue)
           }, [
-            r.question.locReadOnlyText ? (i(), c(d, {
+            r.question.locReadOnlyText ? (i(), C(d, {
               key: 0,
               is: "survey-string",
               locString: r.question.locReadOnlyText
             }, null, 8, ["locString"])) : p("", !0)
           ], 2),
-          C(d, {
+          c(d, {
             is: "sv-action-bar",
             model: n.value.editorButtons
           }, null, 8, ["model"])
@@ -2007,12 +2021,12 @@ const q1 = /* @__PURE__ */ y({
         key: 0,
         class: l(m.question.cssClasses.hintPrefix)
       }, [
-        v("span", null, M(m.model.hintStringPrefix), 1)
+        v("span", null, H(m.model.hintStringPrefix), 1)
       ], 2)) : p("", !0),
       v("div", {
         class: l(m.question.cssClasses.hintSuffixWrapper)
       }, [
-        m.question.showSelectedItemLocText ? (i(), c(d, {
+        m.question.showSelectedItemLocText ? (i(), C(d, {
           key: 0,
           is: "survey-string",
           locString: m.question.selectedItemLocText
@@ -2021,8 +2035,8 @@ const q1 = /* @__PURE__ */ y({
           key: 1,
           class: l(m.question.cssClasses.hintSuffix)
         }, [
-          v("span", T1, M(m.model.inputStringRendered), 1),
-          v("span", null, M(m.model.hintStringSuffix), 1)
+          v("span", T1, H(m.model.inputStringRendered), 1),
+          v("span", null, H(m.model.hintStringSuffix), 1)
         ], 2)) : p("", !0),
         B(v("input", {
           type: "text",
@@ -2070,7 +2084,7 @@ const q1 = /* @__PURE__ */ y({
       key: s.item.key
     }, [
       v("div", $1, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.item.locText
         }, null, 8, ["locString"])
@@ -2079,7 +2093,7 @@ const q1 = /* @__PURE__ */ y({
         class: l(s.question.cssClasses.cleanItemButton),
         onClick: n
       }, [
-        C(d, {
+        c(d, {
           is: "sv-svg-icon",
           class: l(s.question.cssClasses.cleanItemButtonSvg),
           iconName: s.question.cssClasses.cleanItemButtonIconId,
@@ -2112,7 +2126,7 @@ const q1 = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      o.question.selectToRankEnabled ? p("", !0) : (i(!0), a(H, { key: 0 }, V(o.question.renderedRankingChoices, (m, g) => (i(), c(d, $({
+      o.question.selectToRankEnabled ? p("", !0) : (i(!0), a(M, { key: 0 }, V(o.question.renderedRankingChoices, (m, g) => (i(), C(d, $({
         key: m.value + "-" + g + "-item",
         is: s(m)
       }, t(m, g)), null, 16, ["is"]))), 128)),
@@ -2121,7 +2135,7 @@ const q1 = /* @__PURE__ */ y({
         class: l(o.question.getContainerClasses("from")),
         "data-ranking": "from-container"
       }, [
-        (i(!0), a(H, null, V(o.question.renderedUnRankingChoices, (m, g) => (i(), c(d, $({
+        (i(!0), a(M, null, V(o.question.renderedUnRankingChoices, (m, g) => (i(), C(d, $({
           key: m.value + "-" + g + "-item",
           is: s(m)
         }, t(m, g, !0)), null, 16, ["is"]))), 128)),
@@ -2129,7 +2143,7 @@ const q1 = /* @__PURE__ */ y({
           key: 0,
           class: l(o.question.cssClasses.containerPlaceholder)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: o.question.locSelectToRankEmptyRankedAreaText
           }, null, 8, ["locString"])
@@ -2144,7 +2158,7 @@ const q1 = /* @__PURE__ */ y({
         class: l(o.question.getContainerClasses("to")),
         "data-ranking": "to-container"
       }, [
-        (i(!0), a(H, null, V(o.question.renderedRankingChoices, (m, g) => (i(), c(d, $({
+        (i(!0), a(M, null, V(o.question.renderedRankingChoices, (m, g) => (i(), C(d, $({
           key: m.value + "-" + g + "-item",
           is: s(m)
         }, t(m, g)), null, 16, ["is"]))), 128)),
@@ -2152,7 +2166,7 @@ const q1 = /* @__PURE__ */ y({
           key: 0,
           class: l(o.question.cssClasses.containerPlaceholder)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: o.question.locSelectToRankEmptyUnrankedAreaText
           }, null, 8, ["locString"])
@@ -2227,7 +2241,7 @@ const q1 = /* @__PURE__ */ y({
           !s.unrankedItem && n.value ? (i(), a("div", {
             key: 0,
             class: l(s.question.getItemIndexClasses(s.item))
-          }, M(n.value), 3)) : (i(), a("div", {
+          }, H(n.value), 3)) : (i(), a("div", {
             key: 1,
             class: l(s.question.getItemIndexClasses(s.item))
           }, [
@@ -2237,7 +2251,7 @@ const q1 = /* @__PURE__ */ y({
               }, null, 8, F1)
             ]))
           ], 2)),
-          C(d, {
+          c(d, {
             is: s.question.itemComponent,
             item: s.item,
             cssClasses: s.question.cssClasses
@@ -2257,7 +2271,7 @@ const q1 = /* @__PURE__ */ y({
     return (e, n) => (i(), a("div", {
       class: l(e.cssClasses.controlLabel)
     }, [
-      C(d, {
+      c(d, {
         is: "survey-string",
         locString: e.item.locText
       }, null, 8, ["locString"])
@@ -2295,12 +2309,12 @@ const q1 = /* @__PURE__ */ y({
           key: 0,
           class: l(t.question.cssClasses.minText)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: t.question.locMinRateDescription
           }, null, 8, ["locString"])
         ], 2)) : p("", !0),
-        (i(!0), a(H, null, V(t.question.renderedRateItems, (r, m) => (i(), c(d, {
+        (i(!0), a(M, null, V(t.question.renderedRateItems, (r, m) => (i(), C(d, {
           key: s(m),
           is: t.question.itemComponent,
           item: r,
@@ -2311,7 +2325,7 @@ const q1 = /* @__PURE__ */ y({
           key: 1,
           class: l(t.question.cssClasses.maxText)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: t.question.locMaxRateDescription
           }, null, 8, ["locString"])
@@ -2348,7 +2362,7 @@ const q1 = /* @__PURE__ */ y({
         class: l(n.question.cssClasses.itemText),
         "data-text": n.item.text
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: n.item.locText
         }, null, 8, ["locString"])
@@ -2384,7 +2398,7 @@ const q1 = /* @__PURE__ */ y({
         onClick: s[0] || (s[0] = (t) => n.question.setValueFromClick(t.target.value)),
         "aria-label": n.question.ariaLabel
       }, null, 8, Y1),
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         iconName: n.question.getItemSmileyIconName(n.item.itemValue),
         size: "auto"
@@ -2419,13 +2433,13 @@ const q1 = /* @__PURE__ */ y({
         onClick: s[0] || (s[0] = (t) => n.question.setValueFromClick((t == null ? void 0 : t.target).value)),
         "aria-label": n.question.ariaLabel
       }, null, 8, en),
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         class: l("sv-star"),
         iconName: n.question.itemStarIcon,
         size: "auto"
       }, null, 8, ["iconName"]),
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         class: l("sv-star-2"),
         iconName: n.question.itemStarIconAlt,
@@ -2445,9 +2459,9 @@ const q1 = /* @__PURE__ */ y({
   setup(u) {
     const e = u;
     return I(() => e.item), (n, s) => (i(), a("div", nn, [
-      v("span", tn, M(n.item.title), 1),
+      v("span", tn, H(n.item.title), 1),
       n.item.description ? (i(), a("div", on, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: n.item.description
         }, null, 8, ["locString"])
@@ -2473,7 +2487,7 @@ const ln = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-dropdown",
         question: s.question
       }, null, 8, ["question"])
@@ -2529,7 +2543,7 @@ const ln = /* @__PURE__ */ y({
           v("span", {
             class: l(o.question.getLabelCss(o.question.swapOrder))
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: o.question.locLabelLeft
             }, null, 8, ["locString"])
@@ -2546,7 +2560,7 @@ const ln = /* @__PURE__ */ y({
               key: 0,
               class: l(o.question.cssClasses.sliderText)
             }, [
-              C(d, {
+              c(d, {
                 is: "survey-string",
                 locString: o.question.getCheckedLabel()
               }, null, 8, ["locString"])
@@ -2560,7 +2574,7 @@ const ln = /* @__PURE__ */ y({
           v("span", {
             class: l(o.question.getLabelCss(!o.question.swapOrder))
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: o.question.locLabelRight
             }, null, 8, ["locString"])
@@ -2592,21 +2606,21 @@ const dn = /* @__PURE__ */ y({
         role: "presentation",
         class: l(s.question.cssClasses.radioFieldset)
       }, [
-        s.question.swapOrder ? (i(), c(d, {
+        s.question.swapOrder ? (i(), C(d, {
           is: "sv-boolean-radio-item",
           key: "true",
           question: s.question,
           locText: s.question.locLabelTrue,
           value: s.question.getValueTrue()
         }, null, 8, ["question", "locText", "value"])) : p("", !0),
-        (i(), c(d, {
+        (i(), C(d, {
           is: "sv-boolean-radio-item",
           key: "false",
           question: s.question,
           locText: s.question.locLabelFalse,
           value: s.question.getValueFalse()
         }, null, 8, ["question", "locText", "value"])),
-        s.question.swapOrder ? p("", !0) : (i(), c(d, {
+        s.question.swapOrder ? p("", !0) : (i(), C(d, {
           is: "sv-boolean-radio-item",
           key: "true",
           question: s.question,
@@ -2662,7 +2676,7 @@ const dn = /* @__PURE__ */ y({
         v("span", {
           class: l(s.question.cssClasses.radioControlLabel)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: s.locText
           }, null, 8, ["locString"])
@@ -2733,13 +2747,13 @@ const qn = /* @__PURE__ */ y({
             id: s.question.labelRenderedAriaID,
             class: l(s.question.cssClasses.checkboxControlLabel)
           }, [
-            s.question.hasTitleActions ? p("", !0) : (i(), c(d, {
+            s.question.hasTitleActions ? p("", !0) : (i(), C(d, {
               key: 0,
               is: "survey-element-title-content",
               element: s.question,
               css: s.css
             }, null, 8, ["element", "css"])),
-            s.question.hasTitleActions ? (i(), c(d, {
+            s.question.hasTitleActions ? (i(), C(d, {
               key: 1,
               is: "sv-title-actions",
               element: s.question,
@@ -2752,7 +2766,7 @@ const qn = /* @__PURE__ */ y({
           class: l(s.question.cssDescription),
           id: s.question.ariaDescriptionId
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: s.question.locDescription
           }, null, 8, ["locString"])
@@ -2774,7 +2788,7 @@ const qn = /* @__PURE__ */ y({
       ref: n
     }, [
       v("tbody", null, [
-        (i(!0), a(H, null, V(s.question.getRows(), (o, r) => (i(), c(d, {
+        (i(!0), a(M, null, V(s.question.getRows(), (o, r) => (i(), C(d, {
           key: s.question.inputId + "rowkey" + r,
           is: "sv-multipletext-row",
           question: s.question,
@@ -2795,11 +2809,11 @@ const qn = /* @__PURE__ */ y({
       key: 0,
       class: l(n.question.cssClasses.row)
     }, [
-      (i(!0), a(H, null, V(n.row.cells, (t) => (i(), a("td", {
+      (i(!0), a(M, null, V(n.row.cells, (t) => (i(), a("td", {
         key: "item" + t.item.editor.id,
         class: l(t.className)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-multipletext-item",
           question: n.question,
           cell: t
@@ -2817,7 +2831,7 @@ const qn = /* @__PURE__ */ y({
     const e = u, n = (t) => ne(t);
     I(() => e.cell.item.editor);
     const s = f(() => e.cell.item);
-    return (t, o) => t.cell.isErrorsCell ? (i(), c(d, {
+    return (t, o) => t.cell.isErrorsCell ? (i(), C(d, {
       key: 1,
       is: "survey-errors",
       element: s.value.editor
@@ -2835,9 +2849,9 @@ const qn = /* @__PURE__ */ y({
         s.value.editor.isRequireTextBeforeTitle || s.value.editor.isRequireTextOnStart ? (i(), a("span", {
           key: 0,
           class: l(t.question.cssClasses.requiredMark)
-        }, M(s.value.editor.requiredMark), 3)) : p("", !0),
+        }, H(s.value.editor.requiredMark), 3)) : p("", !0),
         s.value.editor.isRequireTextBeforeTitle || s.value.editor.isRequireTextOnStart ? (i(), a("span", Ln, " ")) : p("", !0),
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.value.locTitle
         }, null, 8, ["locString"]),
@@ -2846,21 +2860,21 @@ const qn = /* @__PURE__ */ y({
           key: 3,
           "aria-hidden": "true",
           class: l(t.question.cssClasses.requiredMark)
-        }, M(s.value.editor.requiredMark), 3)) : p("", !0)
+        }, H(s.value.editor.requiredMark), 3)) : p("", !0)
       ], 6),
       (i(), a("div", {
         key: s.value.editor.id,
         class: l(t.question.getItemCss()),
         onFocusin: o[0] || (o[0] = (r) => s.value.focusIn())
       }, [
-        C(d, {
+        c(d, {
           is: n(s.value.editor),
           question: s.value.editor
         }, null, 8, ["is", "question"])
       ], 34))
     ], 2));
   }
-}), Hn = /* @__PURE__ */ y({
+}), Mn = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Breadcrumbs",
   props: {
@@ -2873,24 +2887,24 @@ const qn = /* @__PURE__ */ y({
       key: 0,
       class: l(n.css.breadcrumbsRoot)
     }, [
-      (i(!0), a(H, null, V(n.model.actions, (t, o) => (i(), a(H, {
+      (i(!0), a(M, null, V(n.model.actions, (t, o) => (i(), a(M, {
         key: t.renderedId
       }, [
-        o ? (i(), c(d, {
+        o ? (i(), C(d, {
           key: 0,
           is: "sv-svg-icon",
           class: l(n.css.breadcrumbsSeparator),
           iconName: "arrowright-16x16",
           size: "auto"
         }, null, 8, ["class"])) : p("", !0),
-        C(d, {
+        c(d, {
           is: "sv-action",
           item: t
         }, null, 8, ["item"])
       ], 64))), 128))
     ], 2)) : p("", !0);
   }
-}), Mn = ["onClick", "title"], In = ["onClick", "title"], Vn = { key: 1 }, Sn = { key: 1 }, Rn = /* @__PURE__ */ y({
+}), Hn = ["onClick", "title"], In = ["onClick", "title"], Vn = { key: 1 }, Sn = { key: 1 }, Rn = /* @__PURE__ */ y({
   __name: "SingleInputSummary",
   props: {
     summary: {},
@@ -2899,13 +2913,13 @@ const qn = /* @__PURE__ */ y({
   setup(u) {
     const e = u, n = f(() => "survey-placeholder-" + e.summary.question.getTemplate()), s = f(() => W.Instance.isComponentRegistered(n.value));
     return (t, o) => t.summary.isEmpty() ? (i(), a("div", Vn, [
-      s.value ? (i(), c(d, {
+      s.value ? (i(), C(d, {
         key: 0,
         is: "survey-placeholder-" + t.summary.question.getTemplate(),
         cssClasses: t.css,
         question: t.summary.question
       }, null, 8, ["is", "cssClasses", "question"])) : (i(), a("div", Sn, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: t.summary.noEntry
         }, null, 8, ["locString"])
@@ -2914,14 +2928,14 @@ const qn = /* @__PURE__ */ y({
       key: 0,
       class: l(t.css.summary)
     }, [
-      (i(!0), a(H, null, V(t.summary.items, (r, m) => (i(), a("div", {
+      (i(!0), a(M, null, V(t.summary.items, (r, m) => (i(), a("div", {
         key: m,
         class: l(t.css.summaryRow)
       }, [
         v("div", {
           class: l(t.css.summaryRowContent)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: r.locText
           }, null, 8, ["locString"])
@@ -2935,19 +2949,19 @@ const qn = /* @__PURE__ */ y({
             onClick: (g) => r.btnEdit.action(),
             title: r.btnEdit.title
           }, [
-            C(d, {
+            c(d, {
               is: "sv-svg-icon",
               iconName: "icon-editsmall-16x16",
               size: "auto"
             })
-          ], 10, Mn)) : p("", !0),
+          ], 10, Hn)) : p("", !0),
           r.showRemove && r.btnRemove ? (i(), a("button", {
             key: 1,
             class: l(t.css.summaryRowActionDelete),
             onClick: (g) => r.btnRemove.action(),
             title: r.btnRemove.title
           }, [
-            C(d, {
+            c(d, {
               is: "sv-svg-icon",
               iconName: "icon-delete-16x16",
               size: "auto"
@@ -3016,7 +3030,7 @@ const qn = /* @__PURE__ */ y({
             class: l(t.question.cssClasses.rangeTrack),
             style: L({ left: t.question.getTrackPercentLeft() + "%", right: t.question.getTrackPercentRight() + "%" })
           }, null, 6),
-          (i(!0), a(H, null, V(t.question.renderedValue, (r, m) => (i(), a(H, { key: m }, [
+          (i(!0), a(M, null, V(t.question.renderedValue, (r, m) => (i(), a(M, { key: m }, [
             v("input", {
               class: l(t.question.cssClasses.input),
               id: "sjs-slider-input-" + m,
@@ -3067,7 +3081,7 @@ const qn = /* @__PURE__ */ y({
                 }, [
                   v("div", {
                     class: l(t.question.cssClasses.tooltipValue)
-                  }, M(t.question.getTooltipValue(m)), 3)
+                  }, H(t.question.getTooltipValue(m)), 3)
                 ], 2)
               ], 2)) : p("", !0),
               v("div", {
@@ -3086,7 +3100,7 @@ const qn = /* @__PURE__ */ y({
         class: l(t.question.cssClasses.labelsContainer)
       }, [
         v("div", null, [
-          (i(!0), a(H, null, V(t.question.renderedLabels, (r) => (i(), c(d, {
+          (i(!0), a(M, null, V(t.question.renderedLabels, (r) => (i(), C(d, {
             key: r.id,
             is: "sv-slider-label-item",
             item: r,
@@ -3115,12 +3129,30 @@ const qn = /* @__PURE__ */ y({
         class: l(n.question.cssClasses.labelTick)
       }, null, 2),
       v("div", {
-        class: l(n.question.cssClasses.labelText)
+        class: l(n.question.cssClasses.labelTextContainer)
       }, [
-        C(d, {
-          is: "survey-string",
-          locString: n.item.locText
-        }, null, 8, ["locString"])
+        n.item.showValue ? p("", !0) : (i(), a("div", {
+          key: 0,
+          class: l(n.question.cssClasses.labelText)
+        }, [
+          c(d, {
+            is: "survey-string",
+            locString: n.item.locText
+          }, null, 8, ["locString"])
+        ], 2)),
+        n.item.showValue ? (i(), a("div", {
+          key: 1,
+          class: l(n.question.cssClasses.labelText)
+        }, H(n.item.value), 3)) : p("", !0),
+        n.item.showValue ? (i(), a("div", {
+          key: 2,
+          class: l(n.question.cssClasses.labelTextSecondaryMode)
+        }, [
+          c(d, {
+            is: "survey-string",
+            locString: n.item.locText
+          }, null, 8, ["locString"])
+        ], 2)) : p("", !0)
       ], 2)
     ], 38));
   }
@@ -3153,7 +3185,7 @@ const qn = /* @__PURE__ */ y({
       ref: n
     }, [
       v("fieldset", Dn, [
-        v("legend", An, M(t.question.locTitle.renderedHtml), 1),
+        v("legend", An, H(t.question.locTitle.renderedHtml), 1),
         v("table", {
           class: l(t.question.getTableCss()),
           role: "presentation"
@@ -3161,7 +3193,7 @@ const qn = /* @__PURE__ */ y({
           t.question.showHeader ? (i(), a("thead", Pn, [
             v("tr", null, [
               t.question.hasRows ? (i(), a("td", Nn)) : p("", !0),
-              (i(!0), a(H, null, V(t.question.visibleColumns, (r, m) => (i(), a("th", {
+              (i(!0), a(M, null, V(t.question.visibleColumns, (r, m) => (i(), a("th", {
                 key: m,
                 class: l(t.question.cssClasses.headerCell),
                 style: L({
@@ -3169,12 +3201,12 @@ const qn = /* @__PURE__ */ y({
                   width: t.question.columnMinWidth
                 })
               }, [
-                C(d, {
+                c(d, {
                   is: t.question.getColumnHeaderWrapperComponentName(r),
                   componentData: t.question.getColumnHeaderWrapperComponentData(r)
                 }, {
                   default: D(() => [
-                    C(d, {
+                    c(d, {
                       is: "survey-string",
                       locString: r.locText
                     }, null, 8, ["locString"])
@@ -3185,7 +3217,7 @@ const qn = /* @__PURE__ */ y({
             ])
           ])) : p("", !0),
           v("tbody", null, [
-            (i(!0), a(H, null, V(s.value, (r, m) => (i(), c(d, {
+            (i(!0), a(M, null, V(s.value, (r, m) => (i(), C(d, {
               key: "row_" + r.name + "_" + m,
               is: "sv-matrix-row",
               question: t.question,
@@ -3223,7 +3255,7 @@ const qn = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), a(H, null, V(t.row.cells, (r) => (i(), c(d, {
+      (i(!0), a(M, null, V(t.row.cells, (r) => (i(), C(d, {
         is: "survey-matrixdropdown-cell",
         cell: r,
         question: t.question,
@@ -3280,7 +3312,7 @@ const qn = /* @__PURE__ */ y({
         key: 0,
         class: l(t.question.cssClasses.cellResponsiveTitle)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: t.column.locText
         }, null, 8, ["locString"])
@@ -3295,14 +3327,14 @@ const qn = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = u, n = k(null);
-    return R(e, n), (s, t) => (i(), c(d, {
+    return R(e, n), (s, t) => (i(), C(d, {
       is: "survey-matrixtable",
       question: s.question,
       ref_key: "root",
       ref: n
     }, null, 8, ["question"]));
   }
-}), Kn = ["data-sv-drop-target-matrix-row"], jn = { key: 0 }, Gn = { key: 1 }, Jn = /* @__PURE__ */ y({
+}), Kn = { key: 0 }, jn = { key: 1 }, Gn = /* @__PURE__ */ y({
   __name: "MatrixTable",
   props: {
     question: {}
@@ -3311,30 +3343,29 @@ const qn = /* @__PURE__ */ y({
     const e = u, n = f(() => e.question.renderedTable);
     return I(() => n.value), (s, t) => (i(), a("div", {
       style: L({ overflowX: s.question.showHorizontalScroll ? "scroll" : "" }),
-      class: l(s.question.cssClasses.tableWrapper),
-      "data-sv-drop-target-matrix-row": s.question.renderedTable.wrapperDropTargetId
+      class: l(s.question.cssClasses.tableWrapper)
     }, [
       v("table", {
         class: l(s.question.getTableCss())
       }, [
-        n.value.showHeader ? (i(), a("thead", jn, [
+        n.value.showHeader ? (i(), a("thead", Kn, [
           v("tr", null, [
-            (i(!0), a(H, null, V(n.value.headerRow.cells, (o) => (i(), a(H, null, [
+            (i(!0), a(M, null, V(n.value.headerRow.cells, (o) => (i(), a(M, null, [
               o.hasTitle ? (i(), a("th", {
                 key: "header_" + o.id,
                 class: l(o.className),
                 style: L({ minWidth: o.minWidth, width: o.width })
               }, [
-                C(d, {
+                c(d, {
                   is: s.question.getColumnHeaderWrapperComponentName(o),
                   componentData: s.question.getColumnHeaderWrapperComponentData(o)
                 }, {
                   default: D(() => [
-                    C(d, {
+                    c(d, {
                       is: "survey-string",
                       locString: o.locTitle
                     }, null, 8, ["locString"]),
-                    o.column ? (i(), c(d, {
+                    o.column ? (i(), C(d, {
                       key: 0,
                       is: "survey-matrixheaderrequired",
                       column: o.column,
@@ -3353,16 +3384,16 @@ const qn = /* @__PURE__ */ y({
           ])
         ])) : p("", !0),
         v("tbody", null, [
-          (i(!0), a(H, null, V(n.value.renderedRows, (o) => (i(), c(d, {
+          (i(!0), a(M, null, V(n.value.renderedRows, (o) => (i(), C(d, {
             key: s.question.inputId + "_" + o.id,
             is: "survey-matrix-row",
             row: o,
             question: s.question
           }, null, 8, ["row", "question"]))), 128))
         ]),
-        n.value.showFooter ? (i(), a("tfoot", Gn, [
+        n.value.showFooter ? (i(), a("tfoot", jn, [
           v("tr", null, [
-            (i(!0), a(H, null, V(n.value.footerRow.cells, (o, r) => (i(), c(d, {
+            (i(!0), a(M, null, V(n.value.footerRow.cells, (o, r) => (i(), C(d, {
               is: "survey-matrixdropdown-cell",
               cell: o,
               question: s.question,
@@ -3371,9 +3402,9 @@ const qn = /* @__PURE__ */ y({
           ])
         ])) : p("", !0)
       ], 2)
-    ], 14, Kn));
+    ], 6));
   }
-}), Xn = /* @__PURE__ */ v("span", null, " ", -1), Yn = /* @__PURE__ */ y({
+}), Jn = /* @__PURE__ */ v("span", null, " ", -1), Xn = /* @__PURE__ */ y({
   __name: "MatrixHeaderRequired",
   props: {
     question: {},
@@ -3381,15 +3412,15 @@ const qn = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = u;
-    return I(() => e.column), (n, s) => n.column.isRenderedRequired ? (i(), a(H, { key: 0 }, [
-      Xn,
+    return I(() => e.column), (n, s) => n.column.isRenderedRequired ? (i(), a(M, { key: 0 }, [
+      Jn,
       n.column.isRenderedRequired ? (i(), a("span", {
         key: 0,
         class: l(n.question.cssClasses.cellRequiredMark)
-      }, M(n.column.requiredMark), 3)) : p("", !0)
+      }, H(n.column.requiredMark), 3)) : p("", !0)
     ], 64)) : p("", !0);
   }
-}), _n = ["title", "colspan"], xn = /* @__PURE__ */ y({
+}), Yn = ["title", "colspan"], _n = /* @__PURE__ */ y({
   __name: "MatrixDropdownCellComp",
   props: {
     question: {},
@@ -3451,23 +3482,23 @@ const qn = /* @__PURE__ */ y({
       ref_key: "root",
       ref: s
     }, [
-      h.cell.isErrorsCell ? (i(), c(d, {
+      h.cell.isErrorsCell ? (i(), C(d, {
         key: 0,
         is: "survey-errors",
         element: h.cell.question
       }, null, 8, ["element"])) : p("", !0),
-      h.cell.isDragHandlerCell ? (i(), c(d, {
+      h.cell.isDragHandlerCell ? (i(), C(d, {
         key: 1,
         is: "sv-matrix-drag-drop-icon",
         item: { data: { row: h.cell.row, question: h.question } }
       }, null, 8, ["item"])) : p("", !0),
-      h.cell.isActionsCell ? (i(), c(d, {
+      h.cell.isActionsCell ? (i(), C(d, {
         key: 2,
         is: "sv-action-bar",
         model: h.cell.item.getData(),
         handleClick: !1
       }, null, 8, ["model"])) : p("", !0),
-      h.cell.hasPanel ? (i(), c(d, $({
+      h.cell.hasPanel ? (i(), C(d, $({
         key: 3,
         is: g.value
       }, S.value), null, 16, ["is"])) : p("", !0),
@@ -3475,11 +3506,11 @@ const qn = /* @__PURE__ */ y({
         key: 4,
         class: l(h.cell.responsiveTitleCss)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: h.cell.responsiveLocTitle
         }, null, 8, ["locString"]),
-        C(d, {
+        c(d, {
           is: "survey-matrixheaderrequired",
           column: h.cell.column,
           question: h.cell.matrix
@@ -3489,31 +3520,31 @@ const qn = /* @__PURE__ */ y({
         key: 5,
         class: l(h.cell.cellQuestionWrapperClassName)
       }, [
-        !h.cell.isChoice && h.cell.question.isDefaultRendering() ? (i(), c(d, {
+        !h.cell.isChoice && h.cell.question.isDefaultRendering() ? (i(), C(d, {
           key: 0,
           is: h.question.getCellWrapperComponentName(h.cell.cell),
           componentData: h.question.getCellWrapperComponentData(h.cell.cell)
         }, {
           default: D(() => [
-            C(d, {
+            c(d, {
               is: m(h.cell.question),
               question: h.cell.question
             }, null, 8, ["is", "question"])
           ]),
           _: 1
         }, 8, ["is", "componentData"])) : p("", !0),
-        !h.cell.isChoice && !h.cell.question.isDefaultRendering() ? (i(), c(d, {
+        !h.cell.isChoice && !h.cell.question.isDefaultRendering() ? (i(), C(d, {
           key: 1,
           is: h.cell.question.getComponentName(),
           question: h.cell.question
         }, null, 8, ["is", "question"])) : p("", !0),
-        h.cell.isItemChoice ? (i(), c(d, {
+        h.cell.isItemChoice ? (i(), C(d, {
           key: 2,
           is: h.question.getCellWrapperComponentName(h.cell.cell),
           componentData: h.question.getCellWrapperComponentData(h.cell.cell)
         }, {
           default: D(() => [
-            h.cell.isRadio ? (i(), c(d, {
+            h.cell.isRadio ? (i(), C(d, {
               is: "survey-radiogroup-item",
               key: h.cell.item.value,
               question: h.cell.question,
@@ -3521,7 +3552,7 @@ const qn = /* @__PURE__ */ y({
               hideLabel: !0,
               ariaLabel: o()
             }, null, 8, ["question", "item", "ariaLabel"])) : p("", !0),
-            h.cell.isCheckbox ? (i(), c(d, {
+            h.cell.isCheckbox ? (i(), C(d, {
               is: "survey-checkbox-item",
               key: h.cell.item.value,
               question: h.cell.question,
@@ -3532,7 +3563,7 @@ const qn = /* @__PURE__ */ y({
           ]),
           _: 1
         }, 8, ["is", "componentData"])) : p("", !0),
-        h.cell.isOtherChoice ? (i(), c(d, {
+        h.cell.isOtherChoice ? (i(), C(d, {
           key: 3,
           is: "survey-other-choice",
           question: h.cell.question,
@@ -3541,13 +3572,13 @@ const qn = /* @__PURE__ */ y({
       ], 2)), [
         [A, n.value]
       ]) : p("", !0),
-      h.cell.hasTitle ? (i(), c(d, {
+      h.cell.hasTitle ? (i(), C(d, {
         key: 6,
         is: h.question.getCellWrapperComponentName(h.cell),
         componentData: h.question.getCellWrapperComponentData(h.cell)
       }, {
         default: D(() => [
-          h.cell.hasTitle ? (i(), c(d, {
+          h.cell.hasTitle ? (i(), C(d, {
             key: 0,
             is: "survey-string",
             locString: h.cell.locTitle
@@ -3555,13 +3586,13 @@ const qn = /* @__PURE__ */ y({
           h.cell.requiredMark ? (i(), a("span", {
             key: 1,
             class: l(h.question.cssClasses.cellRequiredMark)
-          }, M(h.cell.requiredMark), 3)) : p("", !0)
+          }, H(h.cell.requiredMark), 3)) : p("", !0)
         ]),
         _: 1
       }, 8, ["is", "componentData"])) : p("", !0)
-    ], 46, _n)) : p("", !0);
+    ], 46, Yn)) : p("", !0);
   }
-}), et = /* @__PURE__ */ y({
+}), xn = { key: 0 }, et = ["xlink:href"], st = { key: 0 }, nt = ["xlink:href"], tt = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "MatrixDynamic",
   props: {
@@ -3586,20 +3617,26 @@ const qn = /* @__PURE__ */ y({
           class: l(t.question.getAddRowButtonCss()),
           onClick: s
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: t.question.locAddRowText
           }, null, 8, ["locString"]),
           v("span", {
             class: l(t.question.cssClasses.iconAdd)
-          }, null, 2)
+          }, [
+            t.question.cssClasses.iconAddId ? (i(), a("svg", xn, [
+              v("use", {
+                "xlink:href": t.question.cssClasses.iconAddId
+              }, null, 8, et)
+            ])) : p("", !0)
+          ], 2)
         ], 2)
       ], 2)) : p("", !0),
-      t.question.renderedTable.showTable ? (i(), c(d, {
+      t.question.renderedTable.showTable ? (i(), C(d, {
         key: 1,
         is: "survey-matrixtable",
         question: t.question
-      }, null, 8, ["question"])) : (i(), c(d, {
+      }, null, 8, ["question"])) : (i(), C(d, {
         key: 2,
         is: "survey-placeholder-matrixdynamic",
         question: t.question
@@ -3613,18 +3650,24 @@ const qn = /* @__PURE__ */ y({
           class: l(t.question.getAddRowButtonCss()),
           onClick: s
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: t.question.locAddRowText
           }, null, 8, ["locString"]),
           v("span", {
             class: l(t.question.cssClasses.iconAdd)
-          }, null, 2)
+          }, [
+            t.question.cssClasses.iconAddId ? (i(), a("svg", st, [
+              v("use", {
+                "xlink:href": t.question.cssClasses.iconAddId
+              }, null, 8, nt)
+            ])) : p("", !0)
+          ], 2)
         ], 2)
       ], 2)) : p("", !0)
     ], 512));
   }
-}), st = /* @__PURE__ */ y({
+}), ot = /* @__PURE__ */ y({
   __name: "MatrixDynamicPlaceholder",
   props: {
     question: {}
@@ -3639,7 +3682,7 @@ const qn = /* @__PURE__ */ y({
       v("div", {
         class: l(s.question.cssClasses.noRowsText)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.question.locNoRowsText
         }, null, 8, ["locString"])
@@ -3650,7 +3693,7 @@ const qn = /* @__PURE__ */ y({
         class: l(s.question.getAddRowButtonCss(!0)),
         onClick: n
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.question.locAddRowText
         }, null, 8, ["locString"]),
@@ -3667,7 +3710,7 @@ function te(u, e = !0) {
     row: e ? f(() => u.item.data.row) : void 0
   };
 }
-const nt = ["disabled"], tt = /* @__PURE__ */ y({
+const it = ["disabled"], rt = /* @__PURE__ */ y({
   __name: "RemoveButton",
   props: {
     item: {}
@@ -3680,16 +3723,16 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
       disabled: w(n).isInputReadOnly,
       onClick: o[0] || (o[0] = () => w(n).removeRowUI(w(s)))
     }, [
-      C(d, {
+      c(d, {
         is: "survey-string",
         locString: w(n).locRemoveRowText
       }, null, 8, ["locString"]),
       v("span", {
         class: l(w(n).cssClasses.iconRemove)
       }, null, 2)
-    ], 10, nt));
+    ], 10, it));
   }
-}), ot = ["xlink:href"], it = /* @__PURE__ */ y({
+}), lt = ["xlink:href"], at = /* @__PURE__ */ y({
   __name: "DragDropIcon",
   props: {
     item: {}
@@ -3703,14 +3746,14 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
       }, [
         v("use", {
           "xlink:href": w(n).iconDragElement
-        }, null, 8, ot)
+        }, null, 8, lt)
       ], 2)) : (i(), a("span", {
         key: 1,
         class: l(w(n).cssClasses.iconDrag)
       }, null, 2))
     ]));
   }
-}), rt = ["title", "aria-expanded", "aria-controls"], lt = /* @__PURE__ */ y({
+}), ut = ["title", "aria-expanded", "aria-controls"], dt = /* @__PURE__ */ y({
   __name: "DetailButton",
   props: {
     item: {}
@@ -3725,15 +3768,15 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
       "aria-expanded": w(n).getIsDetailPanelShowing(w(s)) ? "true" : "false",
       "aria-controls": w(n).getIsDetailPanelShowing(w(s)) ? w(s).detailPanelId : null
     }, [
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         class: l(w(n).getDetailPanelIconCss(w(s))),
         iconName: w(n).getDetailPanelIconId(w(s)),
         size: "auto"
       }, null, 8, ["class", "iconName"])
-    ], 10, rt));
+    ], 10, ut));
   }
-}), at = ["aria-label"], ut = /* @__PURE__ */ y({
+}), mt = ["aria-label"], pt = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "PanelDynamic",
   props: {
@@ -3774,12 +3817,12 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
         key: 0,
         class: l(o.question.getTabsContainerCss())
       }, [
-        C(d, {
+        c(d, {
           is: "sv-action-bar",
           model: o.question.tabbedMenu
         }, null, 8, ["model"])
       ], 2)) : p("", !0),
-      o.question.getShowNoEntriesPlaceholder() ? (i(), c(d, {
+      o.question.getShowNoEntriesPlaceholder() ? (i(), C(d, {
         key: 1,
         is: "survey-placeholder-paneldynamic",
         question: o.question
@@ -3793,21 +3836,21 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
           style: L({ width: o.question.progress }),
           role: "progressbar",
           "aria-label": o.question.progressBarAriaLabel
-        }, null, 14, at)
+        }, null, 14, mt)
       ], 2)) : p("", !0),
       v("div", {
         class: l(o.question.cssClasses.panelsContainer)
       }, [
-        (i(!0), a(H, null, V(o.question.renderedPanels, (m, g) => (i(), a(H, {
+        (i(!0), a(M, null, V(o.question.renderedPanels, (m, g) => (i(), a(M, {
           key: m.id
         }, [
           v("div", {
             class: l(o.question.getPanelWrapperCss(m))
           }, [
-            C(d, $({
+            c(d, $({
               is: s(m)
             }, t(m)), null, 16, ["is"]),
-            o.question.canRenderRemovePanelOnRight(m) ? (i(), c(d, {
+            o.question.canRenderRemovePanelOnRight(m) ? (i(), C(d, {
               key: 0,
               is: "sv-paneldynamic-remove-btn",
               data: { question: o.question, panel: m }
@@ -3819,14 +3862,14 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
           }, null, 2)) : p("", !0)
         ], 64))), 128))
       ], 2),
-      o.question.showNavigation ? (i(), c(d, {
+      o.question.showNavigation ? (i(), C(d, {
         key: 3,
         is: "survey-paneldynamicprogress-v2",
         question: o.question
       }, null, 8, ["question"])) : p("", !0)
     ], 2));
   }
-}), dt = ["aria-label"], mt = /* @__PURE__ */ y({
+}), vt = ["aria-label"], Ct = /* @__PURE__ */ y({
   __name: "PanelDynamicProgress",
   props: {
     question: {}
@@ -3843,7 +3886,7 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
         v("div", {
           class: l(s.question.cssClasses.progressContainer)
         }, [
-          C(d, {
+          c(d, {
             is: "sv-paneldynamic-prev-btn",
             data: { question: s.question }
           }, null, 8, ["data"]),
@@ -3856,25 +3899,25 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
               style: L({ width: s.question.progress }),
               role: "progressbar",
               "aria-label": s.question.progressBarAriaLabel
-            }, null, 14, dt)
+            }, null, 14, vt)
           ], 2)) : p("", !0),
-          C(d, {
+          c(d, {
             is: "sv-paneldynamic-next-btn",
             data: { question: s.question }
           }, null, 8, ["data"])
         ], 2),
-        C(d, {
+        c(d, {
           is: "sv-paneldynamic-add-btn",
           data: { question: s.question }
         }, null, 8, ["data"]),
-        C(d, {
+        c(d, {
           is: "sv-paneldynamic-progress-text",
           data: { question: s.question }
         }, null, 8, ["data"])
       ], 2)
     ], 2));
   }
-}), pt = ["aria-label"], vt = /* @__PURE__ */ y({
+}), ct = ["aria-label"], gt = /* @__PURE__ */ y({
   __name: "PanelDynamicProgressV2",
   props: {
     question: {}
@@ -3896,20 +3939,20 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
           style: L({ width: e.question.progress }),
           role: "progressbar",
           "aria-label": e.question.progressBarAriaLabel
-        }, null, 14, pt)
+        }, null, 14, ct)
       ], 2)) : p("", !0),
       e.question.showFooterToolbar ? (i(), a("div", {
         key: 1,
         class: l(e.question.cssClasses.footerButtonsContainer)
       }, [
-        C(d, {
+        c(d, {
           is: "sv-action-bar",
           model: e.question.footerToolbar
         }, null, 8, ["model"])
       ], 2)) : p("", !0)
     ], 2)) : p("", !0);
   }
-}), Ct = /* @__PURE__ */ y({
+}), yt = /* @__PURE__ */ y({
   __name: "PanelDynamicPlaceholder",
   props: {
     question: {}
@@ -3919,12 +3962,12 @@ const nt = ["disabled"], tt = /* @__PURE__ */ y({
       class: l(e.question.cssClasses.noEntriesPlaceholder)
     }, [
       v("span", null, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: e.question.locNoEntriesText
         }, null, 8, ["locString"])
       ]),
-      C(d, {
+      c(d, {
         is: "sv-paneldynamic-add-btn",
         data: { question: e.question }
       }, null, 8, ["data"])
@@ -3936,7 +3979,7 @@ function Q(u) {
     () => u.item && u.item.data.question || u.data.question
   );
 }
-const ct = ["id"], gt = /* @__PURE__ */ y({
+const ht = ["id"], qt = /* @__PURE__ */ y({
   __name: "PaneldynamicAddBtn",
   props: {
     item: {},
@@ -3956,14 +3999,14 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       v("span", {
         class: l(w(n).cssClasses.buttonAddText)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: w(n).locAddPanelText
         }, null, 8, ["locString"])
       ], 2)
-    ], 10, ct)) : p("", !0);
+    ], 10, ht)) : p("", !0);
   }
-}), yt = ["title"], ht = /* @__PURE__ */ y({
+}), wt = ["title"], bt = /* @__PURE__ */ y({
   __name: "PaneldynamicNextBtn",
   props: {
     item: {},
@@ -3978,14 +4021,14 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       onClick: s,
       class: l(w(n).getNextButtonCss())
     }, [
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         iconName: w(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, yt));
+    ], 10, wt));
   }
-}), qt = ["title"], wt = /* @__PURE__ */ y({
+}), Lt = ["title"], kt = /* @__PURE__ */ y({
   __name: "PaneldynamicPrevBtn",
   props: {
     item: {},
@@ -4000,14 +4043,14 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       onClick: s,
       class: l(w(n).getPrevButtonCss())
     }, [
-      C(d, {
+      c(d, {
         is: "sv-svg-icon",
         iconName: w(n).cssClasses.progressBtnIcon,
         size: "auto"
       }, null, 8, ["iconName"])
-    ], 10, qt));
+    ], 10, Lt));
   }
-}), bt = ["id"], Lt = /* @__PURE__ */ y({
+}), ft = ["id"], Mt = /* @__PURE__ */ y({
   __name: "PaneldynamicRemoveBtn",
   props: {
     item: {},
@@ -4028,7 +4071,7 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       v("span", {
         class: l(w(n).cssClasses.buttonRemoveText)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: w(n).locRemovePanelText
         }, null, 8, ["locString"])
@@ -4036,9 +4079,9 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       v("span", {
         class: l(w(n).cssClasses.iconRemove)
       }, null, 2)
-    ], 10, bt));
+    ], 10, ft));
   }
-}), kt = /* @__PURE__ */ y({
+}), Ht = /* @__PURE__ */ y({
   __name: "PaneldynamicProgressText",
   props: {
     item: {},
@@ -4048,9 +4091,9 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
     const n = Q(u);
     return (s, t) => (i(), a("div", {
       class: l(w(n).cssClasses.progressText)
-    }, M(w(n).progressText), 3));
+    }, H(w(n).progressText), 3));
   }
-}), ft = ["id"], Ht = /* @__PURE__ */ y({
+}), It = ["id"], Vt = /* @__PURE__ */ y({
   __name: "Errors",
   props: {
     element: {},
@@ -4065,28 +4108,28 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       ref_key: "root",
       ref: e
     }, [
-      (i(!0), a(H, null, V(n.element.renderedErrors, (t, o) => (i(), c(d, {
+      (i(!0), a(M, null, V(n.element.renderedErrors, (t, o) => (i(), C(d, {
         is: n.element.survey.questionErrorComponent,
         element: n.element,
         key: o,
         error: t,
         cssClasses: n.element.cssClasses
       }, null, 8, ["is", "element", "error", "cssClasses"]))), 128))
-    ], 10, ft)) : p("", !0);
+    ], 10, It)) : p("", !0);
   }
-}), Mt = { key: 0 }, It = /* @__PURE__ */ y({
+}), St = { key: 0 }, Rt = /* @__PURE__ */ y({
   __name: "QuestionComment",
   props: {
     question: {}
   },
   setup(u) {
-    return (e, n) => e.question.isReadOnlyRenderDiv() ? (i(), a("div", Mt, M(e.question.comment), 1)) : (i(), c(d, {
+    return (e, n) => e.question.isReadOnlyRenderDiv() ? (i(), a("div", St, H(e.question.comment), 1)) : (i(), C(d, {
       key: 1,
       is: "sv-text-area",
       model: e.question.commentTextAreaModel
     }, null, 8, ["model"]));
   }
-}), Vt = /* @__PURE__ */ y({
+}), Tt = /* @__PURE__ */ y({
   __name: "TitleElement",
   props: {
     element: {},
@@ -4096,7 +4139,7 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
     const e = (n) => {
       we(n);
     };
-    return (n, s) => n.element.hasTitle ? (i(), c(ye(n.element.titleTagName), {
+    return (n, s) => n.element.hasTitle ? (i(), C(ye(n.element.titleTagName), {
       key: 0,
       class: l(n.element.cssTitle),
       "aria-label": n.element.titleAriaLabel,
@@ -4109,27 +4152,27 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       })
     }, {
       default: D(() => [
-        !n.element.isExpanded && n.element.getCssTitleExpandableSvg() ? (i(), c(d, {
+        !n.element.isExpanded && n.element.getCssTitleExpandableSvg() ? (i(), C(d, {
           key: 0,
           is: "sv-svg-icon",
           class: l(n.element.getCssTitleExpandableSvg()),
           iconName: "icon-expand-16x16",
           size: "'auto'"
         }, null, 8, ["class"])) : p("", !0),
-        n.element.isExpanded && n.element.getCssTitleExpandableSvg() ? (i(), c(d, {
+        n.element.isExpanded && n.element.getCssTitleExpandableSvg() ? (i(), C(d, {
           key: 1,
           is: "sv-svg-icon",
           class: l(n.element.getCssTitleExpandableSvg()),
           iconName: "icon-collapse-16x16",
           size: "'auto'"
         }, null, 8, ["class"])) : p("", !0),
-        n.element.hasTitleActions ? p("", !0) : (i(), c(d, {
+        n.element.hasTitleActions ? p("", !0) : (i(), C(d, {
           key: 2,
           is: "survey-element-title-content",
           element: n.element,
           css: n.css
         }, null, 8, ["element", "css"])),
-        n.element.hasTitleActions ? (i(), c(d, {
+        n.element.hasTitleActions ? (i(), C(d, {
           key: 3,
           is: "sv-title-actions",
           element: n.element,
@@ -4139,7 +4182,7 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
       _: 1
     }, 40, ["class", "aria-label", "id", "tabindex", "aria-expanded", "role"])) : p("", !0);
   }
-}), St = { key: 2 }, Rt = { key: 4 }, Tt = { key: 6 }, Bt = { key: 8 }, Zt = /* @__PURE__ */ y({
+}), Bt = { key: 2 }, Zt = { key: 4 }, $t = { key: 6 }, Dt = { key: 8 }, At = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "TitleContent",
   props: {
@@ -4147,8 +4190,8 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
     css: {}
   },
   setup(u) {
-    return (e, n) => (i(), a(H, null, [
-      e.element.isTitleRenderedAsString ? (i(), c(d, {
+    return (e, n) => (i(), a(M, null, [
+      e.element.isTitleRenderedAsString ? (i(), C(d, {
         key: 0,
         is: "survey-string",
         locString: e.element.locRenderedTitle
@@ -4157,35 +4200,35 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
         key: 1,
         class: l(e.element.cssRequiredMark),
         "aria-hidden": !0
-      }, M(e.element.requiredMark), 3)) : p("", !0),
-      !e.element.isTitleRenderedAsString && e.element.isRequireTextOnStart ? (i(), a("span", St, " ")) : p("", !0),
+      }, H(e.element.requiredMark), 3)) : p("", !0),
+      !e.element.isTitleRenderedAsString && e.element.isRequireTextOnStart ? (i(), a("span", Bt, " ")) : p("", !0),
       !e.element.isTitleRenderedAsString && e.element.no ? (i(), a("span", {
         key: 3,
         style: { position: "static" },
         class: l(e.element.cssTitleNumber),
         "aria-hidden": !0
-      }, M(e.element.no), 3)) : p("", !0),
-      !e.element.isTitleRenderedAsString && e.element.no ? (i(), a("span", Rt, " ")) : p("", !0),
+      }, H(e.element.no), 3)) : p("", !0),
+      !e.element.isTitleRenderedAsString && e.element.no ? (i(), a("span", Zt, " ")) : p("", !0),
       !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), a("span", {
         key: 5,
         class: l(e.element.cssRequiredMark),
         "aria-hidden": !0
-      }, M(e.element.requiredMark), 3)) : p("", !0),
-      !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), a("span", Tt, " ")) : p("", !0),
-      e.element.isTitleRenderedAsString ? p("", !0) : (i(), c(d, {
+      }, H(e.element.requiredMark), 3)) : p("", !0),
+      !e.element.isTitleRenderedAsString && e.element.isRequireTextBeforeTitle ? (i(), a("span", $t, " ")) : p("", !0),
+      e.element.isTitleRenderedAsString ? p("", !0) : (i(), C(d, {
         key: 7,
         is: "survey-string",
         locString: e.element.locRenderedTitle
       }, null, 8, ["locString"])),
-      !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), a("span", Bt, " ")) : p("", !0),
+      !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), a("span", Dt, " ")) : p("", !0),
       !e.element.isTitleRenderedAsString && e.element.isRequireTextAfterTitle ? (i(), a("span", {
         key: 9,
         class: l(e.element.cssRequiredMark),
         "aria-hidden": !0
-      }, M(e.element.requiredMark), 3)) : p("", !0)
+      }, H(e.element.requiredMark), 3)) : p("", !0)
     ], 64));
   }
-}), $t = { class: "sv-title-actions" }, Dt = { class: "sv-title-actions__title" }, At = /* @__PURE__ */ y({
+}), Pt = { class: "sv-title-actions" }, Nt = { class: "sv-title-actions__title" }, Et = /* @__PURE__ */ y({
   __name: "TitleActions",
   props: {
     element: {},
@@ -4193,40 +4236,40 @@ const ct = ["id"], gt = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = u, n = f(() => e.element.getTitleToolbar());
-    return (s, t) => (i(), a("div", $t, [
-      v("span", Dt, [
-        s.element.isPage ? (i(), c(d, {
+    return (s, t) => (i(), a("div", Pt, [
+      v("span", Nt, [
+        s.element.isPage ? (i(), C(d, {
           key: 0,
           is: "survey-string",
           locString: s.element.locTitle
         }, null, 8, ["locString"])) : p("", !0),
-        s.element.isPage ? p("", !0) : (i(), c(d, {
+        s.element.isPage ? p("", !0) : (i(), C(d, {
           key: 1,
           is: "survey-element-title-content",
           element: s.element,
           css: s.css
         }, null, 8, ["element", "css"]))
       ]),
-      C(d, {
+      c(d, {
         is: "sv-action-bar",
         model: n.value
       }, null, 8, ["model"])
     ]));
   }
-}), Pt = (u, e) => {
+}), Wt = (u, e) => {
   const n = u.__vccOpts || u;
   for (const [s, t] of e)
     n[s] = t;
   return n;
-}, Nt = {}, Et = { class: "sv-brand-info" }, Wt = /* @__PURE__ */ De('<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), Ft = [
-  Wt
+}, Ft = {}, Ot = { class: "sv-brand-info" }, zt = /* @__PURE__ */ De('<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), Ut = [
+  zt
 ];
-function Ot(u, e) {
-  return i(), a("div", Et, Ft);
+function Qt(u, e) {
+  return i(), a("div", Ot, Ut);
 }
-const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use", null, null, -1), Qt = [
-  Ut
-], Kt = /* @__PURE__ */ y({
+const Kt = /* @__PURE__ */ Wt(Ft, [["render", Qt]]), jt = /* @__PURE__ */ v("use", null, null, -1), Gt = [
+  jt
+], Jt = /* @__PURE__ */ y({
   __name: "SvgIcon",
   props: {
     size: {},
@@ -4255,9 +4298,9 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       ref: n,
       class: "sv-svg-icon",
       role: "presentation"
-    }, Qt, 512));
+    }, Gt, 512));
   }
-}), jt = /* @__PURE__ */ y({
+}), Xt = /* @__PURE__ */ y({
   __name: "QuestionError",
   props: {
     error: {},
@@ -4277,14 +4320,14 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
           e.cssClasses ? e.cssClasses.error.item || void 0 : "panel-error-item"
         )
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: e.error.locText
         }, null, 8, ["locString"])
       ], 2)
     ]));
   }
-}), Gt = /* @__PURE__ */ y({
+}), Yt = /* @__PURE__ */ y({
   __name: "ActionBar",
   props: {
     model: {},
@@ -4313,14 +4356,14 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       class: l(o.model.getRootCss()),
       onClick: s
     }, [
-      (i(!0), a(H, null, V(o.model.renderedActions, (m) => (i(), c(d, {
+      (i(!0), a(M, null, V(o.model.renderedActions, (m) => (i(), C(d, {
         is: "sv-action",
         key: m.renderedId,
         item: m
       }, null, 8, ["item"]))), 128))
     ], 6)) : p("", !0);
   }
-}), Jt = ["id"], Xt = { class: "sv-action__content" }, Yt = /* @__PURE__ */ y({
+}), _t = ["id"], xt = { class: "sv-action__content" }, eo = /* @__PURE__ */ y({
   __name: "Action",
   props: {
     item: {}
@@ -4345,17 +4388,17 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       ref_key: "root",
       ref: e
     }, [
-      v("div", Xt, [
-        t.item.needSeparator ? (i(), c(d, {
+      v("div", xt, [
+        t.item.needSeparator ? (i(), C(d, {
           key: 0,
           is: "sv-action-bar-separator"
         })) : p("", !0),
-        C(d, {
+        c(d, {
           is: s.value,
           item: t.item
         }, null, 8, ["is", "item"])
       ])
-    ], 10, Jt));
+    ], 10, _t));
   }
 }), O = {
   mounted: function(u, e) {
@@ -4375,10 +4418,10 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       Qe(s);
     });
   }
-}, _t = ["disabled", "title", "aria-checked", "aria-expanded", "role"], xt = {
+}, so = ["disabled", "title", "aria-checked", "aria-expanded", "role"], no = {
   inheritAttrs: !1
-}, eo = /* @__PURE__ */ y({
-  ...xt,
+}, to = /* @__PURE__ */ y({
+  ...no,
   __name: "ActionBarItem",
   props: {
     item: {}
@@ -4406,7 +4449,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       "aria-expanded": n.item.ariaExpanded,
       role: n.item.ariaRole
     }, [
-      n.item.iconName ? (i(), c(d, {
+      n.item.iconName ? (i(), C(d, {
         key: 0,
         is: "sv-svg-icon",
         class: l(n.item.cssClasses.itemIcon),
@@ -4417,15 +4460,15 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       n.item.hasTitle ? (i(), a("span", {
         key: 1,
         class: l(n.item.getActionBarItemTitleCss())
-      }, M(n.item.title), 3)) : p("", !0)
-    ], 42, _t)), [
+      }, H(n.item.title), 3)) : p("", !0)
+    ], 42, so)), [
       [w(O), { processEsc: !1, disableTabStop: n.item.disableTabStop }]
     ]);
   }
-}), so = ["disabled", "title", "role"], no = {
+}), oo = ["disabled", "title", "role"], io = {
   inheritAttrs: !1
-}, to = /* @__PURE__ */ y({
-  ...no,
+}, ro = /* @__PURE__ */ y({
+  ...io,
   __name: "ActionBarItemDropdown",
   props: {
     item: {}
@@ -4441,7 +4484,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       () => {
         n.dispose();
       }
-    ), (s, t) => (i(), a(H, null, [
+    ), (s, t) => (i(), a(M, null, [
       B((i(), a("button", {
         type: "button",
         class: l(s.item.getActionBarItemCss()),
@@ -4455,7 +4498,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         title: s.item.tooltip || s.item.title,
         role: s.item.ariaRole
       }, [
-        s.item.iconName ? (i(), c(d, {
+        s.item.iconName ? (i(), C(d, {
           key: 0,
           is: "sv-svg-icon",
           class: l(s.item.cssClasses.itemIcon),
@@ -4466,17 +4509,17 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         s.item.hasTitle ? (i(), a("span", {
           key: 1,
           class: l(s.item.getActionBarItemTitleCss())
-        }, M(s.item.title), 3)) : p("", !0)
-      ], 42, so)), [
+        }, H(s.item.title), 3)) : p("", !0)
+      ], 42, oo)), [
         [w(O), { processEsc: !1, disableTabStop: s.item.disableTabStop }]
       ]),
-      C(d, {
+      c(d, {
         is: "sv-popup",
         model: s.item.popupModel
       }, null, 8, ["model"])
     ], 64));
   }
-}), oo = /* @__PURE__ */ y({
+}), lo = /* @__PURE__ */ y({
   __name: "ActionBarSeparator",
   props: {
     item: {}
@@ -4487,7 +4530,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       class: l(["sv-action-bar-separator", n.value])
     }, null, 2));
   }
-}), io = ["aria-label", "placeholder", "value"], ro = ["aria-label"], lo = ["role", "aria-label", "id"], ao = /* @__PURE__ */ y({
+}), ao = ["aria-label", "placeholder", "value"], uo = ["aria-label"], mo = ["role", "aria-label", "id"], po = /* @__PURE__ */ y({
   __name: "List",
   props: {
     model: {}
@@ -4518,7 +4561,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         v("div", {
           class: l(r.model.cssClasses.filterIcon)
         }, [
-          C(d, {
+          c(d, {
             is: "sv-svg-icon",
             iconName: "icon-search",
             size: "auto"
@@ -4532,7 +4575,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
           value: r.model.filterString,
           onChange: s,
           onKeyup: t
-        }, null, 42, io),
+        }, null, 42, ao),
         r.model.showSearchClearButton && r.model.filterString ? (i(), a("button", {
           key: 0,
           onClick: m[0] || (m[0] = (g) => {
@@ -4540,7 +4583,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
           }),
           class: l(r.model.cssClasses.searchClearButtonIcon)
         }, [
-          C(d, {
+          c(d, {
             is: "sv-svg-icon",
             iconName: "icon-searchclear",
             size: "auto"
@@ -4553,7 +4596,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         v("div", {
           class: l(r.model.cssClasses.emptyText),
           "aria-label": r.model.emptyMessage
-        }, M(r.model.emptyMessage), 11, ro)
+        }, H(r.model.emptyMessage), 11, uo)
       ], 2), [
         [A, r.model.isEmpty]
       ]),
@@ -4571,69 +4614,71 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
           r.model.onKeyDown(g);
         })
       }, [
-        (i(!0), a(H, null, V(r.model.renderedActions, (g) => (i(), c(d, {
+        (i(!0), a(M, null, V(r.model.renderedActions, (g) => (i(), C(d, {
           is: "sv-list-item",
           item: g,
           model: r.model,
           key: g.id
         }, null, 8, ["item", "model"]))), 128))
-      ], 42, lo)), [
+      ], 42, mo)), [
         [A, !r.model.isEmpty]
       ]) : p("", !0)
     ], 2));
   }
-}), uo = ["role", "aria-selected", "aria-checked", "id", "tabindex"], mo = ["title"], po = /* @__PURE__ */ y({
+}), vo = ["role", "aria-selected", "aria-checked", "id", "tabindex"], Co = ["title"], co = /* @__PURE__ */ y({
   __name: "ListItem",
   props: {
     model: {},
     item: {}
   },
   setup(u) {
-    const e = u, n = f(() => e.item.elementId), s = (o) => {
-      e.model.onItemClick(e.item), o.stopPropagation();
+    const e = u, n = k(null), s = f(() => e.item.elementId), t = (r) => {
+      e.model.onItemClick(e.item), r.stopPropagation();
     };
     I(() => e.item);
-    const t = f(
+    const o = f(
       () => e.item.component || e.model.itemComponent
     );
     return T(() => {
       setTimeout(() => {
-        e.model.onLastItemRended(e.item);
+        e.model.onItemRended(e.item, n.value);
       });
-    }), (o, r) => B((i(), a("li", {
-      role: o.model.listItemRole,
-      "aria-selected": o.model.getA11yItemAriaSelected(o.item),
-      "aria-checked": o.model.getA11yItemAriaChecked(o.item),
-      key: o.item.id,
-      id: n.value,
-      onPointerdown: r[2] || (r[2] = (m) => o.model.onPointerDown(m, o.item)),
-      class: l(o.model.getItemClass(o.item)),
-      onClick: s,
-      tabindex: o.item.disableTabStop ? -1 : 0
+    }), (r, m) => B((i(), a("li", {
+      role: r.model.listItemRole,
+      "aria-selected": r.model.getA11yItemAriaSelected(r.item),
+      "aria-checked": r.model.getA11yItemAriaChecked(r.item),
+      key: r.item.id,
+      id: s.value,
+      ref_key: "elementRef",
+      ref: n,
+      onPointerdown: m[2] || (m[2] = (g) => r.model.onPointerDown(g, r.item)),
+      class: l(r.model.getItemClass(r.item)),
+      onClick: t,
+      tabindex: r.item.disableTabStop ? -1 : 0
     }, [
-      o.item.needSeparator ? (i(), a("div", {
+      r.item.needSeparator ? (i(), a("div", {
         key: 0,
-        class: l(o.model.cssClasses.itemSeparator)
+        class: l(r.model.cssClasses.itemSeparator)
       }, null, 2)) : p("", !0),
       v("div", {
-        style: L(o.model.getItemStyle(o.item)),
-        class: l(o.model.cssClasses.itemBody),
-        title: o.item.getTooltip(),
-        onMouseover: r[0] || (r[0] = (m) => o.model.onItemHover(o.item)),
-        onMouseleave: r[1] || (r[1] = (m) => o.model.onItemLeave(o.item))
+        style: L(r.model.getItemStyle(r.item)),
+        class: l(r.model.cssClasses.itemBody),
+        title: r.item.getTooltip(),
+        onMouseover: m[0] || (m[0] = (g) => r.model.onItemHover(r.item)),
+        onMouseleave: m[1] || (m[1] = (g) => r.model.onItemLeave(r.item))
       }, [
-        C(d, {
-          is: t.value,
-          item: o.item,
-          model: o.model
+        c(d, {
+          is: o.value,
+          item: r.item,
+          model: r.model
         }, null, 8, ["is", "item", "model"])
-      ], 46, mo)
-    ], 42, uo)), [
-      [A, o.model.isItemVisible(o.item)],
-      [w(O), { processEsc: !1, disableTabStop: o.item.disableTabStop }]
+      ], 46, Co)
+    ], 42, vo)), [
+      [A, r.model.isItemVisible(r.item)],
+      [w(O), { processEsc: !1, disableTabStop: r.item.disableTabStop }]
     ]);
   }
-}), vo = /* @__PURE__ */ y({
+}), go = /* @__PURE__ */ y({
   __name: "ListItemContent",
   props: {
     model: {},
@@ -4641,19 +4686,19 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u;
-    return I(() => e.item), (n, s) => (i(), a(H, null, [
-      n.item.iconName ? (i(), c(d, {
+    return I(() => e.item), (n, s) => (i(), a(M, null, [
+      n.item.iconName ? (i(), C(d, {
         key: 0,
         is: "sv-svg-icon",
         class: l(n.model.cssClasses.itemIcon),
         iconName: n.item.iconName,
         size: n.item.iconSize
       }, null, 8, ["class", "iconName", "size"])) : p("", !0),
-      C(d, {
+      c(d, {
         is: "survey-string",
         locString: n.item.locTitle
       }, null, 8, ["locString"]),
-      n.item.markerIconName ? (i(), c(d, {
+      n.item.markerIconName ? (i(), C(d, {
         key: 1,
         is: "sv-svg-icon",
         class: l(n.item.cssClasses.itemMarkerIcon),
@@ -4662,7 +4707,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       }, null, 8, ["class", "iconName"])) : p("", !0)
     ], 64));
   }
-}), Co = /* @__PURE__ */ y({
+}), yo = /* @__PURE__ */ y({
   __name: "ListItemGroup",
   props: {
     model: {},
@@ -4670,19 +4715,19 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
   },
   setup(u) {
     const e = u;
-    return I(() => e.item), (n, s) => (i(), a(H, null, [
-      C(d, {
+    return I(() => e.item), (n, s) => (i(), a(M, null, [
+      c(d, {
         is: "sv-list-item-content",
         item: n.item,
         model: n.model
       }, null, 8, ["item", "model"]),
-      C(d, {
+      c(d, {
         is: "sv-popup",
         model: n.item.popupModel
       }, null, 8, ["model"])
     ], 64));
   }
-}), co = /* @__PURE__ */ y({
+}), ho = /* @__PURE__ */ y({
   __name: "Popup",
   props: {
     model: {}
@@ -4706,19 +4751,19 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       ref_key: "root",
       ref: s
     }, [
-      C(d, {
+      c(d, {
         is: "sv-popup-container",
         model: n.value
       }, null, 8, ["model"])
     ], 512));
   }
-}), go = { class: "sv-popup__body-content" }, yo = {
+}), qo = { class: "sv-popup__body-content" }, wo = {
   key: 0,
   class: "sv-popup__body-header"
-}, ho = { class: "sv-popup__scrolling-content" }, qo = { class: "sv-popup__content" }, wo = {
+}, bo = { class: "sv-popup__scrolling-content" }, Lo = { class: "sv-popup__content" }, ko = {
   key: 1,
   class: "sv-popup__body-footer"
-}, bo = /* @__PURE__ */ y({
+}, fo = /* @__PURE__ */ y({
   __name: "PopupContainer",
   props: {
     model: {}
@@ -4756,22 +4801,22 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         }),
         onClick: n
       }, [
-        s.model.showHeader ? (i(), c(d, {
+        s.model.showHeader ? (i(), C(d, {
           key: 0,
           is: s.model.popupHeaderTemplate,
           model: s.model
         }, null, 8, ["is", "model"])) : p("", !0),
-        v("div", go, [
-          s.model.title ? (i(), a("div", yo, M(s.model.title), 1)) : p("", !0),
-          v("div", ho, [
-            v("div", qo, [
-              C(d, $({
+        v("div", qo, [
+          s.model.title ? (i(), a("div", wo, H(s.model.title), 1)) : p("", !0),
+          v("div", bo, [
+            v("div", Lo, [
+              c(d, $({
                 is: s.model.contentComponentName
               }, s.model.contentComponentData), null, 16, ["is"])
             ])
           ]),
-          s.model.showFooter ? (i(), a("div", wo, [
-            C(d, {
+          s.model.showFooter ? (i(), a("div", ko, [
+            c(d, {
               is: "sv-action-bar",
               model: s.model.footerToolbar
             }, null, 8, ["model"])
@@ -4782,7 +4827,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       [A, s.model.isVisible]
     ]);
   }
-}), Lo = /* @__PURE__ */ y({
+}), Mo = /* @__PURE__ */ y({
   __name: "PopupPointer",
   props: {
     model: {}
@@ -4796,7 +4841,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       })
     }, null, 4));
   }
-}), ko = /* @__PURE__ */ y({
+}), Ho = /* @__PURE__ */ y({
   __name: "Container",
   props: {
     survey: {},
@@ -4807,19 +4852,19 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
     const e = u, n = f(
       () => e.survey.getContainerContent(e.container)
     );
-    return (s, t) => n.value.length > 0 ? (i(), a(H, { key: 0 }, [
+    return (s, t) => n.value.length > 0 ? (i(), a(M, { key: 0 }, [
       s.needRenderWrapper ? (i(), a("div", {
         key: 0,
         class: l(["sv-components-column", "sv-components-container-" + s.container])
       }, [
-        (i(!0), a(H, null, V(n.value, (o) => (i(), c(d, {
+        (i(!0), a(M, null, V(n.value, (o) => (i(), C(d, {
           key: o.id,
           is: o.component,
           survey: s.survey,
           container: s.container,
           model: o.data
         }, null, 8, ["is", "survey", "container", "model"]))), 128))
-      ], 2)) : (i(!0), a(H, { key: 1 }, V(n.value, (o) => (i(), c(d, {
+      ], 2)) : (i(!0), a(M, { key: 1 }, V(n.value, (o) => (i(), C(d, {
         key: o.id,
         is: o.component,
         survey: s.survey,
@@ -4828,7 +4873,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       }, null, 8, ["is", "survey", "container", "model"]))), 128))
     ], 64)) : p("", !0);
   }
-}), fo = ["aria-label"], G = /* @__PURE__ */ y({
+}), Io = ["aria-label"], G = /* @__PURE__ */ y({
   __name: "Progress",
   props: {
     survey: {},
@@ -4850,14 +4895,14 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
       }, [
         v("span", {
           class: l(s(o.survey.css))
-        }, M(o.survey.progressText), 3)
-      ], 14, fo),
+        }, H(o.survey.progressText), 3)
+      ], 14, Io),
       v("span", {
         class: l(t(o.survey.css))
-      }, M(o.survey.progressText), 3)
+      }, H(o.survey.progressText), 3)
     ], 2));
   }
-}), Ho = ["aria-label"], Mo = ["title"], Io = ["onClick", "data-page-number"], Vo = ["title"], So = ["title"], Ro = ["title"], To = /* @__PURE__ */ y({
+}), Vo = ["aria-label"], So = ["title"], Ro = ["onClick", "data-page-number"], To = ["title"], Bo = ["title"], Zo = ["title"], $o = /* @__PURE__ */ y({
   __name: "ProgressButtons",
   props: {
     survey: {},
@@ -4902,7 +4947,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         v("div", {
           class: l(h.survey.css.progressButtonsPageTitle),
           title: h.model.headerText
-        }, M(h.model.headerText), 11, Mo)
+        }, H(h.model.headerText), 11, So)
       ], 2)) : p("", !0),
       v("div", {
         class: l(m.value.progressButtonsContainer)
@@ -4920,7 +4965,7 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
           v("ul", {
             class: l(m.value.progressButtonsList)
           }, [
-            (i(!0), a(H, null, V(h.survey.visiblePages, (b, Z) => (i(), a("li", {
+            (i(!0), a(M, null, V(h.survey.visiblePages, (b, Z) => (i(), a("li", {
               key: "listelement" + Z,
               class: l(h.model.getListElementCss(Z)),
               onClick: (x) => h.model.isListElementClickable(Z) ? h.model.clickListElement(b) : null,
@@ -4934,16 +4979,16 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
                 class: l(m.value.progressButtonsPageTitle),
                 title: b.renderedNavigationTitle
               }, [
-                C(d, {
+                c(d, {
                   is: "survey-string",
                   locString: b.locNavigationTitle
                 }, null, 8, ["locString"])
-              ], 10, Vo)) : p("", !0),
+              ], 10, To)) : p("", !0),
               o.value ? (i(), a("div", {
                 key: 1,
                 class: l(m.value.progressButtonsPageDescription),
                 title: b.locNavigationDescription.renderedHtml
-              }, M(b.locNavigationDescription.renderedHtml), 11, So)) : p("", !0),
+              }, H(b.locNavigationDescription.renderedHtml), 11, Bo)) : p("", !0),
               v("div", {
                 class: l(m.value.progressButtonsButton)
               }, [
@@ -4953,9 +4998,9 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
                 v("div", {
                   class: l(m.value.progressButtonsButtonContent)
                 }, null, 2),
-                v("span", null, M(h.model.getItemNumber(b)), 1)
+                v("span", null, H(h.model.getItemNumber(b)), 1)
               ], 2)
-            ], 10, Io))), 128))
+            ], 10, Ro))), 128))
           ], 2)
         ], 2),
         v("div", {
@@ -4971,11 +5016,11 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         v("div", {
           class: l(h.survey.css.progressButtonsPageTitle),
           title: h.model.footerText
-        }, M(h.model.footerText), 11, Ro)
+        }, H(h.model.footerText), 11, Zo)
       ], 2)) : p("", !0)
-    ], 14, Ho));
+    ], 14, Vo));
   }
-}), Bo = /* @__PURE__ */ y({
+}), Do = /* @__PURE__ */ y({
   __name: "ProgressToc",
   props: {
     survey: {},
@@ -4993,18 +5038,18 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
         onClick: s[0] || (s[0] = //@ts-ignore
         (...t) => n.model.togglePopup && n.model.togglePopup(...t))
       }, [
-        C(d, {
+        c(d, {
           is: "sv-svg-icon",
           iconName: n.model.icon,
           size: 24
         }, null, 8, ["iconName"]),
-        C(d, {
+        c(d, {
           is: "sv-popup",
           model: n.model.popupModel
         }, null, 8, ["model"])
       ])), [
         [w(O)]
-      ]) : (i(), c(d, {
+      ]) : (i(), C(d, {
         key: 1,
         is: "sv-list",
         model: n.model.listModel
@@ -5013,11 +5058,11 @@ const zt = /* @__PURE__ */ Pt(Nt, [["render", Ot]]), Ut = /* @__PURE__ */ v("use
   }
 });
 /*!
- * surveyjs - Survey JavaScript library v2.3.8
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
-var Zo = {
+var Ao = {
   modernbooleancheckchecked: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><polygon points="19,10 14,10 14,5 10,5 10,10 5,10 5,14 10,14 10,19 14,19 14,14 19,14 "></polygon></svg>',
   modernbooleancheckind: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M22,0H2C0.9,0,0,0.9,0,2v20c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V2C24,0.9,23.1,0,22,0z M21,18L6,3h15V18z M3,6l15,15H3V6z"></path></svg>',
   modernbooleancheckunchecked: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="4"></rect></svg>',
@@ -5081,7 +5126,7 @@ var Zo = {
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
 /*!
- * surveyjs - Survey JavaScript library v2.3.8
+ * surveyjs - Survey JavaScript library v2.3.10
  * Copyright (c) 2015-2025 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -5148,11 +5193,11 @@ var fe = {
   "smiley-rate8-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85721 24 1.15412 20.96 0.0134987 14.16C-0.0765501 13.62 0.293651 13.1 0.833944 13.01C1.38424 12.92 1.89452 13.29 1.98457 13.83C2.92508 19.47 7.69767 21.99 12 21.99C16.3023 21.99 21.0749 19.47 22.0154 13.83C22.1055 13.29 22.6158 12.92 23.1661 13.01C23.7063 13.1 24.0765 13.62 23.9865 14.16C22.8559 20.95 17.1428 24 11.99 24H12.01ZM8.00783 6V2C8.00783 1.45 7.55759 1 7.00729 1C6.45699 1 6.00675 1.45 6.00675 2V6C6.00675 6.55 6.45699 7 7.00729 7C7.55759 7 8.00783 6.55 8.00783 6ZM18.0133 6V2C18.0133 1.45 17.563 1 17.0127 1C16.4624 1 16.0122 1.45 16.0122 2V6C16.0122 6.55 16.4624 7 17.0127 7C17.563 7 18.0133 6.55 18.0133 6Z"></path></svg>',
   "smiley-rate9-24x24": '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.01 24C6.85767 24 1.15509 20.96 0.0145752 14.16C-0.0354475 13.87 0.0445888 13.57 0.234675 13.35C0.424761 13.13 0.704888 13 0.995019 13H23.005C23.2951 13 23.5752 13.13 23.7653 13.35C23.9554 13.57 24.0354 13.87 23.9854 14.16C22.8549 20.95 17.1423 24 11.99 24H12.01ZM2.25559 15C3.61621 19.82 8.0182 22 12.01 22C16.0018 22 20.4038 19.82 21.7644 15H2.25559ZM8.00819 6V2C8.00819 1.45 7.55799 1 7.00774 1C6.45749 1 6.00729 1.45 6.00729 2V6C6.00729 6.55 6.45749 7 7.00774 7C7.55799 7 8.00819 6.55 8.00819 6ZM18.0127 6V2C18.0127 1.45 17.5625 1 17.0123 1C16.462 1 16.0118 1.45 16.0118 2V6C16.0118 6.55 16.462 7 17.0123 7C17.5625 7 18.0127 6.55 18.0127 6Z"></path></svg>'
 };
-const $o = ["lang", "dir"], Do = { onsubmit: "return false;" }, Ao = {
+const Po = ["lang", "dir"], No = { onsubmit: "return false;" }, Eo = {
   key: 0,
   class: "sv_custom_header"
-}, Po = { class: "sv-components-column sv-components-column--expandable" }, No = ["id"], Eo = { key: 2 }, Wo = ["innerHTML"], Fo = ["innerHTML"], Oo = ["innerHTML"];
-be("v1", Zo);
+}, Wo = { class: "sv-components-column sv-components-column--expandable" }, Fo = ["id"], Oo = { key: 2 }, zo = ["innerHTML"], Uo = ["innerHTML"], Qo = ["innerHTML"];
+be("v1", Ao);
 be("v2", fe);
 J.registerIcons(fe);
 const oe = /* @__PURE__ */ y({
@@ -5198,40 +5243,40 @@ const oe = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-scroll",
         disabled: t.value.rootScrollDisabled
       }, {
         default: D(() => [
-          t.value.needRenderIcons ? (i(), c(d, {
+          t.value.needRenderIcons ? (i(), C(d, {
             key: 0,
             is: "sv-svg-bundle"
           })) : p("", !0),
           v("div", {
             class: l(t.value.wrapperFormCss)
           }, [
-            C(d, { is: "survey-popup-modal" }),
+            c(d, { is: "survey-popup-modal" }),
             t.value.renderBackgroundImage ? (i(), a("div", {
               key: 0,
               class: l(g.value.rootBackgroundImage),
               style: L(t.value.backgroundImageStyle)
             }, null, 6)) : p("", !0),
-            v("form", Do, [
-              C(d, {
+            v("form", No, [
+              c(d, {
                 is: "sv-scroll",
                 disabled: t.value.formScrollDisabled
               }, {
                 default: D(() => [
-                  t.value.hasLogo ? p("", !0) : (i(), a("div", Ao)),
+                  t.value.hasLogo ? p("", !0) : (i(), a("div", Eo)),
                   v("div", {
                     class: l(g.value.container)
                   }, [
-                    t.value.headerView === "basic" ? (i(), c(d, {
+                    t.value.headerView === "basic" ? (i(), C(d, {
                       key: 0,
                       is: "survey-header",
                       survey: t.value
                     }, null, 8, ["survey"])) : p("", !0),
-                    C(d, {
+                    c(d, {
                       is: "sv-components-container",
                       survey: t.value,
                       container: "header",
@@ -5241,14 +5286,14 @@ const oe = /* @__PURE__ */ y({
                       key: 1,
                       class: l(t.value.bodyContainerCss)
                     }, [
-                      C(d, {
+                      c(d, {
                         is: "sv-components-container",
                         survey: t.value,
                         container: "left",
                         needRenderWrapper: !0
                       }, null, 8, ["survey"]),
-                      v("div", Po, [
-                        C(d, {
+                      v("div", Wo, [
+                        c(d, {
                           is: "sv-components-container",
                           survey: t.value,
                           container: "center",
@@ -5259,50 +5304,50 @@ const oe = /* @__PURE__ */ y({
                           style: L({ maxWidth: t.value.renderedWidth }),
                           id: o.value
                         }, [
-                          C(d, {
+                          c(d, {
                             is: "sv-components-container",
                             survey: t.value,
                             container: "contentTop",
                             needRenderWrapper: !0
                           }, null, 8, ["survey"]),
-                          (i(), c(d, {
-                            is: "survey-page",
+                          (i(), C(d, {
+                            is: t.value.pageComponent || "sv-page",
                             key: S.value,
                             survey: t.value,
                             page: t.value.activePage,
                             css: g.value
-                          }, null, 8, ["survey", "page", "css"])),
-                          C(d, {
+                          }, null, 8, ["is", "survey", "page", "css"])),
+                          c(d, {
                             is: "sv-components-container",
                             survey: t.value,
                             container: "contentBottom",
                             needRenderWrapper: !0
                           }, null, 8, ["survey"]),
-                          t.value.showBrandInfo ? (i(), c(d, {
+                          t.value.showBrandInfo ? (i(), C(d, {
                             key: 0,
                             is: "sv-brand-info"
                           })) : p("", !0)
-                        ], 14, No)
+                        ], 14, Fo)
                       ]),
-                      C(d, {
+                      c(d, {
                         is: "sv-components-container",
                         survey: t.value,
                         container: "right",
                         needRenderWrapper: !0
                       }, null, 8, ["survey"])
                     ], 2)) : p("", !0),
-                    C(d, {
+                    c(d, {
                       is: "sv-components-container",
                       survey: t.value,
                       container: "footer",
                       needRenderWrapper: !1
                     }, null, 8, ["survey"]),
-                    m.value ? (i(), a("div", Eo, [
+                    m.value ? (i(), a("div", Oo, [
                       v("div", {
                         innerHTML: t.value.processedCompletedHtml,
                         class: l(t.value.completedCss)
-                      }, null, 10, Wo),
-                      C(d, {
+                      }, null, 10, zo),
+                      c(d, {
                         is: "sv-components-container",
                         survey: t.value,
                         container: "completePage",
@@ -5313,22 +5358,22 @@ const oe = /* @__PURE__ */ y({
                       key: 3,
                       class: l(t.value.completedBeforeCss),
                       innerHTML: t.value.processedCompletedBeforeHtml
-                    }, null, 10, Fo)) : p("", !0),
+                    }, null, 10, Uo)) : p("", !0),
                     t.value.state === "loading" ? (i(), a("div", {
                       key: 4,
                       class: l(t.value.loadingBodyCss),
                       innerHTML: t.value.processedLoadingHtml
-                    }, null, 10, Oo)) : p("", !0),
+                    }, null, 10, Qo)) : p("", !0),
                     t.value.state === "empty" ? (i(), a("div", {
                       key: 5,
                       class: l(g.value.bodyEmpty)
-                    }, M(t.value.emptySurveyText), 3)) : p("", !0)
+                    }, H(t.value.emptySurveyText), 3)) : p("", !0)
                   ], 2)
                 ]),
                 _: 1
               }, 8, ["disabled"])
             ]),
-            C(d, {
+            c(d, {
               is: "sv-notifier",
               model: t.value.notifier
             }, null, 8, ["model"])
@@ -5336,9 +5381,9 @@ const oe = /* @__PURE__ */ y({
         ]),
         _: 1
       }, 8, ["disabled"])
-    ], 14, $o));
+    ], 14, Po));
   }
-}), zo = /* @__PURE__ */ y({
+}), Ko = /* @__PURE__ */ y({
   __name: "Notifier",
   props: {
     model: {}
@@ -5352,14 +5397,14 @@ const oe = /* @__PURE__ */ y({
       role: "alert",
       "aria-live": "polite"
     }, [
-      v("span", null, M(n.model.message), 1),
-      C(d, {
+      v("span", null, H(n.model.message), 1),
+      c(d, {
         is: "sv-action-bar",
         model: n.model.actionBar
       }, null, 8, ["model"])
     ], 6)) : p("", !0);
   }
-}), Uo = { key: 0 }, Qo = /* @__PURE__ */ y({
+}), jo = { key: 0 }, Go = /* @__PURE__ */ y({
   __name: "QuestionOther",
   props: {
     question: {},
@@ -5369,14 +5414,14 @@ const oe = /* @__PURE__ */ y({
     return (e, n) => (i(), a("div", {
       class: l(e.question.getCommentAreaCss(!0))
     }, [
-      e.question.isReadOnlyRenderDiv() ? (i(), a("div", Uo, M(e.question.getCommentValue(e.item)), 1)) : (i(), c(d, {
+      e.question.isReadOnlyRenderDiv() ? (i(), a("div", jo, H(e.question.getCommentValue(e.item)), 1)) : (i(), C(d, {
         key: 1,
         is: "sv-text-area",
         model: e.question.getCommentTextAreaModel(e.item)
       }, null, 8, ["model"]))
     ], 2));
   }
-}), Ko = ["disabled", "value", "title"], jo = /* @__PURE__ */ y({
+}), Jo = ["disabled", "value", "title"], Xo = /* @__PURE__ */ y({
   __name: "SurveyNavigationButton",
   props: {
     item: {}
@@ -5393,9 +5438,9 @@ const oe = /* @__PURE__ */ y({
       onMousedown: n,
       onClick: t[0] || (t[0] = //@ts-ignore
       (...o) => s.item.action && s.item.action(...o))
-    }, null, 42, Ko)) : p("", !0);
+    }, null, 42, Jo)) : p("", !0);
   }
-}), He = /* @__PURE__ */ y({
+}), Me = /* @__PURE__ */ y({
   __name: "PopupSurvey",
   props: {
     survey: {},
@@ -5447,7 +5492,7 @@ const oe = /* @__PURE__ */ y({
           n.value.isCollapsed && n.value.locTitle ? (i(), a("div", {
             key: 0,
             class: l(n.value.cssHeaderTitleCollapsed)
-          }, M(n.value.locTitle.renderedHtml), 3)) : p("", !0),
+          }, H(n.value.locTitle.renderedHtml), 3)) : p("", !0),
           v("div", {
             class: l(n.value.cssHeaderButtonsContainer)
           }, [
@@ -5456,13 +5501,13 @@ const oe = /* @__PURE__ */ y({
               class: l(n.value.cssHeaderFullScreenButton),
               onClick: o
             }, [
-              n.value.isFullScreen ? (i(), c(d, {
+              n.value.isFullScreen ? (i(), C(d, {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-back-to-panel_16x16",
                 size: 16
               })) : p("", !0),
-              n.value.isFullScreen ? p("", !0) : (i(), c(d, {
+              n.value.isFullScreen ? p("", !0) : (i(), C(d, {
                 key: 1,
                 is: "sv-svg-icon",
                 iconName: "icon-full-screen_16x16",
@@ -5473,13 +5518,13 @@ const oe = /* @__PURE__ */ y({
               class: l(n.value.cssHeaderCollapseButton),
               onClick: s
             }, [
-              n.value.isExpanded ? (i(), c(d, {
+              n.value.isExpanded ? (i(), C(d, {
                 key: 0,
                 is: "sv-svg-icon",
                 iconName: "icon-minimize_16x16",
                 size: 16
               })) : p("", !0),
-              n.value.isCollapsed ? (i(), c(d, {
+              n.value.isCollapsed ? (i(), C(d, {
                 key: 1,
                 is: "sv-svg-icon",
                 iconName: "icon-restore_16x16",
@@ -5491,7 +5536,7 @@ const oe = /* @__PURE__ */ y({
               class: l(n.value.cssHeaderCloseButton),
               onClick: t
             }, [
-              C(d, {
+              c(d, {
                 is: "sv-svg-icon",
                 iconName: "icon-close_16x16",
                 size: 16
@@ -5502,12 +5547,12 @@ const oe = /* @__PURE__ */ y({
         v("div", {
           class: l(n.value.cssBody)
         }, [
-          C(oe, { survey: S.survey }, null, 8, ["survey"])
+          c(oe, { survey: S.survey }, null, 8, ["survey"])
         ], 2)
       ], 2)
     ], 38)) : p("", !0);
   }
-}), Go = ["innerHTML"], Jo = /* @__PURE__ */ y({
+}), Yo = ["innerHTML"], _o = /* @__PURE__ */ y({
   __name: "CustomWidget",
   props: {
     question: {},
@@ -5530,8 +5575,8 @@ const oe = /* @__PURE__ */ y({
       t.value ? (i(), a("div", {
         key: 0,
         innerHTML: o.value
-      }, null, 8, Go)) : p("", !0),
-      s.value ? (i(), c(d, {
+      }, null, 8, Yo)) : p("", !0),
+      s.value ? (i(), C(d, {
         key: 1,
         is: r.value,
         question: m.question,
@@ -5539,7 +5584,7 @@ const oe = /* @__PURE__ */ y({
       }, null, 8, ["is", "question", "css"])) : p("", !0)
     ], 512));
   }
-}), Xo = /* @__PURE__ */ y({
+}), xo = /* @__PURE__ */ y({
   __name: "PopupModal",
   setup(u) {
     const e = _();
@@ -5554,17 +5599,17 @@ const oe = /* @__PURE__ */ y({
     }
     return ee.showDialog || (ee.showDialog = n, P(() => {
       ee.showDialog = void 0;
-    })), (s, t) => e.value ? (i(), c(Ne, {
+    })), (s, t) => e.value ? (i(), C(Ne, {
       key: 0,
       to: e.value.container
     }, [
-      C(d, {
+      c(d, {
         is: "sv-popup-container",
         model: e.value
       }, null, 8, ["model"])
     ], 8, ["to"])) : p("", !0);
   }
-}), Yo = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], _o = /* @__PURE__ */ y({
+}), ei = ["readonly", "disabled", "value", "id", "maxlength", "cols", "rows", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage"], si = /* @__PURE__ */ y({
   __name: "TextArea",
   props: {
     model: {},
@@ -5615,9 +5660,9 @@ const oe = /* @__PURE__ */ y({
       "aria-invalid": o.model.ariaInvalid,
       "aria-errormessage": o.model.ariaErrormessage,
       style: L({ resize: o.model.question.resizeStyle })
-    }, null, 46, Yo));
+    }, null, 46, ei));
   }
-}), xo = /* @__PURE__ */ y({
+}), ni = /* @__PURE__ */ y({
   __name: "CharacterCounter",
   props: {
     counter: {},
@@ -5627,9 +5672,9 @@ const oe = /* @__PURE__ */ y({
     const e = u;
     return I(() => e.counter), (n, s) => (i(), a("div", {
       class: l(n.remainingCharacterCounter)
-    }, M(n.counter.remainingCharacterCounter), 3));
+    }, H(n.counter.remainingCharacterCounter), 3));
   }
-}), ei = /* @__PURE__ */ y({
+}), ti = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Composite",
   props: {
@@ -5640,7 +5685,7 @@ const oe = /* @__PURE__ */ y({
     const e = u, n = k(null);
     R(e, n);
     const s = f(() => e.question.contentPanel);
-    return (t, o) => (i(), c(d, {
+    return (t, o) => (i(), C(d, {
       is: "survey-panel",
       ref_key: "root",
       ref: n,
@@ -5648,7 +5693,7 @@ const oe = /* @__PURE__ */ y({
       css: t.css
     }, null, 8, ["element", "css"]));
   }
-}), si = /* @__PURE__ */ y({
+}), oi = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Custom",
   props: {
@@ -5661,16 +5706,16 @@ const oe = /* @__PURE__ */ y({
     const s = f(() => e.question.contentQuestion);
     I(() => s.value);
     const t = (o) => ne(o);
-    return (o, r) => (i(), c(d, {
+    return (o, r) => (i(), C(d, {
       ref: n.value,
       is: t(s.value),
       question: s.value,
       css: o.css
     }, null, 8, ["is", "question", "css"]));
   }
-}), ni = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), ti = [
-  ni
-], ge = 440, oi = /* @__PURE__ */ y({
+}), ii = /* @__PURE__ */ v("use", { "xlink:href": "#icon-timercircle" }, null, -1), ri = [
+  ii
+], ge = 440, li = /* @__PURE__ */ y({
   __name: "TimerPanel",
   props: {
     model: {},
@@ -5686,37 +5731,37 @@ const oe = /* @__PURE__ */ y({
         key: 0,
         class: l(t.model.getProgressCss()),
         style: L({ strokeDasharray: ge, strokeDashoffset: n.value })
-      }, ti, 6)) : p("", !0),
+      }, ri, 6)) : p("", !0),
       v("div", {
         class: l(t.model.textContainerCss)
       }, [
         v("span", {
           class: l(t.model.majorTextCss)
-        }, M(t.model.clockMajorText), 3),
+        }, H(t.model.clockMajorText), 3),
         t.model.clockMinorText ? (i(), a("span", {
           key: 0,
           class: l(t.model.minorTextCss)
-        }, M(t.model.clockMinorText), 3)) : p("", !0)
+        }, H(t.model.clockMinorText), 3)) : p("", !0)
       ], 2)
     ], 2)) : B((i(), a("div", {
       key: 1,
       class: l(t.model.survey.getCss().timerRoot)
-    }, M(s.value), 3)), [
+    }, H(s.value), 3)), [
       [A, t.model.isRunning && !t.model.showTimerAsClock]
     ]);
   }
-}), ii = { class: "sd-loading-indicator" }, ri = /* @__PURE__ */ y({
+}), ai = { class: "sd-loading-indicator" }, ui = /* @__PURE__ */ y({
   __name: "LoadingIndicator",
   setup(u) {
-    return (e, n) => (i(), a("div", ii, [
-      C(d, {
+    return (e, n) => (i(), a("div", ai, [
+      c(d, {
         is: "sv-svg-icon",
         iconName: "icon-loading",
         size: "'auto'"
       })
     ]));
   }
-}), li = { key: 2 }, ai = /* @__PURE__ */ y({
+}), di = { key: 2 }, mi = /* @__PURE__ */ y({
   __name: "Header",
   props: {
     model: {},
@@ -5746,24 +5791,24 @@ const oe = /* @__PURE__ */ y({
         class: l(n.model.contentClasses),
         style: L({ maxWidth: n.model.maxWidth })
       }, [
-        (i(!0), a(H, null, V(n.model.cells, (t, o) => (i(), c(d, {
+        (i(!0), a(M, null, V(n.model.cells, (t, o) => (i(), C(d, {
           is: "sv-header-cell",
           model: t,
           key: o
         }, null, 8, ["model"]))), 128))
       ], 6)),
-      n.survey.isMobile ? (i(), a("div", li, [
-        C(d, {
+      n.survey.isMobile ? (i(), a("div", di, [
+        c(d, {
           is: "sv-header-mobile",
           model: n.model
         }, null, 8, ["model"])
       ])) : p("", !0)
     ], 6)) : p("", !0);
   }
-}), ui = {
+}), pi = {
   key: 0,
   class: "sv-header__logo"
-}, di = ["src", "width", "height", "alt"], mi = /* @__PURE__ */ y({
+}, vi = ["src", "width", "height", "alt"], Ci = /* @__PURE__ */ y({
   __name: "HeaderCell",
   props: {
     model: {}
@@ -5777,7 +5822,7 @@ const oe = /* @__PURE__ */ y({
         class: "sv-header__cell-content",
         style: L(e.model.contentStyle)
       }, [
-        e.model.showLogo ? (i(), a("div", ui, [
+        e.model.showLogo ? (i(), a("div", pi, [
           v("div", {
             class: l(e.model.survey.logoClassNames)
           }, [
@@ -5788,7 +5833,7 @@ const oe = /* @__PURE__ */ y({
               height: e.model.survey.renderedLogoHeight,
               alt: e.model.survey.locTitle.renderedHtml,
               style: L({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-            }, null, 14, di)
+            }, null, 14, vi)
           ], 2)
         ])) : p("", !0),
         e.model.showTitle ? (i(), a("div", {
@@ -5796,7 +5841,7 @@ const oe = /* @__PURE__ */ y({
           class: "sv-header__title",
           style: L({ maxWidth: e.model.textAreaWidth })
         }, [
-          C(d, {
+          c(d, {
             is: "survey-element-title",
             element: e.model.survey,
             css: e.model.survey.css
@@ -5811,7 +5856,7 @@ const oe = /* @__PURE__ */ y({
             key: 0,
             class: l(e.model.survey.css.description)
           }, [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: e.model.survey.locDescription
             }, null, 8, ["locString"])
@@ -5820,17 +5865,17 @@ const oe = /* @__PURE__ */ y({
       ], 4)
     ], 6));
   }
-}), pi = { class: "sv-header--mobile" }, vi = {
+}), ci = { class: "sv-header--mobile" }, gi = {
   key: 0,
   class: "sv-header__logo"
-}, Ci = ["src", "width", "height", "alt"], ci = /* @__PURE__ */ y({
+}, yi = ["src", "width", "height", "alt"], hi = /* @__PURE__ */ y({
   __name: "HeaderMobile",
   props: {
     model: {}
   },
   setup(u) {
-    return (e, n) => (i(), a("div", pi, [
-      e.model.survey.hasLogo ? (i(), a("div", vi, [
+    return (e, n) => (i(), a("div", ci, [
+      e.model.survey.hasLogo ? (i(), a("div", gi, [
         v("div", {
           class: l(e.model.survey.logoClassNames)
         }, [
@@ -5841,7 +5886,7 @@ const oe = /* @__PURE__ */ y({
             height: e.model.survey.renderedLogoHeight,
             alt: e.model.survey.locTitle.renderedHtml,
             style: L({ objectFit: e.model.survey.logoFit, width: e.model.survey.renderedStyleLogoWidth, height: e.model.survey.renderedStyleLogoHeight })
-          }, null, 14, Ci)
+          }, null, 14, yi)
         ], 2)
       ])) : p("", !0),
       e.model.survey.hasTitle ? (i(), a("div", {
@@ -5849,7 +5894,7 @@ const oe = /* @__PURE__ */ y({
         class: "sv-header__title",
         style: L({ maxWidth: e.model.renderedTextAreaWidth })
       }, [
-        C(d, {
+        c(d, {
           is: "survey-element-title",
           element: e.model.survey,
           css: e.model.survey.css
@@ -5864,7 +5909,7 @@ const oe = /* @__PURE__ */ y({
           key: 0,
           class: l(e.model.survey.css.description)
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: e.model.survey.locDescription
           }, null, 8, ["locString"])
@@ -5872,7 +5917,7 @@ const oe = /* @__PURE__ */ y({
       ], 4)) : p("", !0)
     ]));
   }
-}), gi = /* @__PURE__ */ y({
+}), qi = /* @__PURE__ */ y({
   __name: "Element",
   props: {
     element: {},
@@ -5919,10 +5964,10 @@ const oe = /* @__PURE__ */ y({
       style: L(o(g.element)),
       class: l(g.element.cssClasses.questionWrapper)
     }, [
-      g.row.isNeedRender ? (i(), c(d, $({
+      g.row.isNeedRender ? (i(), C(d, $({
         key: 0,
         is: t.value
-      }, r.value), null, 16, ["is"])) : g.element.skeletonComponentName ? (i(), c(d, {
+      }, r.value), null, 16, ["is"])) : g.element.skeletonComponentName ? (i(), C(d, {
         key: 1,
         is: g.element.skeletonComponentName,
         element: g.element,
@@ -5930,7 +5975,7 @@ const oe = /* @__PURE__ */ y({
       }, null, 8, ["is", "element", "css"])) : p("", !0)
     ], 6));
   }
-}), yi = /* @__PURE__ */ y({
+}), wi = /* @__PURE__ */ y({
   __name: "TemplateRenderer",
   props: {
     componentName: {},
@@ -5938,12 +5983,12 @@ const oe = /* @__PURE__ */ y({
   },
   setup(u) {
     const e = Ee(), n = f(() => !!e.default);
-    return (s, t) => n.value && !s.componentName ? X(s.$slots, "default", { key: 0 }) : (i(), c(d, $({
+    return (s, t) => n.value && !s.componentName ? X(s.$slots, "default", { key: 0 }) : (i(), C(d, $({
       key: 1,
       is: s.componentName
     }, s.componentData), null, 16, ["is"]));
   }
-}), hi = /* @__PURE__ */ y({
+}), bi = /* @__PURE__ */ y({
   __name: "FileCleanButton",
   props: {
     question: {},
@@ -5956,8 +6001,8 @@ const oe = /* @__PURE__ */ y({
       onClick: n[0] || (n[0] = //@ts-ignore
       (...s) => e.question.doClean && e.question.doClean(...s))
     }, [
-      v("span", null, M(e.question.clearButtonCaption), 1),
-      e.question.cssClasses.removeButtonIconId ? (i(), c(d, {
+      v("span", null, H(e.question.clearButtonCaption), 1),
+      e.question.cssClasses.removeButtonIconId ? (i(), C(d, {
         key: 0,
         is: "sv-svg-icon",
         iconName: e.question.cssClasses.removeButtonIconId,
@@ -5966,7 +6011,7 @@ const oe = /* @__PURE__ */ y({
       }, null, 8, ["iconName", "title"])) : p("", !0)
     ], 2));
   }
-}), qi = ["id"], wi = /* @__PURE__ */ y({
+}), Li = ["id"], ki = /* @__PURE__ */ y({
   __name: "FileVideo",
   props: {
     question: {}
@@ -5975,11 +6020,11 @@ const oe = /* @__PURE__ */ y({
     return (e, n) => (i(), a("div", {
       class: l(e.question.cssClasses.videoContainer)
     }, [
-      C(d, {
+      c(d, {
         is: "sv-action",
         item: e.question.changeCameraAction
       }, null, 8, ["item"]),
-      C(d, {
+      c(d, {
         is: "sv-action",
         item: e.question.closeCameraAction
       }, null, 8, ["item"]),
@@ -5988,14 +6033,14 @@ const oe = /* @__PURE__ */ y({
         playsinline: "",
         id: e.question.videoId,
         class: l(e.question.cssClasses.video)
-      }, null, 10, qi),
-      C(d, {
+      }, null, 10, Li),
+      c(d, {
         is: "sv-action",
         item: e.question.takePictureAction
       }, null, 8, ["item"])
     ], 2));
   }
-}), bi = ["for", "aria-label"], Li = /* @__PURE__ */ y({
+}), fi = ["for", "aria-label"], Mi = /* @__PURE__ */ y({
   __name: "FileChooseButton",
   props: {
     data: {},
@@ -6015,19 +6060,19 @@ const oe = /* @__PURE__ */ y({
       "aria-label": n.value.chooseButtonText,
       onClick: t[0] || (t[0] = (o) => n.value.chooseFile(o))
     }, [
-      n.value.cssClasses.chooseFileIconId ? (i(), c(d, {
+      n.value.cssClasses.chooseFileIconId ? (i(), C(d, {
         key: 0,
         is: "sv-svg-icon",
         title: n.value.chooseButtonText,
         iconName: n.value.cssClasses.chooseFileIconId,
         size: "auto"
       }, null, 8, ["title", "iconName"])) : p("", !0),
-      v("span", null, M(n.value.chooseButtonText), 1)
-    ], 10, bi)), [
+      v("span", null, H(n.value.chooseButtonText), 1)
+    ], 10, fi)), [
       [w(O)]
     ]);
   }
-}), ki = /* @__PURE__ */ y({
+}), Hi = /* @__PURE__ */ y({
   __name: "FilePreview",
   props: {
     question: {}
@@ -6037,7 +6082,7 @@ const oe = /* @__PURE__ */ y({
       key: 0,
       class: l(e.question.cssClasses.fileList || void 0)
     }, [
-      (i(!0), a(H, null, V(e.question.renderedPages, (s) => (i(), c(d, {
+      (i(!0), a(M, null, V(e.question.renderedPages, (s) => (i(), C(d, {
         is: "sv-file-page",
         key: s.id,
         page: s,
@@ -6045,7 +6090,7 @@ const oe = /* @__PURE__ */ y({
       }, null, 8, ["page", "question"]))), 128))
     ], 2)) : p("", !0);
   }
-}), fi = /* @__PURE__ */ y({
+}), Ii = /* @__PURE__ */ y({
   __name: "ButtonGroup",
   props: {
     question: {}
@@ -6058,7 +6103,7 @@ const oe = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      (i(!0), a(H, null, V(s.question.visibleChoices, (o, r) => (i(), c(d, {
+      (i(!0), a(M, null, V(s.question.visibleChoices, (o, r) => (i(), C(d, {
         is: "sv-button-group-item",
         question: s.question,
         key: r,
@@ -6067,7 +6112,7 @@ const oe = /* @__PURE__ */ y({
       }, null, 8, ["question", "item", "index"]))), 128))
     ], 2));
   }
-}), Hi = ["title"], Mi = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Ii = ["title"], Vi = /* @__PURE__ */ y({
+}), Vi = ["title"], Si = ["name", "id", "aria-required", "aria-label", "aria-invalid", "aria-errormessage", "disabled", "value"], Ri = ["title"], Ti = /* @__PURE__ */ y({
   __name: "ButtonGroupItem",
   props: {
     item: {},
@@ -6100,13 +6145,13 @@ const oe = /* @__PURE__ */ y({
         class: l(n.value.css.control),
         "onUpdate:modelValue": o[0] || (o[0] = (r) => s.value = r),
         value: n.value.value
-      }, null, 10, Mi), [
+      }, null, 10, Si), [
         [qe, s.value]
       ]),
       v("div", {
         class: l(n.value.css.decorator)
       }, [
-        n.value.iconName ? (i(), c(d, {
+        n.value.iconName ? (i(), C(d, {
           key: 0,
           is: "sv-svg-icon",
           iconName: n.value.iconName,
@@ -6118,13 +6163,13 @@ const oe = /* @__PURE__ */ y({
           class: l(n.value.css.caption),
           title: n.value.caption.renderedHtml
         }, [
-          C(d, {
+          c(d, {
             is: "survey-string",
             locString: n.value.caption
           }, null, 8, ["locString"])
-        ], 10, Ii)) : p("", !0)
+        ], 10, Ri)) : p("", !0)
       ], 2)
-    ], 10, Hi));
+    ], 10, Vi));
   }
 });
 U.Instance.registerRenderer(
@@ -6132,7 +6177,7 @@ U.Instance.registerRenderer(
   "dropdown",
   "sv-buttongroup-dropdown"
 );
-const Si = /* @__PURE__ */ y({
+const Bi = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "ButtonGroupDropdown",
   props: {
@@ -6145,13 +6190,13 @@ const Si = /* @__PURE__ */ y({
       ref_key: "root",
       ref: n
     }, [
-      C(d, {
+      c(d, {
         is: "sv-dropdown",
         question: s.question
       }, null, 8, ["question"])
     ], 2));
   }
-}), Ri = ["src", "width", "height", "alt"], Ti = /* @__PURE__ */ y({
+}), Zi = ["src", "width", "height", "alt"], $i = /* @__PURE__ */ y({
   inheritAttrs: !1,
   __name: "Logo",
   props: {
@@ -6173,10 +6218,10 @@ const Si = /* @__PURE__ */ y({
           width: n.value.renderedStyleLogoWidth,
           height: n.value.renderedStyleLogoHeight
         })
-      }, null, 14, Ri)
+      }, null, 14, Zi)
     ], 2));
   }
-}), Bi = /* @__PURE__ */ y({
+}), Di = /* @__PURE__ */ y({
   __name: "SvgBundle",
   setup(u) {
     const e = k(), n = () => {
@@ -6194,7 +6239,7 @@ const Si = /* @__PURE__ */ y({
       [A, !1]
     ]);
   }
-}), Zi = ["id"], $i = /* @__PURE__ */ y({
+}), Ai = ["id"], Pi = /* @__PURE__ */ y({
   __name: "FilePage",
   props: {
     page: {},
@@ -6206,15 +6251,15 @@ const Si = /* @__PURE__ */ y({
       class: l(n.page.css),
       id: n.page.id
     }, [
-      (i(!0), a(H, null, V(n.page.items, (t) => (i(), c(d, {
+      (i(!0), a(M, null, V(n.page.items, (t) => (i(), C(d, {
         is: "sv-file-item",
         key: t,
         item: t,
         question: n.question
       }, null, 8, ["item", "question"]))), 128))
-    ], 10, Zi));
+    ], 10, Ai));
   }
-}), Di = ["href", "title", "download"], Ai = ["src"], Pi = ["href", "title", "download"], Ni = /* @__PURE__ */ y({
+}), Ni = ["href", "title", "download"], Ei = ["src"], Wi = ["href", "title", "download"], Fi = /* @__PURE__ */ y({
   __name: "FileItem",
   props: {
     item: {},
@@ -6235,7 +6280,7 @@ const Si = /* @__PURE__ */ y({
           title: e.item.name,
           download: e.item.name,
           style: L({ width: e.question.imageWidth })
-        }, M(e.item.name), 13, Di)
+        }, H(e.item.name), 13, Ni)
       ], 2)) : p("", !0),
       v("div", {
         class: l(e.question.getImageWrapperCss(e.item))
@@ -6248,8 +6293,8 @@ const Si = /* @__PURE__ */ y({
             width: e.question.imageWidth
           }),
           alt: "File preview"
-        }, null, 12, Ai)) : p("", !0),
-        e.question.defaultImage(e.item) ? (i(), c(d, {
+        }, null, 12, Ei)) : p("", !0),
+        e.question.defaultImage(e.item) ? (i(), C(d, {
           key: 1,
           is: "sv-svg-icon",
           iconName: e.question.cssClasses.defaultImageIconId,
@@ -6263,8 +6308,8 @@ const Si = /* @__PURE__ */ y({
         }, [
           v("span", {
             class: l(e.question.cssClasses.removeFile)
-          }, M(e.question.removeFileCaption), 3),
-          e.question.cssClasses.removeFileSvgIconId ? (i(), c(d, {
+          }, H(e.question.removeFileCaption), 3),
+          e.question.cssClasses.removeFileSvgIconId ? (i(), C(d, {
             key: 0,
             is: "sv-svg-icon",
             title: e.question.removeFileCaption,
@@ -6284,13 +6329,13 @@ const Si = /* @__PURE__ */ y({
           title: e.item.name,
           download: e.item.name,
           style: L({ width: e.question.imageWidth })
-        }, M(e.item.name), 13, Pi)
+        }, H(e.item.name), 13, Wi)
       ], 2)) : p("", !0)
     ], 2)), [
       [A, e.item]
     ]);
   }
-}), Ei = ["onClick"], Wi = ["data-responsive-title"], Fi = /* @__PURE__ */ y({
+}), Oi = ["onClick"], zi = ["data-responsive-title"], Ui = /* @__PURE__ */ y({
   __name: "MatrixRow",
   props: {
     question: {},
@@ -6312,12 +6357,12 @@ const Si = /* @__PURE__ */ y({
           width: s.question.rowTitleWidth
         })
       }, [
-        C(d, {
+        c(d, {
           is: s.question.getRowHeaderWrapperComponentName(s.row),
           componentData: s.question.getRowHeaderWrapperComponentData(s.row)
         }, {
           default: D(() => [
-            C(d, {
+            c(d, {
               is: "survey-string",
               locString: s.row.locText
             }, null, 8, ["locString"])
@@ -6327,60 +6372,60 @@ const Si = /* @__PURE__ */ y({
       ], 6), [
         [A, s.question.hasRows]
       ]),
-      s.question.hasCellText ? (i(!0), a(H, { key: 0 }, V(s.question.visibleColumns, (o, r) => (i(), a("td", {
+      s.question.hasCellText ? (i(!0), a(M, { key: 0 }, V(s.question.visibleColumns, (o, r) => (i(), a("td", {
         key: r,
         class: l(s.question.getItemClass(s.row, o)),
         onClick: (m) => n(s.row, o)
       }, [
-        C(d, {
+        c(d, {
           is: "survey-string",
           locString: s.question.getCellDisplayLocText(s.row.name, o)
         }, null, 8, ["locString"])
-      ], 10, Ei))), 128)) : p("", !0),
-      s.question.hasCellText ? p("", !0) : (i(!0), a(H, { key: 1 }, V(s.question.visibleColumns, (o, r) => (i(), a("td", {
+      ], 10, Oi))), 128)) : p("", !0),
+      s.question.hasCellText ? p("", !0) : (i(!0), a(M, { key: 1 }, V(s.question.visibleColumns, (o, r) => (i(), a("td", {
         key: r,
         "data-responsive-title": o.locText.renderedHtml,
         class: l(s.question.cssClasses.cell)
       }, [
-        C(d, {
+        c(d, {
           is: s.question.cellComponent,
           question: s.question,
           row: s.row,
           column: o,
           columnIndex: r
         }, null, 8, ["is", "question", "row", "column", "columnIndex"])
-      ], 10, Wi))), 128))
+      ], 10, zi))), 128))
     ], 2));
   }
 });
 _e.platform = "vue3";
-function Oi(u, e, n) {
+function Qi(u, e, n) {
   u(e, n);
 }
-function Me(u) {
-  const e = Oi.bind(
+function He(u) {
+  const e = Qi.bind(
     void 0,
     u
   );
-  e("sv-svg-bundle", Bi), e("popup-survey", He), e("survey-header", ts), e("sv-logo-image", Ti), e("survey-page", ns), e("survey-row", os), e("survey-question", us), e("survey-panel", vs), e("survey-element-header", cs), e("survey-string", gs), e("sv-string-viewer", hs), e("sv-string-editor", ws), e("sv-skeleton", Ls), e("sv-scroll", Ms), e("survey-text", Ss), e("survey-text-input", Bs), e("survey-checkbox", Ps), e("survey-checkbox-item", Ws), e("survey-radiogroup", Fs), e("survey-radiogroup-item", Us), e("survey-signaturepad", Gs), e("survey-html", Xs), e("survey-image", e1), e("survey-expression", n1), e("survey-file", r1), e("sv-file-choose-btn", Li), e("sv-file-clean-btn", hi), e("sv-file-preview", ki), e("sv-file-page", $i), e("sv-file-item", Ni), e("sv-file-video", wi), e("survey-imagepicker", a1), e("survey-imagepicker-item", v1), e("survey-comment", C1), e("survey-dropdown", c1), e("sv-dropdown-select", q1), e("sv-dropdown-option-item", b1), e("sv-dropdown", M1), e("survey-tagbox", I1), e("sv-tagbox", R1), e("sv-tagbox-item", D1), e("sv-tagbox-filter", Z1), e("survey-ranking", A1), e("survey-ranking-item", O1), e("sv-ranking-item", z1), e("survey-rating", K1), e("sv-rating-item", J1), e("sv-rating-item-smiley", _1), e("sv-rating-item-star", sn), e("sv-rating-dropdown", ln), e("sv-rating-dropdown-item", rn), e("survey-boolean", un), e("sv-boolean-radio", dn), e("sv-boolean-radio-item", vn), e("sv-boolean-checkbox", qn), e("survey-multipletext", wn), e("sv-multipletext-row", bn), e("survey-multipletext-item", fn), e("sv-breadcrumbs", Hn), e("sv-single-input-summary", Rn), e("survey-slider", Zn), e("sv-slider-label-item", $n), e("survey-matrix", En), e("sv-matrix-row", Fi), e("survey-matrix-row", Fn), e("survey-matrix-cell", Un), e("survey-matrixdropdown", Qn), e("survey-matrixtable", Jn), e("survey-matrixheaderrequired", Yn), e("survey-matrixdropdown-cell", xn), e("survey-matrixdynamic", et), e("survey-placeholder-matrixdynamic", st), e("sv-matrix-remove-button", tt), e("sv-matrix-drag-drop-icon", it), e("sv-matrix-detail-button", lt), e("survey-paneldynamic", ut), e("survey-paneldynamicprogress", mt), e("survey-paneldynamicprogress-v2", vt), e("survey-placeholder-paneldynamic", Ct), e("sv-paneldynamic-add-btn", gt), e("sv-paneldynamic-next-btn", ht), e("sv-paneldynamic-prev-btn", wt), e("sv-paneldynamic-remove-btn", Lt), e("sv-paneldynamic-progress-text", kt), e("sv-components-container", ko), e("sv-progress-buttons", To), e("sv-navigation-toc", Bo), e("sv-progress-pages", G), e("sv-progress-questions", G), e("sv-progress-correctquestions", G), e("sv-progress-requiredquestions", G), e("survey-errors", Ht), e("survey-question-comment", It), e("survey-element-title", Vt), e("survey-element-title-content", Zt), e("sv-title-actions", At), e("sv-brand-info", zt), e("sv-question-error", jt), e("sv-svg-icon", Kt), e("sv-action-bar", Gt), e("sv-action", Yt), e("sv-action-bar-item", eo), e("sv-action-bar-item-dropdown", to), e("sv-action-bar-separator", oo), e("sv-list", ao), e("sv-list-item-content", vo), e("sv-list-item-group", Co), e("sv-list-item", po), e("sv-popup", co), e("sv-popup-container", bo), e("popup-pointer", Lo), e("sv-notifier", zo), e("survey-other-choice", Qo), e("sv-nav-btn", jo), e("survey-customwidget", Jo), e("survey-popup-modal", Xo), e("survey-composite", ei), e("survey-custom", si), e("sv-timerpanel", oi), e("sv-loading-indicator", ri), e("sv-header", ai), e("sv-header-cell", mi), e("sv-header-mobile", ci), e("sv-template-renderer", yi), e("sv-character-counter", xo), e("sv-text-area", _o), e("survey-element", gi), e("survey-buttongroup", fi), e("sv-button-group-item", Vi), e("sv-buttongroup-dropdown", Si), e("survey", oe);
+  e("sv-svg-bundle", Di), e("popup-survey", Me), e("survey-header", ts), e("sv-logo-image", $i), e("sv-page", ns), e("survey-row", os), e("survey-question", us), e("survey-panel", vs), e("survey-element-header", cs), e("survey-string", gs), e("sv-string-viewer", hs), e("sv-string-editor", ws), e("sv-skeleton", Ls), e("sv-scroll", Hs), e("survey-text", Ss), e("survey-text-input", Bs), e("survey-checkbox", Ps), e("survey-checkbox-item", Ws), e("survey-radiogroup", Fs), e("survey-radiogroup-item", Us), e("survey-signaturepad", Gs), e("survey-html", Xs), e("survey-image", e1), e("survey-expression", n1), e("survey-file", r1), e("sv-file-choose-btn", Mi), e("sv-file-clean-btn", bi), e("sv-file-preview", Hi), e("sv-file-page", Pi), e("sv-file-item", Fi), e("sv-file-video", ki), e("survey-imagepicker", a1), e("survey-imagepicker-item", v1), e("survey-comment", C1), e("survey-dropdown", c1), e("sv-dropdown-select", q1), e("sv-dropdown-option-item", b1), e("sv-dropdown", H1), e("survey-tagbox", I1), e("sv-tagbox", R1), e("sv-tagbox-item", D1), e("sv-tagbox-filter", Z1), e("survey-ranking", A1), e("survey-ranking-item", O1), e("sv-ranking-item", z1), e("survey-rating", K1), e("sv-rating-item", J1), e("sv-rating-item-smiley", _1), e("sv-rating-item-star", sn), e("sv-rating-dropdown", ln), e("sv-rating-dropdown-item", rn), e("survey-boolean", un), e("sv-boolean-radio", dn), e("sv-boolean-radio-item", vn), e("sv-boolean-checkbox", qn), e("survey-multipletext", wn), e("sv-multipletext-row", bn), e("survey-multipletext-item", fn), e("sv-breadcrumbs", Mn), e("sv-single-input-summary", Rn), e("survey-slider", Zn), e("sv-slider-label-item", $n), e("survey-matrix", En), e("sv-matrix-row", Ui), e("survey-matrix-row", Fn), e("survey-matrix-cell", Un), e("survey-matrixdropdown", Qn), e("survey-matrixtable", Gn), e("survey-matrixheaderrequired", Xn), e("survey-matrixdropdown-cell", _n), e("survey-matrixdynamic", tt), e("survey-placeholder-matrixdynamic", ot), e("sv-matrix-remove-button", rt), e("sv-matrix-drag-drop-icon", at), e("sv-matrix-detail-button", dt), e("survey-paneldynamic", pt), e("survey-paneldynamicprogress", Ct), e("survey-paneldynamicprogress-v2", gt), e("survey-placeholder-paneldynamic", yt), e("sv-paneldynamic-add-btn", qt), e("sv-paneldynamic-next-btn", bt), e("sv-paneldynamic-prev-btn", kt), e("sv-paneldynamic-remove-btn", Mt), e("sv-paneldynamic-progress-text", Ht), e("sv-components-container", Ho), e("sv-progress-buttons", $o), e("sv-navigation-toc", Do), e("sv-progress-pages", G), e("sv-progress-questions", G), e("sv-progress-correctquestions", G), e("sv-progress-requiredquestions", G), e("survey-errors", Vt), e("survey-question-comment", Rt), e("survey-element-title", Tt), e("survey-element-title-content", At), e("sv-title-actions", Et), e("sv-brand-info", Kt), e("sv-question-error", Xt), e("sv-svg-icon", Jt), e("sv-action-bar", Yt), e("sv-action", eo), e("sv-action-bar-item", to), e("sv-action-bar-item-dropdown", ro), e("sv-action-bar-separator", lo), e("sv-list", po), e("sv-list-item-content", go), e("sv-list-item-group", yo), e("sv-list-item", co), e("sv-popup", ho), e("sv-popup-container", fo), e("popup-pointer", Mo), e("sv-notifier", Ko), e("survey-other-choice", Go), e("sv-nav-btn", Xo), e("survey-customwidget", _o), e("survey-popup-modal", xo), e("survey-composite", ti), e("survey-custom", oi), e("sv-timerpanel", li), e("sv-loading-indicator", ui), e("sv-header", mi), e("sv-header-cell", Ci), e("sv-header-mobile", hi), e("sv-template-renderer", wi), e("sv-character-counter", ni), e("sv-text-area", si), e("survey-element", qi), e("survey-buttongroup", Ii), e("sv-button-group-item", Ti), e("sv-buttongroup-dropdown", Bi), e("survey", oe);
 }
-Me(
+He(
   (u, e) => W.Instance.registerComponent(u, e)
 );
-const Ki = {
+const Ji = {
   install(u) {
-    u.component("SurveyComponent", oe), u.component("PopupSurveyComponent", He), u.directive("key2click", O), Me((e, n) => {
+    u.component("SurveyComponent", oe), u.component("PopupSurveyComponent", Me), u.directive("key2click", O), He((e, n) => {
       u.component(e, n), W.Instance.registerComponent(e, e);
     });
   }
 };
 export {
   W as ComponentFactory,
-  He as PopupSurveyComponent,
+  Me as PopupSurveyComponent,
   oe as SurveyComponent,
   d as SvComponent,
   O as key2ClickDirective,
-  Ki as surveyPlugin,
+  Ji as surveyPlugin,
   I as useBase,
   F as useLocString,
   R as useQuestion