survey-creator-react/survey-creator-react.js

Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.

/*!
 * SurveyJS Creator React v2.3.1
 * (c) 2015-2025 Devsoft Baltic OÜ - http://surveyjs.io/
 * Github: https://github.com/surveyjs/survey-creator
 * License: https://surveyjs.io/Licenses#SurveyCreator
 */
(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory(require("react"), require("react-dom"), require("survey-core"), require("survey-creator-core"), require("survey-react-ui"));
	else if(typeof define === 'function' && define.amd)
		define("survey-creator-react", ["react", "react-dom", "survey-core", "survey-creator-core", "survey-react-ui"], factory);
	else if(typeof exports === 'object')
		exports["survey-creator-react"] = factory(require("react"), require("react-dom"), require("survey-core"), require("survey-creator-core"), require("survey-react-ui"));
	else
		root["SurveyCreator"] = factory(root["React"], root["ReactDOM"], root["Survey"], root["SurveyCreatorCore"], root["SurveyReact"]);
})(this, (__WEBPACK_EXTERNAL_MODULE_react__, __WEBPACK_EXTERNAL_MODULE_react_dom__, __WEBPACK_EXTERNAL_MODULE_survey_core__, __WEBPACK_EXTERNAL_MODULE_survey_creator_core__, __WEBPACK_EXTERNAL_MODULE_survey_react_ui__) => {
return /******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/ActionButton.tsx":
/*!******************************!*\
  !*** ./src/ActionButton.tsx ***!
  \******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ActionButton: () => (/* binding */ ActionButton)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-core */ "survey-core");
/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);




var ActionButton = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ActionButton, _super);
    function ActionButton() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    ActionButton.prototype.renderElement = function () {
        var classes = new survey_core__WEBPACK_IMPORTED_MODULE_2__.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);
    };
    ActionButton.prototype.renderButtonText = function (classes) {
        var _this = this;
        if (this.props.disabled) {
            return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes }, this.props.text);
        }
        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { role: "button", className: classes, onClick: function (e) {
                if (!_this.props.allowBubble) {
                    e.stopPropagation();
                }
                _this.props.click();
            }, title: this.props.title }, this.props.text))));
    };
    ActionButton.prototype.renderIcon = function (classes) {
        var _this = this;
        classes += " svc-action-button--icon";
        if (this.props.disabled) {
            return react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes },
                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: this.props.iconName }));
        }
        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: classes, onClick: function (e) {
                if (!_this.props.allowBubble) {
                    e.stopPropagation();
                }
                _this.props.click();
            }, title: this.props.title },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: this.props.iconName })))));
    };
    return ActionButton;
}(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SurveyElementBase));

survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-action-button", function (props) { return react__WEBPACK_IMPORTED_MODULE_1__.createElement(ActionButton, props); });


/***/ }),

/***/ "./src/AddQuestionButton.tsx":
/*!***********************************!*\
  !*** ./src/AddQuestionButton.tsx ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   AddQuestionButtonComponent: () => (/* binding */ AddQuestionButtonComponent)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _events__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./events */ "./src/events.ts");




var AddQuestionButtonComponent = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(AddQuestionButtonComponent, _super);
    function AddQuestionButtonComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(AddQuestionButtonComponent.prototype, "model", {
        get: function () {
            return this.props.item.data;
        },
        enumerable: false,
        configurable: true
    });
    AddQuestionButtonComponent.prototype.renderTypeSelector = function () {
        var questionTypeSelectorModel = this.model.questionTypeSelectorModel;
        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("button", { type: "button", onClick: function (e) {
                e.stopPropagation();
                questionTypeSelectorModel.action();
            }, className: "svc-element__question-type-selector", title: this.model.addNewQuestionText, role: "button" },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-element__question-type-selector-icon" },
                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { iconName: questionTypeSelectorModel.iconName, size: "auto", title: this.model.addNewQuestionText })),
            this.props.renderPopup === undefined || this.props.renderPopup ?
                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: questionTypeSelectorModel.popupModel })
                : null));
    };
    AddQuestionButtonComponent.prototype.renderElement = function () {
        var _this = this;
        var addButtonClass = this.props.buttonClass || "svc-btn";
        return react__WEBPACK_IMPORTED_MODULE_1__.createElement(react__WEBPACK_IMPORTED_MODULE_1__.Fragment, null,
            (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-element__add-new-question " + addButtonClass, onClick: function (e) {
                    e.stopPropagation();
                    _this.model.addNewQuestion(_this.model, new _events__WEBPACK_IMPORTED_MODULE_3__.ReactMouseEvent(e));
                }, onMouseOver: function (e) { return _this.model.hoverStopper && _this.model.hoverStopper(e.nativeEvent, e.currentTarget); } },
                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-panel__add-new-question-icon", iconName: "icon-add_24x24", size: "auto" }),
                react__WEBPACK_IMPORTED_MODULE_1__.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);
    };
    return AddQuestionButtonComponent;
}(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SurveyElementBase));

survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-add-new-question-btn", function (props) {
    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(AddQuestionButtonComponent, props);
});


/***/ }),

/***/ "./src/ImageItemValueWrapper.tsx":
/*!***************************************!*\
  !*** ./src/ImageItemValueWrapper.tsx ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ImageItemValueAdornerComponent: () => (/* binding */ ImageItemValueAdornerComponent)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");






var ImageItemValueAdornerComponent = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ImageItemValueAdornerComponent, _super);
    function ImageItemValueAdornerComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.preventDragHandler = function (e) {
            e.preventDefault();
        };
        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
        return _this;
    }
    ImageItemValueAdornerComponent.prototype.createModel = function (props) {
        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.ImageItemValueWrapperViewModel(props.componentData.creator, props.question, props.item, null, null);
    };
    ImageItemValueAdornerComponent.prototype.getUpdatedModelProps = function () {
        return ["question", "item"];
    };
    ImageItemValueAdornerComponent.prototype.getStateElement = function () {
        return this.model;
    };
    Object.defineProperty(ImageItemValueAdornerComponent.prototype, "question", {
        get: function () {
            return this.props.question;
        },
        enumerable: false,
        configurable: true
    });
    ImageItemValueAdornerComponent.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.model.itemsRoot = this.rootRef.current;
    };
    ImageItemValueAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
        this.model.itemsRoot = this.rootRef.current;
    };
    ImageItemValueAdornerComponent.prototype.renderLoadingIndicator = function () {
        return react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value__loading" },
            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.LoadingIndicatorComponent, null));
    };
    ImageItemValueAdornerComponent.prototype.renderNewItemControls = function () {
        var _this = this;
        var addButton = (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: this.model.addButtonCss, onClick: function () { return _this.model.chooseNewFile(_this.model); } }, this.model.showChooseButtonAsIcon ?
            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-add-lg", title: this.model.addFileTitle }) :
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", null, this.model.chooseImageText)));
        var placeholder = this.model.showPlaceholder ? react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-image-item-value__placeholder" }, this.model.placeholderText) : null;
        return react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
            placeholder,
            addButton);
    };
    ImageItemValueAdornerComponent.prototype.render = function () {
        var _this = this;
        this.model.item = this.props.item;
        var isNew = !this.props.question.isItemInList(this.props.item);
        this.model.isNew = isNew;
        var imageStyle = !this.model.getIsNewItemSingle() ? { width: this.question.renderedImageWidth, height: this.question.renderedImageHeight } : null;
        var content = null;
        if (isNew || this.model.isUploading) {
            content = (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value__item" },
                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "sd-imagepicker__item sd-imagepicker__item--inline" },
                        react__WEBPACK_IMPORTED_MODULE_2__.createElement("label", { className: "sd-imagepicker__label" },
                            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { style: imageStyle, className: "sd-imagepicker__image" }, this.model.isUploading ? this.renderLoadingIndicator() : null)))),
                this.model.allowAdd && !this.model.isUploading ?
                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value-controls" }, this.renderNewItemControls())
                    : null));
        }
        else {
            content = (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
                react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value__item" }, this.props.element),
                this.model.isDraggable && this.model.canRenderControls ?
                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button svc-image-item-value-controls__drag-area-indicator", onPointerDown: function (event) { return _this.model.onPointerDown(event); } },
                        react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-drag-24x24" }))
                    : null,
                this.model.canRenderControls ?
                    react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-context-container svc-image-item-value-controls" },
                        this.model.allowRemove && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: "auto", iconName: "icon-choosefile", title: this.model.selectFileTitle }))) : null,
                        this.model.allowRemove && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
                            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { role: "button", size: "auto", iconName: "icon-delete", title: this.model.removeFileTitle }))) : null)
                    : null));
        }
        return (react__WEBPACK_IMPORTED_MODULE_2__.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: function (event) { return _this.model.onPointerDown(event); }, onDragStart: this.preventDragHandler, onDrop: this.model.onDrop, onDragEnter: this.model.onDragEnter, onDragOver: this.model.onDragOver, onDragLeave: this.model.onDragLeave },
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value-wrapper__ghost", style: imageStyle }),
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-image-item-value-wrapper__content" },
                react__WEBPACK_IMPORTED_MODULE_2__.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)));
    };
    return ImageItemValueAdornerComponent;
}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));

survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-image-item-value", function (props) {
    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(ImageItemValueAdornerComponent, props);
});


/***/ }),

/***/ "./src/ItemValueWrapper.tsx":
/*!**********************************!*\
  !*** ./src/ItemValueWrapper.tsx ***!
  \**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   ItemValueAdornerComponent: () => (/* binding */ ItemValueAdornerComponent)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");





var ItemValueAdornerComponent = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(ItemValueAdornerComponent, _super);
    function ItemValueAdornerComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.onBlur = function (event) {
            _this.model.onFocusOut(event.nativeEvent);
        };
        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_2__.createRef();
        return _this;
    }
    ItemValueAdornerComponent.prototype.createModel = function (props) {
        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_1__.ItemValueWrapperViewModel(props.componentData.creator, props.question, props.item);
    };
    ItemValueAdornerComponent.prototype.getUpdatedModelProps = function () {
        return ["question", "item"];
    };
    ItemValueAdornerComponent.prototype.getStateElement = function () {
        return this.model;
    };
    ItemValueAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
        this.props.item.setRootElement(this.rootRef.current);
        if (prevProps.item !== this.props.item && prevProps.item) {
            prevProps.item.setRootElement(undefined);
        }
    };
    ItemValueAdornerComponent.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.props.item.setRootElement(this.rootRef.current);
    };
    ItemValueAdornerComponent.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        this.props.item.setRootElement(undefined);
    };
    ItemValueAdornerComponent.prototype.render = function () {
        var _this = this;
        this.model.item = this.props.item;
        var button = this.model.allowAdd ? ((0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__add", "aria-label": this.model.tooltip, onClick: function () {
                _this.model.add(_this.model);
                _this.model.isNew = false;
            } },
            react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-add_16x16", title: this.model.tooltip })))) : (react__WEBPACK_IMPORTED_MODULE_2__.createElement(react__WEBPACK_IMPORTED_MODULE_2__.Fragment, null,
            " ",
            this.model.isDraggable ? (react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { className: "svc-item-value-controls__button svc-item-value-controls__drag" },
                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { className: "svc-item-value-controls__drag-icon", size: "auto", iconName: "icon-drag-24x24", title: this.model.dragTooltip }))) : null,
            this.model.allowRemove ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_2__.createElement("span", { role: "button", className: "svc-item-value-controls__button svc-item-value-controls__remove", "aria-label": this.model.tooltip, onClick: function () { return _this.model.remove(_this.model); } },
                react__WEBPACK_IMPORTED_MODULE_2__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-remove_16x16", title: this.model.tooltip }))) : null));
        var itemkey = this.props.element.key + (this.model.allowAdd ? "_new" : "");
        return (react__WEBPACK_IMPORTED_MODULE_2__.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: function (event) { return _this.model.onPointerDown(event); } },
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-item-value__ghost" }),
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-item-value-controls", onBlur: this.onBlur }, button),
            react__WEBPACK_IMPORTED_MODULE_2__.createElement("div", { className: "svc-item-value__item", onClick: function (event) { return _this.model.select(_this.model, event.nativeEvent); } }, this.props.element)));
    };
    return ItemValueAdornerComponent;
}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));

survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-item-value", function (props) {
    return react__WEBPACK_IMPORTED_MODULE_2__.createElement(ItemValueAdornerComponent, props);
});


/***/ }),

/***/ "./src/LogoImage.tsx":
/*!***************************!*\
  !*** ./src/LogoImage.tsx ***!
  \***************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   LogoImageComponent: () => (/* binding */ LogoImageComponent)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");





var LogoImageComponent = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(LogoImageComponent, _super);
    function LogoImageComponent(props) {
        var _this = _super.call(this, props) || this;
        _this.rootRef = react__WEBPACK_IMPORTED_MODULE_1__.createRef();
        return _this;
    }
    LogoImageComponent.prototype.createModel = function (props) {
        var prevRoot = null;
        if (!!this.model) {
            prevRoot = this.model.root;
        }
        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.LogoImageViewModel(props.data, prevRoot);
    };
    LogoImageComponent.prototype.getUpdatedModelProps = function () {
        return ["data"];
    };
    LogoImageComponent.prototype.getStateElement = function () {
        return this.model;
    };
    LogoImageComponent.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.model.root = this.rootRef.current;
    };
    LogoImageComponent.prototype.renderChooseButton = function () {
        var _this = this;
        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-context-button", onClick: function () { return _this.model.chooseFile(_this.model); } },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: "icon-choosefile" })));
    };
    LogoImageComponent.prototype.renderClearButton = function () {
        var _this = this;
        return (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-context-button svc-context-button--danger", onClick: function () { return _this.model.remove(_this.model); } },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { size: "auto", iconName: "icon-clear" })));
    };
    LogoImageComponent.prototype.renderButtons = function () {
        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-context-container svc-logo-image-controls" },
            this.renderChooseButton(),
            this.renderClearButton()));
    };
    LogoImageComponent.prototype.renderImage = function () {
        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: this.model.containerCss },
            this.renderButtons(),
            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.LogoImage, { data: this.props.data.survey }));
    };
    LogoImageComponent.prototype.renderPlaceHolder = function () {
        var _this = this;
        return this.model.allowEdit && !this.model.isUploading ? (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-logo-image-placeholder", onClick: function () { return _this.model.chooseFile(_this.model); } },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement("svg", null,
                react__WEBPACK_IMPORTED_MODULE_1__.createElement("use", { xlinkHref: "#icon-image-48x48" })))) : null;
    };
    LogoImageComponent.prototype.renderInput = function () {
        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("input", { "aria-hidden": "true", type: "file", tabIndex: -1, accept: this.model.acceptedTypes, className: "svc-choose-file-input" });
    };
    LogoImageComponent.prototype.renderLoadingIndicator = function () {
        return react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-logo-image__loading" },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.LoadingIndicatorComponent, null));
    };
    LogoImageComponent.prototype.render = function () {
        var 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__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { ref: this.rootRef, className: "svc-logo-image" },
            this.renderInput(),
            content));
    };
    return LogoImageComponent;
}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));

survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.ReactElementFactory.Instance.registerElement("svc-logo-image", function (props) {
    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(LogoImageComponent, props);
});


/***/ }),

/***/ "./src/MatrixCellWrapper.tsx":
/*!***********************************!*\
  !*** ./src/MatrixCellWrapper.tsx ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   MatrixCellAdornerComponent: () => (/* binding */ MatrixCellAdornerComponent)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");





var MatrixCellAdornerComponent = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(MatrixCellAdornerComponent, _super);
    function MatrixCellAdornerComponent() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    MatrixCellAdornerComponent.prototype.createModel = function (props) {
        var _a;
        var data = props.componentData;
        var prevIsSelected = false;
        if (!!this.model) {
            prevIsSelected = this.model.isSelected;
        }
        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_2__.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;
    };
    MatrixCellAdornerComponent.prototype.getUpdatedModelProps = function () {
        return ["componentData"];
    };
    MatrixCellAdornerComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
        var _a, _b;
        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
        var 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;
    };
    MatrixCellAdornerComponent.prototype.getStateElement = function () {
        return this.model;
    };
    MatrixCellAdornerComponent.prototype.render = function () {
        var _this = this;
        var controls = null;
        if (!!this.model.isSupportCellEditor) {
            controls = react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell__question-controls" }, (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_1__.createElement("span", { className: "svc-matrix-cell__question-controls-button svc-context-button", onClick: function (event) { return _this.model.editQuestion(_this.model, event); } },
                react__WEBPACK_IMPORTED_MODULE_1__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.SvgIcon, { size: "auto", iconName: "icon-edit" }))));
        }
        return (react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell", tabIndex: -1, key: this.props.element.key, onClick: function (e) { return !_this.props.question && _this.model.selectContext(_this.model, e); }, onMouseOut: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); }, onMouseOver: function (e) { return _this.model.hover(e.nativeEvent, e.currentTarget); } },
            react__WEBPACK_IMPORTED_MODULE_1__.createElement("div", { className: "svc-matrix-cell--selected" + (this.model.isSelected ? " svc-visible" : "") }),
            this.props.element,
            controls));
    };
    return MatrixCellAdornerComponent;
}(_ModelElement__WEBPACK_IMPORTED_MODULE_4__.CreatorModelElement));

survey_react_ui__WEBPACK_IMPORTED_MODULE_3__.ReactElementFactory.Instance.registerElement("svc-matrix-cell", function (props) {
    return react__WEBPACK_IMPORTED_MODULE_1__.createElement(MatrixCellAdornerComponent, props);
});


/***/ }),

/***/ "./src/ModelElement.tsx":
/*!******************************!*\
  !*** ./src/ModelElement.tsx ***!
  \******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   CreatorModelElement: () => (/* binding */ CreatorModelElement)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__);


var CreatorModelElement = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(CreatorModelElement, _super);
    function CreatorModelElement(props) {
        var _this = _super.call(this, props) || this;
        _this.createModel(props);
        return _this;
    }
    CreatorModelElement.prototype.shouldComponentUpdate = function (nextProps, nextState) {
        var result = _super.prototype.shouldComponentUpdate.call(this, nextProps, nextState);
        if (result) {
            if (this.needUpdateModel(nextProps)) {
                this.createModel(nextProps);
            }
        }
        return result;
    };
    CreatorModelElement.prototype.createModel = function (props) { };
    CreatorModelElement.prototype.needUpdateModel = function (nextProps) {
        var names = this.getUpdatedModelProps();
        if (!Array.isArray(names))
            return true;
        for (var i = 0; i < names.length; i++) {
            var key = names[i];
            if (this.props[key] !== nextProps[key])
                return true;
        }
        return false;
    };
    CreatorModelElement.prototype.getUpdatedModelProps = function () {
        return undefined;
    };
    return CreatorModelElement;
}(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase));



/***/ }),

/***/ "./src/Navigation.tsx":
/*!****************************!*\
  !*** ./src/Navigation.tsx ***!
  \****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   SurveyNavigation: () => (/* binding */ SurveyNavigation)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__);


var SurveyNavigation = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyNavigation, _super);
    function SurveyNavigation() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onPropChangedHandler = function (sender, options) {
            if (_this.isRendering)
                return;
            var 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);
        };
        return _this;
    }
    SurveyNavigation.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        this.setHandler();
    };
    SurveyNavigation.prototype.componentDidUpdate = function (prevProps, prevState) {
        _super.prototype.componentDidUpdate.call(this, prevProps, prevState);
        this.setHandler();
    };
    SurveyNavigation.prototype.setHandler = function () {
        if (!this.survey ||
            this.survey.onPropertyChanged.hasFunc(this.onPropChangedHandler))
            return;
        this.survey.onPropertyChanged.add(this.onPropChangedHandler);
    };
    SurveyNavigation.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        if (this.survey) {
            this.survey.onPropertyChanged.remove(this.onPropChangedHandler);
        }
    };
    Object.defineProperty(SurveyNavigation.prototype, "survey", {
        get: function () {
            return this.props.survey;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SurveyNavigation.prototype, "location", {
        get: function () {
            return this.props.location;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(SurveyNavigation.prototype, "isTop", {
        get: function () {
            return this.location == "top";
        },
        enumerable: false,
        configurable: true
    });
    SurveyNavigation.prototype.canRender = function () {
        return this.isTop
            ? this.survey.isShowProgressBarOnTop
            : this.survey.isShowProgressBarOnBottom;
    };
    SurveyNavigation.prototype.renderElement = function () {
        return survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.ReactElementFactory.Instance.createElement(this.survey.getProgressTypeComponent(), { survey: this.survey, css: this.survey.css, isTop: this.isTop });
    };
    return SurveyNavigation;
}(survey_react_ui__WEBPACK_IMPORTED_MODULE_1__.SurveyElementBase));



/***/ }),

/***/ "./src/PageNavigator.tsx":
/*!*******************************!*\
  !*** ./src/PageNavigator.tsx ***!
  \*******************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   SurveyPageNavigator: () => (/* binding */ SurveyPageNavigator),
/* harmony export */   SurveyPageNavigatorItem: () => (/* binding */ SurveyPageNavigatorItem)
/* harmony export */ });
/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! tslib */ "./src/entries/helpers.ts");
/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! survey-core */ "survey-core");
/* harmony import */ var survey_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(survey_core__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! survey-react-ui */ "survey-react-ui");
/* harmony import */ var survey_react_ui__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! survey-creator-core */ "survey-creator-core");
/* harmony import */ var survey_creator_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(survey_creator_core__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! react */ "react");
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _ModelElement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ModelElement */ "./src/ModelElement.tsx");






var SurveyPageNavigator = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyPageNavigator, _super);
    function SurveyPageNavigator(props) {
        var _this = _super.call(this, props) || this;
        _this.containerRef = react__WEBPACK_IMPORTED_MODULE_4__.createRef();
        return _this;
    }
    SurveyPageNavigator.prototype.createModel = function (props) {
        if (this.model) {
            this.model.dispose();
        }
        this.model = new survey_creator_core__WEBPACK_IMPORTED_MODULE_3__.PageNavigatorViewModel(props.pagesController, props.pageEditMode);
    };
    SurveyPageNavigator.prototype.getUpdatedModelProps = function () {
        return ["pagesController", "pageEditMode"];
    };
    SurveyPageNavigator.prototype.getStateElement = function () {
        return this.model;
    };
    SurveyPageNavigator.prototype.componentDidMount = function () {
        _super.prototype.componentDidMount.call(this);
        if (this.props.pageEditMode !== "bypage") {
            var el = this.containerRef.current;
            this.model.attachToUI(el);
        }
    };
    SurveyPageNavigator.prototype.componentWillUnmount = function () {
        _super.prototype.componentWillUnmount.call(this);
        this.model.stopItemsContainerHeightObserver();
        this.model.setScrollableContainer(undefined);
    };
    SurveyPageNavigator.prototype.renderElement = function () {
        var _this = this;
        var className = "svc-page-navigator__selector svc-page-navigator__button";
        if (this.model.isPopupOpened)
            className += " svc-page-navigator__button--pressed";
        return (react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { className: "svc-page-navigator", ref: this.containerRef, style: { display: this.model.visible ? "flex" : "none" } },
            react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", null,
                (0,survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.attachKey2click)(react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", { role: "button", className: className, onClick: function () { return _this.model.togglePageSelector(); }, title: this.model.pageSelectorCaption },
                    react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.SvgIcon, { className: "svc-page-navigator__button-icon", iconName: this.model.icon, size: "auto", title: this.model.pageSelectorCaption }))),
                react__WEBPACK_IMPORTED_MODULE_4__.createElement(survey_react_ui__WEBPACK_IMPORTED_MODULE_2__.Popup, { model: this.model.popupModel })),
            react__WEBPACK_IMPORTED_MODULE_4__.createElement("div", null, this.model.visibleItems.map(function (item) { return (react__WEBPACK_IMPORTED_MODULE_4__.createElement(SurveyPageNavigatorItem, { key: item.id, item: item })); }))));
    };
    return SurveyPageNavigator;
}(_ModelElement__WEBPACK_IMPORTED_MODULE_5__.CreatorModelElement));

var SurveyPageNavigatorItem = /** @class */ (function (_super) {
    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__extends)(SurveyPageNavigatorItem, _super);
    function SurveyPageNavigatorItem() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    SurveyPageNavigatorItem.prototype.getStateElement = function () {
        return this.props.item;
    };
    SurveyPageNavigatorItem.prototype.renderElement = function () {
        var item = this.props.item;
        var className = "svc-page-navigator-item-content";
        if ((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.unwrap)(item.active)) {
            className += " svc-page-navigator-item--selected";
        }
        if ((0,survey_core__WEBPACK_IMPORTED_MODULE_1__.unwrap)(item.disabled)) {
            className += " svc-page-n