survey-vue3-ui 1.9.111 → 1.9.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "survey-vue3-ui",
-  "version": "1.9.111",
+  "version": "1.9.113",
   "description": "survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.",
   "keywords": [
     "Survey",

package/survey-vue3-ui.es.js

@@ -1,7 +1,7 @@
-import { shallowReactive as ce, watch as G, onBeforeUnmount as K, onMounted as E, ref as T, shallowRef as W, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as X, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as r, createVNode as C, createCommentVNode as m, Fragment as w, renderList as B, createBlock as y, createElementVNode as c, normalizeStyle as S, onUnmounted as V, withDirectives as P, resolveDynamicComponent as N, vShow as A, toDisplayString as I, vModelCheckbox as U, vModelRadio as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
-import { Base as fe, RendererFactory as J, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Re, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as Ee } from "survey-core";
+import { shallowReactive as ce, watch as G, onBeforeUnmount as K, onMounted as _, ref as T, shallowRef as W, triggerRef as oe, unref as k, isRef as pe, defineComponent as g, computed as R, onUpdated as X, resolveComponent as q, openBlock as t, createElementBlock as u, normalizeClass as r, createVNode as C, createCommentVNode as m, Fragment as w, renderList as B, createBlock as y, createElementVNode as c, normalizeStyle as S, onUnmounted as V, withDirectives as P, resolveDynamicComponent as N, vShow as A, toDisplayString as I, vModelCheckbox as U, vModelRadio as Y, vModelSelect as ve, vModelText as qe, getCurrentInstance as x, withCtx as ye, createStaticVNode as ge, resolveDirective as ee, normalizeProps as he, guardReactiveProps as Ce, toRaw as be, Teleport as ke } from "vue";
+import { Base as fe, RendererFactory as J, DropdownListModel as Ie, Helpers as we, DropdownMultiSelectListModel as Se, doKey2ClickUp as de, createSvg as Re, ActionDropdownViewModel as Te, getActionDropdownButtonTarget as $e, createPopupViewModel as te, SurveyProgressModel as ie, SurveyProgressButtonsModel as Be, TOCModel as Le, SvgRegistry as De, PopupSurveyModel as Pe, settings as F, createDialogOptions as Me, createPopupModalViewModel as Ne, SurveyModel as He, doKey2ClickDown as Ae, doKey2ClickBlur as _e } from "survey-core";
 fe.createPropertiesHash = () => ce({});
-function _e(l) {
+function Ee(l) {
   return !l || l.__vueImplemented ? !1 : (l.createArrayCoreHandler = (n, o) => {
     const e = [], s = W(e);
     return e.onArrayChanged = () => {
@@ -28,7 +28,7 @@ function L(l, n, o) {
   const s = G(
     l,
     (i, a) => {
-      n && n(i), a && (le(a, e), o && o(a)), e = _e(i);
+      n && n(i), a && (le(a, e), o && o(a)), e = Ee(i);
     },
     {
       immediate: !0
@@ -40,7 +40,7 @@ function L(l, n, o) {
   });
 }
 function H(l, n, o, e) {
-  L(() => l.question, o, e), E(() => {
+  L(() => l.question, o, e), _(() => {
     l.question && l.question.afterRenderQuestionElement(n.value);
   }), K(() => {
     l.question.beforeDestroyQuestionElement(n.value);
@@ -77,7 +77,7 @@ const Ve = /* @__PURE__ */ g({
     const n = l, o = T(null);
     L(() => n.page);
     const e = R(() => n.page._showDescription), s = R(() => n.page.rows);
-    return E(() => {
+    return _(() => {
       n.survey && n.survey.afterRenderPage(o.value);
     }), X(() => {
       n.survey.afterRenderPage(o.value);
@@ -118,7 +118,7 @@ const Ve = /* @__PURE__ */ g({
   },
   setup(l) {
     const n = l, o = T(), e = z(() => n.survey.locLogo);
-    return E(() => {
+    return _(() => {
       var s = o.value;
       s && n.survey && n.survey.afterRenderHeader(s);
     }), (s, i) => {
@@ -198,7 +198,7 @@ const Ve = /* @__PURE__ */ g({
     const n = l, o = R(
       () => n.row.visibleElements
     ), e = T();
-    return L(() => n.row), E(() => {
+    return L(() => n.row), _(() => {
       if (n.row && !n.row.isNeedRender) {
         const s = e.value;
         setTimeout(() => {
@@ -245,7 +245,7 @@ const Ve = /* @__PURE__ */ g({
   },
   setup(l) {
     const n = l, o = T(null), e = R(() => !n.element.isPanel && n.element.showErrorOnTop), s = R(() => !n.element.isPanel && n.element.showErrorOnBottom), i = (d) => d.customWidget ? "survey-customwidget" : d.getType() === "panel" || d.isDefaultRendering() ? "survey-" + d.getTemplate() : d.getComponentName(), a = (d) => d.cssContent;
-    return L(() => n.element), E(() => {
+    return L(() => n.element), _(() => {
       n.element.isPanel || n.element.afterRender(o.value);
     }), (d, v) => {
       const p = q("survey-errors"), b = q("survey-element-header"), f = q("survey-string"), $ = q("survey-question-comment");
@@ -341,7 +341,7 @@ const Ve = /* @__PURE__ */ g({
   },
   setup(l) {
     const n = l, o = T(!1), e = T(null), s = R(() => n.question.rows), i = R(() => n.question.survey), a = R(() => o.value);
-    return L(() => n.question), E(() => {
+    return L(() => n.question), _(() => {
       n.question.survey && n.question.survey.afterRenderPanel(n.question, e.value), o.value = n.question.isCollapsed;
       const d = n.question;
       d.stateChangedCallback = () => {
@@ -772,7 +772,7 @@ const Ve = /* @__PURE__ */ g({
         "aria-invalid": e.question.a11y_input_ariaInvalid,
         "aria-describedby": e.question.a11y_input_ariaDescribedBy
       }, [
-        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.visibleChoices, (d, v) => (t(), y(i, {
+        !e.question.hasColumns && !e.question.blockedRow ? (t(!0), u(w, { key: 0 }, B(e.question.bodyItems, (d, v) => (t(), y(i, {
           key: d.value,
           class: r(e.question.getItemClass(d)),
           question: e.question,
@@ -1043,7 +1043,7 @@ const Ve = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), Es = /* @__PURE__ */ g({
+}), _s = /* @__PURE__ */ g({
   __name: "Expression",
   props: {
     question: {}
@@ -1051,12 +1051,12 @@ const Ve = /* @__PURE__ */ g({
   setup(l) {
     const n = l, o = T(null);
     return H(n, o), (e, s) => (t(), u("div", {
-      class: r(e.question.cssClasses.text),
+      class: r(e.question.cssClasses.root),
       ref_key: "root",
       ref: o
     }, I(e.question.formatedValue), 3));
   }
-}), _s = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Vs = ["id", "multiple", "placeholder"], Os = /* @__PURE__ */ g({
+}), Es = ["id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "multiple", "title", "accept", "capture"], Vs = ["id", "multiple", "placeholder"], Os = /* @__PURE__ */ g({
   __name: "File",
   props: {
     question: {}
@@ -1083,7 +1083,7 @@ const Ve = /* @__PURE__ */ g({
           title: e.question.inputTitle,
           accept: e.question.acceptedTypes,
           capture: e.question.renderCapture
-        }, null, 42, _s)) : m("", !0),
+        }, null, 42, Es)) : m("", !0),
         e.question.isReadOnly ? (t(), u("input", {
           key: 1,
           type: "file",
@@ -1518,7 +1518,7 @@ const sn = /* @__PURE__ */ g({
       disabled: !e.item.isEnabled
     }, I(k(o)), 9, nn));
   }
-}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
+}), tn = ["id", "disabled", "tabindex", "role", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "aria-expanded", "aria-controls", "aria-activedescendant", "required"], ln = { style: { visibility: "hidden" } }, rn = ["disabled", "inputmode", "role", "id", "tabindex", "readonly", "aria-expanded", "aria-controls", "aria-activedescendant", "placeholder"], an = ["id"], un = /* @__PURE__ */ g({
   __name: "Dropdown",
   props: {
     question: {}
@@ -1555,8 +1555,8 @@ const sn = /* @__PURE__ */ g({
     }, $ = R(
       () => n.question.showSelectedItemLocText
     ), M = R(() => n.question.selectedItemLocText);
-    return L(() => e.value), X(v), E(v), (h, D) => {
-      const _ = q("survey-string"), O = q("sv-svg-icon"), Q = q("sv-popup");
+    return L(() => e.value), X(v), _(v), (h, D) => {
+      const E = q("survey-string"), O = q("sv-svg-icon"), Q = q("sv-popup");
       return t(), u("div", {
         class: r(h.question.cssClasses.selectWrapper),
         onClick: s
@@ -1588,7 +1588,7 @@ const sn = /* @__PURE__ */ g({
           c("div", {
             class: r(h.question.cssClasses.controlValue)
           }, [
-            $.value ? (t(), y(_, {
+            $.value ? (t(), y(E, {
               key: 0,
               locString: M.value
             }, null, 8, ["locString"])) : m("", !0),
@@ -1616,7 +1616,6 @@ const sn = /* @__PURE__ */ g({
               id: h.question.getInputId(),
               tabindex: e.value.inputReadOnly ? void 0 : -1,
               readonly: e.value.searchEnabled ? void 0 : !0,
-              "aria-label": h.question.placeholder,
               "aria-expanded": h.question.ariaExpanded === null ? void 0 : h.question.ariaExpanded === "true",
               "aria-controls": e.value.listElementId,
               "aria-activedescendant": e.value.ariaActivedescendant,
@@ -1638,7 +1637,7 @@ const sn = /* @__PURE__ */ g({
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [A, !h.question.isEmpty()]
+            [A, h.question.showClearButton]
           ]) : m("", !0)
         ], 42, tn)),
         h.question.isReadOnly ? (t(), u("div", {
@@ -1647,7 +1646,7 @@ const sn = /* @__PURE__ */ g({
           id: h.question.inputId,
           class: r(h.question.getControlClass())
         }, [
-          h.question.selectedItemLocText ? (t(), y(_, {
+          h.question.selectedItemLocText ? (t(), y(E, {
             key: 0,
             locString: h.question.selectedItemLocText
           }, null, 8, ["locString"])) : m("", !0),
@@ -1744,10 +1743,10 @@ const sn = /* @__PURE__ */ g({
           c("div", {
             class: r(p.question.cssClasses.controlValue)
           }, [
-            (t(!0), u(w, null, B(v.value, (D, _) => (t(), y(f, {
+            (t(!0), u(w, null, B(v.value, (D, E) => (t(), y(f, {
               item: D,
               question: p.question,
-              key: "item" + _
+              key: "item" + E
             }, null, 8, ["item", "question"]))), 128)),
             C($, {
               model: o.value,
@@ -1766,7 +1765,7 @@ const sn = /* @__PURE__ */ g({
               size: "auto"
             }, null, 8, ["class", "iconName", "title"])
           ], 2)), [
-            [A, !p.question.isEmpty()]
+            [A, p.question.showClearButton]
           ]) : m("", !0)
         ], 42, mn)),
         p.question.isReadOnly ? (t(), u("div", {
@@ -1794,7 +1793,7 @@ const sn = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-label", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
+}), vn = { style: { visibility: "hidden" } }, qn = ["placeholder", "disabled", "inputmode", "role", "aria-expanded", "aria-controls", "aria-activedescendant", "id", "readonly", "size"], yn = /* @__PURE__ */ g({
   __name: "TagboxFilter",
   props: {
     question: {},
@@ -1845,7 +1844,6 @@ const sn = /* @__PURE__ */ g({
             disabled: a.question.isInputReadOnly,
             inputmode: a.model.inputMode,
             role: a.model.filterStringEnabled ? a.question.ariaRole : void 0,
-            "aria-label": a.question.placeholder,
             "aria-expanded": a.question.ariaExpanded === null ? void 0 : a.question.ariaExpanded === "true",
             "aria-controls": a.model.listElementId,
             "aria-activedescendant": a.model.ariaActivedescendant,
@@ -2078,7 +2076,7 @@ const sn = /* @__PURE__ */ g({
               locString: s.question.locMinRateDescription
             }, null, 8, ["locString"])
           ], 2)) : m("", !0),
-          (t(!0), u(w, null, B(s.question.renderedRateItems, (d, v) => (t(), y(N(s.question.itemComponentName), {
+          (t(!0), u(w, null, B(s.question.renderedRateItems, (d, v) => (t(), y(N(s.question.itemComponent), {
             key: e(v),
             item: d,
             index: v,
@@ -2227,7 +2225,7 @@ J.Instance.registerRenderer(
   "dropdown",
   "sv-rating-dropdown"
 );
-const En = /* @__PURE__ */ g({
+const _n = /* @__PURE__ */ g({
   __name: "RatingDropdown",
   props: {
     question: {}
@@ -2245,7 +2243,7 @@ const En = /* @__PURE__ */ g({
       ], 2);
     };
   }
-}), _n = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Vn = /* @__PURE__ */ g({
+}), En = ["name", "value", "id", ".indeterminate", "disabled", "aria-required", "aria-label", "aria-invalid", "aria-describedby"], Vn = /* @__PURE__ */ g({
   __name: "BooleanSwitch",
   props: {
     question: {}
@@ -2281,7 +2279,7 @@ const En = /* @__PURE__ */ g({
             "aria-label": i.question.ariaLabel,
             "aria-invalid": i.question.ariaInvalid,
             "aria-describedby": i.question.ariaDescribedBy
-          }, null, 10, _n), [
+          }, null, 10, En), [
             [U, i.question.booleanValue]
           ]),
           c("div", {
@@ -2853,7 +2851,7 @@ const Zn = /* @__PURE__ */ g({
   },
   setup(l) {
     const n = l, o = T(!1), e = T(), s = () => n.cell.headers, i = () => !!n.cell.width || !!n.cell.minWidth ? { width: n.cell.width, minWidth: n.cell.minWidth } : null, a = () => n.cell.index || "", d = () => o.value = n.cell.question.isVisible, v = (p) => se(p);
-    return E(() => {
+    return _(() => {
       if (!n.cell.hasQuestion || !n.question || !n.question.survey)
         return;
       d(), n.cell.question.registerPropertyChangedHandlers(["isVisible"], () => {
@@ -2868,7 +2866,7 @@ const Zn = /* @__PURE__ */ g({
       };
       n.question.survey.matrixAfterCellRender(n.question, f), b && b.afterRenderCore(p);
     }), (p, b) => {
-      const f = q("survey-errors"), $ = q("sv-matrix-drag-drop-icon"), M = q("sv-action-bar"), h = q("survey-radiogroup-item"), D = q("survey-checkbox-item"), _ = q("survey-other-choice"), O = q("survey-string");
+      const f = q("survey-errors"), $ = q("sv-matrix-drag-drop-icon"), M = q("sv-action-bar"), h = q("survey-radiogroup-item"), D = q("survey-checkbox-item"), E = q("survey-other-choice"), O = q("survey-string");
       return t(), u("td", {
         class: r(p.cell.className),
         "data-responsive-title": s(),
@@ -2929,7 +2927,7 @@ const Zn = /* @__PURE__ */ g({
             index: a(),
             hideLabel: !0
           }, null, 8, ["class", "question", "item", "index"])) : m("", !0),
-          p.cell.isOtherChoice ? (t(), y(_, {
+          p.cell.isOtherChoice ? (t(), y(E, {
             key: 4,
             question: p.cell.question
           }, null, 8, ["question"])) : m("", !0)
@@ -3442,7 +3440,7 @@ const Ro = /* @__PURE__ */ g({
       ], 10, Mo)) : m("", !0);
     };
   }
-}), Ho = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], Eo = /* @__PURE__ */ g({
+}), Ho = { key: 0 }, Ao = ["id", "readonly", "disabled", "value", "maxlength", "placeholder", "aria-label", "aria-required"], _o = /* @__PURE__ */ g({
   __name: "QuestionComment",
   props: {
     question: {},
@@ -3469,7 +3467,7 @@ const Ro = /* @__PURE__ */ g({
       })
     }, null, 46, Ao));
   }
-}), _o = /* @__PURE__ */ g({
+}), Eo = /* @__PURE__ */ g({
   __name: "TitleElement",
   props: {
     element: {},
@@ -3615,7 +3613,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     };
     return X(() => {
       e();
-    }), E(() => {
+    }), _(() => {
       e();
     }), (s, i) => (t(), u("svg", {
       ref_key: "svgIconElement",
@@ -3634,7 +3632,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
   },
   setup(l) {
     const n = l, o = T(null);
-    return L(() => n.model), E(() => {
+    return L(() => n.model), _(() => {
       !n.model.hasActions || n.model.initResponsivityManager(o.value);
     }), V(() => {
       n.model.resetResponsivityManager();
@@ -3795,7 +3793,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     }, i = (a) => {
       n.model.onMouseMove(a);
     };
-    return L(() => n.model), E(() => {
+    return L(() => n.model), _(() => {
       n.model.initListContainerHtmlElement(o.value);
     }), (a, d) => {
       const v = q("sv-svg-icon"), p = q("sv-list-item");
@@ -3882,7 +3880,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     const n = l, o = R(() => n.item.elementId), e = (s) => {
       n.model.onItemClick(n.item), s.stopPropagation();
     };
-    return L(() => n.item), E(() => {
+    return L(() => n.item), _(() => {
       setTimeout(() => {
         n.model.onLastItemRended(n.item);
       });
@@ -3942,7 +3940,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         o.value.dispose(), o.value = te(s, void 0);
       },
       { immediate: !0 }
-    ), L(() => o.value), E(() => {
+    ), L(() => o.value), _(() => {
       const s = e.value;
       o.value.setComponentElement(
         s,
@@ -4086,7 +4084,8 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
         style: S({ width: o.value }),
         role: "progressbar",
         "aria-valuemin": "0",
-        "aria-valuemax": "100"
+        "aria-valuemax": "100",
+        "aria-label": "progress"
       }, [
         c("span", {
           class: r(e(i.survey.css))
@@ -4111,7 +4110,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
       let M = s.value;
       M.scrollLeft += ($ ? -1 : 1) * 70;
     };
-    return E(() => {
+    return _(() => {
       const $ = s.value;
       a = setInterval(() => {
         e.value = $.scrollWidth > $.offsetWidth;
@@ -4140,7 +4139,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
             (t(!0), u(w, null, B($.survey.visiblePages, (h, D) => (t(), u("li", {
               key: "listelement" + D,
               class: r(v(D)),
-              onClick: (_) => d(D) ? p(D) : null
+              onClick: (E) => d(D) ? p(D) : null
             }, [
               c("div", {
                 class: r(i.value.progressButtonsPageTitle),
@@ -4196,7 +4195,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
 }), Nt = { onsubmit: "return false;" }, Ht = {
   key: 0,
   class: "sv_custom_header"
-}, At = ["id"], Et = { key: 2 }, _t = ["innerHTML"], Vt = ["innerHTML"], Ot = ["innerHTML"], re = /* @__PURE__ */ g({
+}, At = ["id"], _t = { key: 2 }, Et = ["innerHTML"], Vt = ["innerHTML"], Ot = ["innerHTML"], re = /* @__PURE__ */ g({
   __name: "Survey",
   props: {
     model: {},
@@ -4212,7 +4211,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     }, v = R(
       () => i.value.showCompletedPage && i.value.state === "completed"
     ), p = R(() => i.value.css), b = R(() => "page" + d()), f = () => v.value ? (e.value || (e.value = i.value.processedCompletedHtml), e.value) : "";
-    return L(() => i.value), E(() => {
+    return L(() => i.value), _(() => {
       if (!!i.value) {
         i.value.needRenderIcons && De.renderIcons();
         var $ = o.value;
@@ -4224,7 +4223,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     }), V(() => {
       i.value.stopTimer(), i.value.renderCallback = void 0;
     }), ($, M) => {
-      const h = q("survey-popup-modal"), D = q("survey-header"), _ = q("survey-page"), O = q("sv-brand-info"), Q = q("sv-notifier");
+      const h = q("survey-popup-modal"), D = q("survey-header"), E = q("survey-page"), O = q("sv-brand-info"), Q = q("sv-notifier");
       return t(), u("div", {
         class: r(i.value.getRootCss()),
         style: S(i.value.themeVariables),
@@ -4245,7 +4244,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
             c("div", {
               class: r(p.value.container)
             }, [
-              i.value.titleView === "title" ? (t(), y(D, {
+              i.value.headerView === "basic" ? (t(), y(D, {
                 key: 0,
                 survey: i.value
               }, null, 8, ["survey"])) : m("", !0),
@@ -4273,7 +4272,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
                     container: "contentTop",
                     needRenderWrapper: !0
                   }, null, 8, ["survey"])),
-                  (t(), y(_, {
+                  (t(), y(E, {
                     key: b.value,
                     survey: i.value,
                     page: i.value.activePage,
@@ -4296,11 +4295,11 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
                 container: "footer",
                 needRenderWrapper: !1
               }, null, 8, ["survey"])),
-              v.value ? (t(), u("div", Et, [
+              v.value ? (t(), u("div", _t, [
                 c("div", {
                   innerHTML: f(),
                   class: r(i.value.completedCss)
-                }, null, 10, _t),
+                }, null, 10, Et),
                 (t(), y(N("sv-components-container"), {
                   survey: i.value,
                   container: "completePage",
@@ -4514,7 +4513,7 @@ const Yo = /* @__PURE__ */ me(Qo, [["render", Jo]]), xo = ["aria-label"], et = /
     ), s = R(
       () => !!n.question.customWidget.htmlTemplate
     ), i = R(() => n.question.customWidget.htmlTemplate), a = R(() => "survey-" + n.question.getTemplate());
-    return E(() => {
+    return _(() => {
       n.question.customWidget.afterRender(n.question, o.value);
     }), K(() => {
       n.question.customWidget.willUnmount(n.question, o.value);
@@ -4690,10 +4689,11 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ g({
           style: S(o.model.backgroundImageStyle)
         }, null, 6)) : m("", !0),
         c("div", {
-          class: r(o.model.contentClasses)
+          class: r(o.model.contentClasses),
+          style: S({ maxWidth: o.model.maxWidth })
         }, [
           (t(!0), u(w, null, B(o.model.cells, (i) => (t(), y(s, { model: i }, null, 8, ["model"]))), 256))
-        ], 2)
+        ], 6)
       ], 6);
     };
   }
@@ -4733,7 +4733,7 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ g({
           n.model.showTitle ? (t(), u("div", {
             key: 1,
             class: "sv-cover__title",
-            style: S({ maxWidth: n.model.textWidth })
+            style: S({ maxWidth: n.model.textAreaWidth })
           }, [
             C(e, {
               element: n.model.survey,
@@ -4743,7 +4743,7 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ g({
           n.model.showDescription ? (t(), u("div", {
             key: 2,
             class: "sv-cover__description",
-            style: S({ maxWidth: n.model.textWidth })
+            style: S({ maxWidth: n.model.textAreaWidth })
           }, [
             n.model.survey.renderedHasDescription ? (t(), u("h5", {
               key: 0,
@@ -4930,13 +4930,13 @@ const ii = /* @__PURE__ */ me(ni, [["render", ti]]), li = /* @__PURE__ */ g({
 });
 He.platform = "vue3";
 function bi(l) {
-  l.component("SurveyComponent", re), l.component("PopupSurveyComponent", ae), l.component("survey", re), l.component("popup-survey", ae), l.component("survey-header", We), l.component("survey-page", Ve), l.component("survey-row", ze), l.component("survey-element", Ke), l.component("survey-panel", Ze), l.component("survey-element-header", Ge), l.component("survey-string", Xe), l.component("sv-string-viewer", xe), l.component("sv-string-editor", ss), l.component("sv-skeleton", os), l.component("survey-text", ls), l.component("survey-text-input", ds), l.component("survey-checkbox", ps), l.component("survey-checkbox-item", hs), l.component("survey-radiogroup", fs), l.component("survey-radiogroup-item", Rs), l.component("survey-signaturepad", Ls), l.component("survey-html", Ps), l.component("survey-image", As), l.component("survey-expression", Es), l.component("survey-file", Os), l.component("sv-file-choose-btn", vi), l.component("sv-file-clean-btn", di), l.component("sv-file-preview", Ci), l.component("sv-file-video", ci), l.component("survey-imagepicker", Ws), l.component("survey-imagepicker-item", Qs), l.component("survey-comment", Xs), l.component("survey-dropdown", Js), l.component("sv-dropdown-select", sn), l.component("sv-dropdown-option-item", on), l.component("sv-dropdown", un), l.component("survey-tagbox", dn), l.component("sv-tagbox", pn), l.component("sv-tagbox-item", hn), l.component("sv-tagbox-filter", yn), l.component("survey-ranking", Cn), l.component("survey-ranking-item", Tn), l.component("survey-rating", Ln), l.component("sv-rating-item", Pn), l.component("sv-rating-item-smiley", Nn), l.component("sv-rating-item-star", An), l.component("sv-rating-dropdown", En), l.component("survey-boolean", Vn), l.component("sv-boolean-radio", On), l.component("sv-boolean-radio-item", zn), l.component("sv-boolean-checkbox", Zn), l.component("survey-multipletext", Gn), l.component("survey-multipletext-item", Jn), l.component("survey-matrix", io), l.component("survey-matrixdropdown", lo), l.component("survey-matrixtable", mo), l.component("survey-matrixheaderrequired", po), l.component("survey-matrixcell", qo), l.component("survey-matrixdynamic", yo), l.component("sv-matrix-remove-button", ho), l.component("sv-matrix-drag-drop-icon", bo), l.component("sv-matrix-detail-button", fo), l.component("survey-paneldynamic", Io), l.component("survey-paneldynamicprogress", wo), l.component("survey-paneldynamicprogress-v2", So), l.component("sv-paneldynamic-add-btn", Ro), l.component("sv-paneldynamic-next-btn", $o), l.component("sv-paneldynamic-prev-btn", Lo), l.component("sv-paneldynamic-remove-btn", Do), l.component("sv-paneldynamic-progress-text", Po), l.component("sv-components-container", $t), l.component("sv-progress-buttons", Pt), l.component("sv-progress-toc", Mt), l.component("sv-progress-pages", Z), l.component("sv-progress-questions", Z), l.component("sv-progress-correctquestions", Z), l.component("sv-progress-requiredquestions", Z), l.component("survey-errors", No), l.component("survey-question-comment", Eo), l.component("survey-element-title", _o), l.component("survey-element-title-content", zo), l.component("sv-title-actions", jo), l.component("sv-brand-info", Yo), l.component("sv-svg-icon", nt), l.component("sv-action-bar", ot), l.component("sv-action", lt), l.component("sv-action-bar-item", at), l.component("sv-action-bar-item-dropdown", dt), l.component("sv-action-bar-separator", mt), l.component("sv-list", qt), l.component("sv-list-item", gt), l.component("sv-popup", ht), l.component("sv-popup-container", St), l.component("popup-pointer", Rt), l.component("sv-notifier", Ft), l.component("survey-other-choice", Ut), l.component("sv-nav-btn", jt), l.component("survey-customwidget", Zt), l.component("survey-popup-modal", Gt), l.component("sv-character-counter", Xt), l.component("survey-composite", Jt), l.component("survey-custom", Yt), l.component("sv-timerpanel", si), l.component("sv-loading-indicator", ii), l.component("sv-cover", li), l.component("sv-cover-cell", ui), l.directive("key2click", {
+  l.component("SurveyComponent", re), l.component("PopupSurveyComponent", ae), l.component("survey", re), l.component("popup-survey", ae), l.component("survey-header", We), l.component("survey-page", Ve), l.component("survey-row", ze), l.component("survey-element", Ke), l.component("survey-panel", Ze), l.component("survey-element-header", Ge), l.component("survey-string", Xe), l.component("sv-string-viewer", xe), l.component("sv-string-editor", ss), l.component("sv-skeleton", os), l.component("survey-text", ls), l.component("survey-text-input", ds), l.component("survey-checkbox", ps), l.component("survey-checkbox-item", hs), l.component("survey-radiogroup", fs), l.component("survey-radiogroup-item", Rs), l.component("survey-signaturepad", Ls), l.component("survey-html", Ps), l.component("survey-image", As), l.component("survey-expression", _s), l.component("survey-file", Os), l.component("sv-file-choose-btn", vi), l.component("sv-file-clean-btn", di), l.component("sv-file-preview", Ci), l.component("sv-file-video", ci), l.component("survey-imagepicker", Ws), l.component("survey-imagepicker-item", Qs), l.component("survey-comment", Xs), l.component("survey-dropdown", Js), l.component("sv-dropdown-select", sn), l.component("sv-dropdown-option-item", on), l.component("sv-dropdown", un), l.component("survey-tagbox", dn), l.component("sv-tagbox", pn), l.component("sv-tagbox-item", hn), l.component("sv-tagbox-filter", yn), l.component("survey-ranking", Cn), l.component("survey-ranking-item", Tn), l.component("survey-rating", Ln), l.component("sv-rating-item", Pn), l.component("sv-rating-item-smiley", Nn), l.component("sv-rating-item-star", An), l.component("sv-rating-dropdown", _n), l.component("survey-boolean", Vn), l.component("sv-boolean-radio", On), l.component("sv-boolean-radio-item", zn), l.component("sv-boolean-checkbox", Zn), l.component("survey-multipletext", Gn), l.component("survey-multipletext-item", Jn), l.component("survey-matrix", io), l.component("survey-matrixdropdown", lo), l.component("survey-matrixtable", mo), l.component("survey-matrixheaderrequired", po), l.component("survey-matrixcell", qo), l.component("survey-matrixdynamic", yo), l.component("sv-matrix-remove-button", ho), l.component("sv-matrix-drag-drop-icon", bo), l.component("sv-matrix-detail-button", fo), l.component("survey-paneldynamic", Io), l.component("survey-paneldynamicprogress", wo), l.component("survey-paneldynamicprogress-v2", So), l.component("sv-paneldynamic-add-btn", Ro), l.component("sv-paneldynamic-next-btn", $o), l.component("sv-paneldynamic-prev-btn", Lo), l.component("sv-paneldynamic-remove-btn", Do), l.component("sv-paneldynamic-progress-text", Po), l.component("sv-components-container", $t), l.component("sv-progress-buttons", Pt), l.component("sv-progress-toc", Mt), l.component("sv-progress-pages", Z), l.component("sv-progress-questions", Z), l.component("sv-progress-correctquestions", Z), l.component("sv-progress-requiredquestions", Z), l.component("survey-errors", No), l.component("survey-question-comment", _o), l.component("survey-element-title", Eo), l.component("survey-element-title-content", zo), l.component("sv-title-actions", jo), l.component("sv-brand-info", Yo), l.component("sv-svg-icon", nt), l.component("sv-action-bar", ot), l.component("sv-action", lt), l.component("sv-action-bar-item", at), l.component("sv-action-bar-item-dropdown", dt), l.component("sv-action-bar-separator", mt), l.component("sv-list", qt), l.component("sv-list-item", gt), l.component("sv-popup", ht), l.component("sv-popup-container", St), l.component("popup-pointer", Rt), l.component("sv-notifier", Ft), l.component("survey-other-choice", Ut), l.component("sv-nav-btn", jt), l.component("survey-customwidget", Zt), l.component("survey-popup-modal", Gt), l.component("sv-character-counter", Xt), l.component("survey-composite", Jt), l.component("survey-custom", Yt), l.component("sv-timerpanel", si), l.component("sv-loading-indicator", ii), l.component("sv-cover", li), l.component("sv-cover-cell", ui), l.directive("key2click", {
     mounted: function(n, o) {
       const e = { ...o.value };
       e.disableTabStop || (n.tabIndex = 0), n.addEventListener("keyup", (s) => (s.preventDefault(), s.stopPropagation(), de(s, e), !1)), n.addEventListener("keydown", (s) => {
         Ae(s, e);
       }), n.addEventListener("blur", (s) => {
-        Ee(s);
+        _e(s);
       });
     }
   });