survey-creator-react 1.12.61 → 1.12.63

package/fesm/survey-creator-react.mjs

@@ -1,2972 +0,0 @@
-/*!
- * SurveyJS Creator v2.5.15
- * (c) 2015-2026 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 { ReactElementFactory, SurveyElementBase, attachKey2click, SvgIcon, Survey, ReactQuestionFactory, SurveyLocStringViewer, SvgBundleComponent, PopupModal, SurveyActionBar, NotifierComponent, TitleElement, ReactSurveyElementsWrapper, LoadingIndicatorComponent, SurveyPage, Popup, LogoImage, SurveyQuestionElementBase, SurveyQuestion, SurveyPanel, Scroll, CharacterCounterComponent, SurveyQuestionDropdown, SurveyHeader, List, SurveyQuestionText } from 'survey-react-ui';
-import { SurveyCreatorModel, assign, RowViewModel, QuestionAdornerViewModel, QuestionDropdownAdornerViewModel, QuestionImageAdornerViewModel, QuestionRatingAdornerViewModel, PageAdorner, LogoImageViewModel, editorLocalization, ItemValueWrapperViewModel, ImageItemValueWrapperViewModel, MatrixCellWrapperViewModel, SurveyResultsModel, ToolboxToolViewModel, editableStringRendererName, StringEditorViewModelBase, initLogicOperator, PageNavigatorViewModel } from 'survey-creator-core';
-export { PropertyGridEditorCollection, SurveyLogic, SurveyLogicUI, SurveyQuestionEditorDefinition, ToolboxToolViewModel, editorLocalization, localization, settings, svgBundle } from 'survey-creator-core';
-import * as ReactDOM from 'react-dom';
-import { CssClassBuilder, settings, 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", role: "tablist", style: this.model.getRootStyle() }, items));
-    }
-    componentDidUpdate(prevProps, prevState) {
-        super.componentDidUpdate(prevProps, prevState);
-        const container = this.rootRef.current;
-        if (!container)
-            return;
-        this.model.initResponsivityManager(container);
-    }
-    componentDidMount() {
-        super.componentDidMount();
-        const container = this.rootRef.current;
-        if (!container)
-            return;
-        this.model.initResponsivityManager(container);
-    }
-    componentWillUnmount() {
-        this.model.resetResponsivityManager();
-        super.componentWillUnmount();
-    }
-}
-class TabbedMenuItemWrapper extends SurveyElementBase {
-    constructor(props) {
-        super(props);
-        this.ref = React.createRef();
-        this.state = { changed: 0 };
-    }
-    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) => {
-            const update = () => {
-                if (this.item.mode == mode) {
-                    this.setState({ changed: this.state.changed + 1 });
-                }
-                else {
-                    this.item.mode = mode;
-                }
-            };
-            queueMicrotask(() => {
-                if (ReactDOM["flushSync"]) {
-                    ReactDOM["flushSync"](() => {
-                        update();
-                    });
-                }
-                else {
-                    update();
-                }
-                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", { role: "tab", id: "tab-" + item.id, "aria-selected": item.active, "aria-controls": "scrollableDiv-" + item.id, className: item.getRootCss(), onClick: () => item.doAction() },
-            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", { role: "tabpanel", key: tab.id, id: "scrollableDiv-" + tab.id, "aria-labelledby": "tab-" + tab.id, className: className }, component));
-    }
-    renderSidebar() {
-        if (!!this.creator.isSidebarVisible) {
-            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) {
-        // eslint-disable-next-line no-console
-        console.error("The render method is deprecated. Use SurveyCreatorComponent instead.");
-    }
-    //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, { model: 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 (typeof key === "object") {
-                const currentProp = this.props[key.name];
-                const nextProp = nextProps[key.name];
-                if (key.deepEqual) {
-                    if (this.props[key.name] === nextProps[key.name])
-                        return false;
-                    const currentPropKeys = Object.keys(currentProp || {});
-                    if (currentPropKeys.length !== Object.keys(nextProp || {}).length)
-                        return true;
-                    return currentPropKeys.some(key => currentProp[key] != nextProp[key]);
-                }
-                else {
-                    return currentProp !== nextProp;
-                }
-            }
-            else {
-                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", { name: "componentData", deepEqual: true }];
-    }
-    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;
-    }
-}
-
-function QuestionElementContentFunc(props) {
-    return props.element;
-}
-const QuestionElementContent = React.memo(QuestionElementContentFunc);
-QuestionElementContent.displayName = "QuestionElementContent";
-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, renderActions: false }) :
-            React.createElement("div", { className: this.model.cssCollapsedHiddenTitle },
-                React.createElement("span", { className: "svc-fake-title" }, element.name)))));
-    }
-    renderElementContent() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(QuestionElementContent, { element: 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.isEmptyElement) {
-            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", { role: "button", 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", { role: "button", 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);
-});
-
-const PageElementContent = React.memo(({ page, survey, creator }) => {
-    return React.createElement(SurveyPage, { page: page, survey: survey, creator: creator });
-});
-PageElementContent.displayName = "PageElementContent";
-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 = this.createPageAdorner(props.creator, props.page);
-        this.model.isGhost = this.props.isGhost;
-    }
-    createPageAdorner(creator, page) {
-        return new PageAdorner(creator, page);
-    }
-    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.renderContent(),
-            this.renderPlaceholder(),
-            this.renderHeader(),
-            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() {
-        if (!this.model.needRenderContent) {
-            return React.createElement("div", { className: "svc-page__loading-content" },
-                React.createElement(LoadingIndicatorComponent, null));
-        }
-        return (React.createElement(PageElementContent, { page: this.props.page, survey: this.props.survey, creator: this.props.creator }));
-    }
-    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, role: "button" },
-            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 {
-    constructor() {
-        super(...arguments);
-        this.rootRef = React.createRef();
-    }
-    get embeddedSurvey() {
-        const element = (this.props.element || this.props.question);
-        if (!element)
-            return null;
-        const survey = element.embeddedSurvey;
-        if (!survey || !survey.currentPage)
-            return null;
-        return survey;
-    }
-    get creator() {
-        return this.props.creator;
-    }
-    componentDidMount() {
-        super.componentDidMount();
-        if (this.embeddedSurvey) {
-            this.embeddedSurvey.rootElement = this.rootRef.current;
-        }
-    }
-    render() {
-        const survey = this.embeddedSurvey;
-        if (!survey)
-            return null;
-        return React.createElement("div", { style: { display: "contents" }, ref: this.rootRef },
-            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("div", { style: this.props.style },
-            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", { role: "button", 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", { role: "button", 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(React.Fragment, null,
-            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),
-                this.renderPanelAction()),
-            this.renderPanel()));
-    }
-    renderPanelAction() {
-        if (!this.model.canShowPanel())
-            return null;
-        const isShowPanel = this.model.showPanel;
-        const icName = isShowPanel ? "icon-collapsepanel-16x16" : "icon-expandpanel-16x16";
-        const btn = attachKey2click(React.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add svc-choice-elements-button", onClick: () => {
-                this.model.togglePanel();
-            } },
-            React.createElement(SvgIcon, { size: "auto", iconName: icName })));
-        return React.createElement("div", { className: "svc-item-value-controls svc-choice-elements-button-container" }, btn);
-    }
-    renderPanel() {
-        if (!this.model.showPanel)
-            return null;
-        const creator = this.model.creator;
-        const survey = creator.survey;
-        return React.createElement(ChoiceItemPanel, { element: this.model.item.panel, survey: survey, creator: creator, css: survey.getCss() });
-    }
-}
-const ChoiceItemPanel = React.memo(({ element, survey, creator, css }) => {
-    return React.createElement(SurveyPanel, { element: element, survey: survey, creator: creator, cssClasses: css });
-});
-ChoiceItemPanel.displayName = "ChoiceItemPanel";
-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));
-    }
-    renderNewItemControls() {
-        const addButton = attachKey2click(React.createElement("span", { className: this.model.addButtonCss, onClick: () => this.model.chooseNewFile(this.model) }, this.model.showChooseButtonAsIcon ?
-            React.createElement(SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }) :
-            React.createElement("span", null, this.model.chooseImageText)));
-        const placeholder = this.model.showPlaceholder ? React.createElement("span", { className: "svc-image-item-value__placeholder" }, this.model.placeholderText) : null;
-        return React.createElement(React.Fragment, null,
-            placeholder,
-            addButton);
-    }
-    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" },
-                    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)))),
-                this.model.allowAdd && !this.model.isUploading ?
-                    React.createElement("div", { className: "svc-image-item-value-controls" }, this.renderNewItemControls())
-                    : 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, onDrop: this.model.onDrop, onDragEnter: this.model.onDragEnter, onDragOver: this.model.onDragOver, onDragLeave: this.model.onDragLeave },
-            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, { model: 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.getTooltip() }),
-                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.getTooltip(), 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))), undefined, { disableTabStop: !this.model.toolboxItem.enabled });
-        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";
-        }
-        const title = this.renderLocString(this.category.locTitle);
-        return attachKey2click(React.createElement("div", { className: className, onClick: e => this.category.toggleState() },
-            React.createElement("span", { className: "svc-toolbox__category-title" }, title),
-            this.renderButton()));
-    }
-    renderButton() {
-        if (!this.toolbox.canCollapseCategories)
-            return null;
-        const iconName = this.category.iconName;
-        return (React.createElement("div", { className: "svc-toolbox__category-header__controls" },
-            React.createElement(SvgIcon, { className: this.category.iconClassName, iconName: 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 target = e.target;
-            const root = (target === null || target === void 0 ? void 0 : target.getRootNode()) || settings.environment.root;
-            if (!(root instanceof Document || root instanceof ShadowRoot))
-                return;
-            if (target === root.activeElement) {
-                this.model.filterString = 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, tabIndex: this.model.getTabIndex() }),
-            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 AdaptiveToolbox extends SurveyElementBase {
-    constructor(props) {
-        super(props);
-        this.rootRef = React.createRef();
-    }
-    componentDidUpdate(prevProps, prevState) {
-        super.componentDidUpdate(prevProps, prevState);
-        const container = this.rootRef.current;
-        if (container) {
-            this.toolbox.afterRender(container);
-        }
-    }
-    componentDidMount() {
-        super.componentDidMount();
-        const container = this.rootRef.current;
-        if (container) {
-            this.toolbox.afterRender(container);
-        }
-    }
-    componentWillUnmount() {
-        this.toolbox.beforeDestroy();
-        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 ReactElementFactory.Instance.createElement("svc-toolbox-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() {
-        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, style: this.toolbox.getRootStyle() },
-            React.createElement("div", { onBlur: (e) => this.toolbox.focusOut(e), className: "svc-toolbox__panel" },
-                search,
-                placeholder,
-                React.createElement(Scroll, 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 model = this.props.model;
-        if (!model.visible)
-            return null;
-        const button = attachKey2click(React.createElement("div", { className: model.buttonClassName, title: model.tooltip, onClick: () => { model.action(); } },
-            React.createElement("div", { className: "svc-menu-action__icon" },
-                React.createElement("div", { className: "svc-menu-action__icon-container" },
-                    React.createElement(SvgIcon, { iconName: model.iconName, size: "auto" })))), 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(Scroll, 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(SurveyActionBar, { 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.onBeforeInput = (event) => {
-            this.baseModel.onBeforeInput(event);
-        };
-        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.model.locStr;
-    }
-    get creator() {
-        return this.props.model.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();
-        this.locString.onStringChanged.add(this.onChangedHandler);
-    }
-    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, tabIndex: this.baseModel.tabIndex, 
-                // 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, tabIndex: this.baseModel.tabIndex, spellCheck: false, "aria-placeholder": this.placeholder, "aria-label": this.placeholder || "content editable", suppressContentEditableWarning: true, 
-                // style={this.style}
-                key: this.locString.renderedHtml, onBlur: this.onBlur, onBeforeInput: this.onBeforeInput, 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, { model: 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.locReadOnlyText) ? this.renderLocString(q.locReadOnlyText) : "";
-        const dropdownListModel = this.question.dropdownListModel;
-        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: dropdownListModel.ariaQuestionRole, "aria-required": dropdownListModel.ariaQuestionRequired, "aria-invalid": dropdownListModel.ariaQuestionInvalid, "aria-errormessage": dropdownListModel.ariaQuestionErrorMessage, "aria-expanded": dropdownListModel.ariaQuestionExpanded, "aria-label": dropdownListModel.ariaQuestionLabel, "aria-labelledby": dropdownListModel.ariaQuestionLabelledby, "aria-controls": dropdownListModel.ariaQuestionControls },
-            React.createElement("div", { className: this.question.cssClasses.controlValue }, text)));
-    }
-    renderEditorButtons() {
-        return null;
-    }
-}
-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" } },
-            React.createElement("div", null,
-                attachKey2click(React.createElement("div", { role: "button", 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", { role: "button", 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, "svc-page", page == this.model.newPage));
-            });
-        }
-        else {
-            const page2Display = this.model.pagesController.page2Display;
-            if (!!page2Display) {
-                renderedPages.push(this.createRenderedPage(page2Display, "svc-page", this.model.newPage === page2Display));
-            }
-        }
-        return renderedPages;
-    }
-    createRenderedPage(page, className, isGhostPage) {
-        return React.createElement(PageWrapperComponent, { key: page === null || page === void 0 ? void 0 : page.id, page: page, isGhost: isGhostPage, creator: this.creator, className: className });
-    }
-    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(Scroll, 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.showSurveyHeader && 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.createRenderedPage(this.model.newPage, "svc-designer-placeholder-page", true))));
-    }
-    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.showSurveyHeader);
-        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 PageWrapperComponent extends React.Component {
-    constructor(props) {
-        super(props);
-        this.id = `PageWrapperCallback_${++PageWrapperComponent.ID}`;
-        this.state = { changed: 0 };
-    }
-    render() {
-        var _a, _b;
-        const pageContent = !!this.props.page ? ReactElementFactory.Instance.createElement("svc-page", { survey: this.props.creator.survey, page: this.props.page, creator: this.props.creator, isGhost: this.props.isGhost }) : null;
-        return React.createElement("div", { className: this.props.className, "data-sv-drop-target-page": (_a = this.props.page) === null || _a === void 0 ? void 0 : _a.name, "data-sv-drop-target-survey-element": this.props.isGhost ? "newGhostPage" : (_b = this.props.page) === null || _b === void 0 ? void 0 : _b.name }, pageContent);
-    }
-    setupCallback(page) {
-        if (!page)
-            return;
-        page.registerFunctionOnPropertyValueChanged("name", () => {
-            this.setState({ changed: !!this.state && this.state.changed ? this.state.changed + 1 : 1 });
-        }, this.id);
-    }
-    clearCallback(page) {
-        if (!page)
-            return;
-        page.unRegisterFunctionOnPropertyValueChanged("name");
-    }
-    componentDidUpdate(prevProps, prevState) {
-        if (prevProps.page !== this.props.page) {
-            this.clearCallback(prevProps.page);
-            this.setupCallback(this.props.page);
-        }
-    }
-    componentDidMount() {
-        this.setupCallback(this.props.page);
-    }
-    componentWillUnmount() {
-        this.clearCallback(this.props.page);
-    }
-}
-PageWrapperComponent.ID = 0;
-
-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(Survey, { model: this.model.survey })));
-    }
-}
-ReactElementFactory.Instance.registerElement("svc-property-grid", (props) => {
-    return React.createElement(PropertyGridComponent, props);
-});
-
-class ComponentContainer extends React.Component {
-    constructor(props) {
-        super(props);
-    }
-    render() {
-        return (React.createElement("div", { className: this.props.model.cssClass }, this.props.model.elements.map((element, index) => {
-            return ReactElementFactory.Instance.createElement(element.componentName, Object.assign(Object.assign({}, element.componentData), { key: index }));
-        })));
-    }
-}
-ReactElementFactory.Instance.registerElement("svc-component-container", (props) => {
-    return React.createElement(ComponentContainer, 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", { role: "spinbutton", 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.a11y_input_ariaRequired, "aria-label": this.question.a11y_input_ariaLabel, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-describedby": this.question.a11y_input_ariaDescribedBy, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-errormessage": this.question.a11y_input_ariaErrormessage })));
-    }
-    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, "aria-hidden": "true", 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, "aria-hidden": "true", 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.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_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, "aria-required": this.question.a11y_input_ariaRequired, "aria-labelledby": this.question.a11y_input_ariaLabelledBy, "aria-label": this.question.a11y_input_ariaLabel, "aria-invalid": this.question.a11y_input_ariaInvalid, "aria-describedby": this.question.a11y_input_ariaDescribedBy }));
-    }
-    renderDropdownAction() {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("div", { "aria-hidden": "true", className: this.question.cssClasses.choicesButtonWrapper }, 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.question.isTextInputReadOnly, 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", { className: this.questionFile.cssClasses.clearButton, title: this.questionFile.clearButtonCaption, disabled: this.questionFile.getIsClearButtonDisabled(), onClick: this.questionFile.doClean },
-            React.createElement(SvgIcon, { iconName: this.questionFile.cssClasses.clearButtonIcon, size: "auto" }))));
-    }
-    renderChooseButton() {
-        return (attachKey2click(React.createElement("label", { 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.booleanValue ? " spg-boolean-switch__button--checked" : ""), tabIndex: 0, role: "checkbox", "aria-checked": this.questionBase.booleanValue || false, "aria-required": this.questionBase.a11y_input_ariaRequired, "aria-label": this.questionBase.a11y_input_ariaLabel, "aria-labelledby": this.questionBase.a11y_input_ariaLabelledBy, "aria-invalid": this.questionBase.a11y_input_ariaInvalid, "aria-errormessage": this.questionBase.a11y_input_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.booleanValue = !this.questionBase.booleanValue },
-            button,
-            React.createElement("div", { className: "spg-boolean-switch__caption" },
-                React.createElement("div", { className: "spg-boolean-switch__title", id: this.questionBase.labelRenderedAriaID }, 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.5.15"}`;
-checkLibraryVersion(`${"2.5.15"}`, "survey-creator-react");
-
-export { ActionButton, AdaptiveToolbox, CellQuestionAdornerComponent, CellQuestionDropdownAdornerComponent, ComponentContainer, 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.mjs.map