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

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

/*! For license information please see survey-creator-react.min.js.LICENSE.txt */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("survey-core"),require("survey-creator-core"),require("survey-react-ui")):"function"==typeof define&&define.amd?define("survey-creator-react",["react","react-dom","survey-core","survey-creator-core","survey-react-ui"],t):"object"==typeof exports?exports["survey-creator-react"]=t(require("react"),require("react-dom"),require("survey-core"),require("survey-creator-core"),require("survey-react-ui")):e.SurveyCreator=t(e.React,e.ReactDOM,e.Survey,e.SurveyCreatorCore,e.SurveyReact)}(this,(e,t,n,o,r)=>(()=>{"use strict";var i={3:e=>{e.exports=t},156:e=>{e.exports=n},442:t=>{t.exports=e},726:e=>{e.exports=r},982:e=>{e.exports=o}},a={};function s(e){var t=a[e];if(void 0!==t)return t.exports;var n=a[e]={exports:{}};return i[e](n,n.exports,s),n.exports}s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var l={};s.r(l),s.d(l,{ActionButton:()=>R,AdaptiveToolbox:()=>ne,CellQuestionAdornerComponent:()=>B,CellQuestionDropdownAdornerComponent:()=>k,CreatorSurveyPageComponent:()=>U,ImageItemValueAdornerComponent:()=>W,ItemValueAdornerComponent:()=>H,LogoImageComponent:()=>A,MatrixCellAdornerComponent:()=>z,PanelAdornerComponent:()=>Q,PropertyGridComponent:()=>Fe,PropertyGridEditorCollection:()=>p.PropertyGridEditorCollection,PropertyGridPlaceholderComponent:()=>Me,QuestionAdornerComponent:()=>w,QuestionBanner:()=>M,QuestionDropdownAdornerComponent:()=>P,QuestionEditorContentComponent:()=>K,QuestionErrorComponent:()=>ve,QuestionImageAdornerComponent:()=>T,QuestionRatingAdornerComponent:()=>D,QuestionWidgetAdornerComponent:()=>F,QuestionWrapperFooter:()=>I,QuestionWrapperHeader:()=>q,ReactDragEvent:()=>C,ReactMouseEvent:()=>N,RowWrapper:()=>_,SearchComponent:()=>te,SideBarDefaultHeader:()=>se,SidebarComponent:()=>ue,SurveyCreator:()=>E,SurveyCreatorComponent:()=>g,SurveyCreatorToolboxCategory:()=>$,SurveyCreatorToolboxItem:()=>Y,SurveyCreatorToolboxItemGroup:()=>Z,SurveyCreatorToolboxTool:()=>X,SurveyElementEmbeddedSurvey:()=>V,SurveyLocStringEditor:()=>he,SurveyLogic:()=>p.SurveyLogic,SurveyLogicOpertor:()=>ye,SurveyLogicUI:()=>p.SurveyLogicUI,SurveyNavigation:()=>oe,SurveyQuestionBooleanSwitch:()=>Ve,SurveyQuestionColor:()=>je,SurveyQuestionEditorDefinition:()=>p.SurveyQuestionEditorDefinition,SurveyQuestionFileEditor:()=>Qe,SurveyQuestionLinkValue:()=>L,SurveyQuestionSpinEditor:()=>Oe,SurveyQuestionTextWithReset:()=>Ae,SurveyResults:()=>G,SurveyResultsByRow:()=>J,SurveySimulator:()=>Ie,SwitcherComponent:()=>Be,TabButtonComponent:()=>re,TabDesignerComponent:()=>be,TabJsonEditorAceComponent:()=>Se,TabJsonEditorErrorsComponent:()=>Ne,TabJsonEditorTextareaComponent:()=>Ce,TabLogicAddButtonComponent:()=>we,TabLogicComponent:()=>qe,TabPreviewSurveyComponent:()=>Re,TabPreviewTestSurveyAgainComponent:()=>xe,TabThemeSurveyComponent:()=>Pe,TabTranslationComponent:()=>Te,TabbedMenuComponent:()=>v,TabbedMenuItemComponent:()=>f,ToolboxList:()=>ee,ToolboxToolViewModel:()=>p.ToolboxToolViewModel,TranslateFromAction:()=>pe,TranslationLineSkeleton:()=>de,Version:()=>Le,editorLocalization:()=>p.editorLocalization,localization:()=>p.localization,settings:()=>p.settings,svgBundle:()=>p.svgBundle});var c=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++)for(var r in t=arguments[n])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e};function u(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n]);function o(){this.constructor=e}e.prototype=null===t?Object.create(t):(o.prototype=t.prototype,new o)}var m=s(442),d=s(726),p=s(982),h=s(3),v=function(e){function t(t){var n=e.call(this,t)||this;return n.rootRef=m.createRef(),n}return u(t,e),Object.defineProperty(t.prototype,"model",{get:function(){return this.props.model},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.model},t.prototype.renderElement=function(){var e=this.model.renderedActions.map(function(e){return m.createElement(y,{item:e,key:e.renderedId})});return m.createElement("div",{ref:this.rootRef,className:"svc-tabbed-menu",role:"tablist",style:this.model.getRootStyle()},e)},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n);var o=this.rootRef.current;o&&this.model.initResponsivityManager(o)},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this);var t=this.rootRef.current;t&&this.model.initResponsivityManager(t)},t.prototype.componentWillUnmount=function(){this.model.resetResponsivityManager(),e.prototype.componentWillUnmount.call(this)},t}(d.SurveyElementBase),y=function(e){function t(t){var n=e.call(this,t)||this;return n.ref=m.createRef(),n.state={changed:0},n}return u(t,e),Object.defineProperty(t.prototype,"item",{get:function(){return this.props.item},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.item},t.prototype.renderElement=function(){var e="svc-tabbed-menu-item-container";this.item.css&&(e+=" "+this.item.css),e+=this.item.isVisible?"":" sv-action--hidden";var t=d.ReactElementFactory.Instance.createElement(this.item.component||"svc-tabbed-menu-item",{item:this.item});return m.createElement("span",{key:this.item.id,className:e,ref:this.ref},m.createElement("div",{className:"sv-action__content"},t))},t.prototype.componentDidMount=function(){var t=this;e.prototype.componentDidMount.call(this),this.item.updateModeCallback=function(e,n){var o=function(){t.item.mode==e?t.setState({changed:t.state.changed+1}):t.item.mode=e};queueMicrotask(function(){h.flushSync?h.flushSync(function(){o()}):o(),queueMicrotask(function(){n(e,t.ref.current)})})},this.item.afterRender()},t.prototype.componentWillUnmount=function(){e.prototype.componentWillUnmount.call(this),this.item.updateModeCallback=void 0},t}(d.SurveyElementBase),f=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),Object.defineProperty(t.prototype,"item",{get:function(){return this.props.item},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.item},t.prototype.render=function(){var e=this.item;return(0,d.attachKey2click)(m.createElement("div",{role:"tab",id:"tab-"+e.id,"aria-selected":e.active,"aria-controls":"scrollableDiv-"+e.id,className:e.getRootCss(),onClick:function(){return e.doAction()}},e.hasTitle?m.createElement("span",{className:e.getTitleCss()},e.title):null,e.hasIcon?m.createElement(d.SvgIcon,{iconName:e.iconName,className:e.getIconCss(),size:"auto",title:e.tooltip||e.title}):null))},t}(d.SurveyElementBase);d.ReactElementFactory.Instance.registerElement("svc-tabbed-menu-item",function(e){return m.createElement(f,e)});var g=function(e){function t(t){var n=e.call(this,t)||this;return n.rootNode=m.createRef(),n}return u(t,e),Object.defineProperty(t.prototype,"creator",{get:function(){return this.props.creator},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.creator},Object.defineProperty(t.prototype,"style",{get:function(){return this.props.style},enumerable:!1,configurable:!0}),t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n),this.creator!==t.creator&&(t.creator&&t.creator.unsubscribeRootElement(),this.creator&&this.rootNode.current&&this.creator.setRootElement(this.rootNode.current))},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.creator.setRootElement(this.rootNode.current)},t.prototype.componentWillUnmount=function(){e.prototype.componentWillUnmount.call(this),this.creator.unsubscribeRootElement()},t.prototype.renderElement=function(){var e=this.props.creator;if(e.isCreatorDisposed)return null;var t="svc-full-container svc-creator__area svc-flex-column"+(this.props.creator.haveCommercialLicense?"":" svc-creator__area--with-banner"),n="svc-creator__content-wrapper svc-flex-row"+(this.props.creator.isMobileView?" svc-creator__content-wrapper--footer-toolbar":""),o="svc-flex-row svc-full-container svc-creator__side-bar--"+this.creator.sidebarLocation,r={};(0,p.assign)(r,this.style,this.props.creator.themeVariables);var i=null;if(!this.props.creator.haveCommercialLicense){var a={__html:this.props.creator.licenseText};i=m.createElement("div",{className:"svc-creator__banner"},m.createElement("span",{className:"svc-creator__non-commercial-text",dangerouslySetInnerHTML:a}))}return m.createElement("div",{className:this.creator.getRootCss(),ref:this.rootNode,style:r},m.createElement(d.SvgBundleComponent,null),m.createElement(d.PopupModal,null),m.createElement("div",{className:t},m.createElement("div",{className:o},m.createElement("div",{className:"svc-flex-column svc-flex-row__element svc-flex-row__element--growing"},m.createElement("div",{className:"svc-top-bar"},e.showTabs?m.createElement("div",{className:"svc-tabbed-menu-wrapper"},m.createElement(v,{model:e.tabbedMenu})):null,e.showToolbar?m.createElement("div",{className:"svc-toolbar-wrapper"},m.createElement(d.SurveyActionBar,{model:e.toolbar})):null),m.createElement("div",{className:n},m.createElement("div",{className:"svc-creator__content-holder svc-flex-column"},this.renderActiveTab())),m.createElement("div",{className:"svc-footer-bar"},e.isMobileView?m.createElement("div",{className:"svc-toolbar-wrapper"},m.createElement(d.SurveyActionBar,{model:e.footerToolbar})):null)),this.renderSidebar()),i,m.createElement(d.NotifierComponent,{notifier:e.notifier})))},t.prototype.renderActiveTab=function(){for(var e=this.props.creator,t=0;t<e.tabs.length;t++)if(e.tabs[t].id===e.activeTab)return this.renderCreatorTab(e.tabs[t]);return null},t.prototype.renderCreatorTab=function(e){if(!1===e.visible)return null;var t=this.props.creator,n=e.renderTab?e.renderTab():d.ReactElementFactory.Instance.createElement(e.componentContent,{creator:t,survey:t.survey,data:e.data.model}),o="svc-creator-tab"+("right"==t.toolboxLocation?" svc-creator__toolbox--right":"");return m.createElement("div",{role:"tabpanel",key:e.id,id:"scrollableDiv-"+e.id,"aria-labelledby":"tab-"+e.id,className:o},n)},t.prototype.renderSidebar=function(){return this.creator.sidebar?d.ReactElementFactory.Instance.createElement("svc-side-bar",{model:this.creator.sidebar}):null},t}(d.SurveyElementBase),E=function(e){function t(t,n){return void 0===t&&(t={}),e.call(this,t,n)||this}return u(t,e),t.prototype.render=function(e){console.error("The render method is deprecated. Use SurveyCreatorComponent instead.")},t.prototype.createQuestionElement=function(e){return d.ReactQuestionFactory.Instance.createQuestion(e.isDefaultRendering()?e.getTemplate():e.getComponentName(),{question:e,isDisplayMode:e.isReadOnly,creator:this})},t.prototype.renderError=function(e,t,n){return m.createElement("div",{key:e},m.createElement("span",{className:n.error.icon,"aria-hidden":"true"}),m.createElement("span",{className:n.error.item},m.createElement(d.SurveyLocStringViewer,{locStr:t.locText})))},t.prototype.questionTitleLocation=function(){return this.survey.questionTitleLocation},t.prototype.questionErrorLocation=function(){return this.survey.questionErrorLocation},t}(p.SurveyCreatorModel);d.ReactElementFactory.Instance.registerElement("survey-widget",function(e){return m.createElement(d.Survey,e)});var b=function(e){function t(t){var n=e.call(this,t)||this;return n.createModel(t),n}return u(t,e),t.prototype.shouldComponentUpdate=function(t,n){var o=e.prototype.shouldComponentUpdate.call(this,t,n);return o&&this.needUpdateModel(t)&&this.createModel(t),o},t.prototype.createModel=function(e){},t.prototype.needUpdateModel=function(e){var t=this.getUpdatedModelProps();if(!Array.isArray(t))return!0;for(var n=0;n<t.length;n++){var o=t[n];if(this.props[o]!==e[o])return!0}return!1},t.prototype.getUpdatedModelProps=function(){},t}(d.SurveyElementBase),_=function(e){function t(t){return e.call(this,t)||this}return u(t,e),t.prototype.createModel=function(e){this.model&&this.model.dispose(),this.model=new p.RowViewModel(e.componentData.creator,e.row,null)},t.prototype.getUpdatedModelProps=function(){return["row","componentData"]},t.prototype.getStateElement=function(){return this.model},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.model.subscribeElementChanges()},t.prototype.componentWillUnmount=function(){this.model.unsubscribeElementChanges(),e.prototype.componentWillUnmount.call(this)},t.prototype.render=function(){return m.createElement("div",{key:"svc-row-"+this.props.row.id,className:this.model.cssClasses},m.createElement("div",{className:"svc-row__drop-indicator svc-row__drop-indicator--top"}),m.createElement("div",{className:"svc-row__drop-indicator svc-row__drop-indicator--bottom"}),this.props.element)},t}(b);d.ReactElementFactory.Instance.registerElement("svc-row",function(e){return m.createElement(_,e)});var N=function(){function e(e){this.event=e}return e.prototype.stopPropagation=function(){this.event.stopPropagation()},e.prototype.preventDefault=function(){this.event.preventDefault()},Object.defineProperty(e.prototype,"cancelBubble",{get:function(){return!1},set:function(e){},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"target",{get:function(){return this.event.target},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"currentTarget",{get:function(){return this.event.currentTarget},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"clientX",{get:function(){return this.event.clientX},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"clientY",{get:function(){return this.event.clientY},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"offsetX",{get:function(){return this.event.nativeEvent.offsetX},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"offsetY",{get:function(){return this.event.nativeEvent.offsetY},enumerable:!1,configurable:!0}),e}(),C=function(e){function t(t){var n=e.call(this,t)||this;return n.event=t,n}return u(t,e),Object.defineProperty(t.prototype,"dataTransfer",{get:function(){return this.event.dataTransfer},enumerable:!1,configurable:!0}),t}(N),S=m.memo(function(e){return e.element});S.displayName="QuestionElementContent";var w=function(e){function t(t){var n=e.call(this,t)||this;return n.rootRef=m.createRef(),n}return u(t,e),t.prototype.createModel=function(e){this.model?this.model.attachToUI(e.question,this.rootRef.current):this.modelValue=this.createQuestionViewModel(e)},t.prototype.createQuestionViewModel=function(e){return new p.QuestionAdornerViewModel(e.componentData,e.question,null)},t.prototype.getUpdatedModelProps=function(){return["question","componentData"]},Object.defineProperty(t.prototype,"model",{get:function(){return this.modelValue},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.model},t.prototype.renderElement=function(){var e=this,t=this.model.element.isInteractiveDesignElement,n=this.renderQuestionTitle(),o=this.renderContent(t);return m.createElement("div",{ref:this.rootRef,"data-sv-drop-target-survey-element":this.model.element.name||null,className:this.model.rootCss(),onDoubleClick:function(n){t&&e.model.dblclick(n.nativeEvent),n.stopPropagation()},onMouseLeave:function(n){return t&&e.model.hover(n.nativeEvent,n.currentTarget)},onMouseOver:function(n){return t&&e.model.hover(n.nativeEvent,n.currentTarget)}},n,o)},t.prototype.disableTabStop=function(){return!0},t.prototype.renderContent=function(e){var t=this,n=this.model.needToRenderContent?this.renderElementContent():null;return(0,d.attachKey2click)(m.createElement("div",{className:this.model.css(),onClick:function(e){return t.model.select(t.model,new N(e))}},m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--left"}),m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--right"}),m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--top"}),m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--bottom"}),e?this.renderHeader():null,n,this.model.needToRenderContent?this.renderFooter():null),void 0,{disableTabStop:this.disableTabStop()})},t.prototype.renderHeader=function(){return d.ReactElementFactory.Instance.createElement("svc-question-header",{model:this.model})},t.prototype.renderFooter=function(){return this.model.element.isInteractiveDesignElement?d.ReactElementFactory.Instance.createElement("svc-question-footer",{className:"svc-question__content-actions",model:this.model}):null},t.prototype.renderCarryForwardBanner=function(){return this.model.isBannerShowing?d.ReactElementFactory.Instance.createElement("svc-question-banner",this.model.createBannerParams()):null},t.prototype.renderQuestionTitle=function(){var e=this;if(!this.model.showHiddenTitle)return null;var t=this.model.element;return m.createElement("div",{ref:function(t){return t&&(e.model.renderedCollapsed?t.removeAttribute("inert"):t.setAttribute("inert",""))},className:this.model.cssCollapsedHiddenHeader},t.hasTitle?m.createElement(d.TitleElement,{element:t}):m.createElement("div",{className:this.model.cssCollapsedHiddenTitle},m.createElement("span",{className:"svc-fake-title"},t.name)))},t.prototype.renderElementContent=function(){return m.createElement(m.Fragment,null,m.createElement(S,{element:this.props.element}),this.renderElementPlaceholder(),this.renderCarryForwardBanner())},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.model.attachToUI(this.props.question,this.rootRef.current)},t.prototype.renderElementPlaceholder=function(){return this.model.isEmptyElement?m.createElement("div",{className:"svc-panel__placeholder_frame-wrapper"},m.createElement("div",{className:"svc-panel__placeholder_frame"},m.createElement("div",{className:"svc-panel__placeholder"},this.model.placeholderText))):null},t.prototype.componentWillUnmount=function(){e.prototype.componentWillUnmount.call(this),this.model.detachFromUI()},t}(b);d.ReactElementFactory.Instance.registerElement("svc-question",function(e){return m.createElement(w,e)});var q=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.render=function(){var e=this;return this.props.model.allowDragging?m.createElement("div",{className:"svc-question__drag-area",onPointerDown:function(t){return e.props.model.onPointerDown(t)}},m.createElement(d.SvgIcon,{className:"svc-question__drag-element",size:"auto",iconName:"icon-drag-area-indicator_24x16"}),m.createElement("div",{className:"svc-question__top-actions"},m.createElement(d.SurveyActionBar,{model:this.props.model.topActionContainer,handleClick:!1}))):null},t}(m.Component);d.ReactElementFactory.Instance.registerElement("svc-question-header",function(e){return m.createElement(q,e)});var I=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.render=function(){var e=this;return m.createElement("div",{className:this.props.className,onFocus:function(t){return e.props.model.select(e.props.model,new N(t))}},m.createElement(d.SurveyActionBar,{model:this.props.model.actionContainer,handleClick:!1}))},t}(m.Component);d.ReactElementFactory.Instance.registerElement("svc-question-footer",function(e){return m.createElement(I,e)});var x=s(156),R=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.renderElement=function(){var e=(new x.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();return this.props.iconName?this.renderIcon(e):this.renderButtonText(e)},t.prototype.renderButtonText=function(e){var t=this;return this.props.disabled?m.createElement("span",{className:e},this.props.text):m.createElement(m.Fragment,null,(0,d.attachKey2click)(m.createElement("span",{role:"button",className:e,onClick:function(e){t.props.allowBubble||e.stopPropagation(),t.props.click()},title:this.props.title},this.props.text)))},t.prototype.renderIcon=function(e){var t=this;return e+=" svc-action-button--icon",this.props.disabled?m.createElement("span",{className:e},m.createElement(d.SvgIcon,{size:"auto",iconName:this.props.iconName})):m.createElement(m.Fragment,null,(0,d.attachKey2click)(m.createElement("span",{className:e,onClick:function(e){t.props.allowBubble||e.stopPropagation(),t.props.click()},title:this.props.title},m.createElement(d.SvgIcon,{size:"auto",iconName:this.props.iconName}))))},t}(d.SurveyElementBase);d.ReactElementFactory.Instance.registerElement("svc-action-button",function(e){return m.createElement(R,e)});var M=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.render=function(){var e=this;return m.createElement("div",{className:"svc-carry-forward-panel-wrapper"},m.createElement("div",{className:"svc-carry-forward-panel"},m.createElement("span",null,this.props.text," "),m.createElement("span",{className:"svc-carry-forward-panel__link"},m.createElement(R,{click:function(){return e.props.onClick()},text:this.props.actionText}))))},t}(m.Component);d.ReactElementFactory.Instance.registerElement("svc-question-banner",function(e){return m.createElement(M,e)});var P=function(e){function t(t){return e.call(this,t)||this}return u(t,e),t.prototype.createQuestionViewModel=function(e){return new p.QuestionDropdownAdornerViewModel(e.componentData,e.question,null)},Object.defineProperty(t.prototype,"dropdownModel",{get:function(){return this.model},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"question",{get:function(){return this.dropdownModel.question},enumerable:!1,configurable:!0}),t.prototype.renderElementPlaceholder=function(){var e=this,t=this.question.textStyle;return m.createElement("div",{className:"svc-question__dropdown-choices--wrapper"},m.createElement("div",null,m.createElement("div",{className:"svc-question__dropdown-choices"},(this.dropdownModel.getRenderedItems()||[]).map(function(n,o){return m.createElement("div",{className:e.dropdownModel.getChoiceCss(),key:"editable_choice_".concat(o)},d.ReactSurveyElementsWrapper.wrapItemValue(e.question.survey,d.ReactElementFactory.Instance.createElement(e.dropdownModel.itemComponent,{key:n.value,question:e.question,cssClasses:e.question.cssClasses,isDisplayMode:!0,item:n,textStyle:t,index:o,isChecked:e.question.value===n.value}),e.question,n))})),this.dropdownModel.needToCollapse?m.createElement(R,{click:this.dropdownModel.switchCollapse,text:this.dropdownModel.getButtonText(),allowBubble:!0}):null))},t}(w);d.ReactElementFactory.Instance.registerElement("svc-dropdown-question",function(e){return m.createElement(P,e)});var T=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createQuestionViewModel=function(e){return new p.QuestionImageAdornerViewModel(e.componentData,e.question,null)},Object.defineProperty(t.prototype,"imageModel",{get:function(){return this.model},enumerable:!1,configurable:!0}),t.prototype.renderHeader=function(){return m.createElement(m.Fragment,null,m.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"}}),e.prototype.renderHeader.call(this))},t.prototype.renderLoadingPlaceholder=function(){return m.createElement("div",{className:"svc-image-question__loading-placeholder"},m.createElement("div",{className:"svc-image-question__loading"},m.createElement(d.LoadingIndicatorComponent,null)))},t.prototype.renderChooseButton=function(){var e=this;return m.createElement("div",{className:"svc-image-question-controls"},this.model.allowEdit?(0,d.attachKey2click)(m.createElement("span",{className:"svc-context-button",onClick:function(){return e.imageModel.chooseFile(e.imageModel)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-choosefile"}))):null)},t.prototype.renderElementPlaceholder=function(){return this.imageModel.isUploading?this.renderLoadingPlaceholder():this.renderChooseButton()},t.prototype.getStateElements=function(){return[this.model,this.imageModel.filePresentationModel]},t.prototype.renderElementContent=function(){if(this.imageModel.isEmptyElement){var e=d.ReactQuestionFactory.Instance.createQuestion("file",{creator:this.imageModel.question.survey,isDisplayMode:!1,question:this.imageModel.filePresentationModel});return m.createElement(m.Fragment,null,e)}return m.createElement(m.Fragment,null,this.props.element,this.renderElementPlaceholder())},t}(w);d.ReactElementFactory.Instance.registerElement("svc-image-question",function(e){return m.createElement(T,e)});var D=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createModel=function(e){this.modelValue=this.createQuestionViewModel(e)},t.prototype.createQuestionViewModel=function(e){return new p.QuestionRatingAdornerViewModel(e.componentData,e.question,null)},t.prototype.getUpdatedModelProps=function(){return["question","componentData"]},Object.defineProperty(t.prototype,"ratingModel",{get:function(){return this.model},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"model",{get:function(){return this.modelValue},enumerable:!1,configurable:!0}),t.prototype.getStateElement=function(){return this.model},t.prototype.renderElement=function(){var e=this.ratingModel;return m.createElement(m.Fragment,null,m.createElement("div",{className:"svc-rating-question-content"},m.createElement("div",{className:e.controlsClassNames},e.allowRemove?(0,d.attachKey2click)(m.createElement("span",{role:"button",className:e.removeClassNames,"aria-label":e.removeTooltip,onClick:function(){return e.removeItem(e)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-remove_16x16",title:e.removeTooltip}))):null,e.allowAdd?(0,d.attachKey2click)(m.createElement("span",{role:"button",className:e.addClassNames,"aria-label":e.addTooltip,onClick:function(){return e.addItem(e)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-add_16x16",title:e.addTooltip}))):null),this.props.element))},t}(b);d.ReactElementFactory.Instance.registerElement("svc-rating-question",function(e){return m.createElement(D,e)}),d.ReactElementFactory.Instance.registerElement("svc-rating-question-content",function(e){return m.createElement(D,e)});var F=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createQuestionViewModel=function(e){return new p.QuestionAdornerViewModel(e.componentData,e.question,null)},Object.defineProperty(t.prototype,"widgetModel",{get:function(){return this.model},enumerable:!1,configurable:!0}),t.prototype.renderElementContent=function(){return m.createElement("div",{className:"svc-widget__content"},this.props.element)},t}(w);d.ReactElementFactory.Instance.registerElement("svc-widget-question",function(e){return m.createElement(F,e)});var B=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createModel=function(e){this.model=new p.QuestionAdornerViewModel(e.componentData,e.question,null)},t.prototype.getStateElement=function(){return this.model},t.prototype.getUpdatedModelProps=function(){return["question","componentData"]},t.prototype.render=function(){return m.createElement(m.Fragment,null,m.createElement("div",{"data-sv-drop-target-survey-element":this.model.element.name,className:"svc-question__adorner"},m.createElement("div",{className:" svc-question__content--in-popup svc-question__content"},this.props.element)))},t}(b);d.ReactElementFactory.Instance.registerElement("svc-cell-question",function(e){return m.createElement(B,e)});var k=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createModel=function(e){this.model=new p.QuestionAdornerViewModel(e.componentData,e.question,null)},t.prototype.getUpdatedModelProps=function(){return["question","componentData"]},t.prototype.getStateElement=function(){return this.model},t.prototype.render=function(){var e=this.props.question,t=this.props.question.textStyle;return m.createElement(m.Fragment,null,m.createElement("div",{"data-sv-drop-target-survey-element":this.model.element.name,className:"svc-question__adorner"},m.createElement("div",{className:" svc-question__content--in-popup svc-question__content"},this.props.element,m.createElement("div",{className:"svc-question__dropdown-choices"},e.visibleChoices.map(function(n,o){return m.createElement("div",{className:"svc-question__dropdown-choice",key:"editable_choice_".concat(o)},d.ReactSurveyElementsWrapper.wrapItemValue(e.survey,d.ReactElementFactory.Instance.createElement("survey-radiogroup-item",{question:e,cssClasses:e.cssClasses,isDisplayMode:!0,item:n,textStyle:t,index:o,isChecked:e.value===n.value}),e,n))})))))},t}(b);d.ReactElementFactory.Instance.registerElement("svc-cell-dropdown-question",function(e){return m.createElement(k,e)});var O=m.memo(function(e){var t=e.page,n=e.survey,o=e.creator;return m.createElement(d.SurveyPage,{page:t,survey:n,creator:o})});O.displayName="PageElementContent";var U=function(e){function t(t){var n=e.call(this,t)||this;return n.rootRef=m.createRef(),n}return u(t,e),t.prototype.createModel=function(e){this.model&&this.model.attachToUI(e.page,this.rootRef.current),this.model=this.createPageAdorner(e.creator,e.page),this.model.isGhost=this.props.isGhost},t.prototype.createPageAdorner=function(e,t){return new p.PageAdorner(e,t)},t.prototype.shouldComponentUpdate=function(t,n){var o=e.prototype.shouldComponentUpdate.call(this,t,n);return this.model&&(this.model.isGhost=this.props.isGhost),o},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n)},t.prototype.getUpdatedModelProps=function(){return["creator","page"]},t.prototype.getStateElement=function(){return this.model},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.model.attachToUI(this.props.page,this.rootRef.current),this.model.isGhost=this.props.isGhost},t.prototype.componentWillUnmount=function(){e.prototype.componentWillUnmount.call(this),this.model.detachFromUI()},t.prototype.canRender=function(){return e.prototype.canRender.call(this)},t.prototype.renderElement=function(){var e=this;return this.props.page?(0,d.attachKey2click)(m.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:function(t){return e.model.select(e.model,new N(t))},onDoubleClick:function(t){return e.model.dblclick(t.nativeEvent)},onMouseLeave:function(t){return e.model.hover(t.nativeEvent,t.currentTarget)},onMouseOver:function(t){return e.model.hover(t.nativeEvent,t.currentTarget)}},m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--top"}),m.createElement("div",{className:"svc-question__drop-indicator svc-question__drop-indicator--bottom"}),this.renderContent(),this.renderPlaceholder(),this.renderHeader(),this.renderFooter())):null},t.prototype.renderPlaceholder=function(){return this.model.showPlaceholder?m.createElement("div",{className:"svc-page__placeholder_frame"},m.createElement("div",{className:"svc-panel__placeholder_frame"},m.createElement("div",{className:"svc-panel__placeholder"},this.model.placeholderText))):null},t.prototype.renderContent=function(){return this.model.needRenderContent?m.createElement(O,{page:this.props.page,survey:this.props.survey,creator:this.props.creator}):m.createElement("div",{className:"svc-page__loading-content"},m.createElement(d.LoadingIndicatorComponent,null))},t.prototype.renderHeader=function(){var e=this,t=m.createElement("div",{className:"svc-page__content-actions"},m.createElement(d.SurveyActionBar,{model:this.model.actionContainer}),this.model.topActionContainer.hasActions?m.createElement(d.SurveyActionBar,{model:this.model.topActionContainer}):null);return this.model.isGhost||!this.model.allowDragging?t:m.createElement("div",{className:"svc-question__drag-area",onPointerDown:function(t){return e.model.onPointerDown(t)}},m.createElement(d.SvgIcon,{className:"svc-question__drag-element",size:"auto",iconName:"icon-drag-area-indicator_24x16"}),t)},t.prototype.renderFooter=function(){return m.createElement(d.SurveyActionBar,{model:this.model.footerActionsBar})},t}(b);d.ReactElementFactory.Instance.registerElement("svc-page",function(e){return m.createElement(U,e)});var j=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),Object.defineProperty(t.prototype,"model",{get:function(){return this.props.item.data},enumerable:!1,configurable:!0}),t.prototype.renderTypeSelector=function(){var e=this.model.questionTypeSelectorModel;return(0,d.attachKey2click)(m.createElement("button",{type:"button",onClick:function(t){t.stopPropagation(),e.action()},className:"svc-element__question-type-selector",title:this.model.addNewQuestionText,role:"button"},m.createElement("span",{className:"svc-element__question-type-selector-icon"},m.createElement(d.SvgIcon,{iconName:e.iconName,size:"auto",title:this.model.addNewQuestionText})),void 0===this.props.renderPopup||this.props.renderPopup?m.createElement(d.Popup,{model:e.popupModel}):null))},t.prototype.renderElement=function(){var e=this,t=this.props.buttonClass||"svc-btn";return m.createElement(m.Fragment,null,(0,d.attachKey2click)(m.createElement("div",{className:"svc-element__add-new-question "+t,onClick:function(t){t.stopPropagation(),e.model.addNewQuestion(e.model,new N(t))},onMouseOver:function(t){return e.model.hoverStopper&&e.model.hoverStopper(t.nativeEvent,t.currentTarget)}},m.createElement(d.SvgIcon,{className:"svc-panel__add-new-question-icon",iconName:"icon-add_24x24",size:"auto"}),m.createElement("span",{className:"svc-add-new-item-button__text"},this.model.addNewQuestionText),!1!==this.props.renderPopup?this.renderTypeSelector():null)),!1===this.props.renderPopup?this.renderTypeSelector():null)},t}(d.SurveyElementBase);d.ReactElementFactory.Instance.registerElement("svc-add-new-question-btn",function(e){return m.createElement(j,e)});var Q=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.renderElementPlaceholder=function(){var e=this;return this.model.isEmptyElement?m.createElement("div",{className:"svc-panel__placeholder_frame-wrapper"},m.createElement("div",{className:"svc-panel__placeholder_frame"},m.createElement("div",{className:"svc-panel__placeholder"},this.model.placeholderText),this.model.showAddQuestionButton?(0,d.attachKey2click)(m.createElement("div",{className:"svc-panel__add-new-question svc-action-button",onClick:function(t){t.stopPropagation(),e.model.addNewQuestion()}},m.createElement(d.SvgIcon,{className:"svc-panel__add-new-question-icon",iconName:"icon-add_24x24",size:"auto"}),m.createElement("span",{className:"svc-add-new-item-button__text"},this.model.addNewQuestionText))):null)):null},t.prototype.disableTabStop=function(){return!0},t.prototype.renderFooter=function(){return m.createElement(m.Fragment,null,!this.model.isEmptyElement&&this.model.element.isPanel&&this.model.showAddQuestionButton?m.createElement("div",{className:"svc-panel__add-new-question-container"},m.createElement("div",{className:"svc-panel__question-type-selector-popup"},m.createElement(d.Popup,{model:this.model.questionTypeSelectorModel.popupModel})),m.createElement("div",{className:"svc-panel__add-new-question-wrapper"},m.createElement(j,{item:{data:this.model},buttonClass:"svc-action-button",renderPopup:!1}))):null,e.prototype.renderFooter.call(this))},t}(w);d.ReactElementFactory.Instance.registerElement("svc-panel",function(e){return m.createElement(Q,e)});var A=function(e){function t(t){var n=e.call(this,t)||this;return n.rootRef=m.createRef(),n}return u(t,e),t.prototype.createModel=function(e){var t=null;this.model&&(t=this.model.root),this.model=new p.LogoImageViewModel(e.data,t)},t.prototype.getUpdatedModelProps=function(){return["data"]},t.prototype.getStateElement=function(){return this.model},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.model.root=this.rootRef.current},t.prototype.renderChooseButton=function(){var e=this;return(0,d.attachKey2click)(m.createElement("span",{className:"svc-context-button",onClick:function(){return e.model.chooseFile(e.model)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-choosefile"})))},t.prototype.renderClearButton=function(){var e=this;return(0,d.attachKey2click)(m.createElement("span",{className:"svc-context-button svc-context-button--danger",onClick:function(){return e.model.remove(e.model)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-clear"})))},t.prototype.renderButtons=function(){return m.createElement("div",{className:"svc-context-container svc-logo-image-controls"},this.renderChooseButton(),this.renderClearButton())},t.prototype.renderImage=function(){return m.createElement("div",{className:this.model.containerCss},this.renderButtons(),m.createElement(d.LogoImage,{data:this.props.data.survey}))},t.prototype.renderPlaceHolder=function(){var e=this;return this.model.allowEdit&&!this.model.isUploading?(0,d.attachKey2click)(m.createElement("div",{className:"svc-logo-image-placeholder",onClick:function(){return e.model.chooseFile(e.model)}},m.createElement("svg",null,m.createElement("use",{xlinkHref:"#icon-image-48x48"})))):null},t.prototype.renderInput=function(){return m.createElement("input",{"aria-hidden":"true",type:"file",tabIndex:-1,accept:this.model.acceptedTypes,className:"svc-choose-file-input"})},t.prototype.renderLoadingIndicator=function(){return m.createElement("div",{className:"svc-logo-image__loading"},m.createElement(d.LoadingIndicatorComponent,null))},t.prototype.render=function(){var e;return e=this.model.survey.locLogo.renderedHtml&&!this.model.isUploading?this.renderImage():this.model.isUploading?this.renderLoadingIndicator():this.renderPlaceHolder(),m.createElement("div",{ref:this.rootRef,className:"svc-logo-image"},this.renderInput(),e)},t}(b);d.ReactElementFactory.Instance.registerElement("svc-logo-image",function(e){return m.createElement(A,e)});var L=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),Object.defineProperty(t.prototype,"question",{get:function(){return this.questionBase},enumerable:!1,configurable:!0}),t.prototype.renderClear=function(){var e=this,t=this.questionBase.showClear;return!this.questionBase.isReadOnly&&t?m.createElement(R,{classes:this.question.linkClearButtonCssClasses,click:function(){return e.question.doClearClick()},text:p.editorLocalization.getString("pe.clear")}):null},t.prototype.renderElement=function(){var e=this;return m.createElement(m.Fragment,null,m.createElement(R,{classes:this.question.linkSetButtonCssClasses,click:function(){return e.question.doLinkClick()},selected:this.question.isSelected,disabled:!this.question.isClickable,text:this.question.linkValueText,title:this.question.tooltip,iconName:this.question.iconName}),this.renderClear())},t}(d.SurveyQuestionElementBase);d.ReactQuestionFactory.Instance.registerQuestion("linkvalue",function(e){return m.createElement(L,e)});var V=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),Object.defineProperty(t.prototype,"embeddedSurvey",{get:function(){return this.props.element||this.props.question},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"creator",{get:function(){return this.props.creator},enumerable:!1,configurable:!0}),t.prototype.render=function(){if(!this.embeddedSurvey)return null;var e=this.embeddedSurvey.embeddedSurvey;return e&&e.currentPage?m.createElement(d.SurveyPage,{survey:e,page:e.currentPage,css:e.css,creator:this.creator}):null},t}(d.SurveyQuestionElementBase);d.ReactQuestionFactory.Instance.registerQuestion("embeddedsurvey",function(e){return m.createElement(V,e)});var K=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),Object.defineProperty(t.prototype,"survey",{get:function(){return this.props.survey},enumerable:!1,configurable:!0}),t.prototype.createQuestionElement=function(e){return d.ReactQuestionFactory.Instance.createQuestion(!e.isDefaultRendering||e.isDefaultRendering()?e.getTemplate():e.getComponentName(),{question:e,isDisplayMode:e.isInputReadOnly,creator:this})},t.prototype.questionTitleLocation=function(){return this.survey.questionTitleLocation},t.prototype.questionErrorLocation=function(){return this.survey.questionErrorLocation},t.prototype.renderError=function(e,t,n){return null},t.prototype.render=function(){var e=this.survey.getAllQuestions()[0];return m.createElement("div",{style:this.props.style},m.createElement(d.SurveyQuestion,{creator:this,element:e}))},t}(m.Component);d.ReactElementFactory.Instance.registerElement("svc-question-editor-content",function(e){return m.createElement(K,e)});var H=function(e){function t(t){var n=e.call(this,t)||this;return n.onBlur=function(e){n.model.onFocusOut(e.nativeEvent)},n.rootRef=m.createRef(),n}return u(t,e),t.prototype.createModel=function(e){this.model=new p.ItemValueWrapperViewModel(e.componentData.creator,e.question,e.item)},t.prototype.getUpdatedModelProps=function(){return["question","item"]},t.prototype.getStateElement=function(){return this.model},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n),this.props.item.setRootElement(this.rootRef.current),t.item!==this.props.item&&t.item&&t.item.setRootElement(void 0)},t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.props.item.setRootElement(this.rootRef.current)},t.prototype.componentWillUnmount=function(){e.prototype.componentWillUnmount.call(this),this.props.item.setRootElement(void 0)},t.prototype.render=function(){var e=this;this.model.item=this.props.item;var t=this.model.allowAdd?(0,d.attachKey2click)(m.createElement("span",{role:"button",className:"svc-item-value-controls__button svc-item-value-controls__add","aria-label":this.model.tooltip,onClick:function(){e.model.add(e.model),e.model.isNew=!1}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-add_16x16",title:this.model.tooltip}))):m.createElement(m.Fragment,null," ",this.model.isDraggable?m.createElement("span",{className:"svc-item-value-controls__button svc-item-value-controls__drag"},m.createElement(d.SvgIcon,{className:"svc-item-value-controls__drag-icon",size:"auto",iconName:"icon-drag-24x24",title:this.model.dragTooltip})):null,this.model.allowRemove?(0,d.attachKey2click)(m.createElement("span",{role:"button",className:"svc-item-value-controls__button svc-item-value-controls__remove","aria-label":this.model.tooltip,onClick:function(){return e.model.remove(e.model)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-remove_16x16",title:this.model.tooltip}))):null),n=this.props.element.key+(this.model.allowAdd?"_new":"");return m.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:n,"data-sv-drop-target-item-value":this.model.isDraggable?this.model.item.value:void 0,onPointerDown:function(t){return e.model.onPointerDown(t)}},m.createElement("div",{className:"svc-item-value__ghost"}),m.createElement("div",{className:"svc-item-value-controls",onBlur:this.onBlur},t),m.createElement("div",{className:"svc-item-value__item",onClick:function(t){return e.model.select(e.model,t.nativeEvent)}},this.props.element))},t}(b);d.ReactElementFactory.Instance.registerElement("svc-item-value",function(e){return m.createElement(H,e)});var W=function(e){function t(t){var n=e.call(this,t)||this;return n.preventDragHandler=function(e){e.preventDefault()},n.rootRef=m.createRef(),n}return u(t,e),t.prototype.createModel=function(e){this.model=new p.ImageItemValueWrapperViewModel(e.componentData.creator,e.question,e.item,null,null)},t.prototype.getUpdatedModelProps=function(){return["question","item"]},t.prototype.getStateElement=function(){return this.model},Object.defineProperty(t.prototype,"question",{get:function(){return this.props.question},enumerable:!1,configurable:!0}),t.prototype.componentDidMount=function(){e.prototype.componentDidMount.call(this),this.model.itemsRoot=this.rootRef.current},t.prototype.componentDidUpdate=function(t,n){e.prototype.componentDidUpdate.call(this,t,n),this.model.itemsRoot=this.rootRef.current},t.prototype.renderLoadingIndicator=function(){return m.createElement("div",{className:"svc-image-item-value__loading"},m.createElement(d.LoadingIndicatorComponent,null))},t.prototype.renderNewItemControls=function(){var e=this,t=(0,d.attachKey2click)(m.createElement("span",{className:this.model.addButtonCss,onClick:function(){return e.model.chooseNewFile(e.model)}},this.model.showChooseButtonAsIcon?m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-add-lg",title:this.model.addFileTitle}):m.createElement("span",null,this.model.chooseImageText))),n=this.model.showPlaceholder?m.createElement("span",{className:"svc-image-item-value__placeholder"},this.model.placeholderText):null;return m.createElement(m.Fragment,null,n,t)},t.prototype.render=function(){var e=this;this.model.item=this.props.item;var t=!this.props.question.isItemInList(this.props.item);this.model.isNew=t;var n,o=this.model.getIsNewItemSingle()?null:{width:this.question.renderedImageWidth,height:this.question.renderedImageHeight};return n=t||this.model.isUploading?m.createElement(m.Fragment,null,m.createElement("div",{className:"svc-image-item-value__item"},m.createElement("div",{className:"sd-imagepicker__item sd-imagepicker__item--inline"},m.createElement("label",{className:"sd-imagepicker__label"},m.createElement("div",{style:o,className:"sd-imagepicker__image"},this.model.isUploading?this.renderLoadingIndicator():null)))),this.model.allowAdd&&!this.model.isUploading?m.createElement("div",{className:"svc-image-item-value-controls"},this.renderNewItemControls()):null):m.createElement(m.Fragment,null,m.createElement("div",{className:"svc-image-item-value__item"},this.props.element),this.model.isDraggable&&this.model.canRenderControls?m.createElement("span",{className:"svc-context-button svc-image-item-value-controls__drag-area-indicator",onPointerDown:function(t){return e.model.onPointerDown(t)}},m.createElement(d.SvgIcon,{size:"auto",iconName:"icon-drag-24x24"})):null,this.model.canRenderControls?m.createElement("div",{className:"svc-context-container svc-image-item-value-controls"},this.model.allowRemove&&!this.model.isUploading?(0,d.attachKey2click)(m.createElement("span",{className:"svc-context-button",onClick:function(){return e.model.chooseFile(e.model)}},m.createElement(d.SvgIcon,{role:"button",size:"auto",iconName:"icon-choosefile",title:this.model.selectFileTitle}))):null,this.model.allowRemove&&!this.model.isUploading?(0,d.attachKey2click)(m.createElement("span",{className:"svc-context-button svc-context-button--danger",onClick:function(){return e.model.remove(e.model)}},m.createElement(d.SvgIcon,{role:"button",size:"auto",iconName:"icon-delete",title:this.model.removeFileTitle}))):null):null),m.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:void 0,onPointerDown:function(t){return e.model.onPointerDown(t)},onDragStart:this.preventDragHandler,onDrop:this.model.onDrop,onDragEnter:this.model.onDragEnter,onDragOver:this.model.onDragOver,onDragLeave:this.model.onDragLeave},m.createElement("div",{className:"svc-image-item-value-wrapper__ghost",style:o}),m.createElement("div",{className:"svc-image-item-value-wrapper__content"},m.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"}}),n))},t}(b);d.ReactElementFactory.Instance.registerElement("svc-image-item-value",function(e){return m.createElement(W,e)});var z=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return u(t,e),t.prototype.createModel=function(e){var t,n=e.componentData,o=!1;this.model&&(o=this.model.isSelected),this.model=new p.MatrixCellWrapperViewModel(n.creator,n.element,n.question,n.row,n.column||(null===(t=n.element.cell)||void 0===t?void 0:t.column)),this.model.isSelected=o},t.prototype.getUpdatedModelProps=function(){return["componentData"]},t.prototype.componentDidUpdate=function(t,n){var o,r;e.prototype.componentDidUpdate.call(this,t,n);var i=this.props.componentData;this.model.templateData=i.element,this.model.row=i.row,this.model.column=i.column||(null===(r=null===(o=i.element)||void 0===o?void 0:o.cell)||void 0===r?void 0:r.column),this.model.question=i.question},t.prototype.getStateElement=function(){return this.model},t.prototype.render=function(){var e=this,t=null;return this.model.isSupportCellEditor&&(t=m.createElement("div",{className:"svc-matrix-cell__question-controls"},(0,d.attachKey2click)(m.createElement("span",{className:"svc-matrix-cell__question-controls-button svc-context-button",onClick:function(t){return e.model.editQuestion(e.model,t)}},m.createElement(d.SvgIcon,