survey-creator-vue/survey-creator-vue.es.js

A white-label drag-and-drop form builder for Vue.js that lets you design complex, interactive forms and surveys without writing code. It generates JSON schemas used by the SurveyJS Form Library to render dynamic forms in your Vue.js app.

import { useBase as $, SvComponent as u, key2ClickDirective as M, SurveyComponent as G, useQuestion as Q, ComponentFactory as ie } from "survey-vue3-ui";
import { defineComponent as g, computed as f, toRaw as _e, ref as P, onMounted as R, onUnmounted as K, openBlock as a, createElementBlock as i, Fragment as D, createVNode as v, unref as s, createElementVNode as d, normalizeClass as _, normalizeStyle as A, createCommentVNode as p, createBlock as b, onUpdated as O, renderList as L, nextTick as re, withDirectives as h, toDisplayString as T, vShow as U, withCtx as X, createTextVNode as ge, mergeProps as V, shallowRef as be, watch as W, onBeforeUnmount as Y, vModelText as de, renderSlot as x } from "vue";
import { editorLocalization as ue, SurveyResultsModel as ye, initLogicOperator as he, StringEditorViewModelBase as Ce, ToolboxToolViewModel as qe, PageAdorner as fe, RowViewModel as ke, QuestionAdornerViewModel as ee, QuestionImageAdornerViewModel as $e, QuestionRatingAdornerViewModel as we, MatrixCellWrapperViewModel as Te, ItemValueWrapperViewModel as De, ImageItemValueWrapperViewModel as Ne, LogoImageViewModel as Me, PageNavigatorViewModel as Se, QuestionDropdownAdornerViewModel as Ie, editableStringRendererName as Be } from "survey-creator-core";
import { CssClassBuilder as Ee, RendererFactory as ce, DropdownListModel as Pe } from "survey-core";
const Re = { class: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" }, Ve = { class: "svc-top-bar" }, Ae = {
  key: 0,
  class: "svc-tabbed-menu-wrapper"
}, Le = ["v-show"], ze = { class: "svc-creator__content-holder svc-flex-column" }, Fe = ["aria-labelledby", "id"], Ke = {
  key: 0,
  class: "svc-footer-bar"
}, He = ["v-show"], Ue = {
  key: 0,
  class: "svc-creator__banner"
}, Qe = ["innerHTML"], Oe = /* @__PURE__ */ g({
  __name: "Creator",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = f(() => _e(t.model)), o = P();
    return $(
      () => e.value,
      (n, r) => {
        r && r.unsubscribeRootElement(), n && o.value && n.setRootElement(o.value);
      }
    ), R(() => {
      o.value && t.model.setRootElement(o.value);
    }), K(() => {
      t.model.unsubscribeRootElement();
    }), (n, r) => e.value.isCreatorDisposed ? p("", !0) : (a(), i(D, { key: 0 }, [
      v(s(u), { is: "survey-popup-modal" }),
      d("div", {
        class: _(e.value.getRootCss()),
        style: A(e.value.themeVariables),
        ref_key: "root",
        ref: o
      }, [
        d("div", null, [
          v(s(u), { is: "sv-svg-bundle" })
        ]),
        d("div", {
          class: _(["svc-full-container svc-creator__area svc-flex-column", {
            "svc-creator__area--with-banner": !e.value.haveCommercialLicense
          }])
        }, [
          d("div", {
            class: _(["svc-flex-row svc-full-container", {
              "svc-creator__side-bar--left": e.value.sidebarLocation == "left"
            }])
          }, [
            d("div", Re, [
              d("div", Ve, [
                e.value.showTabs ? (a(), i("div", Ae, [
                  v(s(u), {
                    is: "svc-tabbed-menu",
                    model: e.value.tabbedMenu
                  }, null, 8, ["model"])
                ])) : p("", !0),
                e.value.showToolbar ? (a(), i("div", {
                  key: 1,
                  class: "svc-toolbar-wrapper",
                  "v-show": e.value.showToolbar
                }, [
                  v(s(u), {
                    is: "sv-action-bar",
                    model: e.value.toolbar
                  }, null, 8, ["model"])
                ], 8, Le)) : p("", !0)
              ]),
              d("div", {
                class: _(["svc-creator__content-wrapper svc-flex-row", {
                  "svc-creator__content-wrapper--footer-toolbar": e.value.isMobileView
                }])
              }, [
                d("div", ze, [
                  e.value.activeTabMenuItem ? (a(), i("div", {
                    role: "tabpanel",
                    class: _(["svc-creator-tab", {
                      "svc-creator__toolbox--right": e.value.toolboxLocation == "right"
                    }]),
                    key: e.value.activeTabId,
                    "aria-labelledby": "tab-" + e.value.activeTabId,
                    id: "scrollableDiv-" + e.value.activeTabId
                  }, [
                    v(s(u), {
                      is: e.value.activeTabMenuItem.componentContent,
                      model: e.value.activeTabMenuItem.data.model
                    }, null, 8, ["is", "model"])
                  ], 10, Fe)) : p("", !0)
                ])
              ], 2),
              e.value.isMobileView ? (a(), i("div", Ke, [
                d("div", {
                  class: "svc-toolbar-wrapper",
                  "v-show": e.value.isMobileView
                }, [
                  v(s(u), {
                    is: "sv-action-bar",
                    model: e.value.footerToolbar
                  }, null, 8, ["model"])
                ], 8, He)
              ])) : p("", !0)
            ]),
            e.value.isSidebarVisible ? (a(), b(s(u), {
              key: 0,
              is: "svc-side-bar",
              model: e.value.sidebar
            }, null, 8, ["model"])) : p("", !0)
          ], 2),
          e.value.haveCommercialLicense ? p("", !0) : (a(), i("div", Ue, [
            d("span", {
              class: "svc-creator__non-commercial-text",
              innerHTML: e.value.licenseText
            }, null, 8, Qe)
          ])),
          v(s(u), {
            is: "sv-notifier",
            model: e.value.notifier
          }, null, 8, ["model"])
        ], 2)
      ], 6)
    ], 64));
  }
}), Ge = /* @__PURE__ */ g({
  __name: "TabbedMenu",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = P();
    return $(() => t.model), O(() => {
      t.model.initResponsivityManager(e.value);
    }), R(() => {
      t.model.initResponsivityManager(e.value);
    }), K(() => {
      t.model.resetResponsivityManager();
    }), (o, n) => (a(), i("div", {
      class: "svc-tabbed-menu",
      ref_key: "container",
      ref: e,
      role: "tablist",
      style: A(o.model.getRootStyle())
    }, [
      (a(!0), i(D, null, L(o.model.renderedActions, (r) => (a(), b(s(u), {
        key: r.renderedId,
        is: "svc-tabbed-menu-item-wrapper",
        item: r
      }, null, 8, ["item"]))), 128))
    ], 4));
  }
}), We = { class: "sv-action__content" }, je = /* @__PURE__ */ g({
  __name: "TabbedMenuItemWrapper",
  props: {
    item: {}
  },
  setup(c) {
    const t = P(), e = c;
    return $(() => e.item), R(() => {
      const o = e.item;
      o.updateModeCallback = (n, r) => {
        o.mode = n, re(() => r(n, t.value));
      }, o.afterRender();
    }), K(() => {
      const o = e.item;
      o.updateModeCallback = void 0;
    }), (o, n) => (a(), i("span", {
      class: _(["svc-tabbed-menu-item-container", [o.item.isVisible ? "" : "sv-action--hidden", o.item.css]]),
      ref_key: "root",
      ref: t
    }, [
      d("div", We, [
        v(s(u), {
          is: o.item.component || "svc-tabbed-menu-item",
          item: o.item
        }, null, 8, ["is", "item"])
      ])
    ], 2));
  }
}), Je = ["id", "aria-selected", "aria-controls"], Ze = /* @__PURE__ */ g({
  __name: "TabbedMenuItem",
  props: {
    item: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.item), (e, o) => h((a(), i("div", {
      role: "tab",
      id: "tab-" + e.item.id,
      "aria-selected": e.item.active,
      "aria-controls": "scrollableDiv-" + e.item.id,
      class: _(["svc-tabbed-menu-item", e.item.getRootCss()]),
      onClick: o[0] || (o[0] = //@ts-ignore
      (...n) => e.item.doAction && e.item.doAction(...n))
    }, [
      e.item.hasTitle ? (a(), i("span", {
        key: 0,
        class: _(e.item.getTitleCss())
      }, T(e.item.title), 3)) : p("", !0),
      e.item.hasIcon ? (a(), b(s(u), {
        key: 1,
        is: "sv-svg-icon",
        iconName: e.item.iconName,
        size: "auto",
        class: _(e.item.getIconCss()),
        title: e.item.tooltip || e.item.title
      }, null, 8, ["iconName", "class", "title"])) : p("", !0)
    ], 10, Je)), [
      [s(M)]
    ]);
  }
}), Xe = { class: "svc-flex-row svc-side-bar__wrapper" }, Ye = { class: "svc-side-bar__container-wrapper" }, xe = { class: "svc-side-bar__container-content" }, eo = /* @__PURE__ */ g({
  __name: "SideBar",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = P();
    return $(() => t.model), R(() => {
      t.model.initResizeManager(e.value);
    }), K(() => {
      t.model.resetResizeManager();
    }), (o, n) => h((a(), i("div", {
      class: _(["svc-side-bar", o.model.rootCss])
    }, [
      h(d("div", {
        class: "svc-side-bar__shadow",
        onClick: n[0] || (n[0] = () => o.model.collapseSidebar())
      }, null, 512), [
        [U, o.model.renderContainer]
      ]),
      d("div", Xe, [
        h(d("div", Ye, [
          d("div", {
            class: "svc-side-bar__container",
            ref_key: "root",
            ref: e
          }, [
            v(s(u), {
              is: o.model.header.component,
              model: o.model.header.componentModel
            }, null, 8, ["is", "model"]),
            d("div", xe, [
              (a(!0), i(D, null, L(o.model.pages, (r, l) => (a(), b(s(u), {
                key: l,
                is: "svc-side-bar-page",
                model: r
              }, null, 8, ["model"]))), 128))
            ])
          ], 512)
        ], 512), [
          [U, o.model.renderContainer]
        ]),
        o.model.sideAreaComponentName ? (a(), b(s(u), {
          key: 0,
          is: o.model.sideAreaComponentName,
          model: o.model.sideAreaComponentData
        }, null, 8, ["is", "model"])) : p("", !0)
      ])
    ], 2)), [
      [U, o.model.renderRoot]
    ]);
  }
}), oo = { class: "svc-side-bar__container-header" }, so = { class: "svc-side-bar__container-actions" }, to = {
  key: 0,
  class: "svc-side-bar__container-title"
}, no = /* @__PURE__ */ g({
  __name: "SideBarDefaultHeader",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", oo, [
      d("div", so, [
        v(s(u), {
          is: "sv-action-bar",
          model: e.model.toolbar
        }, null, 8, ["model"])
      ]),
      e.model.title ? (a(), i("div", to, T(e.model.title), 1)) : p("", !0)
    ]));
  }
}), ao = /* @__PURE__ */ g({
  __name: "SideBarPage",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => e.model.visible ? (a(), b(s(u), {
      key: 0,
      is: e.model.componentName,
      model: e.model.componentData
    }, null, 8, ["is", "model"])) : p("", !0);
  }
}), lo = /* @__PURE__ */ g({
  __name: "ObjectSelector",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => e.model.isVisible ? (a(), b(s(u), {
      key: 0,
      is: "sv-list",
      model: e.model.list
    }, null, 8, ["model"])) : p("", !0);
  }
}), io = /* @__PURE__ */ g({
  __name: "PropertyGrid",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", {
      class: _(e.model.rootCss)
    }, [
      v(s(u), {
        is: "svc-search",
        model: e.model.searchManager
      }, null, 8, ["model"]),
      e.model.survey ? (a(), b(s(G), {
        key: 0,
        survey: e.model.survey
      }, null, 8, ["survey"])) : p("", !0)
    ], 2));
  }
}), ro = /* @__PURE__ */ g({
  __name: "Tabs",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(!0), i(D, null, L(e.model.actions, (n, r) => (a(), b(s(u), {
      key: r,
      is: "svc-tab-button",
      model: n
    }, null, 8, ["model"]))), 128));
  }
}), uo = { class: "svc-sidebar-tabs__top-container" }, co = { class: "svc-sidebar-tabs__collapse-button" }, po = /* @__PURE__ */ d("div", { class: "svc-sidebar-tabs__separator" }, [
  /* @__PURE__ */ d("div")
], -1), vo = { class: "svc-sidebar-tabs__items" }, mo = { class: "svc-sidebar-tabs__bottom-container" }, _o = { class: "svc-sidebar-tabs__items" }, go = /* @__PURE__ */ g({
  __name: "TabControl",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", {
      class: _(e.model.sideBarClassName)
    }, [
      d("div", uo, [
        d("div", co, [
          v(s(u), {
            is: "svc-tab-button",
            model: e.model.expandCollapseAction
          }, null, 8, ["model"])
        ]),
        po,
        v(s(u), { is: "sv-scroll" }, {
          default: X(() => [
            d("div", vo, [
              v(s(u), {
                is: "svc-tabs",
                model: e.model.topToolbar
              }, null, 8, ["model"])
            ])
          ]),
          _: 1
        })
      ]),
      d("div", mo, [
        d("div", _o, [
          v(s(u), {
            is: "sv-action-bar",
            model: e.model.bottomToolbar
          }, null, 8, ["model"])
        ])
      ])
    ], 2));
  }
}), bo = {
  key: 0,
  class: "svc-menu-action"
}, yo = ["title"], ho = { class: "svc-menu-action__icon" }, Co = { class: "svc-menu-action__icon-container" }, qo = /* @__PURE__ */ g({
  __name: "TabButton",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => e.model.visible ? (a(), i("div", bo, [
      h((a(), i("div", {
        class: _(e.model.buttonClassName),
        title: e.model.tooltip,
        onClick: o[0] || (o[0] = (n) => e.model.action())
      }, [
        d("div", ho, [
          d("div", Co, [
            v(s(u), {
              is: "sv-svg-icon",
              iconName: e.model.iconName,
              size: "auto"
            }, null, 8, ["iconName"])
          ])
        ])
      ], 10, yo)), [
        [s(M), { processEsc: !1, disableTabStop: e.model.disableTabStop }]
      ])
    ])) : p("", !0);
  }
}), fo = { class: "svc-property-grid-placeholder" }, ko = { class: "svc-property-grid-placeholder__header" }, $o = { class: "svc-property-grid-placeholder__title" }, wo = { class: "svc-property-grid-placeholder__description" }, To = /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__content" }, [
  /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__gap" }),
  /* @__PURE__ */ d("div", { class: "svc-property-grid-placeholder__image" })
], -1), Do = /* @__PURE__ */ g({
  __name: "PropertyGridPlaceholder",
  setup(c) {
    const t = ue;
    return (e, o) => (a(), i("div", fo, [
      d("div", ko, [
        d("span", $o, T(s(t).getString("ed.propertyGridPlaceholderTitle")), 1),
        d("span", wo, T(s(t).getString("ed.propertyGridPlaceholderDescription")), 1)
      ]),
      To
    ]));
  }
}), No = { class: "svc-side-bar__container-header svc-sidebar__header-container" }, Mo = {
  key: 0,
  class: "svc-side-bar__container-title"
}, So = {
  key: 1,
  class: "svc-sidebar__header-caption"
}, Io = { class: "svc-sidebar__header-title" }, Bo = { class: "svc-sidebar__header-subtitle" }, Eo = /* @__PURE__ */ g({
  __name: "SideBarHeader",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", No, [
      e.model.subTitle ? p("", !0) : (a(), i("div", Mo, T(e.model.title), 1)),
      e.model.subTitle ? (a(), i("div", So, [
        d("span", Io, T(e.model.title), 1),
        d("span", Bo, T(e.model.subTitle), 1)
      ])) : p("", !0)
    ]));
  }
}), Po = { class: "svc-sidebar__header svc-sidebar__header--tabbed" }, Ro = { class: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" }, Vo = { class: "svc-sidebar__header-content" }, Ao = { class: "svc-sidebar__header-caption" }, Lo = { class: "svc-sidebar__header-title" }, zo = { class: "svc-sidebar__header-subtitle" }, Fo = /* @__PURE__ */ g({
  __name: "SideBarPropertyGridHeader",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", Po, [
      d("div", Ro, [
        d("div", Vo, [
          h((a(), i("div", {
            class: _(e.model.buttonClassName),
            onClick: o[0] || (o[0] = (n) => e.model.action())
          }, [
            d("div", Ao, [
              d("span", Lo, T(e.model.title), 1),
              d("span", zo, T(e.model.tooltip), 1)
            ])
          ], 2)), [
            [s(M), { processEsc: !1 }]
          ]),
          v(s(u), {
            is: "sv-popup",
            model: e.model.popupModel
          }, null, 8, ["model"])
        ])
      ])
    ]));
  }
}), Ko = /* @__PURE__ */ g({
  __name: "QuestionError",
  props: {
    errorKey: {},
    error: {},
    cssClasses: {},
    element: {}
  },
  setup(c) {
    return (t, e) => (a(), i("div", { key: t.errorKey }, [
      v(s(u), {
        is: "sv-svg-icon",
        class: _(t.cssClasses.error.icon),
        iconName: "icon-alert_24x24",
        size: "auto"
      }, null, 8, ["class"]),
      d("span", {
        class: _(
          t.cssClasses ? t.cssClasses.error.item || void 0 : "panel-error-item"
        )
      }, [
        v(s(u), {
          is: "survey-string",
          locString: t.error.locText
        }, null, 8, ["locString"])
      ], 2)
    ]));
  }
}), Ho = ["title"], Uo = ["title"], Qo = ["title"], Oo = ["title"], Go = /* @__PURE__ */ g({
  __name: "ActionButton",
  props: {
    classes: {},
    selected: { type: Boolean },
    disabled: { type: Boolean },
    text: {},
    title: {},
    allowBubble: { type: Boolean },
    click: { type: Function },
    iconName: {}
  },
  setup(c) {
    const t = c, e = (n) => {
      t.click(), t.allowBubble || n.stopPropagation();
    }, o = () => new Ee().append(t.classes || "").append("svc-action-button").append("svc-action-button--icon", !!t.iconName).append("svc-action-button--selected", !!t.selected).append("svc-action-button--disabled", !!t.disabled).toString();
    return (n, r) => (a(), i(D, null, [
      n.iconName ? p("", !0) : (a(), i(D, { key: 0 }, [
        n.disabled ? (a(), i("span", {
          key: 0,
          class: _(["svc-action-button svc-action-button--disabled", n.classes]),
          title: n.title
        }, T(n.text), 11, Ho)) : p("", !0),
        h((a(), i("span", {
          role: "button",
          class: _(["svc-action-button", o()]),
          onClick: e,
          title: n.title
        }, [
          ge(T(n.text), 1)
        ], 10, Uo)), [
          [s(M)]
        ])
      ], 64)),
      n.iconName ? (a(), i(D, { key: 1 }, [
        n.disabled ? (a(), i("span", {
          key: 0,
          class: _(o()),
          title: n.title
        }, [
          v(s(u), {
            is: "sv-svg-icon",
            iconName: n.iconName,
            size: "auto"
          }, null, 8, ["iconName"])
        ], 10, Qo)) : p("", !0),
        h((a(), i("span", {
          role: "button",
          onClick: e,
          class: _(o()),
          title: n.title
        }, [
          v(s(u), {
            is: "sv-svg-icon",
            iconName: n.iconName,
            size: "auto"
          }, null, 8, ["iconName"])
        ], 10, Oo)), [
          [s(M)]
        ])
      ], 64)) : p("", !0)
    ], 64));
  }
}), Wo = ["disabled", "title", "aria-checked", "aria-expanded", "role"], jo = /* @__PURE__ */ d("div", { class: "svc-switcher__icon-thumb" }, null, -1), Jo = [
  jo
], Zo = {
  key: 0,
  class: "svc-switcher__title"
}, Xo = {
  inheritAttrs: !1
}, Yo = /* @__PURE__ */ g({
  ...Xo,
  __name: "Switcher",
  props: {
    item: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.item), (e, o) => h((a(), i("button", {
      class: _(e.item.getActionBarItemCss()),
      type: "button",
      onClick: o[0] || (o[0] = (n) => {
        e.item.action(e.item, !!n.pointerType);
      }),
      onKeyup: o[1] || (o[1] = (n) => {
        n.stopPropagation();
      }),
      disabled: e.item.disabled,
      title: e.item.tooltip || e.item.title,
      "aria-checked": e.item.ariaChecked,
      "aria-expanded": e.item.ariaExpanded,
      role: e.item.ariaRole
    }, [
      d("div", {
        class: _(e.item.getSwitcherIconCss())
      }, Jo, 2),
      e.item.hasTitle ? (a(), i("span", Zo, T(e.item.title), 1)) : p("", !0)
    ], 42, Wo)), [
      [s(M), { processEsc: !1, disableTabStop: e.item.disableTabStop }]
    ]);
  }
}), xo = /* @__PURE__ */ g({
  __name: "Simulator",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    $(() => t.model);
    const e = f(() => t.model.simulatorFrame), o = f(() => {
      const l = t.model.popupOverlayHeight;
      return l ? { "--sv-popup-overlay-height": l } : {};
    });
    R(() => t.model.queueSurveyLayoutRefresh()), O(() => t.model.queueSurveyLayoutRefresh()), K(() => t.model.cancelSurveyLayoutRefresh());
    const n = () => {
      t.model.device !== "desktop" && t.model.activateZoom();
    }, r = () => {
      t.model.device !== "desktop" && t.model.deactivateZoom();
    };
    return (l, m) => (a(), i("div", {
      class: _(l.model.getRootCss()),
      onKeydown: m[0] || (m[0] = (w) => l.model.tryToZoom(void 0, w)),
      onMouseover: m[1] || (m[1] = (w) => n()),
      onMouseout: m[2] || (m[2] = (w) => r())
    }, [
      l.model.hasFrame ? p("", !0) : (a(), i("div", {
        key: 0,
        class: "svd-simulator-content",
        style: A(o.value)
      }, [
        v(s(u), {
          is: "survey-widget",
          model: l.model.survey
        }, null, 8, ["model"])
      ], 4)),
      l.model.hasFrame ? (a(), i("div", {
        key: 1,
        class: "svd-simulator-wrapper",
        id: "svd-simulator-wrapper",
        style: A({
          width: e.value.frameWidth + "px",
          height: e.value.frameHeight + "px"
        })
      }, [
        d("div", {
          class: "svd-simulator",
          style: A({
            width: e.value.deviceWidth + "px",
            height: e.value.deviceHeight + "px",
            transform: "scale(" + e.value.scale + ") translate(-50%, -50%)"
          })
        }, [
          d("div", {
            class: "svd-simulator-content",
            style: A(o.value)
          }, [
            v(s(u), {
              is: "survey-widget",
              model: l.model.survey
            }, null, 8, ["model"])
          ], 4)
        ], 4)
      ], 4)) : p("", !0)
    ], 34));
  }
}), es = /* @__PURE__ */ g({
  __name: "ComponentContainer",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return (e, o) => (a(), i("div", {
      class: _(e.model.cssClass)
    }, [
      (a(!0), i(D, null, L(t.model.elements, (n, r) => (a(), b(s(u), V({
        is: n.componentName
      }, n.componentData, { key: r }), null, 16, ["is"]))), 128))
    ], 2));
  }
}), os = { class: "svc-surface-placeholder" }, ss = { class: "svc-surface-placeholder__text" }, ts = { class: "svc-surface-placeholder__title" }, ns = { class: "svc-surface-placeholder__description" }, j = /* @__PURE__ */ g({
  __name: "SurfacePlaceholder",
  props: {
    name: {},
    placeholderTitleText: {},
    placeholderDescriptionText: {}
  },
  setup(c) {
    const t = c;
    return (e, o) => (a(), i("div", os, [
      d("div", {
        class: _(["svc-surface-placeholder__image", "svc-surface-placeholder__image--" + e.name])
      }, null, 2),
      d("div", ss, [
        d("div", ts, T(t.placeholderTitleText), 1),
        d("div", ns, T(t.placeholderDescriptionText), 1)
      ])
    ]));
  }
}), as = {
  key: 2,
  class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
}, ls = /* @__PURE__ */ g({
  __name: "Test",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", {
      class: _(["svc-creator-tab__content svc-test-tab__content", {
        "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
      }])
    }, [
      e.model.survey.isEmpty ? (a(), b(j, {
        key: 0,
        name: "preview",
        placeholderTitleText: e.model.placeholderTitleText,
        placeholderDescriptionText: e.model.placeholderDescriptionText
      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", {
        key: 1,
        class: "svc-plugin-tab__content",
        onScroll: o[0] || (o[0] = (n) => e.model.onScroll())
      }, [
        v(s(u), {
          is: "survey-simulator",
          model: e.model.simulator
        }, null, 8, ["model"]),
        e.model.showResults ? (a(), b(s(u), {
          key: 0,
          is: "survey-results",
          survey: e.model.survey
        }, null, 8, ["survey"])) : p("", !0)
      ], 32)),
      e.model.isPageToolbarVisible ? (a(), i("div", as, [
        v(s(u), {
          is: "sv-action-bar",
          model: e.model.pages
        }, null, 8, ["model"])
      ])) : p("", !0)
    ], 2));
  }
}), is = { class: "svc-btn__text" }, rs = /* @__PURE__ */ g({
  inheritAttrs: !1,
  __name: "TestAgain",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = f(() => t.model.testAgainAction);
    return $(() => e.value), (o, n) => h((a(), i("div", {
      role: "button",
      class: "svc-preview__test-again svc-btn",
      onClick: n[0] || (n[0] = (r) => e.value.action())
    }, [
      d("span", is, T(e.value.title), 1)
    ])), [
      [s(M)]
    ]);
  }
});
function z(c, t, e) {
  const o = be(), n = W(
    t.map((r) => () => r()),
    () => {
      o.value = c();
    },
    {
      immediate: !0
    }
  );
  return $(() => o.value, void 0, e), Y(() => {
    n();
  }), o;
}
const ds = {
  key: 0,
  class: "svd-test-results"
}, us = { class: "svd-test-results__content" }, cs = { class: "svd-test-results__header" }, ps = { class: "svd-test-results__header-text" }, vs = { class: "svd-test-results__header-types" }, ms = { class: "svd-test-results__text svd-light-bg-color" }, _s = { class: "svd-test-results__table svd-light-bg-color" }, gs = { class: "svd-light-background-color" }, bs = { class: "svd-dark-border-color" }, ys = { class: "svd-dark-border-color" }, hs = /* @__PURE__ */ g({
  __name: "SurveyResults",
  props: {
    survey: {}
  },
  setup(c) {
    const t = c, e = z(
      () => t.survey ? new ye(t.survey) : void 0,
      [() => t.survey]
    );
    return (o, n) => s(e) ? (a(), i("div", ds, [
      d("div", us, [
        d("div", cs, [
          d("div", ps, T(s(e).surveyResultsText), 1),
          d("div", vs, [
            v(s(u), {
              is: "svc-action-button",
              text: s(e).surveyResultsTableText,
              click: s(e).selectTableClick,
              disabled: !1,
              selected: s(e).isTableSelected
            }, null, 8, ["text", "click", "selected"]),
            v(s(u), {
              is: "svc-action-button",
              text: s(e).surveyResultsJsonText,
              click: s(e).selectJsonClick,
              disabled: !1,
              selected: s(e).isJsonSelected
            }, null, 8, ["text", "click", "selected"])
          ])
        ]),
        h(d("div", ms, [
          d("div", null, T(s(e).resultText), 1)
        ], 512), [
          [U, s(e).resultViewType === "text"]
        ]),
        h(d("div", _s, [
          d("table", null, [
            d("thead", null, [
              d("tr", gs, [
                d("th", bs, T(s(e).resultsTitle), 1),
                d("th", ys, T(s(e).resultsDisplayValue), 1)
              ])
            ]),
            d("tbody", null, [
              (a(!0), i(D, null, L(s(e).resultData, (r, l) => (a(), b(s(u), {
                is: "survey-results-table-row",
                model: r,
                key: l
              }, null, 8, ["model"]))), 128))
            ])
          ])
        ], 512), [
          [U, s(e).resultViewType === "table"]
        ])
      ])
    ])) : p("", !0);
  }
}), Cs = { key: 2 }, qs = /* @__PURE__ */ g({
  __name: "SurveyResultsRow",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i(D, null, [
      h((a(), i("tr", {
        onClick: o[0] || (o[0] = //@ts-ignore
        (...n) => e.model.toggle && e.model.toggle(...n))
      }, [
        d("td", {
          class: "svd-dark-border-color",
          style: A({ paddingLeft: e.model.textMargin })
        }, [
          e.model.isNode ? (a(), i("span", {
            key: 0,
            class: _(["svd-test-results__marker", { "svd-test-results__marker--expanded": !e.model.collapsed }]),
            style: A({ left: e.model.markerMargin })
          }, [
            v(s(u), {
              is: "sv-svg-icon",
              iconName: "icon-expand_16x16",
              size: 16
            })
          ], 6)) : p("", !0),
          e.model.question ? (a(), b(s(u), {
            key: 1,
            is: "survey-string",
            locString: e.model.question.locTitle
          }, null, 8, ["locString"])) : (a(), i("span", Cs, T(e.model.title), 1))
        ], 4),
        d("td", {
          class: _({
            "svd-test-results__node-value": e.model.isNode,
            "svd-dark-border-color": !e.model.isNode
          })
        }, T(e.model.getString(e.model.displayValue)), 3)
      ])), [
        [s(M)]
      ]),
      e.model.isNode && !e.model.collapsed ? (a(!0), i(D, { key: 0 }, L(e.model.data, (n, r) => (a(), b(s(u), {
        is: "survey-results-table-row",
        model: n,
        key: r + 1
      }, null, 8, ["model"]))), 128)) : p("", !0)
    ], 64));
  }
}), fs = { class: "svc-creator-tab__content" }, ks = { class: "svc-json-editor-tab__content" }, $s = { class: "svc-json-editor-tab__errros_list" }, ws = /* @__PURE__ */ g({
  __name: "JsonEditorAce",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = P();
    return $(() => t.model), R(() => t.model.init(window.ace.edit(e.value))), (o, n) => (a(), i("div", fs, [
      d("div", ks, [
        d("div", {
          class: "svc-json-editor-tab__ace-editor",
          ref_key: "inputEl",
          ref: e
        }, null, 512),
        h(d("div", $s, [
          v(s(u), {
            is: "sv-list",
            model: o.model.errorList
          }, null, 8, ["model"])
        ], 512), [
          [U, o.model.hasErrors]
        ])
      ])
    ]));
  }
}), Ts = { class: "svc-creator-tab__content" }, Ds = { class: "svc-json-editor-tab__content" }, Ns = ["aria-label", "disabled"], Ms = { class: "svc-json-editor-tab__errros_list" }, Ss = /* @__PURE__ */ g({
  __name: "JsonEditorTextArea",
  props: {
    model: {}
  },
  setup(c) {
    const t = c, e = P(), o = t.model;
    return o.canShowErrors = !1, $(() => t.model), R(() => {
      const n = t.model;
      n.textElement = e.value;
    }), (n, r) => (a(), i("div", Ts, [
      d("div", Ds, [
        h(d("textarea", {
          class: "svc-json-editor-tab__content-area",
          "aria-label": s(o).ariaLabel,
          disabled: s(o).readOnly,
          "onUpdate:modelValue": r[0] || (r[0] = (l) => s(o).text = l),
          onKeydown: r[1] || (r[1] = (l) => s(o).checkKey(s(o), l)),
          ref_key: "inputEl",
          ref: e
        }, `
      `, 40, Ns), [
          [de, s(o).text]
        ]),
        h(d("div", Ms, [
          v(s(u), {
            is: "sv-list",
            model: s(o).errorList
          }, null, 8, ["model"])
        ], 512), [
          [U, s(o).hasErrors]
        ])
      ])
    ]));
  }
}), Is = { class: "svc-json-error__container" }, Bs = { class: "svc-json-error__title" }, Es = ["title", "aria-label"], Ps = /* @__PURE__ */ g({
  __name: "JsonEditorErrorItem",
  props: {
    item: {}
  },
  setup(c) {
    const t = c;
    $(() => t.item);
    const e = (o) => {
      o.stopPropagation(), t.item.data.fixError();
    };
    return (o, n) => (a(), i(D, null, [
      v(s(u), {
        is: "sv-svg-icon",
        iconName: o.item.iconName,
        size: o.item.iconSize,
        class: _("svc-json-error__icon")
      }, null, 8, ["iconName", "size"]),
      d("div", Is, [
        d("div", Bs, [
          v(s(u), {
            is: "survey-string",
            locString: o.item.locTitle
          }, null, 8, ["locString"])
        ]),
        o.item.data.showFixButton ? h((a(), i("button", {
          key: 0,
          type: "button",
          onClick: e,
          title: o.item.data.fixButtonTitle,
          "aria-label": o.item.data.fixButtonTitle,
          class: "svc-json-error__fix-button"
        }, [
          v(s(u), {
            is: "sv-svg-icon",
            iconName: o.item.data.fixButtonIcon,
            size: "auto"
          }, null, 8, ["iconName"])
        ], 8, Es)), [
          [s(M)]
        ]) : p("", !0)
      ])
    ], 64));
  }
}), Rs = { class: "svc-btn__text" }, te = /* @__PURE__ */ g({
  __name: "LogicAddButton",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    $(() => t.model);
    const e = (o) => {
      o.stopPropagation(), t.model.action();
    };
    return (o, n) => h((a(), i("div", {
      role: "button",
      class: _(["svc-logic-tab__content-action svc-btn", {
        "svc-logic-tab__content-action--disabled": o.model.enabled !== void 0 && !o.model.enabled
      }]),
      onClick: e
    }, [
      d("span", Rs, T(o.model.title), 1)
    ], 2)), [
      [s(M)]
    ]);
  }
}), Vs = { class: "svc-creator-tab__content" }, As = {
  key: 1,
  class: "svc-logic-tab__content-empty"
}, Ls = /* @__PURE__ */ g({
  __name: "Logic",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", Vs, [
      d("div", {
        class: _(["svc-plugin-tab__content svc-logic-tab__content", { "svc-logic-tab--empty": !e.model.hasItems }])
      }, [
        e.model.hasItems ? (a(), i(D, { key: 0 }, [
          v(s(G), {
            model: e.model.itemsSurvey
          }, null, 8, ["model"]),
          e.model.readOnly ? p("", !0) : (a(), b(te, {
            key: 0,
            model: e.model.addNewButton
          }, null, 8, ["model"]))
        ], 64)) : p("", !0),
        e.model.hasItems ? p("", !0) : (a(), i("div", As, [
          v(j, {
            name: "logic",
            placeholderTitleText: e.model.placeholderTitleText,
            placeholderDescriptionText: e.model.placeholderDescriptionText
          }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"]),
          e.model.readOnly ? p("", !0) : (a(), b(te, {
            key: 0,
            model: e.model.addNewButton
          }, null, 8, ["model"]))
        ]))
      ], 2)
    ]));
  }
}), zs = ["id", "required", "tabindex", "disabled", "role", "aria-required", "aria-invalid", "aria-errormessage", "aria-expanded", "aria-label", "aria-labelledby", "aria-controls"], Fs = ["id"];
ce.Instance.registerRenderer(
  "dropdown",
  "logicoperator",
  "sv-logic-operator"
);
const Ks = /* @__PURE__ */ g({
  __name: "LogicOperator",
  props: {
    question: {}
  },
  setup(c) {
    const t = c, e = P(), o = f(() => t.question.dropdownListModel ?? new Pe(t.question));
    Q(t, e, (l) => {
      he(l);
    });
    const n = (l) => {
      var m;
      (m = o.value) == null || m.onClick(l);
    }, r = (l) => {
      var m;
      (m = o.value) == null || m.keyHandler(l);
    };
    return (l, m) => (a(), i("div", {
      class: _(l.question.cssClasses.selectWrapper)
    }, [
      l.question.isReadOnly ? p("", !0) : (a(), i(D, { key: 0 }, [
        d("div", {
          class: _(l.question.getControlClass()),
          onClick: n,
          onKeyup: r,
          id: l.question.inputId,
          required: l.question.isRequired,
          tabindex: l.question.isInputReadOnly ? void 0 : 0,
          disabled: l.question.isInputReadOnly,
          role: o.value.ariaQuestionRole,
          "aria-required": o.value.ariaQuestionRequired,
          "aria-invalid": o.value.ariaQuestionInvalid,
          "aria-errormessage": o.value.ariaQuestionErrorMessage,
          "aria-expanded": o.value.ariaQuestionExpanded,
          "aria-label": o.value.ariaQuestionLabel,
          "aria-labelledby": o.value.ariaQuestionLabelledby,
          "aria-controls": o.value.ariaQuestionControls
        }, [
          d("div", {
            class: _(l.question.cssClasses.controlValue)
          }, [
            l.question.locReadOnlyText ? (a(), b(s(u), {
              key: 0,
              is: "survey-string",
              locString: l.question.locReadOnlyText
            }, null, 8, ["locString"])) : p("", !0)
          ], 2)
        ], 42, zs),
        v(s(u), {
          is: "sv-popup",
          model: l.question.popupModel
        }, null, 8, ["model"])
      ], 64)),
      l.question.isReadOnly ? (a(), i("div", {
        key: 1,
        disabled: "",
        class: _(l.question.getControlClass()),
        id: l.question.inputId
      }, [
        l.question.locReadOnlyText ? (a(), b(s(u), {
          key: 0,
          is: "survey-string",
          locString: l.question.locReadOnlyText
        }, null, 8, ["locString"])) : p("", !0)
      ], 10, Fs)) : p("", !0)
    ], 2));
  }
}), Hs = /* @__PURE__ */ g({
  __name: "EmbeddedSurvey",
  props: {
    question: {}
  },
  setup(c) {
    const t = c, e = P();
    Q(t, e);
    const o = f(() => t.question.embeddedSurvey);
    return R(() => {
      o.value.rootElement = e.value;
    }), (n, r) => (a(), i("div", {
      style: { display: "'contents'" },
      ref_key: "root",
      ref: e
    }, [
      n.question && o.value && o.value.currentPage ? (a(), b(s(u), {
        key: 0,
        is: "sv-page",
        page: o.value.currentPage,
        survey: o.value
      }, null, 8, ["page", "survey"])) : p("", !0)
    ], 512));
  }
}), Us = /* @__PURE__ */ g({
  inheritAttrs: !1,
  __name: "LinkValue",
  props: {
    question: {}
  },
  setup(c) {
    const t = c, e = P(), o = ue.getString("pe.clear");
    return Q(t, e), (n, r) => (a(), i(D, null, [
      v(s(u), {
        is: "svc-action-button",
        text: n.question.linkValueText,
        click: n.question.doLinkClick.bind(n.question),
        selected: n.question.isSelected,
        disabled: !n.question.isClickable,
        classes: n.question.linkSetButtonCssClasses,
        title: n.question.tooltip,
        iconName: n.question.iconName
      }, null, 8, ["text", "click", "selected", "disabled", "classes", "title", "iconName"]),
      !n.question.isReadOnly && n.question.showClear ? (a(), b(s(u), {
        key: 0,
        is: "svc-action-button",
        text: s(o),
        click: n.question.doClearClick.bind(n.question),
        disabled: !1,
        classes: n.question.linkClearButtonCssClasses
      }, null, 8, ["text", "click", "classes"])) : p("", !0)
    ], 64));
  }
}), Qs = {
  key: 1,
  class: "st-content"
}, Os = { class: "svc-flex-column st-strings-wrapper" }, Gs = { class: "svc-flex-row st-strings-header" }, Ws = { class: "svc-flex-row svc-plugin-tab__content st-strings" }, js = /* @__PURE__ */ g({
  __name: "Translation",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", {
      class: _(["svc-creator-tab__content svc-translation-tab", e.model.isEmpty ? "svc-translation-tab--empty" : ""])
    }, [
      e.model.isEmpty ? (a(), b(j, {
        key: 0,
        name: "translation",
        placeholderTitleText: e.model.placeholderTitleText,
        placeholderDescriptionText: e.model.placeholderDescriptionText
      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
      e.model.isEmpty ? p("", !0) : (a(), i("div", Qs, [
        d("div", Os, [
          d("div", Gs, [
            v(s(G), {
              model: e.model.stringsHeaderSurvey
            }, null, 8, ["model"])
          ]),
          d("div", Ws, [
            v(s(G), {
              model: e.model.stringsSurvey
            }, null, 8, ["model"])
          ])
        ])
      ]))
    ], 2));
  }
}), Js = (c, t) => {
  const e = c.__vccOpts || c;
  for (const [o, n] of t)
    e[o] = n;
  return e;
}, Zs = {}, Xs = { class: "sd-translation-line-skeleton" };
function Ys(c, t) {
  return a(), i("div", Xs);
}
const xs = /* @__PURE__ */ Js(Zs, [["render", Ys]]), et = /* @__PURE__ */ g({
  __name: "TranslateFromAction",
  props: {
    item: {}
  },
  setup(c) {
    return (t, e) => (a(), i("div", {
      class: _(t.item.data.containerCss)
    }, [
      d("span", {
        class: _(t.item.data.additionalTitleCss)
      }, T(t.item.data.additionalTitle), 3),
      v(s(u), {
        is: "sv-action-bar-item-dropdown",
        item: t.item
      }, null, 8, ["item"])
    ], 2));
  }
}), ot = {
  key: 1,
  class: "svc-plugin-tab__content"
}, st = {
  key: 2,
  class: "svc-plugin-tab__content-actions svc-test-tab__content-actions"
}, tt = /* @__PURE__ */ g({
  __name: "Theme",
  props: {
    model: {}
  },
  setup(c) {
    const t = c;
    return $(() => t.model), (e, o) => (a(), i("div", {
      class: _(["svc-creator-tab__content svc-test-tab__content", {
        "svc-creator-tab__content--with-toolbar": e.model.isPageToolbarVisible
      }])
    }, [
      e.model.survey.isEmpty ? (a(), b(j, {
        key: 0,
        name: "theme",
        placeholderTitleText: e.model.placeholderTitleText,
        placeholderDescriptionText: e.model.placeholderDescriptionText
      }, null, 8, ["placeholderTitleText", "placeholderDescriptionText"])) : p("", !0),
      e.model.survey.isEmpty ? p("", !0) : (a(), i("div", ot, [
        v(s(u), {
          is: "survey-simulator",
          model: e.model.simulator
        }, null, 8, ["model"]),
        e.model.showResults ? (a(), b(s(u), {
          key: 0,
          is: "survey-results",
          survey: e.model.survey
        }, null, 8, ["survey"])) : p("", !0)
      ])),
      e.model.isPageToolbarVisible ? (a(), i("div", st, [
        v(s(u), {
          is: "sv-action-bar",
          model: e.model.pages
        }, null, 8, ["model"])
      ])) : p("", !0)
    ], 2));
  }
}), nt = ["disabled", "value", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby"], at = ["disabled", "id", "placeholder", "aria-required", "aria-labelledby", "aria-label", "aria-invalid", "aria-describedby", "value"], lt = /* @__PURE__ */ g({
  __name: "Color",
  props: {
    question: {}
  },
  setup(c) {
    return Q(c, P()), (e, o) => (a(), i("div", {
      class: _(e.question.cssClasses.root),
      onKeydown: o[5] || (o[5] = //@ts-ignore
      (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
    }, [
      d("label", {
        class: _(e.question.getSwatchCss()),
        style: A(e.question.getSwatchStyle())
      }, [
        v(s(u), {
          is: "sv-svg-icon",
          iconName: e.question.cssClasses.swatchIcon,
          size: "auto"
        }, null, 8, ["iconName"]),
        d("input", {
          type: "color",
          disabled: e.question.isInputReadOnly,
          class: _(e.question.cssClasses.colorInput),
          value: e.question.renderedColorValue,
          tabindex: "-1",
          onChange: o[0] || (o[0] = //@ts-ignore
          (...n) => e.question.onColorInputChange && e.question.onColorInputChange(...n)),
          "aria-required": e.question.a11y_input_ariaRequired,
          "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
          "aria-label": e.question.a11y_input_ariaLabel,
          "aria-invalid": e.question.a11y_input_ariaInvalid,
          "aria-describedby": e.question.a11y_input_ariaDescribedBy
        }, null, 42, nt)
      ], 6),
      d("input", {
        autocomplete: "off",
        disabled: e.question.isInputReadOnly,
        id: e.question.inputId,
        placeholder: e.question.renderedPlaceholder,
        "aria-required": e.question.a11y_input_ariaRequired,
        "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
        "aria-label": e.question.a11y_input_ariaLabel,
        "aria-invalid": e.question.a11y_input_ariaInvalid,
        "aria-describedby": e.question.a11y_input_ariaDescribedBy,
        onChange: o[1] || (o[1] = //@ts-ignore
        (...n) => e.question.onChange && e.question.onChange(...n)),
        onKeyup: o[2] || (o[2] = //@ts-ignore
        (...n) => e.question.onKeyUp && e.question.onKeyUp(...n)),
        onBlur: o[3] || (o[3] = //@ts-ignore
        (...n) => e.question.onBlur && e.question.onBlur(...n)),
        onBeforeinput: o[4] || (o[4] = //@ts-ignore
        (...n) => e.question.onBeforeInput && e.question.onBeforeInput(...n)),
        value: e.question.renderedValue,
        class: _(e.question.cssClasses.control)
      }, null, 42, at),
      e.question.showDropdownAction ? (a(), i(D, { key: 0 }, [
        d("div", {
          "aria-hidden": "true",
          class: _(e.question.cssClasses.choicesButtonWrapper)
        }, [
          v(s(u), {
            is: "sv-action-bar-item",
            item: e.question.dropdownAction
          }, null, 8, ["item"])
        ], 2),
        v(s(u), {
          is: "sv-popup",
          model: e.question.dropdownAction.popupModel
        }, null, 8, ["model"])
      ], 64)) : p("", !0)
    ], 34));
  }
}), it = /* @__PURE__ */ g({
  __name: "ColorItem",
  props: {
    model: {},
    item: {}
  },
  setup(c) {
    const t = c;
    $(() => t.item);
    const e = () => ({ backgroundColor: t.item.value });
    return (o, n) => (a(), i(D, null, [
      d("span", {
        class: "spg-color-editor__color-swatch",
        style: A(e())
      }, null, 4),
      v(s(u), {
        is: "survey-string",
        locString: o.item.locTitle
      }, null, 8, ["locString"])
    ], 64));
  }
}), rt = ["disabled", "value", "placeholder"], dt = ["disabled", "id", "aria-required", "aria-label", "aria-invalid", "aria-describedby", "title", "accept"], ut = ["title", "disabled"], ct = ["for", "aria-label"], pt = /* @__PURE__ */ g({
  __name: "File",
  props: {
    question: {}
  },
  setup(c) {
    const t = P();
    return Q(c, t), (o, n) => (a(), i("div", {
      class: _(o.question.cssClasses.root),
      onDragenter: n[5] || (n[5] = //@ts-ignore
      (...r) => o.question.onDragEnter && o.question.onDragEnter(...r)),
      onDragover: n[6] || (n[6] = //@ts-ignore
      (...r) => o.question.onDragOver && o.question.onDragOver(...r)),
      onDrop: n[7] || (n[7] = //@ts-ignore
      (...r) => o.question.onDrop && o.question.onDrop(...r)),
      onDragleave: n[8] || (n[8] = //@ts-ignore
      (...r) => o.question.onDragLeave && o.question.onDragLeave(...r)),
      onKeydown: n[9] || (n[9] = //@ts-ignore
      (...r) => o.question.onKeyDown && o.question.onKeyDown(...r)),
      ref_key: "root",
      ref: t
    }, [
      d("input", {
        type: "text",
        disabled: o.question.isTextInputReadOnly,
        class: _(o.question.cssClasses.control),
        value: o.question.renderedValue || "",
        onChange: n[0] || (n[0] = //@ts-ignore
        (...r) => o.question.onInputChange && o.question.onInputChange(...r)),
        onBlur: n[1] || (n[1] = //@ts-ignore
        (...r) => o.question.onInputBlur && o.question.onInputBlur(...r)),
        placeholder: o.question.renderedPlaceholder
      }, null, 42, rt),
      d("input", {
        type: "file",
        disabled: o.question.isInputReadOnly,
        class: _(o.question.cssClasses.fileInput),
        id: o.question.inputId,
        "aria-required": o.question.ariaRequired,
        "aria-label": o.question.ariaLabel,
        "aria-invalid": o.question.ariaInvalid,
        "aria-describedby": o.question.ariaDescribedBy,
        multiple: !1,
        title: o.question.inputTitle,
        tabindex: -1,
        accept: o.question.acceptedTypes,
        onChange: n[2] || (n[2] = //@ts-ignore
        (...r) => o.question.onFileInputChange && o.question.onFileInputChange(...r))
      }, null, 42, dt),
      d("div", {
        class: _(o.question.cssClasses.buttonsContainer)
      }, [
        h((a(), i("button", {
          title: o.question.clearButtonCaption,
          class: _(o.question.cssClasses.clearButton),
          disabled: o.question.getIsClearButtonDisabled(),
          onClick: n[3] || (n[3] = //@ts-ignore
          (...r) => o.question.doClean && o.question.doClean(...r))
        }, [
          v(s(u), {
            is: "sv-svg-icon",
            iconName: o.question.cssClasses.clearButtonIcon,
            size: "auto"
          }, null, 8, ["iconName"])
        ], 10, ut)), [
          [s(M)]
        ]),
        h((a(), i("label", {
          class: _(o.question.getChooseButtonCss()),
          for: o.question.inputId,
          "aria-label": o.question.chooseButtonCaption,
          onClick: n[4] || (n[4] = //@ts-ignore
          (...r) => o.question.chooseFiles && o.question.chooseFiles(...r))
        }, [
          v(s(u), {
            is: "sv-svg-icon",
            iconName: o.question.cssClasses.chooseButtonIcon,
            size: "auto",
            title: o.question.chooseButtonCaption
          }, null, 8, ["iconName", "title"])
        ], 10, ct)), [
          [s(M)]
        ])
      ], 2)
    ], 34));
  }
}), vt = ["disabled", "id", "placeholder", "aria-required", "aria-label", "aria-labelledby", "aria-describedby", "aria-invalid", "aria-errormessage", "value"], mt = ["disabled"], _t = ["disabled"], gt = /* @__PURE__ */ g({
  __name: "SpinEditor",
  props: {
    question: {}
  },
  setup(c) {
    return Q(c, P()), (e, o) => (a(), i("div", {
      class: _(e.question.cssClasses.root),
      onKeydown: o[18] || (o[18] = //@ts-ignore
      (...n) => e.question.onKeyDown && e.question.onKeyDown(...n))
    }, [
      d("input", {
        role: "spinbutton",
        autocomplete: "off",
        disabled: e.question.isInputReadOnly,
        id: e.question.inputId,
        placeholder: e.question.renderedPlaceholder,
        "aria-required": e.question.a11y_input_ariaRequired,
        "aria-label": e.question.a11y_input_ariaLabel,
        "aria-labelledby": e.question.a11y_input_ariaLabelledBy,
        "aria-describedby": e.question.a11y_input_ariaDescribedBy,