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.12.61
 * Copyright (c) 2015-2026 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 i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.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 i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));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=225)}([function(t,n){t.exports=e},function(e,t,n){e.exports=n(2)+"\n"+n(3)+"\n"+n(4)+"\n"+n(5)+"\n"+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\x3c!-- ko component: { name: \'sv-text-area\', params: question.commentTextAreaModel } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko--\x3e\n\x3c!-- ko if: question.isReadOnlyRenderDiv() --\x3e\n<div data-bind="text: question.comment"></div>\n\x3c!--/ko--\x3e\n<\/script>\n<script type="text/html" id="survey-other">\n\x3c!-- ko if: !question.isReadOnlyRenderDiv() --\x3e\n\x3c!-- ko component: { name: \'sv-text-area\', params: question.otherTextAreaModel } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko--\x3e\n\x3c!-- ko if: question.isReadOnlyRenderDiv() --\x3e\n<div data-bind="text: question.otherValue"></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    \x3c!-- ko if: renderedHasDescription --\x3e\n    <div data-bind=\"css: css.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\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    \x3c!-- ko template: { name: "survey-content-template", afterRender: $data.implementor.koEventAfterRender } --\x3e\n    \x3c!-- /ko --\x3e\n<\/script>\n\n<script type="text/html" id="survey-content-template">\n  <div data-bind="css: rootCss, elementStyle: themeVariables, attr: { lang: locale || \'en\', dir: localeDir }">\n    \x3c!-- ko if: needRenderIcons --\x3e\n      \x3c!-- ko component: { name: \'sv-svg-bundle\'} --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    <div data-bind="css: wrapperFormCss">\n      \x3c!-- ko if: !!renderBackgroundImage --\x3e\n      <div data-bind="css: css.rootBackgroundImage, elementStyle: backgroundImageStyle"></div>\n      \x3c!-- /ko --\x3e\n      <form onsubmit="return false;">\n          <div class="sv_custom_header" data-bind="visible: !hasLogo"></div>\n          <div data-bind="css: containerCss">\n              \x3c!-- ko if: headerView === \'basic\' --\x3e\n              \x3c!-- ko template: { name: koTitleTemplate, afterRender: koAfterRenderHeader } --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "header", needRenderWrapper: false } } --\x3e\x3c!-- /ko --\x3e\n              \x3c!-- ko if: isShowingPage --\x3e\n              <div data-bind="css: $data.bodyContainerCss">\n                  \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "left" } } --\x3e\x3c!-- /ko --\x3e\n                  <div class="sv-components-column sv-components-column--expandable">\n                    \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "center" } } --\x3e\x3c!-- /ko --\x3e\n                    <div data-bind="css: bodyCss, style:{maxWidth: renderedWidth}, attr: { id: activePage ? activePage.id : \'\' }">\n                          \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "contentTop" } } --\x3e\x3c!-- /ko --\x3e\n                          \x3c!-- ko if: activePage --\x3e\n                          \x3c!-- ko template: { name: \'survey-page\', data: activePage, afterRender: koAfterRenderPage } --\x3e\n                          \x3c!-- /ko --\x3e\n                          \x3c!-- ko if: activePage.rows.length == 0 && $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 component: { name: "sv-components-container", params: { survey: $data, container: "contentBottom" } } --\x3e\x3c!-- /ko --\x3e\n                          \x3c!-- ko if: showBrandInfo --\x3e\n                            <sv-brand-info></sv-brand-info>\n                          \x3c!-- /ko --\x3e\n                    </div>\n                  </div>\n                  \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "right" } } --\x3e\x3c!-- /ko --\x3e\n              </div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "footer", needRenderWrapper: false } } --\x3e\x3c!-- /ko --\x3e\n              \x3c!-- ko if: state == "completed" && showCompletedPage --\x3e\n              <div data-bind="html: koProcessedCompletedHtml, css: completedCss"></div>\n              \x3c!-- ko component: { name: "sv-components-container", params: { survey: $data, container: "completePage", needRenderWrapper: false } } --\x3e\x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: state == "completedbefore" --\x3e\n              <div data-bind="html: locCompletedBeforeHtml.koRenderedHtml, css: completedBeforeCss"></div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: state == "loading" --\x3e\n              <div data-bind="html: locLoadingHtml.koRenderedHtml, css: loadingBodyCss"></div>\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: state == "empty" --\x3e\n              <div data-bind="text:emptySurveyText, css: css.bodyEmpty"></div>\n              \x3c!-- /ko --\x3e\n          </div>\n      </form>\n      \x3c!-- ko component: { name: \'sv-notifier\', params: { notifier: notifier } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n<\/script>'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-page\">\n  <div data-bind=\"css: cssRoot\">\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-question-errors', data: $data, as: 'question' } --\x3e\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  \x3c!-- ko if: $data.getIsContentVisible() --\x3e\n  <div\n    data-bind=\"attr: { id: id }, css: $data.getContainerCss(), event: {focusin: focusIn}\"\n  >\n    \x3c!-- ko if: showErrorsAbovePanel--\x3e\n      \x3c!-- ko template: { name: 'survey-question-errors', data: $data } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: hasDescription || hasTitle  --\x3e\n        \x3c!--ko template: { name: 'survey-question-title', data: $data  } --\x3e\x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko ifnot: showErrorsAbovePanel--\x3e\n      \x3c!-- ko template: { name: 'survey-question-errors', data: $data } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: renderedIsExpanded --\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  \x3c!-- /ko --\x3e\n<\/script>\n"},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-rows\">\n  \x3c!-- ko foreach: { data: visibleRows, as: 'row' } --\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<\/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.cssClasses.questionWrapper, style: $data.rootStyle">\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: { element: 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    \x3c!-- ko if: isRunning && showTimerAsClock --\x3e\n    <div data-bind="css: rootCss">\n        \x3c!-- ko if: showProgress --\x3e\n        <svg data-bind="css: getProgressCss(), style: { strokeDasharray: 440, strokeDashoffset: -440 * progress }">\n            <use data-bind="attr:{\'xlink:href\': \'#icon-timercircle\'}" xlink:href=\'\'></use>\n        </svg>\n        \x3c!-- /ko --\x3e\n        <div data-bind="css: textContainerCss">\n            <span data-bind="css: majorTextCss, text: clockMajorText"></span>\n            \x3c!-- ko if: !!minorTextCss --\x3e\n            <span data-bind="css: minorTextCss, text: clockMinorText"></span>\n            \x3c!-- /ko --\x3e\n        </div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: isRunning && !showTimerAsClock --\x3e\n    <div data-bind="css: survey.getCss().timerRoot, text: text"></div>\n    \x3c!--/ko --\x3e\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question\">\n<div data-bind=\"css: question.getRootCss(), style: question.getRootStyle(), attr: { id: question.id, 'data-name': question.name, role: question.ariaRole, 'aria-required': question.ariaRequired, 'aria-invalid': question.ariaInvalid, 'aria-labelledby': question.ariaLabelledBy, 'aria-describedby':question.ariaDescribedBy, 'aria-expanded': question.ariaExpanded}\">\n  \x3c!-- ko if: question.showErrorsAboveQuestion --\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  \x3c!-- ko component: { name: question.survey.getQuestionContentWrapperComponentName(question), params: { componentData:  question.survey.getElementWrapperComponentData(question), templateData: { name: 'survey-question-content', data: question } } } --\x3e\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  \x3c!-- ko if: question.showErrorsBelowQuestion --\x3e\n    \x3c!-- ko template: { name: 'survey-question-errors', data: question } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n</div>\n<\/script>\n"},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question-content\">\n<div data-bind=\"visible: question.renderedIsExpanded, css: question.cssContent, event: {focusin: question.focusIn }\" role=\"presentation\">\n  \x3c!-- ko if: question.showErrorOnTop --\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.getCommentAreaCss()\">\n    <div>\n      \x3c!-- ko template: { name: 'survey-string', data: question.locCommentText } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- ko template: { name: 'survey-comment',  data: {'question': question, 'visible': true } } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.showErrorOnBottom --\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.hasDescriptionUnderInput --\x3e\n  <div data-bind=\"css: question.cssDescription, attr: {'id': question.ariaDescriptionId}\">\n    \x3c!-- ko template: { name: 'survey-string', data: locDescription } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\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, style: { width: $data.titleWidth }, click: function(m, e) { if(question.clickTitleFunction) return question.clickTitleFunction(e); }\">\n    \x3c!-- ko component: { name: 'survey-element-title', params: { element: $data } } --\x3e\x3c!-- /ko --\x3e\n    \x3c!-- ko if: $data.hasDescriptionUnderTitle --\x3e\n    <div data-bind=\"css: $data.cssDescription, visible: $data.hasDescription, attr: {'id': $data.ariaDescriptionId}\">\n      \x3c!-- ko template: { name: 'survey-string', data: $data.locDescription } --\x3e\x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: $data.hasAdditionalTitleToolbar --\x3e\n    \x3c!-- ko component: { name: 'sv-action-bar', params: { model: $data.additionalTitleToolbar } } --\x3e\x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n<\/script>"},function(e,t){e.exports='<script type="text/html" id="survey-question-boolean">\n  <div data-bind="css: question.cssClasses.root, event: { keydown: question.onKeyDown}">\n    <label data-bind="css: question.getItemCss()">\n      <input\n        type="checkbox"\n        data-bind="value: question.booleanValue, css: question.cssClasses.control, attr: {name: question.name, id: question.inputId, \'role\': question.a11y_input_ariaRole, \'aria-required\': question.a11y_input_ariaRequired, \'aria-labelledby\': question.a11y_input_ariaLabelledBy, \'aria-describedby\': question.a11y_input_ariaDescribedBy, \'aria-invalid\': question.a11y_input_ariaInvalid, \'aria-errormessage\': question.a11y_input_ariaErrormessage, \'aria-label\': question.a11y_input_ariaLabel, readonly: question.isReadOnlyAttr}, checked: question.booleanValue, surveyProp: {indeterminate: question.isIndeterminate}, enable: !question.isDisabledAttr"\n      />\n      <div data-bind="css: question.cssClasses.sliderGhost, click: onFalseLabelClick">\n        <span data-bind="css: question.getLabelCss(swapOrder)">\n          \x3c!-- ko template: { name: \'survey-string\', data: locLabelLeft } --\x3e\x3c!-- /ko --\x3e\n        </span>\n      </div>\n      <div data-bind="css: question.cssClasses.switch, click: onSwitchClick">\n        <span data-bind="css: question.cssClasses.slider">\n            \x3c!-- ko if: question.cssClasses.sliderText && question.isDeterminated --\x3e\n            <span data-bind="css: question.cssClasses.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      <div data-bind="css: question.cssClasses.sliderGhost, click: onTrueLabelClick">\n        <span data-bind="css: question.getLabelCss(!swapOrder)">\n          \x3c!-- ko template: { name: \'survey-string\', data: locLabelRight } --\x3e\x3c!-- /ko --\x3e\n        </span>\n      </div>\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(), attr: { \'role\': question.a11y_input_ariaRole, \'aria-required\': question.a11y_input_ariaRequired, \'aria-labelledby\': question.a11y_input_ariaLabelledBy, \'aria-describedby\': question.a11y_input_ariaDescribedBy, \'aria-invalid\': question.a11y_input_ariaInvalid, \'aria-errormessage\': question.a11y_input_ariaErrormessage, \'aria-label\': question.a11y_input_ariaLabel }">\n      <legend data-bind="text: question.locTitle.renderedHtml" class="sv-hidden"></legend>\n      \x3c!-- ko if: question.hasHeadItems  --\x3e\n        \x3c!-- ko foreach: { data: question.headItems, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n          \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: question.itemComponent, data: item } } } --\x3e\n          \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko ifnot: question.hasColumns  --\x3e\n        \x3c!-- ko if: question.blockedRow --\x3e\n        <div data-bind="css: question.cssClasses.rootRow">\n          \x3c!-- ko foreach: { data: question.dataChoices, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n          \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: question.itemComponent, data: item } } } --\x3e\n          \x3c!-- /ko --\x3e\n          \x3c!-- /ko --\x3e\n        </div>\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko ifnot: question.blockedRow --\x3e\n        \x3c!-- ko foreach: { data: question.bodyItems, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n          \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: question.itemComponent, data: item } } } --\x3e\n          \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.hasColumns  --\x3e\n        <div data-bind="css: question.cssClasses.rootMultiColumn">\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: question.itemComponent, data: item } } } --\x3e\n              \x3c!-- /ko --\x3e\n            \x3c!-- /ko --\x3e\n            </div>\n        \x3c!-- /ko --\x3e\n        </div>\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.hasFootItems  --\x3e\n        \x3c!-- ko foreach: { data: question.footItems, as: \'item\', afterRender: question.koAfterRender }  --\x3e\n          \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: question.itemComponent, data: item } } } --\x3e\n          \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.hasOther && question.isOtherSelected --\x3e\n      <div data-bind="css: question.getCommentAreaCss(true), template: { name: \'survey-other\', data: {\'question\': question, \'visible\': question.isOtherSelected } }"></div>\n      \x3c!-- /ko --\x3e\n    </fieldset>\n<\/script>\n\n<script type="text/html" id="survey-checkbox-item">\n  <div role="presentation" data-bind="css: question.getItemClass($data)">\n      <label data-bind="css: question.getLabelClass($data)">\n          <input type="checkbox" data-bind="attr: {name: question.name + id, id: question.getItemId($data), readonly: question.isReadOnlyAttr, required: question.hasRequiredError()}, value: $data.value, checked: question.isItemSelected($data), event: { change: (i, e) => { question.clickItemHandler($data, e.target.checked); } }, enable: question.getItemEnabled($data), css: question.cssClasses.itemControl"/>\n          \x3c!-- ko if: question.cssClasses.materialDecorator --\x3e\n          <span data-bind="css: question.cssClasses.materialDecorator">\n            \x3c!-- ko if: question.itemSvgIcon --\x3e\n            <svg data-bind="css:question.cssClasses.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          \x3c!-- ko if: !$data.hideCaption --\x3e\n          <span data-bind="css: question.cssClasses.controlLabel">\n          \x3c!-- ko template: { name: \'survey-string\', data: $data.locText } --\x3e\n          \x3c!-- /ko --\x3e\n          </span>\n          \x3c!-- /ko --\x3e\n      </label>\n  </div>\n<\/script>\n'},function(e,t){e.exports="<script type=\"text/html\" id=\"survey-question-tagbox\">\n  <div data-bind=\"css: question.renderCssRoot\">\n    \x3c!-- ko component: { name: 'sv-tagbox', params: { question: question } } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.isOtherSelected --\x3e\n  <div\n    data-bind=\"css: question.getCommentAreaCss(true), template: { name: 'survey-other', data: {'question': question, 'visible': question.isOtherSelected } }, style: {display: question.isFlowLayout ? 'inline': ''}\">\n  </div>\n  \x3c!-- /ko --\x3e\n  </div>\n<\/script>"},function(e,t){e.exports='<script type="text/html" id="survey-question-ranking">\n   \x3c!-- ko ifnot: question.selectToRankEnabled --\x3e\n  <div data-bind="css: question.rootClass">\n    \x3c!-- ko foreach: { data: question.renderedRankingChoices, as: \'item\', afterRender: question.koAfterRender } --\x3e\n      \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-ranking-item\', data: item } } } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n\n  \x3c!-- ko if: question.selectToRankEnabled --\x3e\n  <div data-bind="css: question.rootClass">\n    <div data-bind="css: question.getContainerClasses(\'from\')" data-ranking="from-container">\n      \x3c!-- ko foreach: { data: question.renderedUnRankingChoices, as: \'item\', afterRender: question.koAfterRender } --\x3e\n        \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: \'\', componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-ranking-item\', data: item } } } --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.renderedUnRankingChoices.length === 0 --\x3e\n        <div data-bind="css: cssClasses.containerPlaceholder">\n            \x3c!-- ko template: { name: \'survey-string\', data: question.locSelectToRankEmptyRankedAreaText } --\x3e\n            \x3c!-- /ko --\x3e\n        </div>\n      \x3c!-- /ko --\x3e\n    </div>\n    <div data-bind="css: cssClasses.containersDivider"></div>\n    <div data-bind="css: question.getContainerClasses(\'to\')" data-ranking="to-container">\n      \x3c!-- ko foreach: { data: question.renderedRankingChoices, as: \'item\', afterRender: question.koAfterRender } --\x3e\n        \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { number: question.getNumberByIndex($index()), componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-ranking-item\', data: item } } } --\x3e\n        \x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko if: question.renderedRankingChoices.length === 0 --\x3e\n      <div data-bind="css: cssClasses.containerPlaceholder">\n          \x3c!-- ko template: { name: \'survey-string\', data: question.locSelectToRankEmptyUnrankedAreaText } --\x3e\n          \x3c!-- /ko --\x3e\n      </div>\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n\n  \x3c!-- /ko --\x3e\n<\/script>\n\n<script type="text/html" id="survey-ranking-item">\n  <div\n    data-bind="event: { keydown: question.koHandleKeydown, pointerdown: question.koHandlePointerDown, pointerup: question.koHandlePointerUp}, css: question.getItemClass($data), attr: {id: question.getItemId($data), tabindex: question.getItemTabIndex($data), \'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 data-bind="css:question.getIconHoverCss()">\n            <use data-bind="attr:{\'xlink:href\':question.dragDropSvgIcon}" xlink:href=\'\'></use>\n          </svg>\n          <svg data-bind="css:question.getIconFocusCss()">\n            <use data-bind="attr:{\'xlink:href\':question.arrowsSvgIcon}" xlink:href=\'\'></use>\n          </svg>\n        </div>\n        \x3c!-- ko if: $parent.number --\x3e\n        <div\n          data-bind="css: question.getItemIndexClasses(item), text: $parent.number"\n        ></div>\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko ifnot: $parent.number --\x3e\n        <div\n          data-bind="css: question.getItemIndexClasses(item)"\n        >\n        <svg>\n          <use data-bind="attr:{\'xlink:href\':question.dashSvgIcon}" xlink:href=\'\'></use>\n        </svg>\n        </div>\n        \x3c!-- /ko --\x3e\n\n        \x3c!-- ko component: { name: question.itemComponent, params: { cssClasses: question.cssClasses, item: $data } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n  </div>\n<\/script>'},function(e,t){e.exports='<script type="text/html" id="survey-question-comment">\n\x3c!-- ko if: !question.isReadOnlyRenderDiv() --\x3e\n  \x3c!-- ko component: { name: \'sv-text-area\', params: question.textAreaModel } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.getMaxLength() --\x3e\n  \x3c!-- ko component: { name: \'sv-character-counter\', params: { counter: question.characterCounter, remainingCharacterCounter: question.cssClasses.remainingCharacterCounter } } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko--\x3e\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 if: question.contentQuestion.isDefaultRendering() --\x3e\n      \x3c!-- ko template: { name: question.contentQuestion.koTemplateName(), data: question.contentQuestion, as: \'question\', afterRender: question.contentQuestion.koQuestionAfterRender } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko ifnot: question.contentQuestion.isDefaultRendering() --\x3e\n      \x3c!-- ko component: { name: question.contentQuestion.getComponentName(), params: { question: question.contentQuestion } } --\x3e\n      \x3c!-- /ko --\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 component: { name: 'sv-dropdown', params: { question: question } } --\x3e\n    \x3c!-- /ko --\x3e\n  \x3c!-- ko if: question.isOtherSelected --\x3e\n  <div data-bind=\"css: question.getCommentAreaCss(true), template: { name: 'survey-other', 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: cssError, attr: { id: question.id + \'_errors\' }">\n            \x3c!-- ko if: error.visible --\x3e\n            \x3c!-- ko component: { name: question.survey.questionErrorComponent, params: { error: error, cssClasses: question.cssClasses, element: 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-question-expression">\n  <div data-bind="text:question.formatedValue, css: question.cssClasses.root"></div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-file">\n  <div data-bind="css: question.fileRootCss">\n        \x3c!-- ko ifnot: question.isInputReadOnly --\x3e\n          \x3c!-- ko if: question.hasFileUI --\x3e\n          <input type="file" tabindex="-1" data-bind="css: question.cssClasses.fileInput, attr: { id: question.inputId, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-errormessage\': question.ariaErrormessage, multiple: question.allowMultiple ? \'multiple\' : undefined, title: koInputTitle, accept: question.acceptedTypes, capture: question.renderCapture }">\n          \x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko if: question.isReadOnlyAttr --\x3e\n        <input type="file" readonly data-bind="css: question.getReadOnlyFileCss(), attr: { id: question.inputId, placeholder: question.title, multiple: question.allowMultiple ? \'multiple\' : undefined }" style="color: transparent;"/>\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko if: question.isDisabledAttr --\x3e\n        <input type="file" disabled data-bind="css: question.getReadOnlyFileCss(), attr: { id: question.inputId, placeholder: question.title, multiple: question.allowMultiple ? \'multiple\' : undefined }" style="color: transparent;"/>\n        \x3c!-- /ko --\x3e\n        <div data-bind="css: question.cssClasses.dragArea, event: { dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">     \n          \x3c!-- ko if: question.showFileDecorator --\x3e\n          <div data-bind="css: question.getFileDecoratorCss()">\n            \x3c!-- ko if: question.showDragAreaPlaceholder --\x3e\n            <span data-bind="css: question.cssClasses.dragAreaPlaceholder">\n              \x3c!-- ko template: { name: \'survey-string\', data: question.locRenderedPlaceholder } --\x3e\n              \x3c!-- /ko --\x3e\n            </span>\n            \x3c!-- /ko --\x3e\n            <div data-bind="css: question.cssClasses.wrapper">\n              \x3c!-- ko if: question.showChooseButton --\x3e\n                \x3c!-- ko component: { name: \'sv-file-choose-btn\' } --\x3e\n                \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: question.actionsContainerVisible --\x3e\n              \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: question.actionsContainer } } --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- /ko --\x3e\n              \x3c!-- ko if: !question.koHasValue() --\x3e\n              <span data-bind="css: question.cssClasses.noFileChosen, text: question.noFileChosenCaption"></span>\n              \x3c!-- /ko --\x3e\n            </div>\n          </div>\n          \x3c!-- /ko --\x3e\n          \x3c!-- ko if: question.showLoadingIndicator --\x3e\n          <div data-bind="css: question.cssClasses.loadingIndicator">\n            \x3c!-- ko component: { name: "sv-loading-indicator" } --\x3e\n            \x3c!-- /ko --\x3e\n          </div>\n          \x3c!-- /ko --\x3e\n          \x3c!-- ko if: question.isPlayingVideo --\x3e\n          \x3c!-- ko template: { name: \'survey-question-file-video\', data: { question: question } } --\x3e\x3c!-- /ko --\x3e          \n          \x3c!-- /ko --\x3e\n          \x3c!-- ko template: { name: \'survey-question-file-clean-button\', data: {question: question, showRemoveButton: question.showRemoveButton} } --\x3e\x3c!-- /ko --\x3e\n          \x3c!-- ko if: question.allowShowPreview --\x3e\n          \x3c!-- ko component: { name: \'sv-file-preview\', data: { question: question } } --\x3e\x3c!-- /ko --\x3e          \n          \x3c!-- /ko --\x3e\n          \x3c!-- ko template: { name: \'survey-question-file-clean-button\', data: {question: question, showRemoveButton: question.showRemoveButtonBottom} } --\x3e\x3c!-- /ko --\x3e\n          \x3c!-- ko if: question.fileNavigatorVisible --\x3e\n          \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: question.fileNavigator } } --\x3e\n          \x3c!-- /ko --\x3e\n          \x3c!-- /ko --\x3e\n        </div>\n  </div>\n<\/script>\n<script type="text/html" id="survey-question-file-clean-button">\n  \x3c!-- ko if: question.koHasValue() && !question.isReadOnly && $data.showRemoveButton--\x3e\n  <button type="button" data-bind="css: showRemoveButton, enabled: !question.isInputReadOnly, click: question.doclean">\n      <span data-bind="text: question.clearButtonCaption"></span>\n  </button>\n  \x3c!-- /ko --\x3e\n<\/script>\n<script type="text/html" id="survey-question-file-video">\n  <div data-bind="css: question.cssClasses.videoContainer">\n    \x3c!-- ko component: { name: \'sv-action\', params: { item: question.changeCameraAction } } --\x3e\x3c!-- /ko --\x3e\n    \x3c!-- ko component: { name: \'sv-action\', params: { item: question.closeCameraAction } } --\x3e\x3c!-- /ko --\x3e\n    <video autoplay playsinline data-bind="attr: { id: question.videoId },  css: question.cssClasses.video"></video>\n    \x3c!-- ko component: { name: \'sv-action\', params: { item: question.takePictureAction } } --\x3e\x3c!-- /ko --\x3e\n  </div>\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 }, 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>'},function(e,t){e.exports='<script type="text/html" id="survey-question-html">\n  <div data-bind="html: question.locHtml.koRenderedHtml, css: question.renderCssRoot"></div>\n<\/script>\n'},function(e,t){e.exports='<script type="text/html" id="survey-question-image">\n  <div data-bind="css: question.cssClasses.root">\n    \x3c!-- ko if: question.renderedMode === "image" --\x3e\n    <img data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml() || null, width: question.renderedWidth, height: question.renderedHeight, alt: question.altText || question.title }, style: { objectFit: question.imageFit,  width: question.renderedStyleWidth, height: question.renderedStyleHeight }, visible: $data.locImageLink.koRenderedHtml() && !question.contentNotLoaded"/>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.renderedMode === "video" --\x3e\n    <video controls data-bind="event: { load: question.onLoadHandler, error: question.onErrorHandler }, css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit,  width: question.renderedStyleWidth, height: question.renderedStyleHeight }, visible: $data.locImageLink.koRenderedHtml() && !question.contentNotLoaded"></video>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: question.renderedMode === "youtube" --\x3e\n    <iframe data-bind=" css: question.getImageCss(), attr: { src: $data.locImageLink.koRenderedHtml(), width: question.renderedWidth, height: question.renderedHeight }, style: { objectFit: question.imageFit,  width: question.renderedStyleWidth, height: question.renderedStyleHeight }"></iframe>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: !$data.locImageLink.koRenderedHtml() || question.contentNotLoaded  --\x3e\n    <div data-bind="css: question.cssClasses.noImage">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { iconName: question.cssClasses.noImageSvgIconId, size: 48 } } --\x3e\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-question-imagepicker">\n    <fieldset data-bind="css: question.getSelectBaseRootCss(), style: question.getContainerStyle()">\n        <legend class="sv-hidden" data-bind="text: question.locTitle.renderedHtml"></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-imagepicker-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-imagepicker-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-imagepicker-item">\n    <div data-bind="css: question.koGetItemClass(item)">\n        <label data-bind="css: question.cssClasses.label">\n            <input data-bind="attr: {type: question.inputType, name: question.questionName, value: item.value, id: question.getItemId(item), \'aria-required\': question.ariaRequired, \'aria-label\': item.locText.renderedHtml, \'aria-invalid\': question.ariaInvalid, \'aria-errormessage\': question.ariaErrormessage, readonly: question.isReadOnlyAttr}, checked: question.koValue, enable: question.getItemEnabled(item), css: question.cssClasses.itemControl"\n            />\n            <div data-bind="css: question.cssClasses.itemDecorator">\n                <div data-bind="css: question.cssClasses.imageContainer">\n                  \x3c!-- ko if: question.cssClasses.checkedItemDecorator --\x3e\n                  <span data-bind="css: question.cssClasses.checkedItemDecorator" aria-hidden="true">\n                    \x3c!-- ko if: question.cssClasses.checkedItemSvgIconId --\x3e\n                    \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: question.cssClasses.checkedItemSvgIcon, iconName: question.cssClasses.checkedItemSvgIconId, size: \'auto\' } } --\x3e\n                    \x3c!-- /ko --\x3e\n                    \x3c!-- /ko --\x3e\n                   </span>\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: ($data.locImageLink.koRenderedHtml() && !$data.contentNotLoaded && question.contentMode === "image") --\x3e\n                  <img data-bind="css: question.cssClasses.image, attr: { src: $data.locImageLink.koRenderedHtml, width: question.renderedImageWidth, height: question.renderedImageHeight, alt: item.locText.koRenderedHtml }, style: { objectFit: question.imageFit }, event: { load: question.onContentLoaded, error: $data.onErrorHandler }"/>\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: ($data.locImageLink.koRenderedHtml() && !$data.contentNotLoaded && question.contentMode === "video") --\x3e\n                  <video controls data-bind="css: question.cssClasses.image, attr: { src: $data.locImageLink.koRenderedHtml, width: question.renderedImageWidth, height: question.renderedImageHeight }, style: { objectFit: question.imageFit }, event: { loadedmetadata: question.onContentLoaded, error: $data.onErrorHandler }"></video>\n                  \x3c!-- /ko --\x3e\n                  \x3c!-- ko if: (!$data.locImageLink.koRenderedHtml() || $data.contentNotLoaded) --\x3e\n                  <div data-bind="css: question.cssClasses.itemNoImage, style: { width: question.renderedImageWidth, height: question.renderedImageHeight, objectFit: question.imageFit}">\n                    \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: question.cssClasses.itemNoImageSvgIcon, iconName: question.cssClasses.itemNoImageSvgIconId, size: 48 } } --\x3e\x3c!-- /ko --\x3e\n                  </div>\n                  \x3c!-- /ko --\x3e\n                  \n                </div>\n                \x3c!-- ko if: question.showLabel --\x3e\n                <span data-bind="css: question.cssClasses.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.cssClasses.tableWrapper">\n    <fieldset>\n      <legend class="sv-hidden"\n        data-bind="text: question.locTitle.renderedHtml"\n      ></legend>\n      <table data-bind="css: question.getTableCss()">\n        \x3c!-- ko if: question.showHeader --\x3e\n        <thead>\n          <tr>\n            \x3c!-- ko if: question.hasRows --\x3e\n            <td data-bind="visible: question.hasRows"></td>\n            \x3c!-- /ko --\x3e\n            \x3c!-- ko foreach: question.koVisibleColumns --\x3e\n            <th data-bind="css: question.cssClasses.headerCell, style: { minWidth: question.columnMinWidth, width: question.columnMinWidth }">\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: row.rowTextClasses, style: {  minWidth: question.rowTitleWidth, width: question.rowTitleWidth }"\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() { 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.cssClasses.cell"\n            >\n            \x3c!-- ko component: { name: "sv-template-renderer", params: { templateData: { name: question.cellComponent, data: { question: question, row: $parent, column: $data } } } } --\x3e\n            \x3c!-- /ko --\x3e\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<script type="text/html" id="survey-matrix-cell">\n  <label data-bind="css: question.getItemClass(row, col