survey-creator-react 1.12.26 → 1.12.28

package/fesm/survey-creator-react.js

@@ -0,0 +1,2850 @@
+/*!
+ * SurveyJS Creator React v2.0.0
+ * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
+ * Github: https://github.com/surveyjs/survey-creator
+ * License: https://surveyjs.io/Licenses#SurveyCreator
+ */
+
+import * as React from 'react';
+import { createElement, Fragment } from 'react';
+import * as ReactDOM from 'react-dom';
+import { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, ReactQuestionFactory, SurveyLocStringViewer, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, Popup, LogoImage, SurveyQuestionElementBase, SurveyQuestion, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionButtonGroup, SurveyQuestionText } from 'survey-react-ui';
+import { assign, SurveyCreatorModel, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, ScrollViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
+export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
+import { ResponsivityManager, CssClassBuilder, settings, VerticalResponsivityManager, RendererFactory, unwrap, checkLibraryVersion } from 'survey-core';
+
+class TabbedMenuComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    renderElement() {
+        const items = this.model.renderedActions.map((item) => React.createElement(TabbedMenuItemWrapper, { item: item, key: item.renderedId }));
+        return (React.createElement("div", { ref: this.rootRef, className: "svc-tabbed-menu" }, items));
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        const container = this.rootRef.current;
+        if (!container)
+            return;
+        this.manager = new ResponsivityManager(container, this.model);
+    }
+    componentWillUnmount() {
+        this.manager && (this.manager.dispose());
+        super.componentWillUnmount();
+    }
+}
+class TabbedMenuItemWrapper extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.ref = React.createRef();
+    }
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    renderElement() {
+        let css = "svc-tabbed-menu-item-container";
+        if (this.item.css) {
+            css += " " + this.item.css;
+        }
+        css += (!this.item.isVisible ? " sv-action--hidden" : "");
+        const component = ReactElementFactory.Instance.createElement(this.item.component || "svc-tabbed-menu-item", { item: this.item });
+        return (React.createElement("span", { key: this.item.id, className: css, ref: this.ref },
+            React.createElement("div", { className: "sv-action__content" }, component)));
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.item.updateModeCallback = (mode, callback) => {
+            queueMicrotask(() => {
+                if (ReactDOM["flushSync"]) {
+                    ReactDOM["flushSync"](() => {
+                        this.item.mode = mode;
+                    });
+                }
+                else {
+                    this.item.mode = mode;
+                }
+                queueMicrotask(() => {
+                    callback(mode, this.ref.current);
+                });
+            });
+        };
+        this.item.afterRender();
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.item.updateModeCallback = undefined;
+    }
+}
+class TabbedMenuItemComponent extends SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    render() {
+        const item = this.item;
+        return (attachKey2click(React.createElement("div", { className: item.getRootCss(), onClick: () => item.action(item) },
+            item.hasTitle ? React.createElement("span", { className: item.getTitleCss() }, item.title) : null,
+            item.hasIcon ? React.createElement(SvgIcon, { iconName: item.iconName, className: item.getIconCss(), size: "auto", title: item.tooltip || item.title }) : null)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item", (props) => {
+    return React.createElement(TabbedMenuItemComponent, props);
+});
+
+class SurveyCreatorComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.rootNode = React.createRef();
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    getStateElement() {
+        return this.creator;
+    }
+    get style() {
+        return this.props.style;
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        if (this.creator !== prevProps.creator) {
+            if (prevProps.creator) {
+                prevProps.creator.unsubscribeRootElement();
+            }
+            if (this.creator && this.rootNode.current) {
+                this.creator.setRootElement(this.rootNode.current);
+            }
+        }
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.creator.setRootElement(this.rootNode.current);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.creator.unsubscribeRootElement();
+    }
+    renderElement() {
+        const creator = this.props.creator;
+        if (creator.isCreatorDisposed)
+            return null;
+        const areaClassName = "svc-full-container svc-creator__area svc-flex-column" + (this.props.creator.haveCommercialLicense ? "" : " svc-creator__area--with-banner");
+        const contentWrapperClassName = "svc-creator__content-wrapper svc-flex-row" + (this.props.creator.isMobileView ? " svc-creator__content-wrapper--footer-toolbar" : "");
+        const fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation);
+        const creatorStyles = {};
+        assign(creatorStyles, this.style, this.props.creator.themeVariables);
+        let licenseBanner = null;
+        if (!this.props.creator.haveCommercialLicense) {
+            const htmlValue = { __html: this.props.creator.licenseText };
+            licenseBanner = (React.createElement("div", { className: "svc-creator__banner" },
+                React.createElement("span", { className: "svc-creator__non-commercial-text", dangerouslySetInnerHTML: htmlValue })));
+        }
+        //AM: width unrecognized by react
+        return (React.createElement("div", { className: this.creator.getRootCss(), ref: this.rootNode, style: creatorStyles },
+            React.createElement(SvgBundleComponent, null),
+            React.createElement(PopupModal, null),
+            React.createElement("div", { className: areaClassName },
+                React.createElement("div", { className: fullContainerClassName },
+                    React.createElement("div", { className: "svc-flex-column svc-flex-row__element svc-flex-row__element--growing" },
+                        React.createElement("div", { className: "svc-top-bar" },
+                            (creator.showTabs ?
+                                React.createElement("div", { className: "svc-tabbed-menu-wrapper" },
+                                    React.createElement(TabbedMenuComponent, { model: creator.tabbedMenu })) : null),
+                            (creator.showToolbar ?
+                                React.createElement("div", { className: "svc-toolbar-wrapper" },
+                                    React.createElement(SurveyActionBar, { model: creator.toolbar }))
+                                : null)),
+                        React.createElement("div", { className: contentWrapperClassName },
+                            React.createElement("div", { className: "svc-creator__content-holder svc-flex-column" }, this.renderActiveTab())),
+                        React.createElement("div", { className: "svc-footer-bar" }, (creator.isMobileView ?
+                            React.createElement("div", { className: "svc-toolbar-wrapper" },
+                                React.createElement(SurveyActionBar, { model: creator.footerToolbar }))
+                            : null))),
+                    this.renderSidebar()),
+                licenseBanner,
+                React.createElement(NotifierComponent, { notifier: creator.notifier }))));
+    }
+    renderActiveTab() {
+        const creator = this.props.creator;
+        for (var i = 0; i < creator.tabs.length; i++) {
+            if (creator.tabs[i].id === creator.activeTab) {
+                return this.renderCreatorTab(creator.tabs[i]);
+            }
+        }
+        return null;
+    }
+    renderCreatorTab(tab) {
+        if (tab.visible === false) {
+            return null;
+        }
+        const creator = this.props.creator;
+        const component = !!tab.renderTab
+            ? tab.renderTab()
+            : ReactElementFactory.Instance.createElement(tab.componentContent, {
+                creator: creator,
+                survey: creator.survey,
+                data: tab.data.model
+            });
+        const className = "svc-creator-tab" + (creator.toolboxLocation == "right" ? " svc-creator__toolbox--right" : "");
+        return (React.createElement("div", { key: tab.id, id: "scrollableDiv-" + tab.id, className: className }, component));
+    }
+    renderSidebar() {
+        if (!!this.creator.sidebar) {
+            return ReactElementFactory.Instance.createElement("svc-side-bar", { model: this.creator.sidebar });
+        }
+        else {
+            return null;
+        }
+    }
+}
+class SurveyCreator extends SurveyCreatorModel {
+    constructor(options = {}, options2) {
+        super(options, options2);
+    }
+    render(target) {
+        let node = target;
+        if (typeof target === "string") {
+            node = document.getElementById(target);
+        }
+        /* eslint-disable react/no-deprecated */
+        ReactDOM.unmountComponentAtNode(node);
+        ReactDOM.render(React.createElement(React.StrictMode, null,
+            React.createElement(SurveyCreatorComponent, { creator: this })), node);
+        /* eslint-enable react/no-deprecated */
+    }
+    //ISurveyCreator
+    createQuestionElement(question) {
+        return ReactQuestionFactory.Instance.createQuestion(question.isDefaultRendering()
+            ? question.getTemplate()
+            : question.getComponentName(), {
+            question: question,
+            isDisplayMode: question.isReadOnly,
+            creator: this
+        });
+    }
+    renderError(key, error, cssClasses) {
+        return (React.createElement("div", { key: key },
+            React.createElement("span", { className: cssClasses.error.icon, "aria-hidden": "true" }),
+            React.createElement("span", { className: cssClasses.error.item },
+                React.createElement(SurveyLocStringViewer, { locStr: error.locText }))));
+    }
+    questionTitleLocation() {
+        return this.survey.questionTitleLocation;
+    }
+    questionErrorLocation() {
+        return this.survey.questionErrorLocation;
+    }
+}
+ReactElementFactory.Instance.registerElement("survey-widget", (props) => {
+    return React.createElement(Survey, props);
+});
+
+class CreatorModelElement extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.createModel(props);
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const result = super.shouldComponentUpdate(nextProps, nextState);
+        if (result) {
+            if (this.needUpdateModel(nextProps)) {
+                this.createModel(nextProps);
+            }
+        }
+        return result;
+    }
+    createModel(props) { }
+    needUpdateModel(nextProps) {
+        const names = this.getUpdatedModelProps();
+        if (!Array.isArray(names))
+            return true;
+        for (var i = 0; i < names.length; i++) {
+            const key = names[i];
+            if (this.props[key] !== nextProps[key])
+                return true;
+        }
+        return false;
+    }
+    getUpdatedModelProps() {
+        return undefined;
+    }
+}
+
+class RowWrapper extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+    }
+    createModel(props) {
+        if (!!this.model) {
+            this.model.dispose();
+        }
+        this.model = new RowViewModel(props.componentData.creator, props.row, null);
+    }
+    getUpdatedModelProps() {
+        return ["row", "componentData"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.subscribeElementChanges();
+    }
+    componentWillUnmount() {
+        this.model.unsubscribeElementChanges();
+        super.componentWillUnmount();
+    }
+    render() {
+        return (React.createElement("div", { key: "svc-row-" + this.props.row.id, className: this.model.cssClasses },
+            React.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--top" }),
+            React.createElement("div", { className: "svc-row__drop-indicator svc-row__drop-indicator--bottom" }),
+            this.props.element));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-row", (props) => {
+    return React.createElement(RowWrapper, props);
+});
+
+class ReactMouseEvent {
+    constructor(event) {
+        this.event = event;
+    }
+    stopPropagation() {
+        this.event.stopPropagation();
+        //this.event.nativeEvent.stopPropagation();
+        //this.event.nativeEvent.stopImmediatePropagation();
+    }
+    preventDefault() {
+        this.event.preventDefault();
+        //this.event.nativeEvent.preventDefault();
+    }
+    get cancelBubble() {
+        //return this.event.cancelBubble;
+        return false;
+    }
+    set cancelBubble(value) {
+        //this.event.cancelBubble = value;
+    }
+    get target() {
+        return this.event.target;
+    }
+    get currentTarget() {
+        return this.event.currentTarget;
+    }
+    get clientX() {
+        return this.event.clientX;
+    }
+    get clientY() {
+        return this.event.clientY;
+    }
+    get offsetX() {
+        return this.event.nativeEvent.offsetX;
+    }
+    get offsetY() {
+        return this.event.nativeEvent.offsetY;
+    }
+}
+class ReactDragEvent extends ReactMouseEvent {
+    constructor(event) {
+        super(event);
+        this.event = event;
+    }
+    get dataTransfer() {
+        return this.event.dataTransfer;
+    }
+}
+
+class QuestionAdornerComponent extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        if (this.model) {
+            this.model.attachToUI(props.question, this.rootRef.current);
+        }
+        else {
+            this.modelValue = this.createQuestionViewModel(props);
+        }
+    }
+    createQuestionViewModel(props) {
+        return new QuestionAdornerViewModel(props.componentData, props.question, null);
+    }
+    getUpdatedModelProps() {
+        return ["question", "componentData"];
+    }
+    get model() {
+        return this.modelValue;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const allowInteractions = this.model.element
+            .isInteractiveDesignElement;
+        const titleForCollapsedState = this.renderQuestionTitle();
+        const content = this.renderContent(allowInteractions);
+        return (React.createElement("div", { ref: this.rootRef, "data-sv-drop-target-survey-element": this.model.element.name || null, className: this.model.rootCss(), onDoubleClick: e => { allowInteractions && this.model.dblclick(e.nativeEvent); e.stopPropagation(); }, onMouseLeave: e => allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget), onMouseOver: e => allowInteractions && this.model.hover(e.nativeEvent, e.currentTarget) },
+            titleForCollapsedState,
+            content));
+    }
+    disableTabStop() {
+        return true;
+    }
+    renderContent(allowInteractions) {
+        var content = this.model.needToRenderContent ? this.renderElementContent() : null;
+        //if (!allowInteractions) return <>{content}{this.renderFooter()}</>;
+        return attachKey2click(React.createElement("div", { className: this.model.css(), onClick: (e) => this.model.select(this.model, new ReactMouseEvent(e)) },
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--left" }),
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--right" }),
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
+            allowInteractions ? this.renderHeader() : null,
+            content,
+            this.model.needToRenderContent ? this.renderFooter() : null), undefined, { disableTabStop: this.disableTabStop() });
+    }
+    renderHeader() {
+        return ReactElementFactory.Instance.createElement("svc-question-header", { model: this.model });
+    }
+    renderFooter() {
+        const allowInteractions = this.model.element
+            .isInteractiveDesignElement;
+        return allowInteractions ? ReactElementFactory.Instance.createElement("svc-question-footer", { className: "svc-question__content-actions", model: this.model }) : null;
+    }
+    renderCarryForwardBanner() {
+        if (!this.model.isBannerShowing)
+            return null;
+        return ReactElementFactory.Instance.createElement("svc-question-banner", this.model.createBannerParams());
+    }
+    renderQuestionTitle() {
+        if (!this.model.showHiddenTitle)
+            return null;
+        const element = this.model.element;
+        return (React.createElement("div", { ref: node => node && (!this.model.renderedCollapsed ?
+                node.setAttribute("inert", "") : node.removeAttribute("inert")), className: this.model.cssCollapsedHiddenHeader }, (element.hasTitle ?
+            React.createElement(TitleElement, { element: element }) :
+            React.createElement("div", { className: this.model.cssCollapsedHiddenTitle },
+                React.createElement("span", { className: "svc-fake-title" }, element.name)))));
+    }
+    renderElementContent() {
+        return (React.createElement(React.Fragment, null,
+            this.props.element,
+            this.renderElementPlaceholder(),
+            this.renderCarryForwardBanner()));
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.attachToUI(this.props.question, this.rootRef.current);
+    }
+    renderElementPlaceholder() {
+        if (!this.model.isEmptyElement) {
+            return null;
+        }
+        return (React.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
+            React.createElement("div", { className: "svc-panel__placeholder_frame" },
+                React.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.model.detachFromUI();
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question", (props) => {
+    return React.createElement(QuestionAdornerComponent, props);
+});
+
+class QuestionWrapperHeader extends React.Component {
+    render() {
+        if (!this.props.model.allowDragging)
+            return null;
+        return (React.createElement("div", { className: "svc-question__drag-area", onPointerDown: (event) => this.props.model.onPointerDown(event) },
+            React.createElement(SvgIcon, { className: "svc-question__drag-element", size: "auto", iconName: "icon-drag-area-indicator_24x16" }),
+            React.createElement("div", { className: "svc-question__top-actions" },
+                React.createElement(SurveyActionBar, { model: this.props.model.topActionContainer, handleClick: false }))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question-header", (props) => {
+    return React.createElement(QuestionWrapperHeader, props);
+});
+
+class QuestionWrapperFooter extends React.Component {
+    render() {
+        return (React.createElement("div", { className: this.props.className, onFocus: (e) => this.props.model.select(this.props.model, new ReactMouseEvent(e)) },
+            React.createElement(SurveyActionBar, { model: this.props.model.actionContainer, handleClick: false })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question-footer", (props) => {
+    return React.createElement(QuestionWrapperFooter, props);
+});
+
+class ActionButton extends SurveyElementBase {
+    renderElement() {
+        const classes = new CssClassBuilder()
+            .append(this.props.classes)
+            .append("svc-action-button")
+            .append("svc-action-button--selected", !!this.props.selected)
+            .append("svc-action-button--disabled", !!this.props.disabled)
+            .toString();
+        if (this.props.iconName) {
+            return this.renderIcon(classes);
+        }
+        return this.renderButtonText(classes);
+    }
+    renderButtonText(classes) {
+        if (this.props.disabled) {
+            return React.createElement("span", { className: classes }, this.props.text);
+        }
+        return (React.createElement(React.Fragment, null, attachKey2click(React.createElement("span", { role: "button", className: classes, onClick: (e) => {
+                if (!this.props.allowBubble) {
+                    e.stopPropagation();
+                }
+                this.props.click();
+            }, title: this.props.title }, this.props.text))));
+    }
+    renderIcon(classes) {
+        classes += " svc-action-button--icon";
+        if (this.props.disabled) {
+            return React.createElement("span", { className: classes },
+                React.createElement(SvgIcon, { size: "auto", iconName: this.props.iconName }));
+        }
+        return (React.createElement(React.Fragment, null, attachKey2click(React.createElement("span", { className: classes, onClick: (e) => {
+                if (!this.props.allowBubble) {
+                    e.stopPropagation();
+                }
+                this.props.click();
+            }, title: this.props.title },
+            React.createElement(SvgIcon, { size: "auto", iconName: this.props.iconName })))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-action-button", (props) => { return React.createElement(ActionButton, props); });
+
+class QuestionBanner extends React.Component {
+    render() {
+        return (React.createElement("div", { className: "svc-carry-forward-panel-wrapper" },
+            React.createElement("div", { className: "svc-carry-forward-panel" },
+                React.createElement("span", null,
+                    this.props.text,
+                    " "),
+                React.createElement("span", { className: "svc-carry-forward-panel__link" },
+                    React.createElement(ActionButton, { click: () => this.props.onClick(), text: this.props.actionText })))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question-banner", (props) => {
+    return React.createElement(QuestionBanner, props);
+});
+
+class QuestionDropdownAdornerComponent extends QuestionAdornerComponent {
+    constructor(props) {
+        super(props);
+    }
+    createQuestionViewModel(props) {
+        return new QuestionDropdownAdornerViewModel(props.componentData, props.question, null);
+    }
+    get dropdownModel() {
+        return this.model;
+    }
+    get question() {
+        return this.dropdownModel.question;
+    }
+    renderElementPlaceholder() {
+        const textStyle = this.question.textStyle;
+        return (React.createElement("div", { className: "svc-question__dropdown-choices--wrapper" },
+            React.createElement("div", null,
+                React.createElement("div", { className: "svc-question__dropdown-choices" }, (this.dropdownModel.getRenderedItems() || []).map((item, index) => (React.createElement("div", { className: this.dropdownModel.getChoiceCss(), key: `editable_choice_${index}` }, ReactSurveyElementsWrapper.wrapItemValue(this.question.survey, ReactElementFactory.Instance.createElement(this.dropdownModel.itemComponent, {
+                    key: item.value,
+                    question: this.question,
+                    cssClasses: this.question.cssClasses,
+                    isDisplayMode: true,
+                    item: item,
+                    textStyle: textStyle,
+                    index: index,
+                    isChecked: this.question.value === item.value
+                }), this.question, item))))),
+                this.dropdownModel.needToCollapse ?
+                    React.createElement(ActionButton, { click: this.dropdownModel.switchCollapse, text: this.dropdownModel.getButtonText(), allowBubble: true }) :
+                    null)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-dropdown-question", (props) => {
+    return React.createElement(QuestionDropdownAdornerComponent, props);
+});
+
+class QuestionImageAdornerComponent extends QuestionAdornerComponent {
+    createQuestionViewModel(props) {
+        return new QuestionImageAdornerViewModel(props.componentData, props.question, null);
+    }
+    get imageModel() {
+        return this.model;
+    }
+    renderHeader() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.imageModel.acceptedTypes, className: "svc-choose-file-input", style: {
+                    position: "absolute",
+                    opacity: 0,
+                    width: "1px",
+                    height: "1px",
+                    overflow: "hidden"
+                } }),
+            super.renderHeader()));
+    }
+    renderLoadingPlaceholder() {
+        return (React.createElement("div", { className: "svc-image-question__loading-placeholder" },
+            React.createElement("div", { className: "svc-image-question__loading" },
+                React.createElement(LoadingIndicatorComponent, null))));
+    }
+    renderChooseButton() {
+        return (React.createElement("div", { className: "svc-image-question-controls" }, this.model.allowEdit ? attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.imageModel.chooseFile(this.imageModel) },
+            React.createElement(SvgIcon, { size: "auto", iconName: "icon-choosefile" }))) : null));
+    }
+    renderElementPlaceholder() {
+        return this.imageModel.isUploading ? this.renderLoadingPlaceholder() : this.renderChooseButton();
+    }
+    getStateElements() {
+        return [this.model, this.imageModel.filePresentationModel];
+    }
+    renderElementContent() {
+        if (this.imageModel.isEmptyImageLink) {
+            const fileQuestion = ReactQuestionFactory.Instance.createQuestion("file", {
+                creator: this.imageModel.question.survey,
+                isDisplayMode: false,
+                question: this.imageModel.filePresentationModel
+            });
+            return (React.createElement(React.Fragment, null, fileQuestion));
+        }
+        else {
+            return (React.createElement(React.Fragment, null,
+                this.props.element,
+                this.renderElementPlaceholder()));
+        }
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-image-question", (props) => {
+    return React.createElement(QuestionImageAdornerComponent, props);
+});
+
+class QuestionRatingAdornerComponent extends CreatorModelElement {
+    createModel(props) {
+        this.modelValue = this.createQuestionViewModel(props);
+    }
+    createQuestionViewModel(props) {
+        return new QuestionRatingAdornerViewModel(props.componentData, props.question, null);
+    }
+    getUpdatedModelProps() {
+        return ["question", "componentData"];
+    }
+    get ratingModel() {
+        return this.model;
+    }
+    get model() {
+        return this.modelValue;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const model = this.ratingModel;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "svc-rating-question-content" },
+                React.createElement("div", { className: model.controlsClassNames },
+                    model.allowRemove ? attachKey2click(React.createElement("span", { className: model.removeClassNames, "aria-label": model.removeTooltip, onClick: () => model.removeItem(model) },
+                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: model.removeTooltip }))) : null,
+                    model.allowAdd ? attachKey2click(React.createElement("span", { className: model.addClassNames, "aria-label": model.addTooltip, onClick: () => model.addItem(model) },
+                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: model.addTooltip }))) : null),
+                this.props.element)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-rating-question", (props) => {
+    return React.createElement(QuestionRatingAdornerComponent, props);
+});
+ReactElementFactory.Instance.registerElement("svc-rating-question-content", (props) => {
+    return React.createElement(QuestionRatingAdornerComponent, props);
+});
+
+class QuestionWidgetAdornerComponent extends QuestionAdornerComponent {
+    createQuestionViewModel(props) {
+        return new QuestionAdornerViewModel(props.componentData, props.question, null);
+    }
+    get widgetModel() {
+        return this.model;
+    }
+    renderElementContent() {
+        return (React.createElement("div", { className: "svc-widget__content" }, this.props.element));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-widget-question", (props) => {
+    return React.createElement(QuestionWidgetAdornerComponent, props);
+});
+
+class CellQuestionAdornerComponent extends CreatorModelElement {
+    createModel(props) {
+        this.model = new QuestionAdornerViewModel(props.componentData, props.question, null);
+    }
+    getStateElement() {
+        return this.model;
+    }
+    getUpdatedModelProps() {
+        return ["question", "componentData"];
+    }
+    render() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
+                React.createElement("div", { className: " svc-question__content--in-popup svc-question__content" }, this.props.element))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-cell-question", (props) => {
+    return React.createElement(CellQuestionAdornerComponent, props);
+});
+
+class CellQuestionDropdownAdornerComponent extends CreatorModelElement {
+    createModel(props) {
+        this.model = new QuestionAdornerViewModel(props.componentData, props.question, null);
+    }
+    getUpdatedModelProps() {
+        return ["question", "componentData"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    render() {
+        const question = this.props.question;
+        const textStyle = this.props.question.textStyle;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { "data-sv-drop-target-survey-element": this.model.element.name, className: "svc-question__adorner" },
+                React.createElement("div", { className: " svc-question__content--in-popup svc-question__content" },
+                    this.props.element,
+                    React.createElement("div", { className: "svc-question__dropdown-choices" }, question.visibleChoices.map((item, index) => (React.createElement("div", { className: "svc-question__dropdown-choice", key: `editable_choice_${index}` }, ReactSurveyElementsWrapper.wrapItemValue(question.survey, ReactElementFactory.Instance.createElement("survey-radiogroup-item", {
+                        question: question,
+                        cssClasses: question.cssClasses,
+                        isDisplayMode: true,
+                        item: item,
+                        textStyle: textStyle,
+                        index: index,
+                        isChecked: question.value === item.value
+                    }), question, item)))))))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-cell-dropdown-question", (props) => {
+    return React.createElement(CellQuestionDropdownAdornerComponent, props);
+});
+
+class CreatorSurveyPageComponent extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        if (this.model) {
+            this.model.attachToUI(props.page, this.rootRef.current);
+        }
+        this.model = new PageAdorner(props.creator, props.page);
+        this.model.isGhost = this.props.isGhost;
+    }
+    shouldComponentUpdate(nextProps, nextState) {
+        const res = super.shouldComponentUpdate(nextProps, nextState);
+        if (this.model) {
+            this.model.isGhost = this.props.isGhost;
+        }
+        return res;
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+    }
+    getUpdatedModelProps() {
+        return ["creator", "page"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.attachToUI(this.props.page, this.rootRef.current);
+        this.model.isGhost = this.props.isGhost;
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.model.detachFromUI();
+    }
+    canRender() {
+        return super.canRender();
+    }
+    renderElement() {
+        if (!this.props.page)
+            return null;
+        return (attachKey2click(React.createElement("div", { ref: this.rootRef, id: this.props.page.id, "data-sv-drop-target-survey-page": this.model.dropTargetName, className: "svc-page__content " + this.model.css, onClick: (e) => {
+                return this.model.select(this.model, new ReactMouseEvent(e));
+            }, onDoubleClick: e => this.model.dblclick(e.nativeEvent), onMouseLeave: (e) => this.model.hover(e.nativeEvent, e.currentTarget), onMouseOver: (e) => this.model.hover(e.nativeEvent, e.currentTarget) },
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--top" }),
+            React.createElement("div", { className: "svc-question__drop-indicator svc-question__drop-indicator--bottom" }),
+            this.renderHeader(),
+            this.renderContent(),
+            this.renderPlaceholder(),
+            this.renderFooter())));
+    }
+    renderPlaceholder() {
+        if (!this.model.showPlaceholder)
+            return null;
+        return (React.createElement("div", { className: "svc-page__placeholder_frame" },
+            React.createElement("div", { className: "svc-panel__placeholder_frame" },
+                React.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText))));
+    }
+    renderContent() {
+        return (React.createElement(SurveyPage, { page: this.props.page, survey: this.props.survey, creator: this.props.creator, css: this.model.css }));
+    }
+    renderHeader() {
+        const actions = (React.createElement("div", { className: "svc-page__content-actions" },
+            React.createElement(SurveyActionBar, { model: this.model.actionContainer }),
+            (this.model.topActionContainer.hasActions ? React.createElement(SurveyActionBar, { model: this.model.topActionContainer }) : null)));
+        if (this.model.isGhost || !this.model.allowDragging) {
+            return actions;
+        }
+        return (React.createElement("div", { className: "svc-question__drag-area", onPointerDown: (event) => this.model.onPointerDown(event) },
+            React.createElement(SvgIcon, { className: "svc-question__drag-element", size: "auto", iconName: "icon-drag-area-indicator_24x16" }),
+            actions));
+    }
+    renderFooter() {
+        return React.createElement(SurveyActionBar, { model: this.model.footerActionsBar });
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-page", (props) => {
+    return React.createElement(CreatorSurveyPageComponent, props);
+});
+
+class AddQuestionButtonComponent extends SurveyElementBase {
+    get model() {
+        return this.props.item.data;
+    }
+    renderTypeSelector() {
+        const questionTypeSelectorModel = this.model.questionTypeSelectorModel;
+        return attachKey2click(React.createElement("button", { type: "button", onClick: (e) => {
+                e.stopPropagation();
+                questionTypeSelectorModel.action();
+            }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText },
+            React.createElement("span", { className: "svc-element__question-type-selector-icon" },
+                React.createElement(SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: "auto", title: this.model.addNewQuestionText })),
+            this.props.renderPopup === undefined || this.props.renderPopup ?
+                React.createElement(Popup, { model: questionTypeSelectorModel.popupModel })
+                : null));
+    }
+    renderElement() {
+        const addButtonClass = this.props.buttonClass || "svc-btn";
+        return React.createElement(React.Fragment, null,
+            attachKey2click(React.createElement("div", { className: "svc-element__add-new-question " + addButtonClass, onClick: (e) => {
+                    e.stopPropagation();
+                    this.model.addNewQuestion(this.model, new ReactMouseEvent(e));
+                }, onMouseOver: (e) => this.model.hoverStopper && this.model.hoverStopper(e.nativeEvent, e.currentTarget) },
+                React.createElement(SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
+                React.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText),
+                this.props.renderPopup !== false ? this.renderTypeSelector() : null)),
+            this.props.renderPopup === false ? this.renderTypeSelector() : null);
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", (props) => {
+    return React.createElement(AddQuestionButtonComponent, props);
+});
+
+class PanelAdornerComponent extends QuestionAdornerComponent {
+    renderElementPlaceholder() {
+        if (!this.model.isEmptyElement) {
+            return null;
+        }
+        return (React.createElement("div", { className: "svc-panel__placeholder_frame-wrapper" },
+            React.createElement("div", { className: "svc-panel__placeholder_frame" },
+                React.createElement("div", { className: "svc-panel__placeholder" }, this.model.placeholderText),
+                this.model.showAddQuestionButton ? attachKey2click(React.createElement("div", { className: "svc-panel__add-new-question svc-action-button", onClick: (e) => {
+                        e.stopPropagation();
+                        this.model.addNewQuestion();
+                    } },
+                    React.createElement(SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
+                    React.createElement("span", { className: "svc-add-new-item-button__text" }, this.model.addNewQuestionText))) : null)));
+    }
+    disableTabStop() {
+        return true;
+    }
+    renderFooter() {
+        return (React.createElement(React.Fragment, null,
+            !this.model.isEmptyElement && this.model.element.isPanel && this.model.showAddQuestionButton ? (React.createElement("div", { className: "svc-panel__add-new-question-container" },
+                React.createElement("div", { className: "svc-panel__question-type-selector-popup" },
+                    React.createElement(Popup, { model: this.model.questionTypeSelectorModel.popupModel })),
+                React.createElement("div", { className: "svc-panel__add-new-question-wrapper" },
+                    React.createElement(AddQuestionButtonComponent, { item: { data: this.model }, buttonClass: "svc-action-button", renderPopup: false })))) : null,
+            super.renderFooter()));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-panel", (props) => {
+    return React.createElement(PanelAdornerComponent, props);
+});
+
+class LogoImageComponent extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        let prevRoot = null;
+        if (!!this.model) {
+            prevRoot = this.model.root;
+        }
+        this.model = new LogoImageViewModel(props.data, prevRoot);
+    }
+    getUpdatedModelProps() {
+        return ["data"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.root = this.rootRef.current;
+    }
+    renderChooseButton() {
+        return attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.model.chooseFile(this.model) },
+            React.createElement(SvgIcon, { size: "auto", iconName: "icon-choosefile" })));
+    }
+    renderClearButton() {
+        return attachKey2click(React.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: () => this.model.remove(this.model) },
+            React.createElement(SvgIcon, { size: "auto", iconName: "icon-clear" })));
+    }
+    renderButtons() {
+        return (React.createElement("div", { className: "svc-context-container svc-logo-image-controls" },
+            this.renderChooseButton(),
+            this.renderClearButton()));
+    }
+    renderImage() {
+        return React.createElement("div", { className: this.model.containerCss },
+            this.renderButtons(),
+            React.createElement(LogoImage, { data: this.props.data.survey }));
+    }
+    renderPlaceHolder() {
+        return this.model.allowEdit && !this.model.isUploading ? attachKey2click(React.createElement("div", { className: "svc-logo-image-placeholder", onClick: () => this.model.chooseFile(this.model) },
+            React.createElement("svg", null,
+                React.createElement("use", { xlinkHref: "#icon-image-48x48" })))) : null;
+    }
+    renderInput() {
+        return React.createElement("input", { "aria-hidden": "true", type: "file", tabIndex: -1, accept: this.model.acceptedTypes, className: "svc-choose-file-input" });
+    }
+    renderLoadingIndicator() {
+        return React.createElement("div", { className: "svc-logo-image__loading" },
+            React.createElement(LoadingIndicatorComponent, null));
+    }
+    render() {
+        let content = null;
+        if (this.model.survey.locLogo.renderedHtml && !this.model.isUploading) {
+            content = this.renderImage();
+        }
+        else if (this.model.isUploading) {
+            content = this.renderLoadingIndicator();
+        }
+        else {
+            content = this.renderPlaceHolder();
+        }
+        return (React.createElement("div", { ref: this.rootRef, className: "svc-logo-image" },
+            this.renderInput(),
+            content));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-logo-image", (props) => {
+    return React.createElement(LogoImageComponent, props);
+});
+
+class SurveyQuestionLinkValue extends SurveyQuestionElementBase {
+    get question() {
+        return this.questionBase;
+    }
+    renderClear() {
+        const showClear = this.questionBase.showClear;
+        if (!this.questionBase.isReadOnly && showClear) {
+            return (React.createElement(ActionButton, { classes: this.question.linkClearButtonCssClasses, click: () => this.question.doClearClick(), text: editorLocalization.getString("pe.clear") }));
+        }
+        else {
+            return null;
+        }
+    }
+    renderElement() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ActionButton, { classes: this.question.linkSetButtonCssClasses, click: () => this.question.doLinkClick(), selected: this.question.isSelected, disabled: !this.question.isClickable, text: this.question.linkValueText, title: this.question.tooltip, iconName: this.question.iconName }),
+            this.renderClear()));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("linkvalue", (props) => {
+    return React.createElement(SurveyQuestionLinkValue, props);
+});
+
+class SurveyElementEmbeddedSurvey extends SurveyQuestionElementBase {
+    get embeddedSurvey() {
+        return (this.props.element || this.props.question);
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    render() {
+        if (!this.embeddedSurvey)
+            return null;
+        const survey = this.embeddedSurvey.embeddedSurvey;
+        if (!survey || !survey.currentPage)
+            return null;
+        return React.createElement(SurveyPage, { survey: survey, page: survey.currentPage, css: survey.css, creator: this.creator });
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("embeddedsurvey", (props) => {
+    return React.createElement(SurveyElementEmbeddedSurvey, props);
+});
+
+class QuestionEditorContentComponent extends React.Component {
+    get survey() {
+        return this.props.survey;
+    }
+    createQuestionElement(question) {
+        return ReactQuestionFactory.Instance.createQuestion(!question.isDefaultRendering || question.isDefaultRendering()
+            ? question.getTemplate()
+            : question.getComponentName(), {
+            question: question,
+            isDisplayMode: question.isInputReadOnly,
+            creator: this,
+        });
+    }
+    questionTitleLocation() {
+        return this.survey.questionTitleLocation;
+    }
+    questionErrorLocation() {
+        return this.survey.questionErrorLocation;
+    }
+    renderError(key, error, cssClasses) {
+        return null;
+    }
+    render() {
+        const question = this.survey.getAllQuestions()[0];
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SurveyQuestion, { creator: this, element: question })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question-editor-content", (props) => {
+    return React.createElement(QuestionEditorContentComponent, props);
+});
+
+class ItemValueAdornerComponent extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.onBlur = (event) => {
+            this.model.onFocusOut(event.nativeEvent);
+        };
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        this.model = new ItemValueWrapperViewModel(props.componentData.creator, props.question, props.item);
+    }
+    getUpdatedModelProps() {
+        return ["question", "item"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        this.props.item.setRootElement(this.rootRef.current);
+        if (prevProps.item !== this.props.item && prevProps.item) {
+            prevProps.item.setRootElement(undefined);
+        }
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.props.item.setRootElement(this.rootRef.current);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.props.item.setRootElement(undefined);
+    }
+    render() {
+        this.model.item = this.props.item;
+        const button = this.model.allowAdd ? (attachKey2click(React.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__add", "aria-label": this.model.tooltip, onClick: () => {
+                this.model.add(this.model);
+                this.model.isNew = false;
+            } },
+            React.createElement(SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: this.model.tooltip })))) : (React.createElement(React.Fragment, null,
+            " ",
+            this.model.isDraggable ? (React.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__drag" },
+                React.createElement(SvgIcon, { className: "svc-item-value-controls__drag-icon", size: "auto", iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
+            this.model.allowRemove ? attachKey2click(React.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__remove", "aria-label": this.model.tooltip, onClick: () => this.model.remove(this.model) },
+                React.createElement(SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
+        const itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
+        return (React.createElement("div", { ref: this.rootRef, className: "svc-item-value-wrapper" +
+                (this.model.allowAdd ? " svc-item-value--new" : "") +
+                (this.model.isDragging ? " svc-item-value--dragging" : "") +
+                (this.model.isDragDropGhost ? " svc-item-value--ghost" : "") +
+                (this.model.isDragDropMoveDown ? " svc-item-value--movedown" : "") +
+                (this.model.isDragDropMoveUp ? " svc-item-value--moveup" : ""), key: itemkey, "data-sv-drop-target-item-value": this.model.isDraggable ? this.model.item.value : undefined, onPointerDown: (event) => this.model.onPointerDown(event) },
+            React.createElement("div", { className: "svc-item-value__ghost" }),
+            React.createElement("div", { className: "svc-item-value-controls", onBlur: this.onBlur }, button),
+            React.createElement("div", { className: "svc-item-value__item", onClick: (event) => this.model.select(this.model, event.nativeEvent) }, this.props.element)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-item-value", (props) => {
+    return React.createElement(ItemValueAdornerComponent, props);
+});
+
+class ImageItemValueAdornerComponent extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.preventDragHandler = (e) => {
+            e.preventDefault();
+        };
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        this.model = new ImageItemValueWrapperViewModel(props.componentData.creator, props.question, props.item, null, null);
+    }
+    getUpdatedModelProps() {
+        return ["question", "item"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    get question() {
+        return this.props.question;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.itemsRoot = this.rootRef.current;
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        this.model.itemsRoot = this.rootRef.current;
+    }
+    renderLoadingIndicator() {
+        return React.createElement("div", { className: "svc-image-item-value__loading" },
+            React.createElement(LoadingIndicatorComponent, null));
+    }
+    render() {
+        this.model.item = this.props.item;
+        const isNew = !this.props.question.isItemInList(this.props.item);
+        this.model.isNew = isNew;
+        const imageStyle = !this.model.getIsNewItemSingle() ? { width: this.question.renderedImageWidth, height: this.question.renderedImageHeight } : null;
+        let content = null;
+        if (isNew || this.model.isUploading) {
+            content = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "svc-image-item-value__item", onDrop: this.model.onDrop, onDragOver: this.model.onDragOver, onDragLeave: this.model.onDragLeave },
+                    React.createElement("div", { className: "sd-imagepicker__item sd-imagepicker__item--inline" },
+                        React.createElement("label", { className: "sd-imagepicker__label" },
+                            React.createElement("div", { style: imageStyle, className: "sd-imagepicker__image" }, this.model.isUploading ? this.renderLoadingIndicator() : null)))),
+                React.createElement("div", { className: "svc-image-item-value-controls" }, this.model.allowAdd && !this.model.isUploading ? attachKey2click(React.createElement("span", { className: "svc-context-button svc-image-item-value-controls__add", onClick: () => this.model.chooseNewFile(this.model) },
+                    React.createElement(SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }))) : null)));
+        }
+        else {
+            content = (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "svc-image-item-value__item" }, this.props.element),
+                this.model.isDraggable && this.model.canRenderControls ?
+                    React.createElement("span", { className: "svc-context-button svc-image-item-value-controls__drag-area-indicator", onPointerDown: (event) => this.model.onPointerDown(event) },
+                        React.createElement(SvgIcon, { size: "auto", iconName: "icon-drag-24x24" }))
+                    : null,
+                this.model.canRenderControls ?
+                    React.createElement("div", { className: "svc-context-container svc-image-item-value-controls" },
+                        this.model.allowRemove && !this.model.isUploading ? attachKey2click(React.createElement("span", { className: "svc-context-button", onClick: () => this.model.chooseFile(this.model) },
+                            React.createElement(SvgIcon, { role: "button", size: "auto", iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
+                        this.model.allowRemove && !this.model.isUploading ? attachKey2click(React.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: () => this.model.remove(this.model) },
+                            React.createElement(SvgIcon, { role: "button", size: "auto", iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
+                    : null));
+        }
+        return (React.createElement("div", { ref: this.rootRef, className: this.model.getRootCss(), key: this.props.element.key, "data-sv-drop-target-item-value": this.model.isDraggable ? this.model.item.value : undefined, onPointerDown: (event) => this.model.onPointerDown(event), onDragStart: this.preventDragHandler },
+            React.createElement("div", { className: "svc-image-item-value-wrapper__ghost", style: imageStyle }),
+            React.createElement("div", { className: "svc-image-item-value-wrapper__content" },
+                React.createElement("input", { type: "file", "aria-hidden": "true", tabIndex: -1, accept: this.model.acceptedTypes, className: "svc-choose-file-input", style: {
+                        position: "absolute",
+                        opacity: 0,
+                        width: "1px",
+                        height: "1px",
+                        overflow: "hidden"
+                    } }),
+                content)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-image-item-value", (props) => {
+    return React.createElement(ImageItemValueAdornerComponent, props);
+});
+
+class MatrixCellAdornerComponent extends CreatorModelElement {
+    createModel(props) {
+        var _a;
+        const data = props.componentData;
+        let prevIsSelected = false;
+        if (!!this.model) {
+            prevIsSelected = this.model.isSelected;
+        }
+        this.model = new MatrixCellWrapperViewModel(data.creator, data.element, data.question, data.row, data.column || ((_a = data.element.cell) === null || _a === void 0 ? void 0 : _a.column));
+        this.model.isSelected = prevIsSelected;
+    }
+    getUpdatedModelProps() {
+        return ["componentData"];
+    }
+    componentDidUpdate(prevProps, prevState) {
+        var _a, _b;
+        super.componentDidUpdate(prevProps, prevState);
+        const data = this.props.componentData;
+        this.model.templateData = data.element;
+        this.model.row = data.row;
+        this.model.column = data.column || ((_b = (_a = data.element) === null || _a === void 0 ? void 0 : _a.cell) === null || _b === void 0 ? void 0 : _b.column);
+        this.model.question = data.question;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    render() {
+        let controls = null;
+        if (!!this.model.isSupportCellEditor) {
+            controls = React.createElement("div", { className: "svc-matrix-cell__question-controls" }, attachKey2click(React.createElement("span", { className: "svc-matrix-cell__question-controls-button svc-context-button", onClick: (event) => this.model.editQuestion(this.model, event) },
+                React.createElement(SvgIcon, { size: "auto", iconName: "icon-edit" }))));
+        }
+        return (React.createElement("div", { className: "svc-matrix-cell", tabIndex: -1, key: this.props.element.key, onClick: (e) => !this.props.question && this.model.selectContext(this.model, e), onMouseOut: e => this.model.hover(e.nativeEvent, e.currentTarget), onMouseOver: e => this.model.hover(e.nativeEvent, e.currentTarget) },
+            React.createElement("div", { className: "svc-matrix-cell--selected" + (this.model.isSelected ? " svc-visible" : "") }),
+            this.props.element,
+            controls));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-matrix-cell", (props) => {
+    return React.createElement(MatrixCellAdornerComponent, props);
+});
+
+class SurveyResults extends CreatorModelElement {
+    createModel(props) {
+        if (this.props.survey) {
+            this.model = new SurveyResultsModel(props.survey);
+        }
+    }
+    getUpdatedModelProps() {
+        return ["survey"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    render() {
+        if (!this.model) {
+            return null;
+        }
+        return (React.createElement("div", { className: "svd-test-results" },
+            React.createElement("div", { className: "svd-test-results__content" },
+                React.createElement("div", { className: "svd-test-results__header" },
+                    React.createElement("div", { className: "svd-test-results__header-text" }, this.model.surveyResultsText),
+                    React.createElement("div", { className: "svd-test-results__header-types" },
+                        React.createElement(ActionButton, { click: () => this.model.selectTableClick(), text: this.model.surveyResultsTableText, selected: this.model.isTableSelected, disabled: false }),
+                        React.createElement(ActionButton, { click: () => this.model.selectJsonClick(), text: this.model.surveyResultsJsonText, selected: this.model.isJsonSelected, disabled: false }))),
+                this.renderResultAsText(),
+                this.renderResultAsTable())));
+    }
+    renderResultAsText() {
+        if (this.model.resultViewType !== "text") {
+            return null;
+        }
+        return (React.createElement("div", { className: "svd-test-results__text svd-light-bg-color" },
+            React.createElement("div", null, this.model.resultText)));
+    }
+    renderResultAsTable() {
+        if (this.model.resultViewType !== "table") {
+            return null;
+        }
+        return (React.createElement("div", { className: "svd-test-results__table svd-light-bg-color" },
+            React.createElement("table", null,
+                React.createElement("thead", null,
+                    React.createElement("tr", { className: "svd-light-background-color" },
+                        React.createElement("th", { key: 1, className: "svd-dark-border-color" }, this.model.resultsTitle),
+                        React.createElement("th", { key: 2, className: "svd-dark-border-color" }, this.model.resultsDisplayValue))),
+                React.createElement("tbody", null, SurveyResults.renderRows(this.model.resultData)))));
+    }
+    static renderRows(data) {
+        const rows = [];
+        for (var i = 0; i < data.length; i++) {
+            rows.push(React.createElement(SurveyResultsByRow, { key: i + 1, row: data[i] }));
+        }
+        return rows;
+    }
+}
+class SurveyResultsByRow extends CreatorModelElement {
+    get row() {
+        return this.props.row;
+    }
+    getStateElement() {
+        return this.row;
+    }
+    render() {
+        return (React.createElement(React.Fragment, null,
+            attachKey2click(React.createElement("tr", { onClick: () => this.row.toggle() },
+                React.createElement("td", { key: 1, style: { paddingLeft: this.row.textMargin }, className: "svd-dark-border-color" },
+                    this.row.isNode ? (React.createElement("span", { style: { left: this.row.markerMargin }, className: "svd-test-results__marker " + (this.row.collapsed ? "" : "svd-test-results__marker--expanded") },
+                        React.createElement(SvgIcon, { iconName: "icon-expand_16x16", size: 16 }))) : null,
+                    this.row.question ? React.createElement(SurveyLocStringViewer, { locStr: this.row.question.locTitle }) : React.createElement("span", null, this.row.title)),
+                React.createElement("td", { key: 2, className: this.row.isNode ? "svd-test-results__node-value" : "svd-dark-border-color" }, this.row.getString(this.row.displayValue)))),
+            this.row.isNode && !this.row.collapsed ? SurveyResults.renderRows(this.row.data) : null));
+    }
+}
+
+class SurveyCreatorToolboxTool extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    createModel(props) {
+        this.model = new ToolboxToolViewModel(props.item, props.creator, props.parentModel);
+    }
+    getUpdatedModelProps() {
+        return ["creator", "item"];
+    }
+    get item() {
+        return this.props.item;
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    get isCompact() {
+        return this.props.isCompact;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    render() {
+        const item = this.item;
+        const itemComponent = ReactElementFactory.Instance.createElement(this.model.itemComponent, {
+            item: item,
+            creator: this.creator,
+            parentModel: this.creator.toolbox,
+            model: this.model,
+            isCompact: this.isCompact
+        });
+        return (React.createElement("div", { className: item.css, key: item.id, ref: this.rootRef },
+            (item.needSeparator && !this.creator.toolbox.showCategoryTitles) ? (React.createElement("div", { className: "svc-toolbox__category-separator" })) : null,
+            React.createElement("div", { className: "svc-toolbox__tool-content sv-action__content", onPointerDown: (event) => {
+                    event.persist();
+                    this.model.onPointerDown(event);
+                } }, itemComponent)));
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.item.updateModeCallback = undefined;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.item.updateModeCallback = (mode, callback) => {
+            queueMicrotask(() => {
+                if (ReactDOM["flushSync"]) {
+                    ReactDOM["flushSync"](() => {
+                        this.item.mode = mode;
+                    });
+                }
+                else {
+                    this.item.mode = mode;
+                }
+                queueMicrotask(() => {
+                    callback(mode, this.rootRef.current);
+                });
+            });
+        };
+        this.item.afterRender();
+    }
+}
+class SurveyCreatorToolboxItem extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+    }
+    getUpdatedModelProps() {
+        return ["creator", "item"];
+    }
+    get item() {
+        return this.props.item;
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    render() {
+        const banner = (this.props.isCompact ?
+            React.createElement("span", { className: "svc-toolbox__item-banner", onClick: (event) => {
+                    event.persist();
+                    this.model.click(event);
+                } },
+                React.createElement(SvgIcon, { size: "auto", iconName: this.item.iconName, className: "svc-toolbox__item-icon", title: this.item.tooltip }),
+                React.createElement("span", null, this.item.title))
+            :
+                null);
+        const item = attachKey2click(React.createElement("div", { className: this.item.renderedCss, tabIndex: 0, role: "button", "aria-label": this.item.tooltip, onClick: (event) => {
+                event.persist();
+                this.model.click(event);
+            } },
+            React.createElement("span", { className: "svc-toolbox__item-container" }, !!this.item.iconName ? React.createElement(SvgIcon, { size: "auto", iconName: this.item.iconName, className: "svc-toolbox__item-icon" }) : null),
+            (this.props.isCompact ?
+                null
+                :
+                    React.createElement("span", { className: "svc-toolbox__item-title" }, this.item.title))));
+        return (React.createElement(React.Fragment, null,
+            item,
+            banner));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-toolbox-item", (props) => {
+    return createElement(SurveyCreatorToolboxItem, props);
+});
+
+class SurveyCreatorToolboxItemGroup extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+    }
+    getUpdatedModelProps() {
+        return ["creator", "item"];
+    }
+    get item() {
+        return this.props.item;
+    }
+    get model() {
+        return this.props.model;
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    get isCompact() {
+        return this.props.isCompact;
+    }
+    get parentModel() {
+        return this.props.parentModel;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    render() {
+        return React.createElement(React.Fragment, null,
+            React.createElement(SurveyCreatorToolboxItem, { item: this.item, creator: this.creator, model: this.model, parentModel: this.parentModel, isCompact: this.isCompact }),
+            React.createElement("div", { className: "svc-toolbox__item-submenu-button", onMouseOver: (event) => this.model.onMouseOver(this.item, event), onMouseLeave: (event) => this.model.onMouseLeave(this.item, event) },
+                React.createElement(SvgIcon, { size: "auto", iconName: this.item.subitemsButtonIcon }),
+                React.createElement(Popup, { model: this.item.popupModel })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-toolbox-item-group", (props) => {
+    return React.createElement(SurveyCreatorToolboxItemGroup, props);
+});
+
+class SurveyCreatorToolboxCategory extends SurveyElementBase {
+    get category() {
+        return this.props.category;
+    }
+    get toolbox() {
+        return this.props.toolbox;
+    }
+    get class() {
+        return "svc-toolbox__category" +
+            (this.category.collapsed ? " svc-toolbox__category--collapsed" : "") +
+            (this.category.empty ? " svc-toolbox__category--empty" : "");
+    }
+    getStateElement() {
+        return this.category;
+    }
+    render() {
+        const header = this.renderCategoryHeader();
+        const items = this.renderCategoryContent();
+        return (React.createElement("div", { className: this.class, key: this.category.name },
+            React.createElement("div", { className: "svc-toolbox__category-header-wrapper" }, header),
+            items));
+    }
+    renderCategoryHeader() {
+        let className = "svc-toolbox__category-header";
+        if (this.toolbox.canCollapseCategories) {
+            className += " svc-toolbox__category-header--collapsed";
+        }
+        return attachKey2click(React.createElement("div", { className: className, onClick: e => this.category.toggleState() },
+            React.createElement("span", { className: "svc-toolbox__category-title" }, this.category.title),
+            this.renderButton()));
+    }
+    renderButton() {
+        if (!this.toolbox.canCollapseCategories)
+            return null;
+        const iconName = this.category.collapsed ? "arrow-down" : "arrow-up";
+        const suffixName = this.category.collapsed ? "expand" : "collapse";
+        const svgIconClassName = "svc-toolbox__category-header__button svc-string-editor__button--" + suffixName;
+        return (React.createElement("div", { className: "svc-toolbox__category-header__controls" },
+            React.createElement(SvgIcon, { className: svgIconClassName, iconName: "icon-" + iconName, size: "auto" })));
+    }
+    renderCategoryContent() {
+        return this.renderItems(this.category.items);
+    }
+    renderItems(items, isCompact = false) {
+        return items.map((item, itemIndex) => React.createElement(SurveyCreatorToolboxTool, { item: item, creator: this.toolbox.creator, parentModel: this.toolbox, isCompact: isCompact, key: "item" + itemIndex }));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-toolbox-category", (props) => {
+    return React.createElement(SurveyCreatorToolboxCategory, props);
+});
+
+class ToolboxList extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    get model() {
+        return this.props.model;
+    }
+    get creator() {
+        return this.props.creator;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    render() {
+        if (!this.model || !this.model.renderElements)
+            return null;
+        const items = this.renderItems();
+        return (React.createElement("div", { className: this.model.cssClasses.root }, items));
+    }
+    renderItems() {
+        const items = this.model.renderedActions;
+        return items.map((item, itemIndex) => React.createElement(SurveyCreatorToolboxTool, { item: item, creator: this.creator, parentModel: this.model, isCompact: false, key: "item" + itemIndex }));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-toolbox-list", (props) => {
+    return React.createElement(ToolboxList, props);
+});
+
+class SearchComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    constructor(props) {
+        super(props);
+        this.state = {
+            filterString: this.model.filterString || ""
+        };
+    }
+    renderElement() {
+        if (!this.model.isVisible)
+            return null;
+        const onChange = (e) => {
+            const { root } = settings.environment;
+            if (e.target === root.activeElement) {
+                this.model.filterString = e.target.value;
+            }
+        };
+        return (React.createElement("div", { className: "svc-search" },
+            React.createElement("div", { className: "svc-search__search-icon" },
+                React.createElement(SvgIcon, { iconName: "icon-search", size: "auto" })),
+            React.createElement("input", { type: "text", className: "svc-search__input", "aria-label": this.model.filterStringPlaceholder, placeholder: this.model.filterStringPlaceholder, value: this.state.filterString, onChange: onChange }),
+            React.createElement("div", { className: "svc-search__toolbar" },
+                React.createElement("div", { className: "svc-search__toolbar-counter" }, this.model.matchCounterText),
+                React.createElement(SurveyActionBar, { model: this.model.searchActionBar }))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-search", (props) => {
+    return React.createElement(SearchComponent, props);
+});
+
+class ScrollComponent extends React.Component {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+        this.model = new ScrollViewModel();
+    }
+    componentDidMount() {
+        const container = this.rootRef.current;
+        if (!container)
+            return;
+        this.model.setRootElement(container);
+    }
+    componentWillUnmount() {
+        this.model.unsubscribeRootElement();
+        this.model.setRootElement(undefined);
+    }
+    render() {
+        return React.createElement("div", { ref: this.rootRef, className: "svc-scroll__wrapper" },
+            React.createElement("div", { className: "svc-scroll__scroller sv-drag-target-skipped", onScroll: () => this.model.onScrollContainer() },
+                React.createElement("div", { className: "svc-scroll__container" }, this.props.children)),
+            React.createElement("div", { className: "svc-scroll__scrollbar", onScroll: () => this.model.onScrollScrollbar() },
+                React.createElement("div", { className: "svc-scroll__scrollbar-sizer" })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-scroll", (props) => {
+    return React.createElement(ScrollComponent, props);
+});
+
+class AdaptiveToolbox extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.rootRef = React.createRef();
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        const container = this.rootRef.current;
+        this.toolbox.setRootElement(container);
+        if (!container)
+            return;
+        this.manager = new VerticalResponsivityManager(this.toolbox.containerElement, this.toolbox);
+    }
+    componentWillUnmount() {
+        this.manager && (this.manager.dispose());
+        this.toolbox.setRootElement(undefined);
+        super.componentWillUnmount();
+    }
+    get creator() {
+        return this.props.model;
+    }
+    get toolbox() {
+        return this.creator.toolbox;
+    }
+    getStateElement() {
+        return this.toolbox;
+    }
+    renderItems(items, isCompact = false) {
+        return items.map((item, itemIndex) => {
+            return React.createElement(SurveyCreatorToolboxTool, { item: item, creator: this.creator, parentModel: this.toolbox, isCompact: isCompact, key: item.renderedId });
+        });
+    }
+    renderCategories() {
+        return this.toolbox.categories.map((category, index) => {
+            return React.createElement(SurveyCreatorToolboxCategory, { category: category, toolbox: this.toolbox, key: "category" + index });
+        });
+    }
+    renderSearch() {
+        const searchButton = this.toolbox.isCompactRendered ?
+            React.createElement(React.Fragment, null,
+                React.createElement(SurveyCreatorToolboxTool, { item: this.toolbox.searchItem, creator: this.creator, parentModel: this.toolbox, isCompact: this.toolbox.isCompactRendered, key: "searchitem" })) :
+            null;
+        return (React.createElement("div", { className: "svc-toolbox__search-container" },
+            searchButton,
+            React.createElement(SearchComponent, { model: this.toolbox.searchManager }),
+            React.createElement("div", { className: "svc-toolbox__category-separator svc-toolbox__category-separator--search" })));
+    }
+    render() {
+        if (!this.toolbox.hasActions)
+            return null;
+        const search = this.toolbox.showSearch ? this.renderSearch() : null;
+        const placeholder = this.toolbox.showPlaceholder ? React.createElement("div", { className: "svc-toolbox__placeholder" }, this.toolbox.toolboxNoResultsFound) : null;
+        return (React.createElement("div", { ref: this.rootRef, className: this.toolbox.classNames },
+            React.createElement("div", { onBlur: (e) => this.toolbox.focusOut(e), className: "svc-toolbox__panel" },
+                search,
+                placeholder,
+                React.createElement(ScrollComponent, null, (this.toolbox.showInSingleCategory) ?
+                    (React.createElement("div", { className: "svc-toolbox__category" }, this.renderItems(this.toolbox.renderedActions, this.toolbox.isCompactRendered)))
+                    : this.renderCategories()))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-toolbox", (props) => {
+    return React.createElement(AdaptiveToolbox, props);
+});
+
+class SurveyNavigation extends SurveyElementBase {
+    constructor() {
+        super(...arguments);
+        this.onPropChangedHandler = (sender, options) => {
+            if (this.isRendering)
+                return;
+            const reactiveProps = [
+                "showProgressBar",
+                "progressBarType",
+                "currentPageValue"
+            ];
+            if (reactiveProps.indexOf(options.name) < 0)
+                return;
+            var val = {};
+            for (var i = 0; i < reactiveProps.length; i++) {
+                var propName = reactiveProps[i];
+                val[propName] = this.survey[propName];
+            }
+            this.setState(val);
+        };
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.setHandler();
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        this.setHandler();
+    }
+    setHandler() {
+        if (!this.survey ||
+            this.survey.onPropertyChanged.hasFunc(this.onPropChangedHandler))
+            return;
+        this.survey.onPropertyChanged.add(this.onPropChangedHandler);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        if (this.survey) {
+            this.survey.onPropertyChanged.remove(this.onPropChangedHandler);
+        }
+    }
+    get survey() {
+        return this.props.survey;
+    }
+    get location() {
+        return this.props.location;
+    }
+    get isTop() {
+        return this.location == "top";
+    }
+    canRender() {
+        return this.isTop
+            ? this.survey.isShowProgressBarOnTop
+            : this.survey.isShowProgressBarOnBottom;
+    }
+    renderElement() {
+        return ReactElementFactory.Instance.createElement(this.survey.getProgressTypeComponent(), { survey: this.survey, css: this.survey.css, isTop: this.isTop });
+    }
+}
+
+class TabButtonComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.props.model;
+    }
+    renderElement() {
+        const button = attachKey2click(React.createElement("div", { className: this.props.model.buttonClassName, title: this.props.model.tooltip, onClick: () => { this.props.model.action(); } },
+            React.createElement("div", { className: "svc-menu-action__icon" },
+                React.createElement("div", { className: "svc-menu-action__icon-container" },
+                    React.createElement(SvgIcon, { iconName: this.props.model.iconName, size: "auto" })))), this.props.model);
+        return (React.createElement("div", { className: "svc-menu-action" }, button));
+    }
+}
+
+class TabControl extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.props.model;
+    }
+    canRender() {
+        if (!this.props.model)
+            return false;
+        return super.canRender();
+    }
+    renderElement() {
+        return (React.createElement("div", { className: this.props.model.sideBarClassName },
+            React.createElement("div", { className: "svc-sidebar-tabs__top-container" },
+                React.createElement("div", { className: "svc-sidebar-tabs__collapse-button" },
+                    React.createElement(TabButtonComponent, { model: this.props.model.expandCollapseAction })),
+                React.createElement("div", { className: "svc-sidebar-tabs__separator" },
+                    React.createElement("div", null)),
+                React.createElement(ScrollComponent, null,
+                    React.createElement("div", { className: "svc-sidebar-tabs__items" },
+                        React.createElement(TabsComponent, { model: this.props.model.topToolbar })))),
+            React.createElement("div", { className: "svc-sidebar-tabs__bottom-container" },
+                React.createElement("div", { className: "svc-sidebar-tabs__items" },
+                    React.createElement(TabsComponent, { model: this.props.model.bottomToolbar })))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-control", (props) => {
+    return React.createElement(TabControl, props);
+});
+class TabsComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.props.model;
+    }
+    renderElement() {
+        return React.createElement(React.Fragment, null, this.props.model.actions.map((item, itemIndex) => React.createElement(TabButtonComponent, { model: item, key: "item" + itemIndex })));
+    }
+}
+
+class SideBarDefaultHeader extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const title = !!this.model.title ? (React.createElement("div", { className: "svc-side-bar__container-title" }, this.model.title)) : null;
+        return (React.createElement("div", { className: "svc-side-bar__container-header" },
+            React.createElement("div", { className: "svc-side-bar__container-actions" },
+                React.createElement(SurveyActionBar, { model: this.model.toolbar })),
+            title));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-side-bar-default-header", (props) => {
+    return React.createElement(SideBarDefaultHeader, props);
+});
+
+class SideBarPropertyGridHeader extends SurveyElementBase {
+    get objectSelectionAction() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.objectSelectionAction;
+    }
+    renderElement() {
+        const button = attachKey2click(React.createElement("div", { className: this.objectSelectionAction.buttonClassName, onClick: () => this.objectSelectionAction.action() },
+            React.createElement("div", { className: "svc-sidebar__header-caption" },
+                React.createElement("span", { className: "svc-sidebar__header-title" }, this.objectSelectionAction.title),
+                React.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.objectSelectionAction.tooltip))), this.props.model);
+        return (React.createElement("div", { className: "svc-sidebar__header svc-sidebar__header--tabbed" },
+            React.createElement("div", { className: "svc-sidebar__header-container svc-sidebar__header-container--with-subtitle" },
+                React.createElement("div", { className: "svc-sidebar__header-content" },
+                    button,
+                    React.createElement(Popup, { model: this.objectSelectionAction.popupModel })))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-side-bar-property-grid-header", (props) => {
+    return React.createElement(SideBarPropertyGridHeader, props);
+});
+
+class SideBarHeader extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        return (React.createElement("div", { className: "svc-side-bar__container-header svc-sidebar__header-container" }, (this.model.subTitle) ?
+            React.createElement("div", { className: "svc-sidebar__header-caption" },
+                React.createElement("span", { className: "svc-sidebar__header-title" }, this.model.title),
+                React.createElement("span", { className: "svc-sidebar__header-subtitle" }, this.model.subTitle))
+            : React.createElement("div", { className: "svc-side-bar__container-title" }, this.model.title)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-side-bar-header", (props) => {
+    return React.createElement(SideBarHeader, props);
+});
+
+class SidebarComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    constructor(props) {
+        super(props);
+        this.containerRef = React.createRef();
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.model.initResizeManager(this.containerRef.current);
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.model.resetResizeManager();
+    }
+    canRender() {
+        if (!this.model)
+            return false;
+        return super.canRender();
+    }
+    renderElement() {
+        const style = { display: this.model.renderRoot ? "" : "none" };
+        const containerStyle = { display: this.model.renderContainer ? "" : "none" };
+        const items = this.model.pages.map((page) => React.createElement(SidebarPage, { page: page, key: page.id }));
+        const headerArea = ReactElementFactory.Instance.createElement(this.model.header.component, { model: this.model.header.componentModel });
+        let sideArea = null;
+        if (this.model.sideAreaComponentName) {
+            sideArea = ReactElementFactory.Instance.createElement(this.model.sideAreaComponentName, { model: this.model.sideAreaComponentData });
+        }
+        return (React.createElement("div", { className: this.model.rootCss, style: style },
+            React.createElement("div", { className: "svc-side-bar__shadow", onClick: () => this.model.collapseSidebar(), style: containerStyle }),
+            React.createElement("div", { className: "svc-flex-row svc-side-bar__wrapper" },
+                React.createElement("div", { className: "svc-side-bar__container-wrapper", style: containerStyle },
+                    React.createElement("div", { ref: this.containerRef, className: "svc-side-bar__container" },
+                        headerArea,
+                        React.createElement("div", { className: "svc-side-bar__container-content" }, items))),
+                sideArea)));
+    }
+}
+class SidebarPage extends SurveyElementBase {
+    get page() {
+        return this.props.page;
+    }
+    getStateElement() {
+        return this.page;
+    }
+    renderElement() {
+        if (!this.page.visible)
+            return null;
+        const component = ReactElementFactory.Instance.createElement(this.page.componentName, { model: this.page.componentData });
+        return component;
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("svc-side-bar-page", (props) => {
+    return React.createElement(SidebarPage, props);
+});
+ReactElementFactory.Instance.registerElement("svc-side-bar", (props) => {
+    return React.createElement(SidebarComponent, props);
+});
+
+class TranslationLineSkeleton extends React.Component {
+    render() {
+        return (React.createElement("div", { className: "sd-translation-line-skeleton" }));
+    }
+}
+ReactElementFactory.Instance.registerElement("sd-translation-line-skeleton", (props) => {
+    return React.createElement(TranslationLineSkeleton, props);
+});
+
+class TranslateFromAction extends SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    renderElement() {
+        const item = this.item;
+        return (React.createElement("div", { className: item.data.containerCss },
+            React.createElement("span", { className: item.data.additionalTitleCss }, item.data.additionalTitle),
+            ReactElementFactory.Instance.createElement("sv-action-bar-item-dropdown", { item: this.item })));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-translate-from-action", (props) => {
+    return React.createElement(TranslateFromAction, props);
+});
+
+class SurveyLocStringEditor extends CreatorModelElement {
+    constructor(props) {
+        var _a;
+        super(props);
+        this.onChangedHandler = (sender, options) => {
+            this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
+        };
+        this.onBlur = (event) => {
+            if (this.svStringEditorRef.current) {
+                this.svStringEditorRef.current.spellcheck = false;
+            }
+            this.locString["__isEditing"] = false;
+            this.justFocused = false;
+            this.baseModel.onBlur(event.nativeEvent);
+            return this.baseModel.errorText;
+        };
+        this.onCompositionStart = (event) => {
+            this.baseModel.onCompositionStart(event.nativeEvent);
+        };
+        this.onCompositionEnd = (event) => {
+            this.baseModel.onCompositionEnd(event.nativeEvent);
+        };
+        this.onInput = (event) => {
+            this.baseModel.onInput(event.nativeEvent);
+        };
+        this.onPaste = (event) => {
+            this.baseModel.onPaste(event.nativeEvent);
+        };
+        this.justFocused = false;
+        this.onFocus = (event) => {
+            this.baseModel.onFocus(event.nativeEvent);
+            this.justFocused = true;
+        };
+        this.onKeyDown = (event) => {
+            return this.baseModel.onKeyDown(event.nativeEvent);
+        };
+        this.onKeyUp = (event) => {
+            return this.baseModel.onKeyUp(event.nativeEvent);
+        };
+        this.onMouseUp = (event) => {
+            return this.baseModel.onMouseUp(event.nativeEvent);
+        };
+        this.done = (event) => {
+            this.baseModel.done(event);
+            this.locString["__isEditing"] = false;
+        };
+        this.edit = (event) => {
+            this.svStringEditorRef.current.focus();
+            // document.execCommand('selectAll', false, null);
+            this.locString["__isEditing"] = true;
+            this.baseModel.onClick(event);
+        };
+        this.htmlValue = {
+            __html: (_a = this.locString) === null || _a === void 0 ? void 0 : _a.renderedHtml
+        };
+        this.state = { changed: 0 };
+        this.svStringEditorRef = React.createRef();
+    }
+    createModel(props) {
+        if (this.baseModel) {
+            this.baseModel.dispose();
+        }
+        this.baseModel = new StringEditorViewModelBase(this.locString, this.creator);
+    }
+    getUpdatedModelProps() {
+        return ["creator", "locString"];
+    }
+    get locString() {
+        return this.props.locStr.locStr;
+    }
+    get creator() {
+        return this.props.locStr.creator;
+    }
+    get style() {
+        return this.props.style;
+    }
+    getStateElement() {
+        return this.baseModel;
+    }
+    get errorText() {
+        return this.baseModel.errorText;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        if (!this.locString)
+            return;
+        this.baseModel.setLocString(this.locString);
+        this.baseModel.getEditorElement = () => this.svStringEditorRef.current;
+        this.baseModel.blurEditor = () => {
+            this.svStringEditorRef.current.blur();
+            this.svStringEditorRef.current.spellcheck = false;
+        };
+        this.baseModel.afterRender();
+        this.locString.onStringChanged.add(this.onChangedHandler);
+        if (this.locString["__isEditing"]) {
+            this.svStringEditorRef.current.focus();
+            // document.execCommand('selectAll', false, null);
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        super.componentDidUpdate(prevProps, prevState);
+        this.baseModel.setLocString(this.locString);
+        this.baseModel.afterRender();
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.baseModel.detachFromUI();
+        if (!this.locString)
+            return;
+        this.locString.onStringChanged.remove(this.onChangedHandler);
+    }
+    get placeholder() {
+        return this.baseModel.placeholder;
+    }
+    get contentEditable() {
+        return this.baseModel.contentEditable;
+    }
+    get className() {
+        return this.baseModel.className(this.locString.renderedHtml);
+    }
+    render() {
+        if (!this.locString) {
+            return null;
+        }
+        let control = null;
+        if (this.locString.hasHtml) {
+            if (this.htmlValue.__html !== this.locString.renderedHtml) {
+                this.htmlValue = { __html: this.locString.renderedHtml };
+            }
+            control = (React.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor sv-string-editor--html", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+                // style={this.style}
+                dangerouslySetInnerHTML: this.htmlValue, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onMouseUp: this.onMouseUp, onClick: this.edit }));
+        }
+        else {
+            control = (React.createElement("span", { role: "textbox", ref: this.svStringEditorRef, className: "sv-string-editor", contentEditable: this.contentEditable, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
+                // style={this.style}
+                key: this.locString.renderedHtml, onBlur: this.onBlur, onInput: this.onInput, onPaste: this.onPaste, onCompositionStart: this.onCompositionStart, onCompositionEnd: this.onCompositionEnd, onFocus: this.onFocus, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp, onMouseUp: this.onMouseUp, onClick: this.edit }, this.locString.renderedHtml));
+        }
+        const counter = this.baseModel.showCharacterCounter ? (React.createElement(CharacterCounterComponent, { counter: this.baseModel.characterCounter, remainingCharacterCounter: this.baseModel.getCharacterCounterClass })) : null;
+        return (React.createElement("span", { className: this.className },
+            React.createElement("span", { className: "svc-string-editor__content" },
+                React.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--hover", onClick: this.edit }),
+                React.createElement("div", { className: "svc-string-editor__border svc-string-editor__border--focus", onClick: this.edit }),
+                React.createElement("span", { className: "svc-string-editor__input" },
+                    control,
+                    React.createElement("div", { className: "svc-string-editor__controls", onClick: this.edit }),
+                    counter)),
+            this.errorText ? React.createElement("span", { className: "svc-string-editor__error" }, this.errorText) : ""));
+    }
+}
+ReactElementFactory.Instance.registerElement(editableStringRendererName, (props) => {
+    return React.createElement(SurveyLocStringEditor, props);
+});
+
+class QuestionErrorComponent extends React.Component {
+    render() {
+        return (React.createElement("div", null,
+            React.createElement(SvgIcon, { "aria-hidden": "true", iconName: "icon-alert_24x24", size: "24", className: this.props.cssClasses.error.icon }),
+            React.createElement("span", { className: this.props.cssClasses.error.item || undefined },
+                React.createElement(SurveyLocStringViewer, { locStr: this.props.error.locText }))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-question-error", (props) => {
+    return React.createElement(QuestionErrorComponent, props);
+});
+
+class SurveyLogicOpertor extends SurveyQuestionDropdown {
+    constructor(props) {
+        super(props);
+    }
+    renderInput() {
+        const q = this.question;
+        initLogicOperator(q);
+        const text = (q.selectedItemLocText) ? this.renderLocString(q.selectedItemLocText) : "";
+        return (React.createElement("div", { id: this.question.inputId, className: q.getControlClass(), tabIndex: this.question.isInputReadOnly ? undefined : 0, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            disabled: this.question.isInputReadOnly, required: this.question.isRequired, onChange: this.updateValueOnEvent, onInput: this.updateValueOnEvent, onKeyUp: this.keyhandler, role: this.question.ariaRole, "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy },
+            React.createElement("div", { className: this.question.cssClasses.controlValue },
+                text,
+                React.createElement("div", null, q.readOnlyText)),
+            this.createClearButton()));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("sv-logic-operator", (props) => {
+    return React.createElement(SurveyLogicOpertor, props);
+});
+RendererFactory.Instance.registerRenderer("dropdown", "logicoperator", "sv-logic-operator");
+
+class SurveyPageNavigator extends CreatorModelElement {
+    constructor(props) {
+        super(props);
+        this.containerRef = React.createRef();
+    }
+    createModel(props) {
+        if (this.model) {
+            this.model.dispose();
+        }
+        this.model = new PageNavigatorViewModel(props.pagesController, props.pageEditMode);
+    }
+    getUpdatedModelProps() {
+        return ["pagesController", "pageEditMode"];
+    }
+    getStateElement() {
+        return this.model;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        if (this.props.pageEditMode !== "bypage") {
+            const el = this.containerRef.current;
+            this.model.attachToUI(el);
+        }
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.model.stopItemsContainerHeightObserver();
+        this.model.setScrollableContainer(undefined);
+    }
+    renderElement() {
+        let className = "svc-page-navigator__selector svc-page-navigator__button";
+        if (this.model.isPopupOpened)
+            className += " svc-page-navigator__button--pressed";
+        return (React.createElement("div", { className: "svc-page-navigator", ref: this.containerRef, style: { display: this.model.visible ? "flex" : "none" } },
+            attachKey2click(React.createElement("div", { className: className, onClick: () => this.model.togglePageSelector(), title: this.model.pageSelectorCaption },
+                React.createElement(SvgIcon, { className: "svc-page-navigator__button-icon", iconName: this.model.icon, size: "auto", title: this.model.pageSelectorCaption }),
+                React.createElement(Popup, { model: this.model.popupModel }))),
+            React.createElement("div", null, this.model.visibleItems.map((item) => (React.createElement(SurveyPageNavigatorItem, { key: item.id, item: item }))))));
+    }
+}
+class SurveyPageNavigatorItem extends CreatorModelElement {
+    getStateElement() {
+        return this.props.item;
+    }
+    renderElement() {
+        const item = this.props.item;
+        let className = "svc-page-navigator-item-content";
+        if (unwrap(item.active)) {
+            className += " svc-page-navigator-item--selected";
+        }
+        if (unwrap(item.disabled)) {
+            className += " svc-page-navigator-item--disabled";
+        }
+        return (React.createElement("div", { className: "svc-page-navigator-item" }, attachKey2click(React.createElement("div", { className: className, onClick: (e) => {
+                item.action(item);
+                e.stopPropagation();
+            } },
+            React.createElement("div", { className: "svc-page-navigator-item__dot", title: item.title },
+                React.createElement("div", { className: "svc-page-navigator-item__dot-content" })),
+            React.createElement("div", { className: "svc-page-navigator-item__banner" },
+                React.createElement("span", { className: "svc-page-navigator-item__text" }, item.title),
+                React.createElement("span", { className: "svc-page-navigator-item__dot" },
+                    React.createElement("span", { className: "svc-page-navigator-item__dot-content" })))))));
+    }
+}
+
+class SurfacePlaceholder extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (React.createElement("div", { className: "svc-surface-placeholder" },
+            React.createElement("div", { className: "svc-surface-placeholder__image svc-surface-placeholder__image--" + this.props.name }),
+            React.createElement("div", { className: "svc-surface-placeholder__text" },
+                React.createElement("div", { className: "svc-surface-placeholder__title" }, this.props.placeholderTitleText),
+                React.createElement("div", { className: "svc-surface-placeholder__description" }, this.props.placeholderDescriptionText))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-surface-placeholder", (props) => {
+    return React.createElement(SurfacePlaceholder, props);
+});
+
+class TabDesignerComponent extends SurveyElementBase {
+    constructor() {
+        super(...arguments);
+        this.denyUpdate = () => {
+            this.denyComponentUpdate();
+        };
+        this.allowUpdate = () => {
+            this.allowComponentUpdate();
+        };
+        this.addDragDropEvents = () => {
+            this.creator.onDragStart.add(this.denyUpdate);
+            this.creator.onDragClear.add(this.allowUpdate);
+        };
+        this.clearDragDropEvents = () => {
+            this.creator.onDragStart.remove(this.denyUpdate);
+            this.creator.onDragClear.remove(this.allowUpdate);
+        };
+    }
+    get model() {
+        return this.props.data;
+    }
+    get creator() {
+        return this.model.creator;
+    }
+    componentDidMount() {
+        super.componentDidMount();
+        this.addDragDropEvents();
+    }
+    componentWillUnmount() {
+        super.componentWillUnmount();
+        this.clearDragDropEvents();
+        super.componentWillUnmount();
+    }
+    getStateElements() {
+        return [this.model, this.model.survey, this.model.pagesController];
+    }
+    getRenderedPages() {
+        const renderedPages = [];
+        if (this.creator.pageEditMode !== "bypage") {
+            const pages = this.model.pages;
+            pages.forEach((page) => {
+                renderedPages.push(this.createRenderedPage(page, page == this.model.newPage));
+            });
+        }
+        else {
+            const page2Display = this.model.pagesController.page2Display;
+            if (!!page2Display) {
+                renderedPages.push(this.createRenderedPage(page2Display, this.model.newPage === page2Display));
+            }
+        }
+        return renderedPages;
+    }
+    createRenderedPage(page, isGhostPage) {
+        return (React.createElement("div", { className: "svc-page", "data-sv-drop-target-page": page.name, "data-sv-drop-target-survey-element": isGhostPage ? "newGhostPage" : page.name, key: page.id }, this.renderPage(page, isGhostPage)));
+    }
+    renderNewPage(className, key = "") {
+        return (React.createElement(React.Fragment, { key: key },
+            React.createElement("div", { className: className, "data-sv-drop-target-survey-element": "newGhostPage" }, !!this.model.newPage ? this.renderPage(this.model.newPage, true) : null)));
+    }
+    renderPage(pageV, isGhost) {
+        return ReactElementFactory.Instance.createElement("svc-page", { survey: this.creator.survey, page: pageV, creator: this.creator, isGhost });
+    }
+    renderElement() {
+        const designerTabClassName = "svc-tab-designer " + this.model.getRootCss();
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "svc-flex-column" }, this.model.isToolboxVisible ? ReactElementFactory.Instance.createElement("svc-toolbox", { model: this.creator }) : null),
+            React.createElement("div", { className: designerTabClassName, onClick: () => this.model.clickDesigner() },
+                React.createElement(ScrollComponent, null,
+                    React.createElement("div", { className: "svc-tab-designer_content" }, this.model.showPlaceholder ? this.renderPlaceHolder() : this.renderTabContent())))));
+    }
+    renderHeader(condition) {
+        if (!condition)
+            return null;
+        const survey = this.creator.survey;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: "svc-designer-header" },
+                React.createElement(SurveyHeader, { survey: survey }))));
+    }
+    renderPlaceHolder() {
+        const surveyHeader = this.renderHeader(this.creator.allowEditSurveyTitle && this.creator.showHeaderInEmptySurvey);
+        return (React.createElement(React.Fragment, null,
+            surveyHeader,
+            React.createElement("div", { className: "svc-designer__placeholder-container", "data-sv-drop-target-survey-element": "newGhostPage" },
+                this.renderPlaceHolderContent(),
+                this.renderNewPage("svc-designer-placeholder-page"))));
+    }
+    renderPlaceHolderContent() {
+        return React.createElement(SurfacePlaceholder, { name: "designer", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
+    }
+    renderTabContent() {
+        const survey = this.creator.survey;
+        const surveyHeader = this.renderHeader(this.creator.allowEditSurveyTitle);
+        const style = Object.assign({}, this.model.surfaceCssVariables);
+        style.maxWidth = survey.renderedWidth;
+        const tabTools = this.renderTabTools();
+        return (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: this.model.designerCss, style: style },
+                surveyHeader,
+                this.getRenderedPages()),
+            tabTools));
+    }
+    renderTabTools() {
+        if (!this.model.showSurfaceTools)
+            return null;
+        const pageNavigator = this.creator.showPageNavigator ?
+            React.createElement("div", { className: "svc-tab-designer__page-navigator" },
+                React.createElement(SurveyPageNavigator, { pagesController: this.model.pagesController, pageEditMode: this.model.creator.pageEditMode }))
+            : null;
+        const surfaceToolbar = this.model.showSurfaceToolbar ?
+            React.createElement(SurveyActionBar, { model: this.model.surfaceToolbar, handleClick: false })
+            : null;
+        return React.createElement("div", { className: "svc-tab-designer__tools" },
+            pageNavigator,
+            surfaceToolbar);
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-designer", (props) => {
+    return React.createElement(TabDesignerComponent, props);
+});
+
+class TabJsonEditorErrorsComponent extends SurveyElementBase {
+    getStateElement() {
+        return this.model;
+    }
+    get model() {
+        return this.props.data;
+    }
+    renderElement() {
+        return React.createElement("div", { className: "svc-json-editor-tab__errros_list", style: { display: this.model.hasErrors ? "block" : "none" } },
+            React.createElement(List, { model: this.model.errorList }));
+    }
+}
+class TabJsonEditorTextareaComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    getStateElement() {
+        return this.model;
+    }
+    get model() {
+        return this.props.data;
+    }
+    renderElement() {
+        const setControl = (el) => {
+            this.model.textElement = el;
+        };
+        const errors = React.createElement(TabJsonEditorErrorsComponent, { data: this.model });
+        return (React.createElement("div", { className: "svc-creator-tab__content" },
+            React.createElement("div", { className: "svc-json-editor-tab__content" },
+                React.createElement("textarea", { ref: input => (setControl(input)), className: "svc-json-editor-tab__content-area", value: this.model.text, onChange: (e) => (this.model.text = e.target.value), onKeyDown: (e) => this.model.checkKey(e, e), disabled: this.model.readOnly, "aria-label": this.model.ariaLabel }),
+                errors)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-json-editor-textarea", (props) => {
+    return React.createElement(TabJsonEditorTextareaComponent, props);
+});
+
+class TabJsonEditorAceComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+        this.aceEditorrRef = React.createRef();
+    }
+    getStateElement() {
+        return this.model;
+    }
+    get model() {
+        return this.props.data;
+    }
+    componentDidMount() {
+        this.model.init(ace.edit(this.aceEditorrRef.current));
+    }
+    renderElement() {
+        const errors = React.createElement(TabJsonEditorErrorsComponent, { data: this.model });
+        return (React.createElement("div", { className: "svc-creator-tab__content" },
+            React.createElement("div", { className: "svc-json-editor-tab__content" },
+                React.createElement("div", { className: "svc-json-editor-tab__ace-editor", ref: this.aceEditorrRef }),
+                errors)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-json-editor-ace", (props) => {
+    return React.createElement(TabJsonEditorAceComponent, props);
+});
+
+class TabLogicAddButtonComponent extends SurveyElementBase {
+    get model() {
+        return this.props.button;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const buttonClassName = "svc-logic-tab__content-action svc-btn" + ((this.model.enabled !== undefined && !this.model.enabled) ? " svc-logic-tab__content-action--disabled" : "");
+        return attachKey2click(React.createElement("div", { role: "button", onClick: (e) => {
+                e.stopPropagation();
+                this.model.action();
+            }, className: buttonClassName, title: this.model.title },
+            React.createElement("span", { className: "svc-btn__text" }, this.model.title)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-logic-add-button", (props) => {
+    return React.createElement(TabLogicAddButtonComponent, props);
+});
+class TabLogicComponent extends SurveyElementBase {
+    get model() {
+        return this.props.data;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        this.model;
+        var rootClass = "svc-creator-tab__content svc-logic-tab";
+        var content = this.renderViewContent();
+        return React.createElement("div", { className: rootClass }, content);
+    }
+    renderViewContent() {
+        const logicTabClassName = "svc-plugin-tab__content svc-logic-tab svc-logic-tab__content " + (this.model.hasItems ? "" : "svc-logic-tab--empty");
+        const addLogic = !this.model.readOnly ? React.createElement(TabLogicAddButtonComponent, { button: this.model.addNewButton }) : undefined;
+        return (React.createElement(Fragment, null,
+            React.createElement("div", { className: logicTabClassName }, this.model.hasItems ?
+                (React.createElement(React.Fragment, null,
+                    React.createElement(Survey, { model: this.model.itemsSurvey }),
+                    addLogic))
+                : (React.createElement("div", { className: "svc-logic-tab__content-empty" },
+                    React.createElement(SurfacePlaceholder, { name: "logic", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText }),
+                    addLogic)))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-logic", (props) => {
+    return React.createElement(TabLogicComponent, props);
+});
+
+class SurveySimulator extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const mainSimulatorClass = this.model.getRootCss();
+        if (!this.model.survey) {
+            return React.createElement("div", { className: mainSimulatorClass });
+        }
+        if (this.model.hasFrame) {
+            return (React.createElement("div", { className: mainSimulatorClass, onKeyDown: e => this.model.tryToZoom(e, e), onMouseEnter: this.model.device === "desktop" ? null : this.model.activateZoom, onMouseLeave: this.model.device === "desktop" ? null : this.model.deactivateZoom },
+                React.createElement("div", { className: "svd-simulator-wrapper", id: "svd-simulator-wrapper", style: {
+                        width: this.model.simulatorFrame.frameWidth + "px",
+                        height: this.model.simulatorFrame.frameHeight + "px"
+                    } },
+                    React.createElement("div", { className: "svd-simulator", style: {
+                            width: this.model.simulatorFrame.deviceWidth + "px",
+                            height: this.model.simulatorFrame.deviceHeight + "px",
+                            transform: "scale(" +
+                                this.model.simulatorFrame.scale +
+                                ") translate(-50%, -50%)"
+                        } },
+                        React.createElement("div", { className: "svd-simulator-content" },
+                            React.createElement(Survey, { model: this.model.survey }))))));
+        }
+        else {
+            return (React.createElement("div", { className: mainSimulatorClass },
+                React.createElement("div", { className: "svd-simulator-content" },
+                    React.createElement(Survey, { model: this.model.survey }))));
+        }
+    }
+}
+
+class TabPreviewTestSurveyAgainComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model.testAgainAction;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        const buttonClassName = "svc-preview__test-again svc-btn";
+        return attachKey2click(React.createElement("div", { role: "button", onClick: (e) => {
+                e.stopPropagation();
+                this.model.action();
+            }, className: buttonClassName, title: this.model.title },
+            React.createElement("span", { className: "svc-btn__text" }, this.model.title)));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-complete-page", (props) => {
+    return React.createElement(TabPreviewTestSurveyAgainComponent, props);
+});
+class TabPreviewSurveyComponent extends SurveyElementBase {
+    constructor(props) {
+        super(props);
+    }
+    get model() {
+        return this.props.data;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderPlaceholder() {
+        return React.createElement(SurfacePlaceholder, { name: "preview", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
+    }
+    renderSimulator() {
+        return (React.createElement("div", { className: "svc-plugin-tab__content" },
+            React.createElement(SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? React.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
+    }
+    renderElement() {
+        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+        return (React.createElement("div", { className: tabContentClassName },
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
+            this.getBottomToolbar()));
+    }
+    getBottomToolbar() {
+        if (this.model.isPageToolbarVisible) {
+            return (React.createElement("div", { className: "svc-test-tab__content-actions" },
+                React.createElement(SurveyActionBar, { model: this.model.pages })));
+        }
+        else {
+            return null;
+        }
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-preview", (props) => {
+    return React.createElement(TabPreviewSurveyComponent, props);
+});
+
+class PropertyGridPlaceholderComponent extends React.Component {
+    render() {
+        return (React.createElement("div", { className: "svc-property-grid-placeholder" },
+            React.createElement("div", { className: "svc-property-grid-placeholder__header" },
+                React.createElement("span", { className: "svc-property-grid-placeholder__title" }, editorLocalization.getString("ed.propertyGridPlaceholderTitle")),
+                React.createElement("span", { className: "svc-property-grid-placeholder__description" }, editorLocalization.getString("ed.propertyGridPlaceholderDescription"))),
+            React.createElement("div", { className: "svc-property-grid-placeholder__content" },
+                React.createElement("div", { className: "svc-property-grid-placeholder__gap" }),
+                React.createElement("div", { className: "svc-property-grid-placeholder__image" }))));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-property-grid-placeholder", (props) => {
+    return React.createElement(PropertyGridPlaceholderComponent, props);
+});
+
+class TabThemeSurveyComponent extends SurveyElementBase {
+    get model() {
+        return this.props.data;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderPlaceholder() {
+        return React.createElement(SurfacePlaceholder, { name: "theme", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
+    }
+    renderSimulator() {
+        return (React.createElement("div", { className: "svc-plugin-tab__content" },
+            React.createElement(SurveySimulator, { model: this.model.simulator }),
+            this.model.showResults ? React.createElement(SurveyResults, { survey: this.model.simulator.survey }) : null));
+    }
+    renderElement() {
+        const tabContentClassName = "svc-creator-tab__content svc-test-tab__content" + (this.model.isPageToolbarVisible ? " svc-creator-tab__content--with-toolbar" : "");
+        return (React.createElement("div", { className: tabContentClassName },
+            this.model.simulator.survey.isEmpty ? this.renderPlaceholder() : this.renderSimulator(),
+            this.getBottomToolbar()));
+    }
+    getBottomToolbar() {
+        if (this.model.isPageToolbarVisible) {
+            return (React.createElement("div", { className: "svc-test-tab__content-actions" },
+                React.createElement(SurveyActionBar, { model: this.model.pages })));
+        }
+        else {
+            return null;
+        }
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-theme", (props) => {
+    return React.createElement(TabThemeSurveyComponent, props);
+});
+
+class TabTranslationComponent extends SurveyElementBase {
+    get model() {
+        return this.props.data || this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        if (!this.model)
+            return null;
+        return (React.createElement("div", { className: "svc-creator-tab__content svc-translation-tab" + (this.model.isEmpty ? " svc-translation-tab--empty" : "") }, this.renderElementContent()));
+    }
+    renderElementContent() {
+        if (this.model.isEmpty) {
+            return React.createElement(SurfacePlaceholder, { name: "translation", placeholderTitleText: this.model.placeholderTitleText, placeholderDescriptionText: this.model.placeholderDescriptionText });
+        }
+        else {
+            return (React.createElement("div", { className: "st-content" },
+                React.createElement("div", { className: "svc-flex-column st-strings-wrapper" },
+                    React.createElement("div", { className: "svc-flex-row st-strings-header" },
+                        React.createElement(Survey, { model: this.model.stringsHeaderSurvey })),
+                    React.createElement("div", { className: "svc-flex-row svc-plugin-tab__content st-strings" },
+                        React.createElement(Survey, { model: this.model.stringsSurvey })))));
+        }
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-tab-translation", (props) => {
+    return React.createElement(TabTranslationComponent, props);
+});
+
+class ObjectSelectorComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    renderElement() {
+        if (!this.model.isVisible)
+            return null;
+        return (React.createElement(List, { model: this.model.list }));
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-object-selector", (props) => {
+    return React.createElement(ObjectSelectorComponent, props);
+});
+
+class PropertyGridComponent extends SurveyElementBase {
+    get model() {
+        return this.props.model;
+    }
+    getStateElement() {
+        return this.model;
+    }
+    canRender() {
+        if (!this.model)
+            return false;
+        return super.canRender();
+    }
+    renderElement() {
+        return (React.createElement("div", { className: this.model.rootCss },
+            React.createElement(SearchComponent, { model: this.model.searchManager }),
+            React.createElement(ScrollComponent, null,
+                React.createElement(Survey, { model: this.model.survey }))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("buttongroup", (props) => {
+    return React.createElement(SurveyQuestionButtonGroup, props);
+});
+ReactElementFactory.Instance.registerElement("svc-property-grid", (props) => {
+    return React.createElement(PropertyGridComponent, props);
+});
+
+class SwitcherComponent extends SurveyElementBase {
+    get item() {
+        return this.props.item;
+    }
+    getStateElement() {
+        return this.item;
+    }
+    renderElement() {
+        const tooltip = this.item.tooltip || this.item.title;
+        const title = this.item.hasTitle ? React.createElement("span", { className: "svc-switcher__title" }, this.item.title) : null;
+        const button = attachKey2click(React.createElement("button", { className: this.item.getActionBarItemCss(), type: "button", disabled: this.item.disabled, onClick: (args) => this.item.action(this.item, this.item.getIsTrusted(args)), title: tooltip, "aria-checked": this.item.ariaChecked, "aria-expanded": this.item.ariaExpanded, role: this.item.ariaRole },
+            React.createElement("div", { className: this.item.getSwitcherIconCss() },
+                React.createElement("div", { className: "svc-switcher__icon-thumb" })),
+            title), this.item, { processEsc: false });
+        return button;
+    }
+}
+ReactElementFactory.Instance.registerElement("svc-switcher", (props) => {
+    return React.createElement(SwitcherComponent, props);
+});
+
+let ItemTemplateComponent$1 = class ItemTemplateComponent extends SurveyElementBase {
+    render() {
+        const item = this.props.item;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(SvgIcon, { iconName: item.iconName, size: item.iconSize, className: "svc-json-error__icon" }),
+            React.createElement("div", { className: "svc-json-error__container" },
+                React.createElement("div", { className: "svc-json-error__title" },
+                    React.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))),
+                this.renderFixButton())));
+    }
+    renderFixButton() {
+        if (!this.props.item.data.showFixButton)
+            return null;
+        const item = this.props.item;
+        return (attachKey2click(React.createElement("button", { type: "button", onClick: (event) => { event.stopPropagation(); item.data.fixError(); }, title: item.data.fixButtonTitle, className: "svc-json-error__fix-button" },
+            React.createElement(SvgIcon, { iconName: item.data.fixButtonIcon, size: "auto" }))));
+    }
+};
+ReactElementFactory.Instance.registerElement("json-error-item", (props) => {
+    return React.createElement(ItemTemplateComponent$1, props);
+});
+
+class SurveyQuestionSpinEditor extends SurveyQuestionText {
+    constructor(props) {
+        super(props);
+    }
+    get question() {
+        return this.questionBase;
+    }
+    renderInput() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onBlur: (event) => this.question.onBlur(event.nativeEvent), onFocus: (event) => this.question.onFocus(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onKeyDown: (event) => this.question.onInputKeyDown(event.nativeEvent), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+    }
+    renderElement() {
+        return (React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
+            this.renderInput(),
+            this.renderButtons()));
+    }
+    getValueCore() {
+        return this.question.renderedValue;
+    }
+    renderButtons() {
+        return (React.createElement("span", { className: this.question.cssClasses.buttonsContainer },
+            React.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onDownButtonClick, onMouseDown: this.question.onDownButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
+                React.createElement(SvgIcon, { iconName: this.question.cssClasses.decreaseButtonIcon, size: "auto" })),
+            React.createElement("button", { tabIndex: -1, className: this.question.cssClasses.arrowButton, disabled: this.isDisplayMode, onClick: this.question.onUpButtonClick, onMouseDown: this.question.onUpButtonMouseDown, onMouseUp: this.question.onButtonMouseUp, onMouseLeave: this.question.onButtonMouseLeave, onBlur: event => this.question.onBlur(event.nativeEvent), onFocus: event => this.question.onFocus(event.nativeEvent) },
+                React.createElement(SvgIcon, { iconName: this.question.cssClasses.increaseButtonIcon, size: "auto" }))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("spinedit", (props) => {
+    return React.createElement(SurveyQuestionSpinEditor, props);
+});
+
+class ItemTemplateComponent extends SurveyElementBase {
+    render() {
+        const item = this.props.item;
+        return (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: "spg-color-editor__color-swatch", style: { backgroundColor: item.value } }),
+            React.createElement("span", { key: 2 }, this.renderLocString(item.locTitle, undefined, "locString"))));
+    }
+}
+ReactElementFactory.Instance.registerElement("color-item", (props) => {
+    return React.createElement(ItemTemplateComponent, props);
+});
+
+class SurveyQuestionColor extends SurveyQuestionText {
+    constructor(props) {
+        super(props);
+    }
+    get question() {
+        return this.questionBase;
+    }
+    renderInput() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { id: this.question.inputId, disabled: this.isDisplayMode, className: this.question.cssClasses.control, ref: (input) => (this.setControl(input)), placeholder: this.question.renderedPlaceholder, autoComplete: "off", onKeyUp: (event) => this.question.onKeyUp(event.nativeEvent), onBlur: (event) => this.question.onBlur(event.nativeEvent), onChange: this.question.onChange, onBeforeInput: event => this.question.onBeforeInput(event.nativeEvent), "aria-required": this.question.ariaRequired, "aria-label": this.question.ariaLabel, "aria-invalid": this.question.ariaInvalid, "aria-describedby": this.question.ariaDescribedBy })));
+    }
+    renderElement() {
+        return (React.createElement("div", { className: this.question.cssClasses.root, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
+            this.renderColorSwatch(),
+            this.renderInput(),
+            this.question.showDropdownAction ? this.renderDropdownAction() : null));
+    }
+    getValueCore() {
+        return this.question.renderedValue;
+    }
+    renderColorSwatch() {
+        return React.createElement("label", { className: this.question.getSwatchCss(), style: this.question.getSwatchStyle() },
+            React.createElement(SvgIcon, { iconName: this.question.cssClasses.swatchIcon, size: "auto" }),
+            React.createElement("input", { type: "color", disabled: this.isDisplayMode, value: this.question.renderedColorValue, className: this.question.cssClasses.colorInput, onChange: (event) => this.question.onColorInputChange(event.nativeEvent), tabIndex: -1 }));
+    }
+    renderDropdownAction() {
+        return (React.createElement(React.Fragment, null,
+            ReactElementFactory.Instance.createElement("sv-action-bar-item", { item: this.question.dropdownAction }),
+            this.renderPopup()));
+    }
+    renderPopup() {
+        return React.createElement(Popup, { model: this.question.dropdownAction.popupModel });
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("color", (props) => {
+    return React.createElement(SurveyQuestionColor, props);
+});
+
+class SurveyQuestionFileEditor extends SurveyQuestionText {
+    constructor(props) {
+        super(props);
+    }
+    get questionFile() {
+        return this.questionBase;
+    }
+    getValueCore() {
+        return this.question.renderedValue;
+    }
+    renderInput() {
+        return (React.createElement(React.Fragment, null,
+            React.createElement("input", { disabled: this.isDisplayMode, className: this.questionFile.cssClasses.control, placeholder: this.questionFile.renderedPlaceholder, ref: (input) => (this.setControl(input)), autoComplete: "off", type: "text", onBlur: (event) => this.questionFile.onInputBlur(event.nativeEvent), onChange: (event) => this.questionFile.onInputChange(event.nativeEvent) })));
+    }
+    renderFileInput() {
+        return (React.createElement("input", { type: "file", disabled: this.isDisplayMode, className: this.questionFile.cssClasses.fileInput, id: this.questionFile.inputId, "aria-required": this.questionFile.ariaRequired, "aria-label": this.questionFile.ariaLabel, "aria-invalid": this.questionFile.ariaInvalid, "aria-describedby": this.questionFile.ariaDescribedBy, multiple: false, title: this.questionFile.inputTitle, accept: this.questionFile.acceptedTypes, tabIndex: -1, onChange: (event) => this.questionFile.onFileInputChange(event.nativeEvent) }));
+    }
+    renderButtons() {
+        return (React.createElement("div", { className: this.questionFile.cssClasses.buttonsContainer },
+            this.renderClearButton(),
+            this.renderChooseButton()));
+    }
+    renderClearButton() {
+        return attachKey2click((React.createElement("button", { type: "button", className: this.questionFile.cssClasses.clearButton, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
+            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto", title: this.questionFile.clearButtonCaption }))));
+    }
+    renderChooseButton() {
+        return (attachKey2click(React.createElement("label", { role: "button", onClick: event => this.questionFile.chooseFiles(event.nativeEvent), className: this.questionFile.getChooseButtonCss(), htmlFor: this.questionFile.inputId, "aria-label": this.questionFile.chooseButtonCaption },
+            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.chooseButtonIcon, size: "auto", title: this.questionFile.chooseButtonCaption }))));
+    }
+    renderElement() {
+        return (React.createElement("div", { className: this.questionFile.cssClasses.root, ref: el => this.setContent(el), onDragEnter: this.questionFile.onDragEnter, onDragOver: this.questionFile.onDragOver, onDrop: this.questionFile.onDrop, onDragLeave: this.questionFile.onDragLeave, onKeyDown: event => this.question.onKeyDown(event.nativeEvent) },
+            this.renderInput(),
+            this.renderFileInput(),
+            this.renderButtons()));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("fileedit", (props) => {
+    return React.createElement(SurveyQuestionFileEditor, props);
+});
+
+class SurveyQuestionTextWithReset extends SurveyQuestionElementBase {
+    get question() {
+        return this.questionBase;
+    }
+    renderElement() {
+        const textElement = this.renderInput();
+        const resetButton = this.renderResetButton();
+        return (React.createElement("div", { className: this.question.getRootClass() },
+            textElement,
+            resetButton));
+    }
+    renderInput() {
+        return ReactQuestionFactory.Instance.createQuestion(this.question.wrappedQuestionTemplate, {
+            question: this.question,
+            isDisplayMode: this.question.isInputReadOnly,
+            creator: this,
+        });
+    }
+    renderResetButton() {
+        return (React.createElement("button", { className: this.question.cssClasses.resetButton, disabled: this.question.resetValueAdorner.isDisabled, title: this.question.resetValueAdorner.caption, onClick: () => this.question.resetValueAdorner.resetValue() },
+            React.createElement(SvgIcon, { iconName: this.question.cssClasses.resetButtonIcon, size: "auto" })));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("textwithreset", (props) => {
+    return React.createElement(SurveyQuestionTextWithReset, props);
+});
+ReactQuestionFactory.Instance.registerQuestion("commentwithreset", (props) => {
+    return React.createElement(SurveyQuestionTextWithReset, props);
+});
+
+class SurveyQuestionBooleanSwitch extends SurveyQuestionElementBase {
+    renderElement() {
+        const button = attachKey2click(React.createElement("div", { className: "spg-boolean-switch__button" + (this.questionBase.value ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-required": this.questionBase.ariaRequired, "aria-label": this.questionBase.ariaLabel, "aria-invalid": this.questionBase.ariaInvalid, "aria-errormessage": this.questionBase.ariaErrormessage },
+            React.createElement("div", { className: "spg-boolean-switch__thumb" },
+                React.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left" })),
+            React.createElement("div", { className: "spg-boolean-switch__thumb" },
+                React.createElement("div", { className: "spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right" }))), this.questionBase, { processEsc: false });
+        return (React.createElement("div", { className: "spg-boolean-switch", onClick: () => this.questionBase.value = !this.questionBase.value },
+            button,
+            React.createElement("div", { className: "spg-boolean-switch__caption" },
+                React.createElement("div", { className: "spg-boolean-switch__title" }, SurveyElementBase.renderLocString(this.questionBase.locTitle)))));
+    }
+}
+ReactQuestionFactory.Instance.registerQuestion("sv-boolean-switch", (props) => {
+    return React.createElement(SurveyQuestionBooleanSwitch, props);
+});
+RendererFactory.Instance.registerRenderer("boolean", "switch", "sv-boolean-switch");
+
+let Version;
+Version = `${"2.0.0"}`;
+checkLibraryVersion(`${"2.0.0"}`, "survey-creator-react");
+
+export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, CreatorSurveyPageComponent, ImageItemValueAdornerComponent, ItemValueAdornerComponent, LogoImageComponent, MatrixCellAdornerComponent, PanelAdornerComponent, PropertyGridComponent, PropertyGridPlaceholderComponent, QuestionAdornerComponent, QuestionBanner, QuestionDropdownAdornerComponent, QuestionEditorContentComponent, QuestionErrorComponent, QuestionImageAdornerComponent, QuestionRatingAdornerComponent, QuestionWidgetAdornerComponent, QuestionWrapperFooter, QuestionWrapperHeader, ReactDragEvent, ReactMouseEvent, RowWrapper, SearchComponent, SideBarDefaultHeader, SidebarComponent, SurveyCreator, SurveyCreatorComponent, SurveyCreatorToolboxCategory, SurveyCreatorToolboxItem, SurveyCreatorToolboxItemGroup, SurveyCreatorToolboxTool, SurveyElementEmbeddedSurvey, SurveyLocStringEditor, SurveyLogicOpertor, SurveyNavigation, SurveyQuestionBooleanSwitch, SurveyQuestionColor, SurveyQuestionFileEditor, SurveyQuestionLinkValue, SurveyQuestionSpinEditor, SurveyQuestionTextWithReset, SurveyResults, SurveyResultsByRow, SurveySimulator, SwitcherComponent, TabButtonComponent, TabDesignerComponent, TabJsonEditorAceComponent, TabJsonEditorErrorsComponent, TabJsonEditorTextareaComponent, TabLogicAddButtonComponent, TabLogicComponent, TabPreviewSurveyComponent, TabPreviewTestSurveyAgainComponent, TabThemeSurveyComponent, TabTranslationComponent, TabbedMenuComponent, TabbedMenuItemComponent, ToolboxList, TranslateFromAction, TranslationLineSkeleton, Version };
+//# sourceMappingURL=survey-creator-react.js.map