@pie-element/ebsr 10.7.3-next.0 → 10.7.3-next.12

package/configure/node_modules/@pie-element/multiple-choice/lib/choice.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Choice = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _choiceInput = _interopRequireDefault(require("./choice-input"));
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var Choice = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Choice, _React$Component);
+
+  var _super = _createSuper(Choice);
+
+  function Choice() {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, Choice);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      isHovered: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseEnter", function () {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          checked = _this$props.checked;
+
+      if (!disabled && !checked) {
+        _this.setState({
+          isHovered: true
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseLeave", function () {
+      _this.setState({
+        isHovered: false
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (choice) {
+      var _this$props2 = _this.props,
+          disabled = _this$props2.disabled,
+          onChoiceChanged = _this$props2.onChoiceChanged;
+
+      if (!disabled) {
+        onChoiceChanged(choice);
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2["default"])(Choice, [{
+    key: "render",
+    value: function render() {
+      var _classNames;
+
+      var _this$props3 = this.props,
+          choice = _this$props3.choice,
+          index = _this$props3.index,
+          choicesLength = _this$props3.choicesLength,
+          showCorrect = _this$props3.showCorrect,
+          isEvaluateMode = _this$props3.isEvaluateMode,
+          choiceMode = _this$props3.choiceMode,
+          disabled = _this$props3.disabled,
+          checked = _this$props3.checked,
+          correctness = _this$props3.correctness,
+          displayKey = _this$props3.displayKey,
+          classes = _this$props3.classes,
+          choicesLayout = _this$props3.choicesLayout,
+          gridColumns = _this$props3.gridColumns,
+          isSelectionButtonBelow = _this$props3.isSelectionButtonBelow,
+          selectedAnswerBackgroundColor = _this$props3.selectedAnswerBackgroundColor,
+          selectedAnswerStrokeColor = _this$props3.selectedAnswerStrokeColor,
+          selectedAnswerStrokeWidth = _this$props3.selectedAnswerStrokeWidth,
+          hoverAnswerBackgroundColor = _this$props3.hoverAnswerBackgroundColor,
+          hoverAnswerStrokeColor = _this$props3.hoverAnswerStrokeColor,
+          hoverAnswerStrokeWidth = _this$props3.hoverAnswerStrokeWidth,
+          autoFocusRef = _this$props3.autoFocusRef,
+          tagName = _this$props3.tagName;
+      var isHovered = this.state.isHovered;
+      var choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');
+      var feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;
+
+      var choiceProps = _objectSpread(_objectSpread({}, choice), {}, {
+        checked: checked,
+        choiceMode: choiceMode,
+        disabled: disabled,
+        feedback: feedback,
+        correctness: correctness,
+        displayKey: displayKey,
+        index: index,
+        choicesLayout: choicesLayout,
+        gridColumns: gridColumns,
+        onChange: this.onChange,
+        isEvaluateMode: isEvaluateMode,
+        isSelectionButtonBelow: isSelectionButtonBelow,
+        selectedAnswerStrokeColor: selectedAnswerStrokeColor,
+        selectedAnswerStrokeWidth: selectedAnswerStrokeWidth,
+        tagName: tagName
+      });
+
+      var normalizeStrokeWidth = function normalizeStrokeWidth(width) {
+        if (!width) return '2px'; // default
+
+        var trimmed = String(width).trim(); // add 'px' if the value is a number
+
+        if (/^\d+(\.\d+)?$/.test(trimmed)) {
+          return "".concat(trimmed, "px");
+        }
+
+        return trimmed;
+      };
+
+      var hasSelectedStroke = selectedAnswerStrokeColor && selectedAnswerStrokeColor !== 'initial';
+      var hasHoverStroke = hoverAnswerStrokeColor && hoverAnswerStrokeColor !== 'initial';
+      var currentStrokeColor = 'transparent';
+      var currentStrokeWidth = '2px';
+      var currentBackgroundColor = 'initial';
+
+      if (hasSelectedStroke || hasHoverStroke) {
+        if (checked && hasSelectedStroke) {
+          // selected state takes priority when selected stroke is configured
+          currentStrokeColor = selectedAnswerStrokeColor;
+          currentStrokeWidth = selectedAnswerStrokeWidth;
+        } else if (isHovered && !disabled && hasHoverStroke) {
+          // hover state when not selected and not disabled, and hover stroke is configured
+          currentStrokeColor = hoverAnswerStrokeColor;
+          currentStrokeWidth = hoverAnswerStrokeWidth;
+        }
+      }
+
+      if (checked && selectedAnswerBackgroundColor && selectedAnswerBackgroundColor !== 'initial') {
+        currentBackgroundColor = selectedAnswerBackgroundColor;
+      } else if (isHovered && !disabled && hoverAnswerBackgroundColor && hoverAnswerBackgroundColor !== 'initial') {
+        currentBackgroundColor = hoverAnswerBackgroundColor;
+      }
+
+      var strokeStyle = hasSelectedStroke || hasHoverStroke ? {
+        border: "".concat(normalizeStrokeWidth(currentStrokeWidth), " solid ").concat(currentStrokeColor),
+        borderRadius: '8px'
+      } : {};
+      var names = (0, _classnames["default"])(classes.choice, (_classNames = {}, (0, _defineProperty2["default"])(_classNames, classes.noBorder, index === choicesLength - 1 || choicesLayout !== 'vertical' || strokeStyle), (0, _defineProperty2["default"])(_classNames, classes.horizontalLayout, choicesLayout === 'horizontal'), _classNames));
+      var choiceBackground = currentBackgroundColor !== 'initial' ? currentBackgroundColor : 'initial';
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: choiceClass,
+        key: index,
+        style: _objectSpread({
+          backgroundColor: choiceBackground
+        }, strokeStyle),
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave
+      }, /*#__PURE__*/_react["default"].createElement(_choiceInput["default"], (0, _extends2["default"])({}, choiceProps, {
+        className: names,
+        autoFocusRef: autoFocusRef
+      })));
+    }
+  }]);
+  return Choice;
+}(_react["default"].Component);
+
+exports.Choice = Choice;
+(0, _defineProperty2["default"])(Choice, "propTypes", {});
+Choice.propTypes = {
+  choiceMode: _propTypes["default"].oneOf(['radio', 'checkbox']),
+  choice: _propTypes["default"].object,
+  disabled: _propTypes["default"].bool.isRequired,
+  onChoiceChanged: _propTypes["default"].func,
+  classes: _propTypes["default"].object.isRequired,
+  index: _propTypes["default"].number,
+  choicesLength: _propTypes["default"].number,
+  showCorrect: _propTypes["default"].bool,
+  isEvaluateMode: _propTypes["default"].bool,
+  checked: _propTypes["default"].bool,
+  correctness: _propTypes["default"].string,
+  displayKey: _propTypes["default"].string,
+  choicesLayout: _propTypes["default"].oneOf(['vertical', 'grid', 'horizontal']),
+  gridColumns: _propTypes["default"].string,
+  selectedAnswerBackgroundColor: _propTypes["default"].string,
+  selectedAnswerStrokeColor: _propTypes["default"].string,
+  selectedAnswerStrokeWidth: _propTypes["default"].string,
+  hoverAnswerBackgroundColor: _propTypes["default"].string,
+  hoverAnswerStrokeColor: _propTypes["default"].string,
+  hoverAnswerStrokeWidth: _propTypes["default"].string,
+  tagName: _propTypes["default"].string,
+  isSelectionButtonBelow: _propTypes["default"].bool,
+  autoFocusRef: _propTypes["default"].object
+};
+
+var _default = (0, _styles.withStyles)(function (theme) {
+  return {
+    choice: {
+      paddingTop: theme.spacing.unit * 2.5,
+      paddingBottom: theme.spacing.unit + 2,
+      paddingLeft: theme.spacing.unit + 2,
+      paddingRight: theme.spacing.unit + 2,
+      borderBottom: "1px solid ".concat(theme.palette.grey[300])
+    },
+    noBorder: {
+      borderBottom: 'none'
+    },
+    horizontalLayout: {
+      paddingRight: theme.spacing.unit * 2.5,
+      '& label': {
+        marginRight: theme.spacing.unit // '& span:first-child': {
+        //   paddingRight: 0
+        // }
+
+      }
+    }
+  };
+})(Choice);
+
+exports["default"] = _default;
+//# sourceMappingURL=choice.js.map

package/configure/node_modules/@pie-element/multiple-choice/lib/choice.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/choice.jsx"],"names":["Choice","isHovered","props","disabled","checked","setState","choice","onChoiceChanged","index","choicesLength","showCorrect","isEvaluateMode","choiceMode","correctness","displayKey","classes","choicesLayout","gridColumns","isSelectionButtonBelow","selectedAnswerBackgroundColor","selectedAnswerStrokeColor","selectedAnswerStrokeWidth","hoverAnswerBackgroundColor","hoverAnswerStrokeColor","hoverAnswerStrokeWidth","autoFocusRef","tagName","state","choiceClass","feedback","choiceProps","onChange","normalizeStrokeWidth","width","trimmed","String","trim","test","hasSelectedStroke","hasHoverStroke","currentStrokeColor","currentStrokeWidth","currentBackgroundColor","strokeStyle","border","borderRadius","names","noBorder","horizontalLayout","choiceBackground","backgroundColor","handleMouseEnter","handleMouseLeave","React","Component","propTypes","PropTypes","oneOf","object","bool","isRequired","func","number","string","theme","paddingTop","spacing","unit","paddingBottom","paddingLeft","paddingRight","borderBottom","palette","grey","marginRight"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport classNames from 'classnames';\n\nimport ChoiceInput from './choice-input';\n\nexport class Choice extends React.Component {\n  static propTypes = {};\n\n  state = {\n    isHovered: false,\n  };\n\n  handleMouseEnter = () => {\n    const { disabled, checked } = this.props;\n\n    if (!disabled && !checked) {\n      this.setState({ isHovered: true });\n    }\n  };\n\n  handleMouseLeave = () => {\n    this.setState({ isHovered: false });\n  };\n\n  onChange = (choice) => {\n    const { disabled, onChoiceChanged } = this.props;\n\n    if (!disabled) {\n      onChoiceChanged(choice);\n    }\n  };\n\n  render() {\n    const {\n      choice,\n      index,\n      choicesLength,\n      showCorrect,\n      isEvaluateMode,\n      choiceMode,\n      disabled,\n      checked,\n      correctness,\n      displayKey,\n      classes,\n      choicesLayout,\n      gridColumns,\n      isSelectionButtonBelow,\n      selectedAnswerBackgroundColor,\n      selectedAnswerStrokeColor,\n      selectedAnswerStrokeWidth,\n      hoverAnswerBackgroundColor,\n      hoverAnswerStrokeColor,\n      hoverAnswerStrokeWidth,\n      autoFocusRef,\n      tagName\n    } = this.props;\n    \n    const { isHovered } = this.state;\n    const choiceClass = 'choice' + (index === choicesLength - 1 ? ' last' : '');\n\n    const feedback = !isEvaluateMode || showCorrect ? '' : choice.feedback;\n\n    const choiceProps = {\n      ...choice,\n      checked,\n      choiceMode,\n      disabled,\n      feedback,\n      correctness,\n      displayKey,\n      index,\n      choicesLayout,\n      gridColumns,\n      onChange: this.onChange,\n      isEvaluateMode,\n      isSelectionButtonBelow,\n      selectedAnswerStrokeColor,\n      selectedAnswerStrokeWidth,\n      tagName,\n    };\n\n    const normalizeStrokeWidth = (width) => {\n      if (!width) return '2px'; // default\n      const trimmed = String(width).trim();\n    \n      // add 'px' if the value is a number\n      if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\n        return `${trimmed}px`;\n      }\n\n      return trimmed;\n    };\n\n    const hasSelectedStroke = selectedAnswerStrokeColor && selectedAnswerStrokeColor !== 'initial';\n    const hasHoverStroke = hoverAnswerStrokeColor && hoverAnswerStrokeColor !== 'initial';\n    \n    let currentStrokeColor = 'transparent';\n    let currentStrokeWidth = '2px';\n    let currentBackgroundColor = 'initial';\n    \n    if ((hasSelectedStroke || hasHoverStroke)) {\n      if (checked && hasSelectedStroke) {\n        // selected state takes priority when selected stroke is configured\n        currentStrokeColor = selectedAnswerStrokeColor;\n        currentStrokeWidth = selectedAnswerStrokeWidth;\n      } else if (isHovered && !disabled && hasHoverStroke) {\n        // hover state when not selected and not disabled, and hover stroke is configured\n        currentStrokeColor = hoverAnswerStrokeColor;\n        currentStrokeWidth = hoverAnswerStrokeWidth;\n      }\n    }\n    \n    if (checked && selectedAnswerBackgroundColor && selectedAnswerBackgroundColor !== 'initial') {\n      currentBackgroundColor = selectedAnswerBackgroundColor;\n    } else if (isHovered && !disabled && hoverAnswerBackgroundColor && hoverAnswerBackgroundColor !== 'initial') {\n      currentBackgroundColor = hoverAnswerBackgroundColor;\n    }\n\n     const strokeStyle = (hasSelectedStroke || hasHoverStroke) ? {\n      border: `${normalizeStrokeWidth(currentStrokeWidth)} solid ${currentStrokeColor}`,\n      borderRadius: '8px',\n    } : {};\n\n    const names = classNames(classes.choice, {\n      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical' || strokeStyle,\n      [classes.horizontalLayout]: choicesLayout === 'horizontal',\n    });\n\n    const choiceBackground = currentBackgroundColor !== 'initial' ? currentBackgroundColor : 'initial';\n\n    return (\n      <div \n        className={choiceClass} \n        key={index} \n        style={{ backgroundColor: choiceBackground, ...strokeStyle }}\n        onMouseEnter={this.handleMouseEnter}\n        onMouseLeave={this.handleMouseLeave}\n      >\n        <ChoiceInput {...choiceProps} className={names} autoFocusRef={autoFocusRef} />\n      </div>\n    );\n  }\n}\n\nChoice.propTypes = {\n  choiceMode: PropTypes.oneOf(['radio', 'checkbox']),\n  choice: PropTypes.object,\n  disabled: PropTypes.bool.isRequired,\n  onChoiceChanged: PropTypes.func,\n  classes: PropTypes.object.isRequired,\n  index: PropTypes.number,\n  choicesLength: PropTypes.number,\n  showCorrect: PropTypes.bool,\n  isEvaluateMode: PropTypes.bool,\n  checked: PropTypes.bool,\n  correctness: PropTypes.string,\n  displayKey: PropTypes.string,\n  choicesLayout: PropTypes.oneOf(['vertical', 'grid', 'horizontal']),\n  gridColumns: PropTypes.string,\n  selectedAnswerBackgroundColor: PropTypes.string,\n  selectedAnswerStrokeColor: PropTypes.string,\n  selectedAnswerStrokeWidth: PropTypes.string,\n  hoverAnswerBackgroundColor: PropTypes.string,\n  hoverAnswerStrokeColor: PropTypes.string,\n  hoverAnswerStrokeWidth: PropTypes.string,\n  tagName: PropTypes.string,\n  isSelectionButtonBelow: PropTypes.bool,\n  autoFocusRef: PropTypes.object,\n};\n\nexport default withStyles((theme) => ({\n  choice: {\n    paddingTop: theme.spacing.unit * 2.5,\n    paddingBottom: theme.spacing.unit + 2,\n    paddingLeft: theme.spacing.unit + 2,\n    paddingRight: theme.spacing.unit + 2,\n    borderBottom: `1px solid ${theme.palette.grey[300]}`,\n  },\n  noBorder: {\n    borderBottom: 'none',\n  },\n  horizontalLayout: {\n    paddingRight: theme.spacing.unit * 2.5,\n    '& label': {\n      marginRight: theme.spacing.unit,\n      // '& span:first-child': {\n      //   paddingRight: 0\n      // }\n    },\n  },\n}))(Choice);\n"],"file":"choice.js"}

package/configure/node_modules/@pie-element/multiple-choice/lib/feedback-tick.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactTransitionGroup = require("react-transition-group");
+
+var _styles = require("@material-ui/core/styles");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var stylesheet = {
+  incorrect: {
+    fill: "var(--feedback-incorrect-bg-color, ".concat(_renderUi.color.incorrect(), ")")
+  },
+  correct: {
+    fill: "var(--feedback-correct-bg-color, ".concat(_renderUi.color.correct(), ")")
+  },
+  feedbackTick: {
+    width: '33px',
+    height: '33px',
+    '& svg': {
+      position: 'absolute',
+      display: 'inline-block',
+      width: '33px',
+      height: '33px',
+      verticalAlign: 'middle',
+      '& hide': {
+        display: 'none'
+      }
+    }
+  },
+  feedbackTickEnter: {
+    opacity: '0',
+    left: '-50px'
+  },
+  feedbackTickEnterActive: {
+    opacity: '1',
+    left: '0px',
+    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms'
+  },
+  feedbackTickLeave: {
+    opacity: '1',
+    left: '0px'
+  },
+  feedbackTickLeaveActive: {
+    opacity: '0',
+    left: '-50px',
+    transition: 'left 300ms ease-in, opacity 300ms'
+  }
+};
+
+var FeedbackTick = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(FeedbackTick, _React$Component);
+
+  var _super = _createSuper(FeedbackTick);
+
+  function FeedbackTick(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, FeedbackTick);
+    _this = _super.call(this, props);
+    _this.incorrectIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+      key: "1",
+      preserveAspectRatio: "xMinYMin meet",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 44 40",
+      style: {
+        enableBackground: 'new 0 0 44 40'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
+      x: "11",
+      y: "17.3",
+      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)",
+      className: _this.props.classes.incorrect,
+      width: "16.6",
+      height: "3.7"
+    }), /*#__PURE__*/_react["default"].createElement("rect", {
+      x: "17.4",
+      y: "10.7",
+      transform: "matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)",
+      className: _this.props.classes.incorrect,
+      width: "3.7",
+      height: "16.6"
+    })));
+    _this.correctIcon = /*#__PURE__*/_react["default"].createElement("svg", {
+      key: "2",
+      preserveAspectRatio: "xMinYMin meet",
+      version: "1.1",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 44 40",
+      style: {
+        enableBackground: 'new 0 0 44 40'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("polygon", {
+      className: _this.props.classes.correct,
+      points: "19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4"
+    }));
+    return _this;
+  }
+
+  (0, _createClass2["default"])(FeedbackTick, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          correctness = _this$props.correctness,
+          classes = _this$props.classes;
+
+      var icon = function () {
+        if (correctness === 'incorrect') {
+          return _this2.incorrectIcon;
+        } else if (correctness === 'correct') {
+          return _this2.correctIcon;
+        }
+      }();
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.feedbackTick
+      }, /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.TransitionGroup, null, correctness && /*#__PURE__*/_react["default"].createElement(_reactTransitionGroup.CSSTransition, {
+        classNames: {
+          enter: classes.feedbackTickEnter,
+          enterActive: classes.feedbackTickEnterActive,
+          exit: classes.feedbackTickLeave,
+          exitActive: classes.feedbackTickLeaveActive
+        },
+        timeout: {
+          enter: 700,
+          exit: 300
+        }
+      }, icon)));
+    }
+  }]);
+  return FeedbackTick;
+}(_react["default"].Component);
+
+(0, _defineProperty2["default"])(FeedbackTick, "propTypes", {
+  classes: _propTypes["default"].object.isRequired,
+  correctness: _propTypes["default"].string
+});
+
+var _default = (0, _styles.withStyles)(stylesheet, {
+  name: 'FeedbackTick'
+})(FeedbackTick);
+
+exports["default"] = _default;
+//# sourceMappingURL=feedback-tick.js.map

package/configure/node_modules/@pie-element/multiple-choice/lib/feedback-tick.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/feedback-tick.jsx"],"names":["stylesheet","incorrect","fill","color","correct","feedbackTick","width","height","position","display","verticalAlign","feedbackTickEnter","opacity","left","feedbackTickEnterActive","transition","feedbackTickLeave","feedbackTickLeaveActive","FeedbackTick","props","incorrectIcon","enableBackground","classes","correctIcon","correctness","icon","enter","enterActive","exit","exitActive","React","Component","PropTypes","object","isRequired","string","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { TransitionGroup, CSSTransition } from 'react-transition-group';\nimport { withStyles } from '@material-ui/core/styles';\nimport PropTypes from 'prop-types';\nimport { color } from '@pie-lib/pie-toolbox/render-ui';\n\nconst stylesheet = {\n  incorrect: {\n    fill: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,\n  },\n  correct: {\n    fill: `var(--feedback-correct-bg-color, ${color.correct()})`,\n  },\n  feedbackTick: {\n    width: '33px',\n    height: '33px',\n    '& svg': {\n      position: 'absolute',\n      display: 'inline-block',\n      width: '33px',\n      height: '33px',\n      verticalAlign: 'middle',\n      '& hide': {\n        display: 'none',\n      },\n    },\n  },\n  feedbackTickEnter: {\n    opacity: '0',\n    left: '-50px',\n  },\n  feedbackTickEnterActive: {\n    opacity: '1',\n    left: '0px',\n    transition: 'left 500ms ease-in 200ms, opacity 500ms linear 200ms',\n  },\n  feedbackTickLeave: {\n    opacity: '1',\n    left: '0px',\n  },\n  feedbackTickLeaveActive: {\n    opacity: '0',\n    left: '-50px',\n    transition: 'left 300ms ease-in, opacity 300ms',\n  },\n};\n\nclass FeedbackTick extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctness: PropTypes.string,\n  };\n  constructor(props) {\n    super(props);\n    this.incorrectIcon = (\n      <svg\n        key=\"1\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <g>\n          <rect\n            x=\"11\"\n            y=\"17.3\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.852 19.2507)\"\n            className={this.props.classes.incorrect}\n            width=\"16.6\"\n            height=\"3.7\"\n          />\n          <rect\n            x=\"17.4\"\n            y=\"10.7\"\n            transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.8175 19.209)\"\n            className={this.props.classes.incorrect}\n            width=\"3.7\"\n            height=\"16.6\"\n          />\n        </g>\n      </svg>\n    );\n\n    this.correctIcon = (\n      <svg\n        key=\"2\"\n        preserveAspectRatio=\"xMinYMin meet\"\n        version=\"1.1\"\n        x=\"0px\"\n        y=\"0px\"\n        viewBox=\"0 0 44 40\"\n        style={{ enableBackground: 'new 0 0 44 40' }}\n      >\n        <polygon\n          className={this.props.classes.correct}\n          points=\"19.1,28.6 11.8,22.3 14.4,19.2 17.9,22.1 23.9,11.4 27.5,13.4\"\n        />\n      </svg>\n    );\n  }\n\n  render() {\n    const { correctness, classes } = this.props;\n\n    const icon = (() => {\n      if (correctness === 'incorrect') {\n        return this.incorrectIcon;\n      } else if (correctness === 'correct') {\n        return this.correctIcon;\n      }\n    })();\n\n    return (\n      <div className={classes.feedbackTick}>\n        <TransitionGroup>\n          {correctness && (\n            <CSSTransition\n              classNames={{\n                enter: classes.feedbackTickEnter,\n                enterActive: classes.feedbackTickEnterActive,\n                exit: classes.feedbackTickLeave,\n                exitActive: classes.feedbackTickLeaveActive,\n              }}\n              timeout={{ enter: 700, exit: 300 }}\n            >\n              {icon}\n            </CSSTransition>\n          )}\n        </TransitionGroup>\n      </div>\n    );\n  }\n}\n\nexport default withStyles(stylesheet, { name: 'FeedbackTick' })(FeedbackTick);\n"],"file":"feedback-tick.js"}