survey-knockout/survey.ko.min.js

survey.js is a JavaScript Survey Library. It is a modern way to add a survey to your website. It uses JSON for survey metadata and results.

/*!
 * surveyjs - Survey JavaScript library v1.9.12
 * Copyright (c) 2015-2022 Devsoft Baltic OÜ  - http://surveyjs.io/
 * License: MIT (http://www.opensource.org/licenses/mit-license.php)
 */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("knockout")):"function"==typeof define&&define.amd?define("survey-ko",["knockout"],t):"object"==typeof exports?exports["survey-ko"]=t(require("knockout")):e.Survey=t(e.ko)}(this,(function(e){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var r=t[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(o,r,function(t){return e[t]}.bind(null,r));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=71)}([function(t,n){t.exports=e},function(e,t,n){"use strict";(function(e){n.d(t,"b",(function(){return o})),n.d(t,"c",(function(){return r})),n.d(t,"a",(function(){}));var o=function(){function e(){this.icons={},this.iconPrefix="icon-"}return e.prototype.registerIconFromSymbol=function(e,t){this.icons[e]=t},e.prototype.registerIconFromSvgViaElement=function(e,t,n){void 0===n&&(n=this.iconPrefix);var o=document.createElement("div");o.innerHTML=t;var r=document.createElement("symbol"),i=o.querySelector("svg");r.innerHTML=i.innerHTML;for(var s=0;s<i.attributes.length;s++)r.setAttributeNS("http://www.w3.org/2000/svg",i.attributes[s].name,i.attributes[s].value);r.id=n+e,this.registerIconFromSymbol(e,r.outerHTML)},e.prototype.registerIconFromSvg=function(e,t,n){void 0===n&&(n=this.iconPrefix);var o=(t=t.trim()).toLowerCase();return"<svg "===o.substring(0,"<svg ".length)&&"</svg>"===o.substring(o.length-"</svg>".length,o.length)&&(this.registerIconFromSymbol(e,'<symbol id="'+n+e+'" '+t.substring("<svg ".length,o.length-"</svg>".length)+"</symbol>"),!0)},e.prototype.iconsRenderedHtml=function(){var e=this;return Object.keys(this.icons).map((function(t){return e.icons[t]})).join("")},e.prototype.renderIcons=function(){if(!document.getElementById("sv-icon-holder-global-container")){var e=document.createElement("div");e.id="sv-icon-holder-global-container",e.style.display="none",e.innerHTML='<svg style="display:none;">'+this.iconsRenderedHtml()+"</svg>",document.head.insertBefore(e,document.head.firstChild)}},e}(),r=new o;if(e.document){var i=n(4),s=document.createElement("div");s.style.display="none",s.innerHTML=i,document.head.appendChild(s)}}).call(this,n(3))},function(e,t,n){},function(e,t){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t){e.exports='<svg style="display:none;"><symbol viewBox="0 0 10 10" id="icon-arrow_downgrey_10x10"><style><![CDATA[.st0{fill:#6d7072}]]></style><path class="st0" d="M2 2L0 4l5 5 5-5-2-2-3 3z"></path></symbol><symbol viewBox="0 0 34 34" id="icon-arrowdown_34x34"><style><![CDATA[.st0{fill:#fff}]]></style><path class="st0" d="M12 16l2-2 3 3 3-3 2 2-5 5z"></path></symbol><symbol viewBox="0 0 24 24" id="icon-choosefile"><path d="M22 9V7c0-1.1-.9-2-2-2h-8l-2-2H4c-1.1 0-2 .9-2 2v16h20l2-12h-2zM4 5h5.2l1.4 1.4.6.6H20v2H4V5zm16.3 14H4v-8h17.6l-1.3 8z"></path></symbol><symbol viewBox="0 0 24 24" id="icon-clear"><path d="M22.6 8.6l-6.2-6.2c-.4-.4-.9-.6-1.4-.6-.5 0-1 .2-1.4.6L1.4 14.6c-.8.8-.8 2 0 2.8L6 22h6l10.6-10.6c.7-.8.7-2.1 0-2.8zM11.1 20H6.8l-4-4 3.4-3.4 6.2 6.2-1.3 1.2zm2.7-2.6l-6.2-6.2L15 3.8l6.2 6.2-7.4 7.4zM16 20h7v2h-9l2-2z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-collapsedetail"><path d="M13 7H3v2h10V7z"></path></symbol><symbol viewBox="0 0 24 24" id="icon-delete"><path d="M22 4h-6V2c0-1.1-.9-2-2-2h-4C8.9 0 8 .9 8 2v2H2v2h2v14c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6h2V4zM10 2h4v2h-4V2zm8 18H6V6h12v14zM14 8h2v10h-2V8zm-3 0h2v10h-2V8zM8 8h2v10H8V8z"></path></symbol><symbol viewBox="0 0 34 34" id="icon-down_34x34"><style><![CDATA[.st0{fill:#1ab394}.st1{fill:#fff}]]></style><path class="st0" d="M33 34H0V0h33c.6 0 1 .4 1 1v32c0 .6-.4 1-1 1z"></path><path class="st1" d="M12 16l2-2 3 3 3-3 2 2-5 5z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-expanddetail"><path d="M13 7H9V3H7v4H3v2h4v4h2V9h4V7z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-left"><path d="M11 12l-2 2-6-6 6-6 2 2-4 4z"></path></symbol><symbol viewBox="0 0 24 24" id="icon-moderncheck"><path d="M5 13l2-2 3 3 7-7 2 2-9 9-5-5z"></path></symbol><symbol viewBox="-12 -12 24 24" id="icon-modernradio"><circle r="6"></circle></symbol><symbol viewBox="0 0 24 24" id="icon-more"><path d="M6 12c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm6-2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></symbol><symbol viewBox="0 0 10 10" id="icon-progressbutton"><path d="M2 2L0 4l5 5 5-5-2-2-3 3z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-progressbuttonv2"><path d="M15 9H4.4l4.3 4.3-1.4 1.4L.6 8l6.7-6.7 1.4 1.4L4.4 7H15v2z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-removefile"><path d="M8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zm3 8l-1 1-2-2-2 2-1-1 2-2-2-2 1-1 2 2 2-2 1 1-2 2 2 2z"></path></symbol><symbol viewBox="0 0 16 16" id="icon-right"><path d="M5 4l2-2 6 6-6 6-2-2 4-4z"></path></symbol><symbol viewBox="0 0 20 20" id="icon-v2check"><path d="M8 15.8l-5.4-5.4L4 9l4 4 8-8 1.4 1.4L8 15.8z"></path></symbol></svg>'},function(e,t,n){e.exports=n(6)+"\n"+n(7)+"\n"+n(8)+"\n"+n(9)+"\n"+n(10)+"\n"+n(11)+"\n"+n(12)+"\n"+n(13)+"\n"+n(14)+"\n"+n(15)+"\n"+n(16)+"\n"+n(17)+"\n"+n(18)+"\n"+n(19)+"\n"+n(20)+"\n"+n(21)+"\n"+n(22)+"\n"+n(23)+"\n"+n(24)+"\n"+n(25)+"\n"+n(26)+"\n"+n(27)+"\n"+n(28)+"\n"+n(29)+"\n"+n(30)+"\n"+n(31)+"\n"+n(32)+"\n"+n(33)+"\n"+n(34)+"\n"+n(35)+"\n"+n(36)+"\n"+n(37)+"\n"+n(38)+"\n"+n(39)+"\n"+n(40)+"\n"+n(41)},function(e,t){e.exports='<script type="text/html" id="survey-comment">\n  \x3c!--ko if: !question.isReadOnlyRenderDiv() --\x3e\n<textarea data-bind="attr: { maxLength: question.getOthersMaxLength(), \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, placeholder: question.commentOrOtherPlaceHolder }, \n        event: { input: function(s, e) { $data.question.onCommentInput(s, e); } }, \n        value: $data.question.comment, \n        visible: $data.visible,\n        disable: $data.question.isInputReadOnly,\n        style: { resize: question.resizeStyle },\n        css: $data.question.koCss().other"></textarea>\n\x3c!--/ko--\x3e\n\n\x3c!--ko if: question.isReadOnlyRenderDiv() --\x3e\n<div data-bind="text: question.comment"></div>\n\x3c!--/ko--\x3e\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-flowpanel">\n  <div data-bind="style: { flexBasis: renderWidth, flexGrow: 1, flexShrink: 1, width: renderWidth, minWidth: $data.minWidth, maxWidth: $data.maxWidth }, attr: { id: id }, css: cssClasses.panel.container">\n      <h4 data-bind="visible: (processedTitle.length > 0), css: question.cssTitle">\n          \x3c!-- ko template: { name: \'survey-string\', data: locTitle } --\x3e\n          \x3c!-- /ko --\x3e\n      </h4>\n      <div data-bind="css: cssClasses.panel.description">\n          \x3c!-- ko template: { name: \'survey-string\', data: locDescription } --\x3e\n          \x3c!-- /ko --\x3e\n      </div>\n      <div data-bind="style: { paddingLeft: innerPaddingLeft }"></div>\n      <f-panel params="question: question" data-bind="attr: { contenteditable : question.isDesignMode, placeHolder: question.placeHolder }"></f-panel>\n  </div>\n<\/script>\n<script type="text/html" id="survey-flowpanel-question">\n  \x3c!-- ko with: $parent.question.getQuestionByName($data) --\x3e\n    \x3c!-- ko template: { name: koElementType(), data: $data, as: \'question\', afterRender: parent.koElementAfterRender } --\x3e\x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-header\">\n  \x3c!-- ko if: renderedHasHeader --\x3e\n<div data-bind=\"css: css.header\">\n  \x3c!-- ko if: isLogoBefore --\x3e\n  \x3c!-- ko component: { name: getElementWrapperComponentName($data, 'logo-image'), params: getElementWrapperComponentData($data, 'logo-image') } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n\n  \x3c!-- ko if: renderedHasTitle --\x3e\n  <div data-bind=\"css: css.headerText, style: { maxWidth: titleMaxWidth }\">\n    \x3c!-- ko component: { name: 'survey-element-title', params: {element: $data } } --\x3e\n    \x3c!-- /ko --\x3e\n    <h5 data-bind=\"css: css.description\">\n      \x3c!-- ko template: { name: 'survey-string', data: locDescription } --\x3e\n      \x3c!-- /ko --\x3e\n    </h5>\n  </div>\n  \x3c!-- /ko --\x3e\n\n  \x3c!-- ko if: isLogoAfter --\x3e\n  \x3c!-- ko component: { name: getElementWrapperComponentName($data, 'logo-image'), params: getElementWrapperComponentData($data, 'logo-image') } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  <div data-bind=\"css: css.headerClose\"></div>\n</div>\n\x3c!-- /ko --\x3e\n<\/script>"},function(e,t){e.exports='<script type="text/html" id="survey-content">\n  <div data-bind="css: css.root, afterRender: koEventAfterRender">\n      <form onsubmit="return false;">\n          <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>\n          <div data-bind="css: css.container">\n              \x3c!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "starting" --\x3e\n              <div data-bind="css: bodyCss">\n                  \x3c!-- ko if: isNavigationButtonsShowingOnTop --\x3e\n                  \x3c!-- ko template: { name: \'survey-navigation-start\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  <div data-bind="attr: { id: startedPage.id }, template: { name: \'survey-page\', data: startedPage, afterRender: koAfterRenderPage }"></div>\n                  \x3c!-- ko if: isNavigationButtonsShowingOnBottom --\x3e\n                  \x3c!-- ko template: { name: \'survey-navigation-start\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n              </div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "running" || koState() == "preview" --\x3e\n              <div data-bind="css: bodyCss">\n                  \x3c!-- ko if: isTimerPanelShowingOnTop --\x3e\n                  \x3c!-- ko template: { name: \'survey-timerpanel\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: isShowProgressBarOnTop --\x3e\n                  \x3c!-- ko component: { name: \'sv-progress-\' + progressBarType, params: { model: $data } } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: isNavigationButtonsShowingOnTop --\x3e\n                  \x3c!-- ko template: { name: \'survey-navigation\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: koCurrentPage --\x3e\n                    <div data-bind="attr: { id: koCurrentPage().id }, template: { name: \'survey-page\', data: koCurrentPage, afterRender: koAfterRenderPage }"></div>\n                    \x3c!-- ko if: isCurrentPageEmpty() && $data.emptyPageTemplate --\x3e\n                    \x3c!-- ko template: { name: emptyPageTemplate, data: $data.emptyPageTemplateData || $data } --\x3e\n                    \x3c!-- /ko --\x3e\n                    \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: isShowProgressBarOnBottom --\x3e\n                  \x3c!-- ko component: { name: \'sv-progress-\' + progressBarType, params: { model: $data } } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: isTimerPanelShowingOnBottom --\x3e\n                  \x3c!-- ko template: { name: \'survey-timerpanel\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: isNavigationButtonsShowingOnBottom --\x3e\n                  \x3c!-- ko template: { name: \'survey-navigation\' } --\x3e\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- /ko --\x3e\n              </div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "completed" && showCompletedPage --\x3e\n              <div data-bind="html: processedCompletedHtml, css: completedCss"></div>\n              <div data-bind="visible: koCompletedState() != \'\', css: css.saveData.root">\n                  <div data-bind="css: koCompletedStateCss">\n                      <span data-bind="text:koCompletedStateText"></span>\n                      <input type="button" data-bind="visible: koCompletedState() == \'error\', value: getLocString(\'saveAgainButton\'), click: doComplete, css: css.saveData.saveAgainButton"/>\n                  </div>\n              </div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "completedbefore" --\x3e\n              <div data-bind="html: processedCompletedBeforeHtml, css: css.body"></div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "loading" --\x3e\n              <div data-bind="html: processedLoadingHtml, css: css.body"></div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: koState() == "empty" --\x3e\n              <div data-bind="text:emptySurveyText, css: css.bodyEmpty"></div>\n              \x3c!-- /ko --\x3e\n          </div>\n      </form>\n  </div>\n<\/script>\n<script type="text/html" id="survey-navigation">\n  <div data-bind="css: css.footer">\n      <input type="button" data-bind="event: { mousedown: navigationMouseDown }, value: locPagePrevText.koRenderedHtml, click: prevPage, visible: isShowPrevButton, css: cssNavigationPrev" />\n      <input type="button" data-bind="event: { mousedown: nextPageMouseDown }, value: locPageNextText.koRenderedHtml, click: nextPageUIClick, visible: isShowNextButton, css: cssNavigationNext" />\n      <input type="button" data-bind="event: { mousedown: navigationMouseDown }, value: locPreviewText.koRenderedHtml, click: showPreview, visible: isLastPage && isPreviewButtonVisible, css: cssNavigationPreview" />\n      <input type="button" data-bind="event: { mousedown: navigationMouseDown }, value: locCompleteText.koRenderedHtml, click: completeLastPage, visible: isCompleteButtonVisible, css: cssNavigationComplete" />\n  </div>\n<\/script>\n<script type="text/html" id="survey-navigation-start">\n  <div data-bind="css: css.footer">\n      <input type="button" data-bind="value: startSurveyText, click: start, css: cssNavigationStart"/>\n  </div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-page">\n  <div data-bind="css: cssClasses.page.root">\n    \x3c!-- ko component: { name: \'survey-element-title\', params: {element: $data } } --\x3e\x3c!-- /ko --\x3e\n    \x3c!-- ko if: _showDescription--\x3e\n    <div\n      data-bind="visible: data.showPageTitles, css: cssClasses.page.description"\n    >\n      \x3c!-- ko template: { name: \'survey-string\', data: locDescription } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko template: { name: \'survey-rows\', data: $data} --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-panel">\n  <div\n    data-bind="attr: { id: id }, css: $data.getContainerCss(), event: {focusin: focusIn}"\n  >\n    \x3c!-- ko if: hasDescription || hasTitle  --\x3e\n    <div data-bind="css: cssClasses.panel.header">\n      \x3c!-- ko component: { name: \'survey-element-title\', params: {element: $data } } --\x3e\x3c!-- /ko --\x3e\n      \x3c!-- ko if: hasDescription --\x3e\n        <div data-bind="css: cssClasses.panel.description">\n          \x3c!-- ko template: { name: \'survey-string\', data: locDescription } --\x3e\n          \x3c!-- /ko --\x3e\n        </div>\n        \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko template: { name: \'survey-question-errors\', data: $data } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: state != "collapsed" --\x3e\n    <div\n      data-bind="style: { paddingLeft: innerPaddingLeft }, css: cssClasses.panel.content, attr: {id:contentId}"\n    >\n      \x3c!-- ko template: { name: \'survey-rows\', data: $data} --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: getFooterToolbar() } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-rows\">\n  \x3c!-- ko foreach: { data: rows, as: 'row'} --\x3e\n    \x3c!-- ko if: row.visible --\x3e\n      \x3c!-- ko component: { name: $parent.survey.getRowWrapperComponentName(row), params: { componentData:  $parent.survey.getRowWrapperComponentData(row), templateData: { name: 'survey-row', data: row } } } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n<\/script>"},function(e,t){e.exports='<script type="text/html" id="survey-row">\n  <div data-bind="css: row.getRowCss()">\n    \x3c!-- ko template: { name: "survey-row-content", afterRender: row.rowAfterRender } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n<script type="text/html" id="survey-row-content">\n\x3c!-- ko foreach: { data: row.visibleElements, as: \'question\', afterRender: row.koAfterRender } --\x3e\n  <div data-bind="css: question.koCss().questionWrapper, style: $data.rootStyle, event: {focusin: question.focusIn }">\n  \x3c!-- ko if: row.isNeedRender --\x3e\n    \x3c!-- ko component: { name: row.panel.survey.getElementWrapperComponentName(question), params: { componentData:  row.panel.survey.getElementWrapperComponentData(question), templateData: { name: question.koElementType, data: question, afterRender: $parent.koElementAfterRender } } } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: !row.isNeedRender && question.skeletonComponentName --\x3e\n    \x3c!-- ko component: { name: question.skeletonComponentName, params: { data: question } } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  </div>\n\x3c!-- /ko --\x3e\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-string">\n    \x3c!-- ko component: { name: renderAs, params: { locString: renderAsData } } --\x3e\n    \x3c!-- /ko --\x3e\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-timerpanel">\n    <div data-bind="text:koTimerInfoText"></div>\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question\">\n<div data-bind=\"css: question.koRootCss(), style: { paddingLeft: question.paddingLeft, paddingRight: question.paddingRight }, attr: { id: question.id, 'data-name': question.name, role: question.ariaRole, 'aria-required': question.ariaRequired, 'aria-invalid': question.ariaInvalid, 'aria-labelledby': question.hasTitle ? question.ariaTitleId : null}\">\n  \x3c!-- ko if: question.isErrorsModeTooltip && !question.hasParent --\x3e\n    \x3c!-- ko template: { name: 'survey-question-errors', data: question } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.hasTitleOnLeftTop --\x3e\n    \x3c!--ko template: { name: 'survey-question-title', data: question  } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  <div data-bind=\"visible: !question.isCollapsed, css: question.cssContent\" role=\"presentation\">\n    \x3c!-- ko if: question.errorLocation === 'top' && !question.isErrorsModeTooltip --\x3e\n      \x3c!-- ko template: { name: 'survey-question-errors', data: question } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.isDefaultRendering() --\x3e\n      \x3c!-- ko template: { name: question.koTemplateName(), data: question, afterRender: question.koQuestionAfterRender } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko ifnot: question.isDefaultRendering() --\x3e\n      \x3c!-- ko component: { name: getComponentName(), params: { question: question } } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.hasComment --\x3e\n    <div data-bind=\"css: question.koCss().formGroup\">\n      \x3c!-- ko template: { name: 'survey-string', data: question.locCommentText } --\x3e\n      \x3c!-- /ko --\x3e\n      <div data-bind=\"template: { name: 'survey-comment', data: {'question': question, 'visible': true } }\"></div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.errorLocation === 'bottom' && !question.isErrorsModeTooltip --\x3e\n      \x3c!-- ko template: { name: 'survey-question-errors', data: question } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.isErrorsModeTooltip && question.hasParent --\x3e\n      \x3c!-- ko component: { name: 'sv-tooltip-error', params: {question: question} } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.hasDescriptionUnderInput --\x3e\n    <div data-bind=\"css: koCss().descriptionUnderInput\">\n      \x3c!-- ko template: { name: 'survey-string', data: locDescription } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.hasTitleOnBottom --\x3e\n      \x3c!--ko template: { name: 'survey-question-title', data: question  } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>"},function(e,t){e.exports='<script type="text/html" id="survey-question-title">\n  <div data-bind="css: question.cssHeader, click: question.clickTitleFunction">\n    \x3c!-- ko component: { name: \'survey-element-title\', params: {element: question } } --\x3e\x3c!-- /ko --\x3e\n    <div\n      data-bind="visible: question.hasDescriptionUnderTitle, css: koCss().description"\n    >\n      \x3c!-- ko template: { name: \'survey-string\', data: locDescription } --\x3e\x3c!-- /ko --\x3e\n    </div>\n  </div>\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-question-boolean">\n  <div data-bind="css: question.koCss().root">\n    <label data-bind="css: question.getItemCss()">\n      <input\n        type="checkbox"\n        data-bind="value: question.checkedValue, css: question.koCss().control, attr: {name: question.name, id: question.inputId, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy}, checked: question.checkedValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isInputReadOnly"\n      />\n      <span\n        data-bind="css: question.getLabelCss(false), click: onFalseLabelClick"\n        >\x3c!-- ko template: { name: \'survey-string\', data: locLabelFalse } --\x3e\x3c!-- /ko --\x3e</span\n      >\n      <div data-bind="css: question.koCss().switch, click: onSwitchClick">\n        <span data-bind="css: question.koCss().slider">\n            \x3c!-- ko if: question.koCss().sliderText && question.isDeterminated --\x3e\n            <span data-bind="css: question.koCss().sliderText">\n              \x3c!-- ko template: { name: \'survey-string\', data: question.getCheckedLabel() } --\x3e\x3c!-- /ko --\x3e\n            </span>\n            \x3c!-- /ko --\x3e\n        </span>\n      </div>\n      <span\n        data-bind="css: question.getLabelCss(true), click: onTrueLabelClick"\n        >\x3c!-- ko template: { name: \'survey-string\', data: locLabelTrue } --\x3e\x3c!-- /ko --\x3e</span\n      >\n    </label>\n  </div>\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-question-checkbox">\n  <fieldset data-bind="css: question.getSelectBaseRootCss()" role="presentation">\n      <legend role="presentation" class="sv-hidden"></legend>\n      \x3c!-- ko ifnot: question.hasColumns  --\x3e\n        \x3c!-- ko foreach: { data: question.visibleChoices, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n          \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-checkbox-item\', data: item } } } --\x3e\n          \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.hasColumns  --\x3e\n        \x3c!-- ko foreach: question.columns --\x3e\n            <div data-bind="css: question.getColumnClass()" role="presentation">\n            \x3c!-- ko foreach: { data: $data, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n              \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-checkbox-item\', data: item } } } --\x3e\n              \x3c!-- /ko --\x3e\n            \x3c!-- /ko --\x3e\n            </div>\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n    </fieldset>\n<\/script>\n<script type="text/html" id="survey-checkbox-item">\n  <div role="presentation" data-bind="css: question.getItemClass(item)">\n      <label data-bind="css: question.getLabelClass(item), attr: { \'aria-label\': question.getAriaItemLabel(item) }">\n          \x3c!-- ko if: item == question.selectAllItem --\x3e\n          <input type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId(item), \'aria-describedby\': question.ariaDescribedBy }, checked: question.koAllSelected, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>\n          \x3c!-- /ko --\x3e\n          \x3c!-- ko if: item != question.selectAllItem --\x3e\n          <input type="checkbox" data-bind="attr: {name: question.name, id: question.getItemId(item), \'aria-describedby\': question.ariaDescribedBy }, checkedValue: item.value, checked: question.koValue, enable: question.getItemEnabled(item), css: question.koCss().itemControl"/>\n          \x3c!-- /ko --\x3e\n              \x3c!-- ko if: question.koCss().materialDecorator --\x3e\n              <span data-bind="css: question.koCss().materialDecorator">\n                \x3c!-- ko if: question.itemSvgIcon --\x3e\n                <svg data-bind="css:question.koCss().itemDecorator">\n                  <use data-bind="attr:{\'xlink:href\':question.itemSvgIcon}" xlink:href=\'\'></use>\n                </svg>\n                \x3c!-- /ko --\x3e\n              </span>\n              \x3c!-- /ko --\x3e\n              <span data-bind="visible: !item.hideCaption, css: question.koCss().controlLabel">\n              \x3c!-- ko template: { name: \'survey-string\', data: item.locText } --\x3e\n              \x3c!-- /ko --\x3e\n          </span>\n      </label>\n      \x3c!-- ko if: question.isOtherItem(item) --\x3e\n      <div class="form-group" data-bind="template: { name: \'survey-comment\', data: {\'question\': question, \'visible\': question.isOtherSelected } }"></div>\n      \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-ranking">\n  <div data-bind="css: question.rootClass">\n    \x3c!-- ko foreach: { data: question.rankingChoices, as: \'item\', afterRender: question.koAfterRender } --\x3e\n      \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-ranking-item\', data: item } } } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n\n<script type="text/html" id="survey-ranking-item">\n  <div\n    tabindex="0"\n    data-bind="event: { keydown: question.koHandleKeydown, pointerdown: question.koHandlePointerDown}, css: question.getItemClass($data), attr: {\'data-sv-drop-target-ranking-item\': $index() }"\n  >\n    <div tabindex="-1" style="outline: none;">\n      <div data-bind="css: question.cssClasses.itemGhostNode"></div>\n      <div data-bind="css: question.cssClasses.itemContent">\n        <div data-bind="css: question.cssClasses.itemIconContainer">\n          <svg\n            width="10"\n            height="16"\n            viewBox="0 0 10 16"\n            data-bind="css: question.getIconHoverCss()"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path\n              d="M6 2C6 0.9 6.9 0 8 0C9.1 0 10 0.9 10 2C10 3.1 9.1 4 8 4C6.9 4 6 3.1 6 2ZM2 0C0.9 0 0 0.9 0 2C0 3.1 0.9 4 2 4C3.1 4 4 3.1 4 2C4 0.9 3.1 0 2 0ZM8 6C6.9 6 6 6.9 6 8C6 9.1 6.9 10 8 10C9.1 10 10 9.1 10 8C10 6.9 9.1 6 8 6ZM2 6C0.9 6 0 6.9 0 8C0 9.1 0.9 10 2 10C3.1 10 4 9.1 4 8C4 6.9 3.1 6 2 6ZM8 12C6.9 12 6 12.9 6 14C6 15.1 6.9 16 8 16C9.1 16 10 15.1 10 14C10 12.9 9.1 12 8 12ZM2 12C0.9 12 0 12.9 0 14C0 15.1 0.9 16 2 16C3.1 16 4 15.1 4 14C4 12.9 3.1 12 2 12Z"\n            />\n          </svg>\n          <svg\n            width="10"\n            height="24"\n            viewBox="0 0 10 24"\n            data-bind="css: question.getIconFocusCss()"\n            xmlns="http://www.w3.org/2000/svg"\n          >\n            <path d="M10 5L5 0L0 5H4V9H6V5H10Z" />\n            <path d="M6 19V15H4V19H0L5 24L10 19H6Z" />\n          </svg>\n        </div>\n        <div\n          data-bind="css: question.cssClasses.itemIndex, text: question.getNumberByIndex($index())"\n        ></div>\n        <div data-bind="css: question.cssClasses.controlLabel">\n          \x3c!-- ko template: { name: \'survey-string\', data: $data.locText } --\x3e\n          \x3c!-- /ko --\x3e\n        </div>\n      </div>\n    </div>\n  </div>\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question-comment\">\n  \x3c!--ko if: !question.isReadOnlyRenderDiv() --\x3e\n<textarea data-bind=\"attr: {'readonly': question.renderedInputReadOnly, 'disabled': question.renderedInputDisabled, maxLength: question.getMaxLength(), cols: question.cols, rows: question.rows, id: question.inputId, placeholder: question.renderedPlaceHolder, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy}, \n  event: { input: function(s, e) { question.onInput(e); }, keydown: function(s, e) { question.onKeyDown(e); return true; } }, \n  value: question.value, \n  style: { resize: question.resizeStyle },\n  css: question.className\"></textarea>\n\x3c!--/ko--\x3e\n\n\x3c!--ko if: question.isReadOnlyRenderDiv() --\x3e\n<div data-bind=\"text: question.value\"></div>\n\x3c!--/ko--\x3e\n<\/script>"},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question-composite\">\n  \x3c!-- ko template: { name: 'survey-panel', data: question.contentPanel, as: 'question', afterRender: question.contentPanel.koPanelAfterRender } --\x3e\n  \x3c!-- /ko --\x3e\n<\/script>\n"},function(e,t){e.exports='<script type="text/html" id="survey-question-custom">\n  \x3c!-- ko template: { name: question.contentQuestion.koTemplateName(), data: question.contentQuestion, as: \'question\', afterRender: question.contentQuestion.koQuestionAfterRender } --\x3e\n  \x3c!-- /ko --\x3e\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-dropdown">\n  <div data-bind="css: question.renderCssRoot">\n    \x3c!-- ko ifnot: question.isReadOnly --\x3e\n    <div data-bind="css: question.koCss().selectWrapper">\n      <select\n      data-bind="if: true, attr: {id: question.inputId, autoComplete: question.autoComplete, required: question.isRequired, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy}, disable: question.isInputReadOnly, value: question.renderedValue, valueAllowUnset: true, css: question.getControlClass()">\n      \x3c!-- ko if: question.showOptionsCaption --\x3e\n      <option data-bind="text:question.locOptionsCaption.koRenderedHtml, value: null"></option>\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko foreach: question.visibleChoices --\x3e\n      <option data-bind="value: $data.value, text: $data.text, attr: { disabled: !$data.isEnabled }"></option>\n      \x3c!-- /ko --\x3e\n      </select>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.isReadOnly --\x3e\n      <div disabled\n      data-bind="attr: {id: question.inputId}, text: question.readOnlyText, css: question.getControlClass()">\n      </div>\n    \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.isOtherSelected --\x3e\n  <div class="form-group"\n    data-bind="template: { name: \'survey-comment\', data: {\'question\': question, \'visible\': question.isOtherSelected } }, style: {display: question.isFlowLayout ? \'inline\': \'\'}">\n  </div>\n  \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-empty">\n    <div></div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-errors">\n        \x3c!-- ko if: hasVisibleErrors --\x3e\n            <div role="alert" aria-live="polite" data-bind="visible: hasVisibleErrors, foreach: { data: errors, as: \'error\' }, css: koErrorClass(), attr: { id: question.id + \'_errors\' }">\n            \x3c!-- ko if: error.visible --\x3e\n            <div>   \n                <span aria-hidden="true" data-bind="css: question.koCss().error.icon"></span>\n                <span data-bind="css: question.koCss().error.item">\n                    \x3c!-- ko template: { name: \'survey-string\', data: error.locText } --\x3e\x3c!-- /ko --\x3e\n                </span>\n            </div>\n            \x3c!-- /ko --\x3e\n        </div>\n        \x3c!-- /ko --\x3e\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-question-expression">\n  <div data-bind="text:question.formatedValue, css: question.koCss().root"></div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-file">\n  <div data-bind="css: question.getFileRootCss()">\n      \x3c!-- ko ifnot: question.isInputReadOnly --\x3e\n      <input type="file" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy, multiple: question.allowMultiple ? \'multiple\' : undefined, title: koInputTitle, accept: question.acceptedTypes }, event: { change: question.dochange }">\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.isReadOnly --\x3e\n      <input type="file" disabled data-bind="css: question.getReadOnlyFileCss(), attr: { placeholder: question.title }" style="color: transparent;"/>\n      \x3c!-- /ko --\x3e\n      <div data-bind="css: question.getFileDecoratorCss(), event: { dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">\n        <span data-bind="css: question.koCss().dragAreaPlaceholder, text: question.dragAreaPlaceholder"></span>\n        <div data-bind="css: question.koCss().wrapper">\n          <label role="button" data-bind="css: question.koChooseFileCss, attr: { for: question.inputId, \'aria-label\': question.chooseButtonCaption }">\n            <span data-bind="text: question.chooseButtonCaption"></span>\n            \x3c!-- ko if: question.cssClasses.chooseFileIconId --\x3e\n              <sv-svg-icon data-bind="title: question.removeFileCaption" params="iconName: question.cssClasses.chooseFileIconId, size: \'auto\'"></sv-svg-icon>\n            \x3c!-- /ko --\x3e\n          </label>\n          <span data-bind="css: question.koCss().noFileChosen, visible: !question.koHasValue(), text: question.noFileChosenCaption"></span>\n        </div>\n      </div>\n      \x3c!-- ko template: { name: \'survey-question-file-clean-button\', data: {question: question, removeButtonCss: question.cssClasses.removeButton} } --\x3e\x3c!-- /ko --\x3e\n      <div data-bind="css: question.cssClasses.fileList, foreach: question.koData, visible: question.koHasValue">\n          <span data-bind="visible: question.showPreview, css: question.cssClasses.preview">\n            \x3c!-- ko template: { name: \'survey-question-file-sign\', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSign} } --\x3e\x3c!-- /ko --\x3e\n            <div data-bind="css: question.cssClasses.imageWrapper">\n              \x3c!-- ko if: question.canPreviewImage($data) --\x3e\n              <img data-bind="attr: { src: $data.content, height: question.imageHeight, width: question.imageWidth }" alt="File preview">\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: !question.canPreviewImage($data) && question.koCss().defaultImage --\x3e\n              <img data-bind="css: question.koCss().defaultImage, attr: { height: question.imageHeight, width: question.imageWidth }">\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: $data.name --\x3e\n              \x3c!-- ko ifnot: question.isReadOnly --\x3e\n              <div data-bind="click: question.doremovefile, css: question.cssClasses.removeFileButton">\n                  <span data-bind="css: question.cssClasses.removeFile, text: question.removeFileCaption"></span>\n                  \x3c!-- ko if: question.cssClasses.removeFileSvgIconId --\x3e\n                    <sv-svg-icon data-bind="css: question.cssClasses.removeFileSvg, title: question.removeFileCaption" params="iconName: question.cssClasses.removeFileSvgIconId, size: \'auto\'"></sv-svg-icon>\n                  \x3c!-- /ko --\x3e\n              </div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n            </div>\n            \x3c!-- ko template: { name: \'survey-question-file-sign\', data: {question: question, item: $data, fileSignCss: question.cssClasses.fileSignBottom} } --\x3e\x3c!-- /ko --\x3e\n          </span>\n      </div>\n      \x3c!-- ko template: { name: \'survey-question-file-clean-button\', data: {question: question, removeButtonCss: question.cssClasses.removeButtonBottom} } --\x3e\x3c!-- /ko --\x3e\n  </div>\n<\/script>\n<script type="text/html" id="survey-question-file-clean-button">\n  \x3c!-- ko if: question.koHasValue() && !question.isReadOnly && $data.removeButtonCss--\x3e\n  <button type="button" data-bind="css: removeButtonCss, disabled: question.isInputReadOnly, click: question.doclean">\n      <span data-bind="text: question.cleanButtonCaption"></span>\n      \x3c!-- ko if: question.cssClasses.removeButtonIconId --\x3e\n        <sv-svg-icon params="iconName: question.cssClasses.removeButtonIconId, size: \'auto\'"></sv-svg-icon>\n      \x3c!-- /ko --\x3e\n  </button>\n  \x3c!-- /ko --\x3e\n<\/script>\n<script type="text/html" id="survey-question-file-sign">\n  \x3c!-- ko if: item.name && fileSignCss --\x3e\n  <div data-bind="css: fileSignCss">\n    <a data-bind="style: { width: question.imageWidth + \'px\' }, click: question.dodownload, text: item.name, attr: { href: item.content, title: item.name, download: item.name }"></a>\n  </div>\n  \x3c!-- /ko --\x3e\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-html">\n  <div data-bind="html: question.locHtml.koRenderedHtml, css: question.koCss().root"></div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-image">\n  <div data-bind="css: question.koCss().root">\n    \x3c!-- ko if: question.renderedMode === "image" --\x3e\n    <img data-bind="css: question.koCss().image, attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight, alt: question.text || question.title }, style: { objectFit: question.imageFit }"/>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.renderedMode === "video" --\x3e\n    <video controls data-bind="css: question.koCss().image, attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit }"></video>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.renderedMode === "youtube" --\x3e\n    <iframe data-bind="css: question.koCss().image, attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit }"></iframe>\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-imagepicker">\n  <fieldset data-bind="css: question.koCss().root">\n      <legend data-bind="attr: { \'aria-label\': question.locTitle.renderedHtml }" role="radio"></legend>\n      \x3c!-- ko foreach: { data: question.visibleChoices, as: \'item\', afterRender: question.koAfterRender}  --\x3e\n        \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-imagepicker-item\', data: item } } } --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n  </fieldset>\n<\/script>\n<script type="text/html" id="survey-imagepicker-item">\n    <div data-bind="css: question.getItemClass(item)">\n        <label data-bind="css: question.koCss().label">\n            <input style="display: none;" data-bind="attr: {type: question.inputType, name: question.questionName, value: item.value, id: question.getItemId(item), \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy}, checked: question.koValue, enable: question.getItemEnabled(item), css: question.koCss().itemControl"\n            />\n            <div data-bind="css: question.koCss().itemDecorator">\n                <div data-bind="css: question.koCss().imageContainer">\n                  \x3c!-- ko if: question.contentMode === "image" --\x3e\n                  <img data-bind="css: question.koCss().image, attr: { src: $data.locImageLink.koRenderedHtml, width: question.renderedImageWidth, height: question.renderedImageHeight, alt: item.locText.koRenderedHtml }, style: { objectFit: question.imageFit }"/>\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: question.contentMode === "video" --\x3e\n                  <video controls data-bind="css: question.koCss().image, attr: { src: $data.locImageLink.koRenderedHtml, width: question.renderedImageWidth, height: question.renderedImageHeight }, style: { objectFit: question.imageFit }"></video>\n                  \x3c!-- /ko --\x3e\n                </div>\n                \x3c!-- ko if: question.showLabel --\x3e\n                <span data-bind="css: question.koCss().itemText">\n                  \x3c!-- ko template: { name: \'survey-string\', data: item.locText } --\x3e\n                  \x3c!-- /ko --\x3e\n                </span>\n                \x3c!-- /ko --\x3e\n            </div>\n        </label>\n    </div>\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-question-matrix">\n  <div data-bind="css: question.koCss().tableWrapper">\n    <fieldset>\n      <legend\n        data-bind="attr: { \'aria-label\': question.locTitle.renderedHtml }"\n      ></legend>\n      <table data-bind="css: question.koCss().root">\n        \x3c!-- ko if: question.showHeader --\x3e\n        <thead>\n          <tr>\n            <td data-bind="visible: question.hasRows"></td>\n            \x3c!-- ko foreach: question.koVisibleColumns --\x3e\n            <th data-bind="css: question.koCss().headerCell">\n              \x3c!-- ko component: { name: question.getColumnHeaderWrapperComponentName($data), params: { componentData:  question.getColumnHeaderWrapperComponentData($data), templateData: { data: $data } } } --\x3e\n                \x3c!-- ko template: { name: \'survey-string\', data: $data.locText } --\x3e\x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n            </th>\n            \x3c!-- /ko --\x3e\n          </tr>\n        </thead>\n        \x3c!-- /ko --\x3e\n        <tbody>\n          \x3c!-- ko foreach: { data: question.koVisibleRows, as: \'row\' } --\x3e\n          <tr data-bind="css: row.rowClasses">\n            <td\n              data-bind="visible: question.hasRows, css: question.koCss().cell"\n            >\n              \x3c!-- ko component: { name: question.getRowHeaderWrapperComponentName($data), params: { componentData:  question.getRowHeaderWrapperComponentData($data), templateData: { data: $data } } } --\x3e\n                \x3c!-- ko template: { name: \'survey-string\', data: row.locText } --\x3e\n                \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n            </td>\n            \x3c!-- ko foreach: question.koVisibleColumns --\x3e\n            \x3c!-- ko if: question.hasCellText --\x3e\n            <td\n              data-bind="css: question.getItemClass(row, $data), click: function() { if (!question.isInputReadOnly) { row.cellClick($data); } }"\n            >\n              \x3c!-- ko template: { name: \'survey-string\', data: question.getCellDisplayLocText(row.name, $data) } --\x3e\n              \x3c!-- /ko --\x3e\n            </td>\n            \x3c!-- /ko --\x3e\n            \x3c!-- ko if: !question.hasCellText --\x3e\n            <td\n              data-bind="attr: { \'data-responsive-title\': $data.locText.renderedHtml }, css: question.koCss().cell"\n            >\n              <label data-bind="css: question.getItemClass(row, $data)">\n                <input\n                  type="radio"\n                  data-bind="css: question.koCss().itemValue, attr: { name: row.fullName, \'aria-required\': question.ariaRequired, \'aria-label\': $data.locText.renderedHtml, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy, id: question.inputId + \'_\' + row.name + \'_\' + $index() }, checkedValue: $data.value, checked: row.value, enable: !question.isInputReadOnly"\n                />\n                <span data-bind="css: question.koCss().materialDecorator">\n                  <svg\n                    data-bind="css:question.koCss().itemDecorator"\n                    viewBox="-12 -12 24 24"\n                  >\n                    <circle r="6" cx="0" cy="0" />\n                  </svg>\n                </span>\n                <span class="circle"></span>\n                <span class="check"></span>\n                <span\n                  style="display: none"\n                  data-bind="text: $data.locText.text"\n                ></span>\n              </label>\n            </td>\n            \x3c!-- /ko --\x3e\n            \x3c!-- /ko --\x3e\n          </tr>\n          \x3c!-- /ko --\x3e\n        </tbody>\n      </table>\n    </fieldset>\n  </div>\n<\/script>\n<script type="text/html" id="survey-text">\n  <span data-bind="text:$data.renderedHtml"></span>\n<\/script>\n'},function(e,t){e.exports='\ufeff<script type="text/html" id="survey-question-matrixdynamic">\n    <div>\n    \x3c!-- ko if: question.koTable().showAddRowOnTop --\x3e\n    <div\n      data-bind="css: question.koCss().footer"\n    >\n      <button\n        type="button"\n        data-bind="click: question.isDesignMode ? undefined : question.koAddRowClick, css: question.getAddRowButtonCss(), disable: question.isInputReadOnly"\n      >\n        \x3c!-- ko template: { name: \'survey-string\', data: question.locAddRowText } --\x3e\x3c!-- /ko --\x3e\n        <span data-bind="css: question.koCss().iconAdd"></span>\n      </button>\n    </div>\n    \x3c!-- /ko --\x3e\n    <div\n      data-bind="visible: question.koTable().showTable, style: { overflowX: question.horizontalScroll ? \'scroll\': \'\' }"\n    >\n      <table data-bind="css: question.koCss().root">\n        \x3c!-- ko if: question.koTable().showHeader --\x3e\n        <thead>\n          <tr>\n            \x3c!-- ko foreach: question.koTable().headerRow.cells --\x3e\n            <th\n              data-bind="style: { minWidth: $data.minWidth, width: $data.width }, css: $data.className"\n            >\n              \x3c!-- ko if: $data.hasTitle --\x3e\n              \x3c!-- ko component: { name: question.getColumnHeaderWrapperComponentName($data), params: { componentData:  question.getColumnHeaderWrapperComponentData($data), templateData: { data: $data } } } --\x3e\n                \x3c!-- ko template: { name: \'survey-string\', data: $data.locTitle } --\x3e\x3c!-- /ko --\x3e\n                \x3c!-- ko if: $data.requiredText --\x3e\n                <span data-bind="text: $data.requiredText"></span>\n                \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n            </th>\n            \x3c!-- /ko --\x3e\n          </tr>\n        </thead>\n        \x3c!-- /ko --\x3e\n        <tbody>\n          \x3c!-- ko foreach: question.koTable().rows --\x3e\n          \x3c!-- ko ifnot: $parent.detailPanelMode === "popup" && $data.isDetailRow --\x3e\n          <tr data-bind="css: $data.className, attr: attributes, event: { pointerdown: function (model, event) { question.onPointerDown(event, row); return true;} }">\n            \x3c!-- ko foreach: $data.cells --\x3e\n            \x3c!-- ko if: $data.isDragHandlerCell --\x3e\n            <td data-bind="css:$data.className, attr: {colspa