survey-creator-knockout/survey-creator-knockout.min.js

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

/*! For license information please see survey-creator-knockout.min.js.LICENSE.txt */
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("survey-core"),require("survey-creator-core"),require("survey-knockout-ui"),require("knockout")):"function"==typeof define&&define.amd?define("survey-creator-knockout",["survey-core","survey-creator-core","survey-knockout-ui","knockout"],t):"object"==typeof exports?exports["survey-creator-knockout"]=t(require("survey-core"),require("survey-creator-core"),require("survey-knockout-ui"),require("knockout")):e.SurveyCreator=t(e.Survey,e.SurveyCreatorCore,e.SurveyKnockout,e.ko)}(this,(e,t,n,o)=>(()=>{"use strict";var a={6040(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko ifnot: data.iconName--\x3e\n\x3c!-- ko if: data.disabled--\x3e\n<span class="svc-action-button svc-action-button--disabled" data-bind="text:data.text, class: data.classes, attr: { title: data.title}"></span>\n\x3c!-- /ko --\x3e\n\x3c!-- ko ifnot: data.disabled --\x3e\n<span role="button" class="svc-action-button" data-bind="text:data.text, click: onClick, key2click, attr: { title: data.title, \'aria-label\': data.text }, class: data.classes, css:{\'svc-action-button--selected\':data.selected}"></span>\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e\n\n\x3c!-- ko if: data.iconName--\x3e\n\x3c!-- ko if: data.disabled --\x3e\n<sv-svg-icon class="svc-action-button svc-action-button--disabled svc-action-button--icon" data-bind="class: data.classes, attr: { title: data.title}" params="iconName: data.iconName, size: \'auto\'">\n</sv-svg-icon>\n\x3c!-- /ko --\x3e\n\x3c!-- ko ifnot: data.disabled --\x3e\n<sv-svg-icon class="svc-action-button svc-action-button--icon" data-bind="click: onClick, key2click, attr: { title: data.title, \'aria-label\': data.text }, class: data.classes, css:{\'svc-action-button--selected\':data.selected}" params="iconName: data.iconName, size: \'auto\'">\n</sv-svg-icon>\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e'},3268(e,t,n){n.d(t,{A:()=>o});const o='\x3c!-- ko with: $data.questionTypeSelectorModel --\x3e\n<button type="button" data-bind="click: action, key2click, clickBubble: false, attr: { title: title, \'aria-label\': title }" class="svc-element__question-type-selector">\n  <sv-svg-icon class="svc-element__question-type-selector-icon" params="iconName: iconName, size: \'auto\', title: title">\n  </sv-svg-icon>\n  \x3c!-- ko if: $parent.renderPopup --\x3e\n  <sv-popup params="model: popupModel"></sv-popup>\n  \x3c!-- /ko --\x3e\n</button>\n\x3c!-- /ko --\x3e'},435(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div role="button" data-bind="css: \'svc-element__add-new-question \' + buttonClass, click: data.addNewQuestion, key2click, clickBubble: false, event: { mouseover: function(m, e) { data.hoverStopper && data.hoverStopper(e, $element); }}">\n  \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-panel__add-new-question-icon\', iconName: \'icon-add_24x24\', size: \'auto\' } } --\x3e\n  \x3c!-- /ko --\x3e\n  <span class="svc-add-new-item-button__text" data-bind="text: data.addNewQuestionText">\n  </span>\n  \x3c!-- ko if: $data.renderPopup --\x3e\n  \x3c!-- ko component: { name: "svc-add-question-type-selector", params: { questionTypeSelectorModel: data.questionTypeSelectorModel, renderPopup: renderPopup } } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n</div>\n\x3c!-- ko ifnot: $data.renderPopup --\x3e\n\x3c!-- ko component: { name: "svc-add-question-type-selector", params: { questionTypeSelectorModel: data.questionTypeSelectorModel, renderPopup: renderPopup } } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e'},9737(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__adorner">\n  <div class="svc-question__content svc-question__content--in-popup">\n\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n    \x3c!-- /ko --\x3e\n\n    <div class="svc-question__dropdown-choices">\n      \x3c!-- ko foreach: { data: question.visibleChoices, as: \'item\' }  --\x3e\n      <div class="svc-question__dropdown-choice">\n        \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: \'survey-radiogroup-item\', data: item } } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n      \x3c!-- /ko --\x3e\n    </div>\n\n  </div>\n</div>'},6567(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__adorner">\n  <div class="svc-question__content svc-question__content--in-popup">\n\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n    \x3c!-- /ko --\x3e\n\n  </div>\n</div>'},2729(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="event: { pointerdown: function(model, event) { return onPointerDown(event); } }, attr: attributes, css: getRootCss()">\n  <div class="svc-image-item-value-wrapper__ghost" data-bind="style: getNewItemStyle()"></div>\n\n  <div class="svc-image-item-value-wrapper__content">\n    <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input" data-bind="attr: { accept: acceptedTypes }">\n\n    \x3c!-- ko ifnot: isNew || isUploading --\x3e\n    <div class="svc-image-item-value__item">\n      \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n\n    \x3c!-- ko if: isDraggable && canRenderControls--\x3e\n    <sv-svg-icon class="svc-context-button svc-image-item-value-controls__drag-area-indicator" data-bind="event: { pointerdown: function(model, event) { onPointerDown(event); } }" params="iconName: \'icon-drag-24x24\', size: \'auto\'">\n    </sv-svg-icon>\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: canRenderControls--\x3e\n    <div class="svc-context-container svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">\n      \x3c!-- ko if: allowRemove && !isUploading --\x3e\n      <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click" params="iconName: \'icon-choosefile\', size: \'auto\', title: selectFileTitle" role="button"></sv-svg-icon>\n      <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click" params="iconName: \'icon-delete\', size: \'auto\', title: removeFileTitle" role="button"></sv-svg-icon>\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: isNew || isUploading --\x3e\n    <div class="svc-image-item-value__item" data-bind="event: { dragover: dragover, drop: drop, dragleave: dragleave }">\n      <div class="sd-imagepicker__item sd-imagepicker__item--inline">\n        <label class="sd-imagepicker__label">\n          <div data-bind="style: getNewItemStyle()" class="sd-imagepicker__image">\n            \x3c!-- ko if: isUploading --\x3e\n            <div class="svc-image-item-value__loading">\n              \x3c!-- ko component: { name: \'sv-loading-indicator\' } --\x3e\n              \x3c!-- /ko --\x3e\n            </div>\n            \x3c!-- /ko --\x3e\n          </div>\n        </label>\n      </div>\n    </div>\n\n    <div class="svc-image-item-value-controls" data-bind="event: { pointerdown: blockEvent }">\n      \x3c!-- ko if: allowAdd && !isUploading --\x3e\n      <sv-svg-icon class="svc-context-button svc-image-item-value-controls__add" data-bind="click: chooseNewFile, key2click, clickBubble: false" params="iconName: \'icon-add-lg\', size: \'auto\', title: addFileTitle">\n      </sv-svg-icon>\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n  </div>\n</div>'},3709(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-item-value-wrapper" data-bind="event: { pointerdown: function (model, event) { onPointerDown(event); return true; } },attr: attributes, css: { \'svc-item-value--new\': isNew, \'svc-item-value--dragging\': isDragging, \'svc-item-value--ghost\': isDragDropGhost, \'svc-item-value--movedown\':isDragDropMoveDown, \'svc-item-value--moveup\':isDragDropMoveUp }">\n  <div class="svc-item-value__ghost"></div>\n  <div class="svc-item-value-controls">\n    \x3c!-- ko if: isDraggable --\x3e\n    <span class="svc-item-value-controls__button svc-item-value-controls__drag">\n      <sv-svg-icon class="svc-item-value-controls__drag-icon" params="iconName: \'icon-drag-24x24\', size: \'auto\', title: dragTooltip"></sv-svg-icon>\n    </span>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: allowAdd --\x3e\n    <sv-svg-icon class="svc-item-value-controls__button svc-item-value-controls__add" data-bind="click: add, key2click, attr: { \'aria-label\': tooltip }" params="iconName: \'icon-add_16x16\', size: \'auto\', title: tooltip">\n    </sv-svg-icon>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: allowRemove --\x3e\n    <sv-svg-icon class="svc-item-value-controls__button svc-item-value-controls__remove" data-bind="click: remove, key2click, attr: { \'aria-label\': tooltip }, event: { blur: koOnFocusOut }" params="iconName: \'icon-remove_16x16\', size: \'auto\', title: tooltip">\n    </sv-svg-icon>\n    \x3c!-- /ko --\x3e\n  </div>\n\n  <div class="svc-item-value__item" data-bind="click: select">\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n</div>'},4368(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-matrix-cell" tabindex="-1" data-bind="click: selectContext, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">\n  <div class="svc-matrix-cell--selected" data-bind="css: { \'svc-visible\': isSelected }"></div>\n\n  \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n  \x3c!-- /ko --\x3e\n\n  \x3c!-- ko if: $data.isSupportCellEditor --\x3e\n  <div class="svc-matrix-cell__question-controls">\n    <sv-svg-icon class="svc-matrix-cell__question-controls-button svc-context-button" data-bind="click: editQuestion, key2click" params="iconName: \'icon-edit\', size: \'auto\'"></sv-svg-icon>\n  </div>\n  \x3c!-- /ko --\x3e\n\n</div>'},5574(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__adorner" data-bind="css: rootCss(), attr: { \'data-sv-drop-target-survey-element\': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">\n  \x3c!-- ko if: $data.showHiddenTitle --\x3e\n  <div data-bind="css: $data.cssCollapsedHiddenHeader">\n    \x3c!-- ko if: !!$data.element.hasTitle --\x3e\n      \x3c!-- ko component: { name: \'survey-element-title\', params: { element: $data.element } } --\x3e\x3c!-- /ko --\x3e\n      \x3c!-- /ko --\x3e\n      \x3c!-- ko ifnot: !!$data.element.hasTitle --\x3e\n      <div data-bind="css: $data.cssCollapsedHiddenTitle">\n        <span class="svc-fake-title" data-bind="text: element.name"></span>\n      </div>\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n  <div data-bind="click: $data.element.isInteractiveDesignElement ? koSelect : null, key2click: { disableTabStop: true }, clickBubble: false, css: css()">\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>\n    \x3c!-- ko if: allowDragging && $data.element.isInteractiveDesignElement --\x3e\n    <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event) } }">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-question__drag-element\', iconName: \'icon-drag-area-indicator_24x16\', size: \'auto\' } } --\x3e\n      \x3c!-- /ko --\x3e\n      <div class="svc-question__top-actions">\n        \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: topActionContainer, handleClick: false } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: $data.needToRenderContent --\x3e\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: koIsEmptyElement() --\x3e\n    <div class="svc-panel__placeholder_frame-wrapper">\n      <div class="svc-panel__placeholder_frame">\n        <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>\n        \x3c!-- ko if: showAddQuestionButton --\x3e\n        <div class="svc-panel__add-new-question svc-action-button" data-bind="click: addNewQuestion, key2click, clickBubble: false">\n          \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-panel__add-new-question-icon\', iconName: \'icon-add_24x24\', size: \'auto\' } } --\x3e\n          \x3c!-- /ko --\x3e\n          <span class="svc-add-new-item-button__text" data-bind="text: $data.addNewQuestionText">\n          </span>\n        </div>\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: adornerComponent && $data.element.isInteractiveDesignElement --\x3e\n    \x3c!-- ko component: { name: adornerComponent, params: { model: $data } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: !koIsEmptyElement() && showAddQuestionButton --\x3e\n    <div class="svc-panel__add-new-question-container">\n      <div class="svc-panel__question-type-selector-popup"><sv-popup params="model: questionTypeSelectorModel.popupModel"></sv-popup></div>\n      <div class="svc-panel__add-new-question-wrapper">\n        \x3c!-- ko component: { name: \'svc-add-new-question-btn\', params: { item: { data: $data }, buttonClass: \'svc-action-button\', renderPopup: false } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: $data.element.isInteractiveDesignElement --\x3e\n    <div class="svc-question__content-actions" data-bind="event: {focusin: koSelect}">\n      \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: actionContainer, handleClick: false } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n</div>'},1105(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-carry-forward-panel-wrapper">\n  <div class="svc-carry-forward-panel">\n    <span data-bind="text:text"></span>\n    <span class="svc-carry-forward-panel__link">\n      \x3c!-- ko component: { name: "svc-action-button", params: { text: actionText, click: onClick } }--\x3e\n      \x3c!-- /ko --\x3e\n    </span>\n  </div>\n</div>'},2154(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__dropdown-choices--wrapper">\n  <div>\n    <div class="svc-question__dropdown-choices">\n      \x3c!-- ko foreach: { data: getRenderedItems(), as: \'item\' }  --\x3e\n      <div data-bind="css: $parent.getChoiceCss()">\n        \x3c!-- ko component: { name: question.getItemValueWrapperComponentName(item), params: { componentData:  question.getItemValueWrapperComponentData(item), templateData: { name: $parent.itemComponent, data: item } } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- ko if: needToCollapse --\x3e\n    <svc-action-button params="text: getButtonText(), click: switchCollapse, allowBubble: true">\n    </svc-action-button>\n    \x3c!-- /ko --\x3e\n  </div>\n</div>'},9646(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko if: !isUploading && !$data.koIsEmptyImageLink() --\x3e\n<div class="svc-image-question-controls">\n  \x3c!-- ko if: (allowEdit) --\x3e\n  <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input" data-bind="attr: { accept: acceptedTypes }">\n  <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click" params="iconName: \'icon-choosefile\', size: \'auto\'"></sv-svg-icon>\n  \x3c!-- /ko --\x3e\n</div>\n\x3c!-- /ko --\x3e\n\x3c!-- ko if: isUploading && !$data.koIsEmptyImageLink() --\x3e\n<div class="svc-image-question__loading-placeholder">\n  <div class="svc-image-question__loading">\n    \x3c!-- ko component: { name: \'sv-loading-indicator\' } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n</div>\n\x3c!-- /ko --\x3e'},1434(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="<div class=\"svc-rating-question-content\">\n  <div data-bind=\"class: controlsClassNames\">\n    \x3c!-- ko if: allowRemove --\x3e\n    <sv-svg-icon data-bind=\"class: removeClassNames, click: removeItem, key2click, attr: { 'aria-label': removeTooltip }\" params=\"iconName: 'icon-remove_16x16', size: 'auto', title: removeTooltip\">\n    </sv-svg-icon>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: allowAdd --\x3e\n    <sv-svg-icon data-bind=\"class: addClassNames, click: addItem, key2click, attr: { 'aria-label': addTooltip }\" params=\"iconName: 'icon-add_16x16', size: 'auto', title: addTooltip\">\n    </sv-svg-icon>\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- ko component: { name: 'sv-template-renderer', params: { componentData: null, templateData: templateData } } --\x3e\n  \x3c!-- /ko --\x3e\n</div>"},9714(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__adorner" data-bind="css: rootCss(), attr: { \'data-sv-drop-target-survey-element\': element.name || null }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">\n  \x3c!-- ko if: $data.showHiddenTitle --\x3e\n  <div data-bind="css: $data.cssCollapsedHiddenHeader">\n    \x3c!-- ko if: !!$data.element.hasTitle --\x3e\n      \x3c!-- ko component: { name: \'survey-element-title\', params: { element: $data.element } } --\x3e\n      \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko ifnot: !!$data.element.hasTitle --\x3e\n      <div data-bind="css: $data.cssCollapsedHiddenTitle">\n        <span class="svc-fake-title" data-bind="text: element.name"></span>\n      </div>\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n  <div data-bind="click: koSelect, key2click: { disableTabStop: true }, clickBubble: false, css: css()">\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>\n    \x3c!-- ko if: allowDragging --\x3e\n    <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-question__drag-element\', iconName: \'icon-drag-area-indicator_24x16\', size: \'auto\' } } --\x3e\n      \x3c!-- /ko --\x3e\n      <div class="svc-question__top-actions">\n        \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: topActionContainer, handleClick: false } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: $data.needToRenderContent --\x3e\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: koIsEmptyElement() && !$data.placeholderComponentData --\x3e\n    <div class="svc-panel__placeholder_frame-wrapper">\n      <div class="svc-panel__placeholder_frame">\n        <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>\n      </div>\n    </div>\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko if: koIsEmptyElement() && !!$data.placeholderComponentData --\x3e\n    \x3c!-- ko let: { question: placeholderComponentData.data }  --\x3e\n    \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: placeholderComponentData } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: adornerComponent --\x3e\n    \x3c!-- ko component: { name: adornerComponent, params: { model: $data } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n\n    \x3c!-- ko if: isBannerShowing --\x3e\n    \x3c!-- ko component: { name: \'svc-question-banner\', params: $data } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n    <div class="svc-question__content-actions" data-bind="event: {focusin: koSelect}">\n      \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: actionContainer, handleClick: false } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n  </div>\n</div>'},8853(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-scroll__wrapper">\n    <div class="svc-scroll__scroller sv-drag-target-skipped" data-bind="event: { scroll: () => model.onScrollContainer()}">\n        <div class="svc-scroll__container">\n            \x3c!-- ko template: { nodes: $componentTemplateNodes, data: $parent } --\x3e\x3c!-- /ko --\x3e\n        </div>\n    </div>\n    <div class="svc-scroll__scrollbar" data-bind="event: { scroll: () => model.onScrollScrollbar()}">\n        <div class="svc-scroll__scrollbar-sizer">\n        </div>\n    </div>\n</div>'},1524(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko if: $data.model.isVisible --\x3e\n<div class="svc-search">\n    <div class="svc-search__search-icon">\n        \x3c!-- ko component: { name: \'sv-svg-icon\', params: { iconName: \'icon-search\', size: \'auto\' }  } --\x3e\n        \x3c!-- /ko --\x3e\n    </div>\n    <input type="text" class="svc-search__input" data-bind="textInput: model.filterString, attr: { placeholder: model.filterStringPlaceholder, \'aria-label\': model.filterStringPlaceholder }">\n    <div class="svc-search__toolbar">\n        <div class="svc-search__toolbar-counter" data-bind="text: model.matchCounterText"></div>\n        \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: model.searchActionBar } } --\x3e\n        \x3c!-- /ko --\x3e\n    </div>\n</div>\n\x3c!-- /ko --\x3e'},9369(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-surface-placeholder">\n  <div class="svc-surface-placeholder__image" data-bind="css: \'svc-surface-placeholder__image--\' + $data.name"></div>\n  <div class="svc-surface-placeholder__text">\n    <div class="svc-surface-placeholder__title" data-bind="text: $data.placeholderTitleText"></div>\n    <div class="svc-surface-placeholder__description" data-bind="text: $data.placeholderDescriptionText"></div>\n  </div>\n</div>'},4378(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="spg-boolean-switch" role="checkbox" data-bind="click: function() { question.value = !question.value; }, attr: {id: question.inputId, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-errormessage\': question.ariaErrormessage}">\n  <div class="spg-boolean-switch__button" tabindex="0" data-bind="key2click, css: { \'spg-boolean-switch__button--checked\': question.koValue }">\n    <div class="spg-boolean-switch__thumb">\n      <div class="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--left"></div>\n    </div>\n    <div class="spg-boolean-switch__thumb">\n      <div class="spg-boolean-switch__thumb-circle spg-boolean-switch__thumb--right"></div>\n    </div>\n  </div>\n  <div class="spg-boolean-switch__caption">\n    <div class="spg-boolean-switch__title">\n      \x3c!-- ko template: { name: \'survey-string\', data: question.locTitle } --\x3e\x3c!-- /ko --\x3e\n    </div>\n  </div>\n</div>'},3256(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<span class="spg-color-editor__color-swatch" data-bind="style: getSwatchStyle()"></span>\n\x3c!-- ko template: { name: \'survey-string\', data: item.locTitle } --\x3e\x3c!-- /ko --\x3e'},1847(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="css: question.cssClasses.root, event: { keydown: question.koOnKeyDown }">\n  <label data-bind="css: question.getSwatchCss(), style: question.getSwatchStyle()">\n    \x3c!-- ko component: { name: \'sv-svg-icon\', params: { iconName: question.cssClasses.swatchIcon, size: \'auto\' } } --\x3e\x3c!-- /ko --\x3e\n    <input type="color" data-bind="disable: question.isInputReadOnly, css: question.cssClasses.colorInput, value: question.renderedColorValue, event: { change: question.koOnColorInputChange }" tabindex="-1">\n  </label>\n  <input autocomplete="off" data-bind="disable: question.isInputReadOnly, attr: { id: question.inputId, placeholder: question.renderedPlaceholder, \'aria-required\': question.ariaRequired, \'aria-label\': question.ariaLabel, \'aria-invalid\': question.ariaInvalid, \'aria-describedby\': question.ariaDescribedBy }, \n    event: { change: question.koOnChange, blur: question.koOnBlur, keyup: question.koOnKeyUp, beforeinput: question.koOnBeforeInput },\n    value: question.renderedValue,\n    css: question.cssClasses.control">\n  \x3c!-- ko if: question.showDropdownAction --\x3e\n  \x3c!-- ko component: { name: \'sv-action-bar-item\', params: { item: question.koDropdownAction() } } --\x3e\x3c!-- /ko --\x3e\n  <sv-popup params="model: question.dropdownAction.popupModel"></sv-popup>\n  \x3c!-- /ko --\x3e\n</div>'},3904(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko template: { afterRender: question.koQuestionAfterRender } --\x3e\n<div data-bind="css: question.cssClasses.root, event: { keydown: question.koOnKeyDown, dragenter: question.ondragenter, dragover: question.ondragover, drop: question.ondrop, dragleave: question.ondragleave }">\n  <input type="text" data-bind="css: question.cssClasses.control, value: question.koReadOnlyValue, disable: question.isInputReadOnly, attr: { placeholder: question.renderedPlaceholder }, event: { change: question.koOnInputChange, blur: question.koOnInputBlur }">\n  <input type="file" data-bind="css: question.cssClasses.fileInput, disable: question.isInputReadOnly, 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: question.koInputTitle, accept: question.acceptedTypes }, event: { change: question.doFileInputChange }" tabindex="-1">\n  <div data-bind="css: question.cssClasses.buttonsContainer">\n    <button type="button" data-bind="css: question.cssClasses.clearButton, disable: question.getIsClearButtonDisabled(), click: question.doclean, key2click">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { iconName: question.cssClasses.clearButtonIcon, size: \'auto\', title: question.clearButtonCaption } } --\x3e\x3c!-- /ko --\x3e\n    </button>\n    <label role="button" data-bind="click: (_, event) => question.chooseFiles(event), css: question.getChooseButtonCss(), attr: { for: question.inputId, \'aria-label\': question.chooseButtonCaption }, key2click" tabindex="0">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { title: question.chooseButtonCaption, iconName: question.cssClasses.chooseButtonIcon, size: \'auto\' } } --\x3e\x3c!-- /ko --\x3e\n    </label>\n  </div>\n</div>\n\x3c!-- /ko --\x3e'},5927(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="<div data-bind=\"css: question.cssClasses.root, event: { keydown: question.koOnKeyDown }\">\n  <input autocomplete=\"off\" data-bind=\"disable: question.isInputReadOnly, attr: { id: question.inputId, placeholder: question.renderedPlaceholder, 'aria-required': question.ariaRequired, 'aria-label': question.ariaLabel, 'aria-invalid': question.ariaInvalid, 'aria-describedby': question.ariaDescribedBy }, \n    event: { change: question.koOnChange, keydown: question.koOnInputKeyDown, keyup: question.koOnKeyUp, blur: question.koOnBlur, focus: question.koOnFocus, beforeinput: question.koOnBeforeInput },\n    value: question.renderedValue,\n    css: question.cssClasses.control\">\n  <span data-bind=\"css: question.cssClasses.buttonsContainer\">\n    <button data-bind=\"css: question.cssClasses.arrowButton, disable: question.isInputReadOnly, event: { mousedown: question.koOnDownButtonMouseDown, mouseup: question.koOnButtonMouseUp, mouseleave: question.koOnButtonMouseLeave, blur: question.koOnBlur, focus: question.koOnFocus }\" tabindex=\"-1\">\n      \x3c!-- ko component: { name: 'sv-svg-icon', params: { iconName: question.cssClasses.decreaseButtonIcon, size: 'auto' } } --\x3e\x3c!-- /ko --\x3e\n    </button>\n    <button data-bind=\"css: question.cssClasses.arrowButton, disable: question.isInputReadOnly, event: { mousedown:  question.koOnUpButtonMouseDown, mouseup: question.koOnButtonMouseUp, mouseleave: question.koOnButtonMouseLeave, blur: question.koOnBlur, focus: question.koOnFocus }\" tabindex=\"-1\">\n      \x3c!-- ko component: { name: 'sv-svg-icon', params: { iconName: question.cssClasses.increaseButtonIcon, size: 'auto' } } --\x3e\x3c!-- /ko --\x3e\n    </button>\n  </span>\n</div>"},5465(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="css: question.getRootClass()">\n  \x3c!-- ko template: { name: "survey-question-" + question.wrappedQuestionTemplate, data: question, as: \'question\', afterRender: question.koQuestionAfterRender } --\x3e\n  \x3c!-- /ko --\x3e\n  <button type="button" data-bind="click: function() { question.resetValueAdorner.resetValue() }, css: question.cssClasses.resetButton, disable: question.resetValueAdorner.isDisabled, attr: { title: question.resetValueAdorner.caption }">\n    \x3c!-- ko component: { name: \'sv-svg-icon\', params: {  iconName: question.cssClasses.resetButtonIcon, size: \'auto\' } } --\x3e\x3c!-- /ko --\x3e\n  </button>\n</div>'},184(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-logo-image" data-bind="click: function(m, e) { return true; }, clickBubble: false">\n  <input type="file" aria-hidden="true" tabindex="-1" class="svc-choose-file-input" data-bind="attr: { accept: acceptedTypes }">\n  \x3c!-- ko ifnot: survey.locLogo.koRenderedHtml --\x3e\n  \x3c!-- ko if: allowEdit && !isUploading --\x3e\n  <div class="svc-logo-image-placeholder" data-bind="click: chooseFile, key2click">\n    <svg>\n      <use xlink:href="#icon-image-48x48"></use>\n    </svg>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: !isUploading && survey.locLogo.koRenderedHtml --\x3e\n  <div data-bind="css: containerCss">\n    <div class="svc-context-container svc-logo-image-controls">\n      <sv-svg-icon class="svc-context-button" data-bind="click: chooseFile, key2click" params="iconName: \'icon-choosefile\', size: \'auto\'"></sv-svg-icon>\n      <sv-svg-icon class="svc-context-button svc-context-button--danger" data-bind="click: remove, key2click" params="iconName: \'icon-clear\', size: \'auto\'"></sv-svg-icon>\n    </div>\n    \x3c!-- ko component: { name: \'sv-logo-image\', params: survey } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: isUploading --\x3e\n  <div class="svc-logo-image__loading">\n    \x3c!-- ko component: { name: \'sv-loading-indicator\' } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n</div>'},8772(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div role="button" class="svc-page-navigator-item-content" data-bind="click: action, key2click, css: { \'svc-page-navigator-item--selected\': active, \'svc-page-navigator-item--disabled\': disabled }">\n  <div class="svc-page-navigator-item__dot" data-bind="attr: { title: text }">\n    <div class="svc-page-navigator-item__dot-content"></div>\n  </div>\n\n  <div class="svc-page-navigator-item__banner">\n    <span class="svc-page-navigator-item__text" data-bind="text: text"></span>\n    <span class="svc-page-navigator-item__dot"><span class="svc-page-navigator-item__dot-content"></span></span>\n  </div>\n</div>'},5858(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko if: visible --\x3e\n<div class="svc-page-navigator">\n    <div role="button" class="svc-page-navigator__selector svc-page-navigator__button" data-bind="click: togglePageSelector, key2click, attr: { title: pageSelectorCaption }, css: { \'svc-page-navigator__button--pressed\': isPopupOpened }">\n        <sv-svg-icon class="svc-page-navigator__button-icon" params="iconName: icon, size: \'auto\'"></sv-svg-icon>\n        <sv-popup params="model: popupModel, cssClass: \'svc-page-navigator__popup\'"></sv-popup>\n    </div>\n    <div>\n        \x3c!-- ko foreach: visibleItems --\x3e\n        <svc-page-navigator-item params="item: $data"></svc-page-navigator-item>\n        \x3c!-- /ko --\x3e\n    </div>\n</div>\n\x3c!-- /ko --\x3e'},6294(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko if: page --\x3e\n<div class="svc-page__content" data-bind="click: select, key2click, clickBubble: false, css: css, attr: { id: page.id, \'data-sv-drop-target-survey-page\': dropTargetName }, event: { dblclick: (d, e) => dblclick(e), mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">\n  <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>\n  <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>\n  \x3c!-- ko if: allowDragging && !isGhost --\x3e\n  <div class="svc-question__drag-area" data-bind="event: { pointerdown: (model, event)=>{ onPointerDown(event); return true; } }">\n    \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-question__drag-element\', iconName: \'icon-drag-area-indicator_24x16\', size: \'auto\' } } --\x3e\n    \x3c!-- /ko --\x3e\n    <div class="svc-page__content-actions">\n      \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: actionContainer } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: !allowDragging || isGhost --\x3e\n  <div class="svc-page__content-actions">\n    \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: actionContainer } } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko template: { name: \'survey-page\', data: page } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: $data.showPlaceholder --\x3e\n  <div class="svc-page__placeholder_frame">\n    <div class="svc-panel__placeholder_frame">\n      <div class="svc-panel__placeholder" data-bind="text: $data.placeholderText"></div>\n    </div>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: footerActionsBar } } --\x3e\n  \x3c!-- /ko --\x3e\n</div>\n\x3c!-- /ko --\x3e'},6839(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="\x3c!-- ko let: { question: survey.getAllQuestions()[0] } --\x3e\n  \x3c!-- ko component: { name: survey.getElementWrapperComponentName(question), params: { componentData:  survey.getElementWrapperComponentData(question), templateData: { name: question.koElementType, data: question } } } --\x3e\n  \x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e"},1619(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="\x3c!-- ko if: (!!embeddedSurvey && !!embeddedSurvey.currentPage) --\x3e\n<div data-bind=\"attr: { id: currentPageId }, template: { name: 'survey-page', data: embeddedSurvey.currentPage }\">\n</div>\n\x3c!-- /ko --\x3e"},9562(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<svc-action-button params="text: linkValueText, click: koClickLink, selected: isSelected, disabled: !isClickable, classes: linkSetButtonCssClasses, title: tooltip, iconName:iconName">\n</svc-action-button>\n\x3c!-- ko if: !isReadOnly && showClear --\x3e\n<svc-action-button params="text: clearCaption, click: koClearLink, selected: isSelected, disabled: false, classes: linkClearButtonCssClasses, iconName:iconName">\n</svc-action-button>\n\x3c!-- /ko --\x3e'},9518(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-question__adorner" data-bind="css: rootCss(), attr: { \'data-sv-drop-target-survey-element\': element.name }, event: { mouseover: function(m, e) { hover(e, $element); }, mouseleave: function(m, e) { hover(e, $element); } }">\n  \x3c!-- ko if: question.isInteractiveDesignElement --\x3e\n  <div class="svc-question__content" data-bind="click: koSelect, key2click, clickBubble: false, css: css()">\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--left"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--right"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--top"></div>\n    <div class="svc-question__drop-indicator svc-question__drop-indicator--bottom"></div>\n    \x3c!-- ko if: allowDragging --\x3e\n    <div class="svc-question__drag-area" data-bind="visible:allowDragging, event: {pointerdown: (model, event)=>{onPointerDown(event)}}">\n      \x3c!-- ko component: { name: \'sv-svg-icon\', params: { css: \'svc-question__drag-element\', iconName: \'icon-drag-area-indicator_24x16\', size: \'auto\' } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- /ko --\x3e\n    <div class="svc-widget__content">\n      \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    \x3c!-- ko if: isEmptyElement --\x3e\n    <div class="svc-panel__placeholder_frame">\n      <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>\n    </div>\n    \x3c!-- /ko --\x3e\n\n    <div class="svc-question__content-actions">\n      \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: actionContainer } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko ifnot: question.isInteractiveDesignElement --\x3e\n  \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: isEmptyElement --\x3e\n  <div class="svc-panel__placeholder_frame">\n    <div class="svc-panel__placeholder" data-bind="text: placeholderText"></div>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- /ko --\x3e\n</div>'},1431(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko with: model --\x3e\n<tr data-bind="click: toggle, key2click">\n    <td class="svd-dark-border-color" data-bind="style: { paddingLeft: textMargin }">\n        \x3c!-- ko if: isNode --\x3e\n        <span class="svd-test-results__marker" data-bind="css: { \'svd-test-results__marker--expanded\': !collapsed },\n                         style: { left: markerMargin }">\n            <sv-svg-icon params="iconName: \'icon-expand_16x16\', size: 16"></sv-svg-icon>\n        </span>\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko if: $data.question --\x3e\n        \x3c!-- ko template: { name: \'survey-string\', data: question.locTitle } --\x3e\x3c!-- /ko --\x3e\n        \x3c!-- /ko --\x3e\n        \x3c!-- ko ifnot: $data.question --\x3e\n        <span data-bind="text: title"></span>\n        \x3c!-- /ko --\x3e\n    </td>\n    <td data-bind="css: (isNode ? \'svd-test-results__node-value\' : \'svd-dark-border-color\'), text: getString(displayValue)">\n    </td>\n</tr>\n\x3c!-- ko if: isNode && !collapsed --\x3e\n\x3c!-- ko foreach: data --\x3e\n\x3c!-- ko component: { name: \'survey-results-table-row\', params: { model: $data } } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e'},4671(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svd-test-results">\n    <div class="svd-test-results__content">\n        <div class="svd-test-results__header">\n            <div class="svd-test-results__header-text" data-bind="text: surveyResultsText"></div>\n            <div class="svd-test-results__header-types">\n                <svc-action-button params="text: surveyResultsTableText, click: selectTableClick, disabled: false, selected: isTableSelected">\n                </svc-action-button>\n                <svc-action-button params="text: surveyResultsJsonText, click: selectJsonClick, disabled: false, selected: isJsonSelected">\n                </svc-action-button>\n            </div>\n        </div>\n        <div class="svd-test-results__text svd-light-bg-color" data-bind="visible: resultViewType === \'text\'">\n            <div data-bind="text: resultText"></div>\n        </div>\n        <div class="svd-test-results__table svd-light-bg-color" data-bind="visible: resultViewType === \'table\'">\n            <table>\n                <thead>\n                    <tr class="svd-light-background-color">\n                        <th class="svd-dark-border-color" data-bind="text: resultsTitle"></th>\n                        <th class="svd-dark-border-color" data-bind="text: resultsDisplayValue"></th>\n                    </tr>\n                </thead>\n                <tbody>\n                    \x3c!-- ko foreach: resultData --\x3e\n                    \x3c!-- ko component: { name: \'survey-results-table-row\', params: { model: $data } } --\x3e\n                    \x3c!-- /ko --\x3e\n                    \x3c!-- /ko --\x3e\n                </tbody>\n            </table>\n        </div>\n    </div>\n</div>'},8265(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="css: cssClasses">\n  <div class="svc-row__drop-indicator svc-row__drop-indicator--top"></div>\n  <div class="svc-row__drop-indicator svc-row__drop-indicator--bottom"></div>\n  \x3c!-- ko component: { name: \'sv-template-renderer\', params: { componentData: null, templateData: templateData } } --\x3e\n  \x3c!-- /ko --\x3e\n</div>\n'},8426(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko with: model --\x3e\n\x3c!-- ko if: isVisible --\x3e\n<div class="svc-object-selector__content" data-bind="component: { name: \'sv-list\', params: { model: list } }"></div>\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e'},7385(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-property-grid-placeholder">\n  <div class="svc-property-grid-placeholder__header">\n    <span class="svc-property-grid-placeholder__title" data-bind="text: title"></span>\n    <span class="svc-property-grid-placeholder__description" data-bind="text: description"></span>\n  </div>\n  <div class="svc-property-grid-placeholder__content">\n    <div class="svc-property-grid-placeholder__gap"></div>\n    <div class="svc-property-grid-placeholder__image"></div>\n  </div>\n</div>'},9661(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="<div data-bind=\"css: model.rootCss \">\n    \x3c!-- ko component: { name: 'svc-search', params: { model: model.searchManager } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- ko component: { name: 'svc-scroll' } --\x3e\n    \x3c!-- ko template: { name: 'survey-content', data: model.survey  } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n</div>"},2646(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-side-bar__container-header">\n  <div class="svc-side-bar__container-actions">\n    \x3c!-- ko component: { name: \'sv-action-bar\', params: { model: model.toolbar } } --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n  \x3c!-- ko if: !!model.title --\x3e\n  <div class="svc-side-bar__container-title" data-bind="text: model.title">\n  </div>\n  \x3c!-- /ko --\x3e\n</div>'},2690(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-side-bar__container-header svc-sidebar__header-container">\n  \x3c!-- ko if: !model.subTitle --\x3e\n  <div class="svc-side-bar__container-title" data-bind="text: model.title"></div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko if: model.subTitle --\x3e\n  <div class="svc-sidebar__header-caption">\n    <span class="svc-sidebar__header-title" data-bind="text: model.title"></span>\n    <span class="svc-sidebar__header-subtitle" data-bind="text: model.subTitle"></span>\n  </div>\n  \x3c!-- /ko --\x3e\n</div>'},9892(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="\x3c!-- ko if: item.visible --\x3e\n\x3c!-- ko component: { name: item.componentName, params: { model: item.componentData } } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e"},6701(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-sidebar__header svc-sidebar__header--tabbed">\n  <div class="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">\n    <div class="svc-sidebar__header-content">\n      <div data-bind="css: $data.model.buttonClassName, \n      click: function(s, args) { $data.model.action($data); }, key2click: { processEsc: false }">\n        <div class="svc-sidebar__header-caption">\n          <span class="svc-sidebar__header-title" data-bind="text: model.title"></span>\n          <span class="svc-sidebar__header-subtitle" data-bind="text: model.tooltip"></span>\n        </div>\n      </div>\n      <sv-popup params="{ model: model.popupModel }"></sv-popup>\n    </div>\n  </div>\n</div>'},3034(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='\x3c!-- ko using: model --\x3e\n<div data-bind="css: rootCss, visible: renderRoot">\n  <div class="svc-side-bar__shadow" data-bind="click: collapseSidebar, visible: renderContainer"></div>\n  <div class="svc-flex-row svc-side-bar__wrapper">\n    <div class="svc-side-bar__container-wrapper" data-bind="visible: renderContainer">\n      <div class="svc-side-bar__container">\n        \x3c!-- ko component: { name: header.component, params: { model: header.componentModel } } --\x3e\n        \x3c!-- /ko --\x3e\n        <div class="svc-side-bar__container-content">\n          \x3c!-- ko foreach: pages --\x3e\n          \x3c!-- ko component: { name: \'svc-side-bar-page\', params: { item: $data } } --\x3e\n          \x3c!-- /ko --\x3e\n          \x3c!-- /ko--\x3e\n        </div>\n      </div>\n    </div>\n    \x3c!-- ko if: sideAreaComponentName --\x3e\n    \x3c!-- ko component: { name: sideAreaComponentName, params: { model: sideAreaComponentData } } --\x3e\n    \x3c!-- /ko --\x3e\n    \x3c!-- /ko --\x3e\n  </div>\n</div>\n\x3c!-- /ko --\x3e'},6451(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div class="svc-menu-action">\n  <div data-bind="click: function(s, args) { model.action(model); }, key2click: { processEsc: false }, \n    css: model.buttonClassName,  \n    attr: { title: model.tooltip }">\n    <div class="svc-menu-action__icon">\n      <div class="svc-menu-action__icon-container">\n        \x3c!-- ko component: { name: \'sv-svg-icon\', params: { iconName: model.iconName, size: \'auto\' } } --\x3e\n        \x3c!-- /ko --\x3e\n      </div>\n    </div>\n  </div>\n</div>'},8410(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="css: model.sideBarClassName">\n  <div class="svc-sidebar-tabs__top-container">\n    <div class="svc-sidebar-tabs__collapse-button">\n      \x3c!-- ko component: { name: \'svc-tab-button\', params: { model: model.expandCollapseAction } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n    <div class="svc-sidebar-tabs__separator">\n      <div></div>\n    </div>\n    <div class="svc-sidebar-tabs__items">\n      \x3c!-- ko component: { name: \'svc-tabs\', params: { model: model.topToolbar } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n  <div class="svc-sidebar-tabs__bottom-container">\n    <div class="svc-sidebar-tabs__items">\n      \x3c!-- ko component: { name: \'svc-tabs\', params: { model: model.bottomToolbar } } --\x3e\n      \x3c!-- /ko --\x3e\n    </div>\n  </div>\n</div>'},4725(e,t,n){n.r(t),n.d(t,{default:()=>o});const o="\x3c!-- ko foreach: model.actions --\x3e\n\x3c!-- ko component: { name: 'svc-tab-button', params: { model: $data } } --\x3e\n\x3c!-- /ko --\x3e\n\x3c!-- /ko --\x3e"},6555(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<div data-bind="class: getRootCss(), event: { keydown: tryToZoom, mouseover: (device === \'desktop\' ? null : activateZoom), mouseout: (device === \'desktop\' ? null : deactivateZoom) }">\n  \x3c!-- ko if: hasFrame --\x3e\n  <div class="svd-simulator-wrapper" id="svd-simulator-wrapper" data-bind="style: { width: simulatorFrame.frameWidth + \'px\', height: simulatorFrame.frameHeight + \'px\' }">\n    <div class="svd-simulator" data-bind="style: { width: simulatorFrame.deviceWidth + \'px\', height: simulatorFrame.deviceHeight + \'px\', transform: \'scale(\' + simulatorFrame.scale + \') translate(-50%, -50%)\' }">\n      <survey-widget class="svd-simulator-content" params="model: survey"></survey-widget>\n    </div>\n  </div>\n  \x3c!-- /ko --\x3e\n  \x3c!-- ko ifnot: hasFrame --\x3e\n  <survey-widget class="svd-simulator-content" params="model: survey"></survey-widget>\n  \x3c!-- /ko --\x3e\n</div>'},1196(e,t,n){n.r(t),n.d(t,{default:()=>o});const o='<span data-bind="class: className">\n    <span class="svc-string-editor__content">\n        <div class="svc-string-editor__border svc-string-editor__border--hover"></div>\n        <div class="svc-string-editor__border svc-string-editor__border--focus"></div>\n        <span class="svc-string-editor__input">\n            \x3c!-- ko ifnot: koHasHtml --\x3e\n            \x3c!-- ko template: {afterRender: afterRender} --\x3e\n            <span role="textbox" class="sv-string-editor" spellcheck="false" data-bind="text: koRenderedHtml, event: { focus: onFocus, paste: onPaste, blur: onBlur, input: onInput, keydown: onKeyDown, keyup: onKeyUp, mouseup: onMouseUp, compositionstart: onCompositionStart, compositionend: onCompositionEnd }, click: edit, attr: { \'aria-placeholder\': placeholder, \'aria-label\': this.placeholder || \'content editable\', contenteditable: contentEditable }"></span>\n            \x3c!-- /ko --\x3e\n            \x3c!-- /ko --\x3e\n            \x3c!-- ko if: koHasHtml --\x3e\n            <span role="