@micromag/screen-survey 0.3.683 → 0.3.694

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-resultText{margin-top:10px}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-confirm{opacity:1}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;margin:0;overflow:hidden;padding:10px 40px;position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.micromag-screen-survey-container .micromag-screen-survey-confirm{bottom:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-confirm.micromag-screen-survey-disabled .micromag-screen-survey-icon{opacity:.5}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-textInput{padding:10px;pointer-events:none;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-answers,.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-question{opacity:.5}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}.micromag-screen-survey-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-survey-reset:hover{border:0;opacity:.8}.micromag-screen-survey-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}
+.micromag-screen-survey-container .micromag-screen-survey-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-survey-container{height:100%;overflow:hidden;position:relative;width:100%}.micromag-screen-survey-disabled.micromag-screen-survey-container{overflow:hidden;pointer-events:none}.micromag-screen-survey-hidden.micromag-screen-survey-container{display:none;visibility:hidden}.micromag-screen-survey-placeholder.micromag-screen-survey-container .micromag-screen-survey-content{padding:6px;position:relative}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-survey-container .micromag-screen-survey-background{z-index:0}.micromag-screen-survey-container .micromag-screen-survey-content{z-index:1}.micromag-screen-survey-container .micromag-screen-survey-question{margin-bottom:20px}.micromag-screen-survey-container .micromag-screen-survey-answers,.micromag-screen-survey-container .micromag-screen-survey-items{position:relative}.micromag-screen-survey-container .micromag-screen-survey-header{left:0;position:absolute;top:0;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-header.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-footer{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-footer a{padding:0}.micromag-screen-survey-container .micromag-screen-survey-footer.micromag-screen-survey-disabled{opacity:0;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-item{padding:5px 0}.micromag-screen-survey-container .micromag-screen-survey-item:first-child .micromag-screen-survey-placeholderAnswer{width:80%}.micromag-screen-survey-container .micromag-screen-survey-item:last-child .micromag-screen-survey-placeholderAnswer{width:90%}.micromag-screen-survey-container .micromag-screen-survey-itemContent{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.micromag-screen-survey-container .micromag-screen-survey-resultBar{background-color:hsla(0,0%,100%,.2);height:100%;left:0;position:absolute;top:0}.micromag-screen-survey-container .micromag-screen-survey-resultLabel{color:#fff;padding:0 8px;position:absolute;right:0;text-align:right;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:4em;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-resultText{margin-top:10px}.micromag-screen-survey-container .micromag-screen-survey-itemInner{width:100%}.micromag-screen-survey-container .micromag-screen-survey-button{display:-ms-flexbox;display:flex;overflow:hidden;padding:10px;position:relative;-webkit-transition:opacity .5s ease-out;transition:opacity .5s ease-out;width:100%}.micromag-screen-survey-container .micromag-screen-survey-button:disabled{opacity:1;pointer-events:none}.micromag-screen-survey-container .micromag-screen-survey-itemLabel{width:100%}.micromag-screen-survey-container .micromag-screen-survey-itemLabel,.micromag-screen-survey-container .micromag-screen-survey-itemText{display:inline-block;-webkit-transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,-webkit-transform .3s ease-out}.micromag-screen-survey-container .micromag-screen-survey-itemText{position:relative;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer,.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{margin:0 auto;width:100%}.micromag-screen-survey-container .micromag-screen-survey-emptyQuestion{height:75px}.micromag-screen-survey-container .micromag-screen-survey-emptyAnswer{height:50px}.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-button,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-result,.micromag-screen-survey-container .micromag-screen-survey-userAnswer .micromag-screen-survey-resultLabel{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input{margin:5px 0;position:relative}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-disabled .micromag-screen-survey-textInput{background:transparent}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected{opacity:1!important}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-selected .micromag-screen-survey-submit{opacity:0}.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-filled .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-filled .micromag-screen-survey-submit,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-confirm,.micromag-screen-survey-container .micromag-screen-survey-input.micromag-screen-survey-focused .micromag-screen-survey-submit{opacity:1}.micromag-screen-survey-container .micromag-screen-survey-textInput{color:#fff;display:-ms-flexbox;display:flex;margin:0;overflow:hidden;padding:10px 35px;position:relative;text-align:center;-webkit-transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out;transition:margin-left .3s ease-out,transform .3s ease-out,opacity .5s ease-out,-webkit-transform .3s ease-out;width:100%;z-index:0}.micromag-screen-survey-container .micromag-screen-survey-textInput.micromag-screen-survey-padded{padding:10px 40px}.micromag-screen-survey-container .micromag-screen-survey-confirm{bottom:0;opacity:0;padding:10px;position:absolute;right:0;top:0;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container .micromag-screen-survey-confirm.micromag-screen-survey-disabled .micromag-screen-survey-icon{opacity:.5}.micromag-screen-survey-container .micromag-screen-survey-confirm.micromag-screen-survey-isClear .micromag-screen-survey-icon{height:10px;margin:0 auto;width:10px}.micromag-screen-survey-container .micromag-screen-survey-submit{margin-top:10px;opacity:0;padding:10px;position:absolute;top:100%;-webkit-transition:opacity .15s ease-out;transition:opacity .15s ease-out;z-index:1}.micromag-screen-survey-container.micromag-screen-survey-answered{line-height:1}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContainer{padding-left:15px;padding-right:50px}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultContent{opacity:1;width:100%}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button{background-color:transparent;border-color:transparent}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-button,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-result,.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-resultLabel{opacity:.6}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-itemLabel{margin-left:0;margin-right:0;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered .micromag-screen-survey-textInput{padding:10px;pointer-events:none;text-align:left}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-itemText{-webkit-transform:translate(-2em);-ms-transform:translate(-2em);transform:translate(-2em)}.micromag-screen-survey-container.micromag-screen-survey-answered.micromag-screen-survey-withPercentage .micromag-screen-survey-textInput{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0)}.micromag-screen-survey-container.micromag-screen-survey-withPercentage .micromag-screen-survey-itemLabel{margin-left:2em;margin-right:2em}.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-answers,.micromag-screen-survey-container.micromag-screen-survey-inputFocused .micromag-screen-survey-question{opacity:.5}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-layout{padding:10px}.micromag-screen-survey-container.micromag-screen-survey-isPlaceholder .micromag-screen-survey-item{padding:1px 0}.micromag-screen-survey-reset{background-color:transparent;border:0;padding:10px;position:absolute;right:0;top:0;-webkit-transform-origin:center;-ms-transform-origin:center;transform-origin:center;-webkit-transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,-webkit-transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out;transition:opacity .15s ease-out,transform .15s ease-out,-webkit-transform .15s ease-out;z-index:1000}.micromag-screen-survey-reset:hover{border:0;opacity:.8}.micromag-screen-survey-reset:hover:active{-webkit-transform:rotate(30deg);-ms-transform:rotate(30deg);transform:rotate(30deg)}

package/es/index.js

@@ -6,11 +6,12 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { faRedo } from '@fortawesome/free-solid-svg-icons/faRedo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classNames from 'classnames';
+import DOMPurify from 'dompurify';
 import isNumber from 'lodash/isNumber';
 import PropTypes from 'prop-types';
 import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { ScreenElement, Transitions, ArrowIcon } from '@micromag/core/components';
+import { ScreenElement, Transitions, CloseIcon, ArrowIcon } from '@micromag/core/components';
 import { useScreenSize, useScreenRenderContext, useViewerContext, useViewerWebView, usePlaybackContext, usePlaybackMediaRef } from '@micromag/core/contexts';
 import { useTrackScreenEvent, useDimensionObserver } from '@micromag/core/hooks';
 import { isTextFilled, getLargestRemainderRound, isHeaderFilled, isFooterFilled, getFooterProps, getStyleFromColor } from '@micromag/core/utils';
@@ -26,7 +27,7 @@ import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import TextInput from '@micromag/element-text-input';
 
-var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","focused":"micromag-screen-survey-focused","icon":"micromag-screen-survey-icon","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
+var styles = {"container":"micromag-screen-survey-container","background":"micromag-screen-survey-background","disabled":"micromag-screen-survey-disabled","content":"micromag-screen-survey-content","emptyQuestion":"micromag-screen-survey-emptyQuestion","emptyAnswer":"micromag-screen-survey-emptyAnswer","question":"micromag-screen-survey-question","answers":"micromag-screen-survey-answers","items":"micromag-screen-survey-items","header":"micromag-screen-survey-header","footer":"micromag-screen-survey-footer","item":"micromag-screen-survey-item","placeholderAnswer":"micromag-screen-survey-placeholderAnswer","itemContent":"micromag-screen-survey-itemContent","resultBar":"micromag-screen-survey-resultBar","resultLabel":"micromag-screen-survey-resultLabel","resultText":"micromag-screen-survey-resultText","itemInner":"micromag-screen-survey-itemInner","button":"micromag-screen-survey-button","itemLabel":"micromag-screen-survey-itemLabel","itemText":"micromag-screen-survey-itemText","userAnswer":"micromag-screen-survey-userAnswer","input":"micromag-screen-survey-input","textInput":"micromag-screen-survey-textInput","confirm":"micromag-screen-survey-confirm","selected":"micromag-screen-survey-selected","submit":"micromag-screen-survey-submit","focused":"micromag-screen-survey-focused","filled":"micromag-screen-survey-filled","padded":"micromag-screen-survey-padded","icon":"micromag-screen-survey-icon","isClear":"micromag-screen-survey-isClear","answered":"micromag-screen-survey-answered","withPercentage":"micromag-screen-survey-withPercentage","inputFocused":"micromag-screen-survey-inputFocused","isPlaceholder":"micromag-screen-survey-isPlaceholder","layout":"micromag-screen-survey-layout","reset":"micromag-screen-survey-reset"};
 
 var propTypes = {
   id: PropTypes.string,
@@ -170,7 +171,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
     _ref5$textStyle = _ref5.textStyle,
     customAnswerTextStyle = _ref5$textStyle === void 0 ? null : _ref5$textStyle,
     _ref5$boxStyle = _ref5.boxStyle,
-    customAnswerBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle;
+    customAnswerBoxStyle = _ref5$boxStyle === void 0 ? null : _ref5$boxStyle,
+    _ref5$submit = _ref5.submit,
+    customAnswerSubmit = _ref5$submit === void 0 ? null : _ref5$submit;
   var _ref6 = placeholder || {},
     _ref6$body = _ref6.body,
     placeholderBody = _ref6$body === void 0 ? null : _ref6$body,
@@ -229,7 +232,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
   var onAnswerClick = useCallback(function (answerIndex) {
     if (userAnswerIndex === null) {
       setUserAnswerIndex(answerIndex);
-      var answer = answers[answerIndex];
+      var answer = answers !== null ? answers[answerIndex] : null;
       submitQuiz({
         choice: answer.label.body || answerIndex,
         value: 1
@@ -269,11 +272,12 @@ var SurveyScreen = function SurveyScreen(_ref) {
     setInputFocused(false);
   }, [setInputFocused]);
   var onTextInputChange = useCallback(function (e) {
-    var _ref11 = e.target || {},
-      _ref11$value = _ref11.value,
-      value = _ref11$value === void 0 ? null : _ref11$value;
+    var value = DOMPurify.sanitize(e.currentTarget.value || '');
     setTextInput(value !== '' ? value : null);
   }, [setTextInput]);
+  var onTextInputClear = useCallback(function () {
+    setTextInput('');
+  }, [setTextInput]);
   var onSubmitSuggestion = useCallback(function (e) {
     e.preventDefault();
     e.stopPropagation();
@@ -284,7 +288,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
       });
       setUserAnswerIndex('input');
       setInputFocused(false);
-      trackScreenEvent('click_answer', "Answer: ".concat(textInput), {
+      trackScreenEvent('click_answer', "Answer input: ".concat(textInput), {
         textInput: textInput,
         answerIndex: null,
         answerType: 'custom'
@@ -312,8 +316,8 @@ var SurveyScreen = function SurveyScreen(_ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     scrolledBottom = _useState8[0],
     setScrolledBottom = _useState8[1];
-  var onScrolledBottom = useCallback(function (_ref12) {
-    var initial = _ref12.initial;
+  var onScrolledBottom = useCallback(function (_ref11) {
+    var initial = _ref11.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -326,9 +330,9 @@ var SurveyScreen = function SurveyScreen(_ref) {
     _useState10 = _slicedToArray(_useState9, 2),
     hasScroll = _useState10[0],
     setHasScroll = _useState10[1];
-  var onScrollHeightChange = useCallback(function (_ref13) {
-    var _ref13$canScroll = _ref13.canScroll,
-      canScroll = _ref13$canScroll === void 0 ? false : _ref13$canScroll;
+  var onScrollHeightChange = useCallback(function (_ref12) {
+    var _ref12$canScroll = _ref12.canScroll,
+      canScroll = _ref12$canScroll === void 0 ? false : _ref12$canScroll;
     setHasScroll(canScroll);
   }, [setHasScroll]);
 
@@ -360,19 +364,19 @@ var SurveyScreen = function SurveyScreen(_ref) {
   var finalTransitionDuration = useMemo(function () {
     return showInstantAnswer ? 0 : "".concat(resultTransitionDuration, "ms");
   }, [showInstantAnswer, resultTransitionDuration]);
-  var _ref14 = resultsStyle || {},
-    _ref14$barColor = _ref14.barColor,
-    resultsBarColor = _ref14$barColor === void 0 ? null : _ref14$barColor,
-    _ref14$textColor = _ref14.textColor,
-    resultsTextColor = _ref14$textColor === void 0 ? null : _ref14$textColor,
-    _ref14$percentageText = _ref14.percentageTextStyle,
-    resultsPercentageTextStyle = _ref14$percentageText === void 0 ? null : _ref14$percentageText;
+  var _ref13 = resultsStyle || {},
+    _ref13$barColor = _ref13.barColor,
+    resultsBarColor = _ref13$barColor === void 0 ? null : _ref13$barColor,
+    _ref13$textColor = _ref13.textColor,
+    resultsTextColor = _ref13$textColor === void 0 ? null : _ref13$textColor,
+    _ref13$percentageText = _ref13.percentageTextStyle,
+    resultsPercentageTextStyle = _ref13$percentageText === void 0 ? null : _ref13$percentageText;
   var finalResult = useMemo(function () {
     var defaultResult = hasDefaultResult ? result : null;
-    var answer = userAnswerIndex !== null ? answers[userAnswerIndex] : null;
-    var _ref15 = answer || {},
-      _ref15$result = _ref15.result,
-      answerResult = _ref15$result === void 0 ? null : _ref15$result;
+    var answer = answers !== null && userAnswerIndex !== null ? answers[userAnswerIndex] : null;
+    var _ref14 = answer || {},
+      _ref14$result = _ref14.result,
+      answerResult = _ref14$result === void 0 ? null : _ref14$result;
     return answerResult || defaultResult;
   }, [hasDefaultResult, result, answers, userAnswerIndex]);
   var showReset = isEdit && userAnswerIndex !== null;
@@ -383,43 +387,43 @@ var SurveyScreen = function SurveyScreen(_ref) {
     className: styles.items
   }, (isPlaceholder ? _toConsumableArray(new Array(3)) : answers).map(function (answer, answerIndex) {
     var hasAnswer = answer !== null;
-    var _ref16 = answer || {},
-      _ref16$label = _ref16.label,
-      label = _ref16$label === void 0 ? null : _ref16$label,
-      _ref16$buttonStyle = _ref16.buttonStyle,
-      answerButtonStyle = _ref16$buttonStyle === void 0 ? null : _ref16$buttonStyle,
-      _ref16$textStyle = _ref16.textStyle,
-      answerButtonTextStyle = _ref16$textStyle === void 0 ? null : _ref16$textStyle,
-      _ref16$resultStyle = _ref16.resultStyle,
-      answerResultStyle = _ref16$resultStyle === void 0 ? null : _ref16$resultStyle;
-    var _ref17 = answerResultStyle || {},
-      _ref17$barColor = _ref17.barColor,
-      answerResultBarColor = _ref17$barColor === void 0 ? null : _ref17$barColor,
-      answerResultTextColor = _ref17.textColor,
-      _ref17$percentageText = _ref17.percentageTextStyle,
-      answerResultPercentageTextStyle = _ref17$percentageText === void 0 ? null : _ref17$percentageText;
-    var _ref18 = label || {},
-      _ref18$body = _ref18.body,
-      body = _ref18$body === void 0 ? null : _ref18$body;
-    var _ref19 = body !== null ? quizAnswersComputed[body] || {} : {},
-      _ref19$percent = _ref19.percent,
-      percent = _ref19$percent === void 0 ? 0 : _ref19$percent,
-      _ref19$count = _ref19.count,
-      count = _ref19$count === void 0 ? 0 : _ref19$count;
-    var _ref20 = label || {},
-      _ref20$textStyle = _ref20.textStyle,
-      textStyle = _ref20$textStyle === void 0 ? null : _ref20$textStyle;
-    var _ref21 = textStyle || {},
-      _ref21$color = _ref21.color,
-      labelColor = _ref21$color === void 0 ? null : _ref21$color;
+    var _ref15 = answer || {},
+      _ref15$label = _ref15.label,
+      label = _ref15$label === void 0 ? null : _ref15$label,
+      _ref15$buttonStyle = _ref15.buttonStyle,
+      answerButtonStyle = _ref15$buttonStyle === void 0 ? null : _ref15$buttonStyle,
+      _ref15$textStyle = _ref15.textStyle,
+      answerButtonTextStyle = _ref15$textStyle === void 0 ? null : _ref15$textStyle,
+      _ref15$resultStyle = _ref15.resultStyle,
+      answerResultStyle = _ref15$resultStyle === void 0 ? null : _ref15$resultStyle;
+    var _ref16 = answerResultStyle || {},
+      _ref16$barColor = _ref16.barColor,
+      answerResultBarColor = _ref16$barColor === void 0 ? null : _ref16$barColor,
+      answerResultTextColor = _ref16.textColor,
+      _ref16$percentageText = _ref16.percentageTextStyle,
+      answerResultPercentageTextStyle = _ref16$percentageText === void 0 ? null : _ref16$percentageText;
+    var _ref17 = label || {},
+      _ref17$body = _ref17.body,
+      body = _ref17$body === void 0 ? null : _ref17$body;
+    var _ref18 = body !== null ? quizAnswersComputed[body] || {} : {},
+      _ref18$percent = _ref18.percent,
+      percent = _ref18$percent === void 0 ? 0 : _ref18$percent,
+      _ref18$count = _ref18.count,
+      count = _ref18$count === void 0 ? 0 : _ref18$count;
+    var _ref19 = label || {},
+      _ref19$textStyle = _ref19.textStyle,
+      textStyle = _ref19$textStyle === void 0 ? null : _ref19$textStyle;
+    var _ref20 = textStyle || {},
+      _ref20$color = _ref20.color,
+      labelColor = _ref20$color === void 0 ? null : _ref20$color;
     var hasAnswerLabel = isTextFilled(label);
     var userAnswer = userAnswerIndex === answerIndex;
     var buttonStyles = _objectSpread(_objectSpread(_objectSpread({}, buttonsStyle), answerButtonStyle), answered ? {
       textAlign: 'left'
     } : null);
-    var _ref22 = buttonStyles || {},
-      _ref22$borderRadius = _ref22.borderRadius,
-      answerResultBorderRadius = _ref22$borderRadius === void 0 ? null : _ref22$borderRadius;
+    var _ref21 = buttonStyles || {},
+      _ref21$borderRadius = _ref21.borderRadius,
+      answerResultBorderRadius = _ref21$borderRadius === void 0 ? null : _ref21$borderRadius;
     var finalBarBorderRadius = answerResultBorderRadius !== null && isNumber(answerResultBorderRadius) && answerResultBorderRadius > 2 ? answerResultBorderRadius - 2 : answerResultBorderRadius;
     return /*#__PURE__*/React.createElement("div", {
       key: "answer-".concat(answerIndex + 1),
@@ -488,6 +492,7 @@ var SurveyScreen = function SurveyScreen(_ref) {
       })
     }) : null)))) : null));
   })) : null));
+  var isClear = answers === null || answers.length === 0;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, className, className !== null), styles.answered, answered), styles.inputFocused, inputFocused), styles.withPercentage, !withoutPercentage), styles.isPlaceholder, isPlaceholder)])
   }, /*#__PURE__*/React.createElement(Container, {
@@ -527,10 +532,10 @@ var SurveyScreen = function SurveyScreen(_ref) {
       paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (footerHeight + spacing)
     } : null
   }, items, !isPlaceholder && allowCustomAnswer ? /*#__PURE__*/React.createElement("form", {
-    className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input')]),
+    className: classNames([styles.input, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.focused, inputFocused), styles.filled, textInput !== null && textInput !== ''), styles.disabled, inputDisabled), styles.selected, userAnswerIndex === 'input')]),
     onSubmit: onSubmitSuggestion
   }, /*#__PURE__*/React.createElement(TextInput, {
-    className: styles.textInput,
+    className: classNames([styles.textInput, _defineProperty({}, styles.padded, answers !== null && answers.length > 0)]),
     disabled: inputDisabled,
     focusable: current && isView,
     buttonStyle: _objectSpread(_objectSpread({}, buttonsStyle), customAnswerBoxStyle),
@@ -541,13 +546,23 @@ var SurveyScreen = function SurveyScreen(_ref) {
     onChange: onTextInputChange,
     onFocus: onInputFocused,
     onBlur: onInputBlurred
-  }), /*#__PURE__*/React.createElement(Button, {
-    className: classNames([styles.confirm, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
-    type: "submit",
+  }), !answered ? /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles.confirm, _defineProperty(_defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === ''), styles.isClear, isClear)]),
+    type: isClear ? 'button' : 'submit',
+    onClick: isClear ? onTextInputClear : null,
     disabled: inputDisabled || textInput === null || textInput === ''
-  }, /*#__PURE__*/React.createElement(ArrowIcon, {
+  }, isClear ? /*#__PURE__*/React.createElement(CloseIcon, {
     className: styles.icon
-  }))) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/React.createElement(Transitions, {
+  }) : /*#__PURE__*/React.createElement(ArrowIcon, {
+    className: styles.icon
+  })) : null, (answers === null || answers.length === 0) && !answered ? /*#__PURE__*/React.createElement(Button, {
+    className: classNames([styles.submit, _defineProperty({}, styles.disabled, inputDisabled || textInput === null || textInput === '')]),
+    type: "submit",
+    buttonStyle: customAnswerSubmit === null || customAnswerSubmit === void 0 ? void 0 : customAnswerSubmit.buttonStyle,
+    disabled: inputDisabled || textInput === null || textInput === ''
+  }, /*#__PURE__*/React.createElement(Text, Object.assign({}, customAnswerSubmit, {
+    inline: true
+  }))) : null) : null, userAnswerIndex !== null && finalResult !== null ? /*#__PURE__*/React.createElement(Transitions, {
     transitions: transitions,
     playing: transitionPlaying,
     disabled: transitionDisabled
@@ -660,9 +675,6 @@ var definition = {
     isList: true,
     theme: {
       textStyle: 'button'
-      // placeholder: {
-      //     textStyle: 'text',
-      // },
     }
   }, {
     type: 'fields',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-survey",
-    "version": "0.3.683",
+    "version": "0.3.694",
     "private": false,
     "description": "",
     "keywords": [
@@ -77,6 +77,7 @@
         "@micromag/element-text-input": "^0.3.683",
         "@micromag/transforms": "^0.3.679",
         "classnames": "^2.2.6",
+        "dompurify": "^3.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -86,5 +87,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "758c665c2a62aba2e46bde9d80903232bfefd6dd"
+    "gitHead": "7d141396597c43d5951088f0124d1a9ca092e2f8"
 }