@pie-element/image-cloze-association 3.6.2 → 3.6.3-next.1008

package/module/element.js

@@ -1,1021 +0,0 @@
-import {_dll_react, _dll_material_ui__core, _dll_prop_types, _dll_pie_lib__render_ui, _dll_pie_lib__drag, _dll_material_ui__core_styles, _dll_lodash, _dll_react_dom, _dll_pie_lib__math_rendering, _dll_pie_framework__pie_player_events} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-function unwrapExports(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var interopRequireDefault = createCommonjsModule(function (module) {
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      "default": obj
-    };
-  }
-  module.exports = _interopRequireDefault;
-});
-unwrapExports(interopRequireDefault);
-var setPrototypeOf = createCommonjsModule(function (module) {
-  function _setPrototypeOf(o, p) {
-    module.exports = _setPrototypeOf = Object.setPrototypeOf || (function _setPrototypeOf(o, p) {
-      o.__proto__ = p;
-      return o;
-    });
-    return _setPrototypeOf(o, p);
-  }
-  module.exports = _setPrototypeOf;
-});
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  setPrototypeOf(subClass, superClass);
-}
-var inheritsLoose = _inheritsLoose;
-var setStatic_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var setStatic = function setStatic(key, value) {
-    return function (BaseComponent) {
-      BaseComponent[key] = value;
-      return BaseComponent;
-    };
-  };
-  var _default = setStatic;
-  exports.default = _default;
-});
-unwrapExports(setStatic_1);
-var setDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _setStatic = interopRequireDefault(setStatic_1);
-  var setDisplayName = function setDisplayName(displayName) {
-    return (0, _setStatic.default)('displayName', displayName);
-  };
-  var _default = setDisplayName;
-  exports.default = _default;
-});
-unwrapExports(setDisplayName_1);
-var getDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var getDisplayName = function getDisplayName(Component) {
-    if (typeof Component === 'string') {
-      return Component;
-    }
-    if (!Component) {
-      return undefined;
-    }
-    return Component.displayName || Component.name || 'Component';
-  };
-  var _default = getDisplayName;
-  exports.default = _default;
-});
-unwrapExports(getDisplayName_1);
-var wrapDisplayName_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _getDisplayName = interopRequireDefault(getDisplayName_1);
-  var wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {
-    return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
-  };
-  var _default = wrapDisplayName;
-  exports.default = _default;
-});
-unwrapExports(wrapDisplayName_1);
-const _react = _dll_react;
-var shouldUpdate_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _inheritsLoose2 = interopRequireDefault(inheritsLoose);
-  var _setDisplayName = interopRequireDefault(setDisplayName_1);
-  var _wrapDisplayName = interopRequireDefault(wrapDisplayName_1);
-  var shouldUpdate = function shouldUpdate(test) {
-    return function (BaseComponent) {
-      var factory = (0, _react.createFactory)(BaseComponent);
-      var ShouldUpdate = (function (_Component) {
-        (0, _inheritsLoose2.default)(ShouldUpdate, _Component);
-        function ShouldUpdate() {
-          return _Component.apply(this, arguments) || this;
-        }
-        var _proto = ShouldUpdate.prototype;
-        _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
-          return test(this.props, nextProps);
-        };
-        _proto.render = function render() {
-          return factory(this.props);
-        };
-        return ShouldUpdate;
-      })(_react.Component);
-      {
-        return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
-      }
-    };
-  };
-  var _default = shouldUpdate;
-  exports.default = _default;
-});
-unwrapExports(shouldUpdate_1);
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-function is(x, y) {
-  if (x === y) {
-    return x !== 0 || y !== 0 || 1 / x === 1 / y;
-  } else {
-    return x !== x && y !== y;
-  }
-}
-function shallowEqual(objA, objB) {
-  if (is(objA, objB)) {
-    return true;
-  }
-  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
-    return false;
-  }
-  var keysA = Object.keys(objA);
-  var keysB = Object.keys(objB);
-  if (keysA.length !== keysB.length) {
-    return false;
-  }
-  for (var i = 0; i < keysA.length; i++) {
-    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-      return false;
-    }
-  }
-  return true;
-}
-var shallowEqual_1 = shallowEqual;
-var shallowEqual$1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _shallowEqual = interopRequireDefault(shallowEqual_1);
-  var _default = _shallowEqual.default;
-  exports.default = _default;
-});
-unwrapExports(shallowEqual$1);
-var pure_1 = createCommonjsModule(function (module, exports) {
-  exports.__esModule = true;
-  exports.default = void 0;
-  var _shouldUpdate = interopRequireDefault(shouldUpdate_1);
-  var _shallowEqual = interopRequireDefault(shallowEqual$1);
-  var _setDisplayName = interopRequireDefault(setDisplayName_1);
-  var _wrapDisplayName = interopRequireDefault(wrapDisplayName_1);
-  var pure = function pure(BaseComponent) {
-    var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
-      return !(0, _shallowEqual.default)(props, nextProps);
-    });
-    {
-      return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
-    }
-  };
-  var _default = pure;
-  exports.default = _default;
-});
-unwrapExports(pure_1);
-const require$$0 = _dll_react;
-const {SvgIcon: require$$2} = _dll_material_ui__core;
-var createSvgIcon_1 = createCommonjsModule(function (module, exports) {
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = void 0;
-  var _react = interopRequireDefault(require$$0);
-  var _pure = interopRequireDefault(pure_1);
-  var _SvgIcon = interopRequireDefault(require$$2);
-  function createSvgIcon(path, displayName) {
-    var Icon = function Icon(props) {
-      return _react.default.createElement(_SvgIcon.default, props, path);
-    };
-    Icon.displayName = ("").concat(displayName, "Icon");
-    Icon = (0, _pure.default)(Icon);
-    Icon.muiName = 'SvgIcon';
-    return Icon;
-  }
-  var _default = createSvgIcon;
-  exports.default = _default;
-});
-unwrapExports(createSvgIcon_1);
-const require$$0$1 = _dll_react;
-var Check = createCommonjsModule(function (module, exports) {
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = void 0;
-  var _react = interopRequireDefault(require$$0$1);
-  var _createSvgIcon = interopRequireDefault(createSvgIcon_1);
-  var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  }), _react.default.createElement("path", {
-    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-  })), 'Check');
-  exports.default = _default;
-});
-var Check$1 = unwrapExports(Check);
-const require$$0$2 = _dll_react;
-var Close = createCommonjsModule(function (module, exports) {
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-  exports.default = void 0;
-  var _react = interopRequireDefault(require$$0$2);
-  var _createSvgIcon = interopRequireDefault(createSvgIcon_1);
-  var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
-    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-  }), _react.default.createElement("path", {
-    fill: "none",
-    d: "M0 0h24v24H0z"
-  })), 'Close');
-  exports.default = _default;
-});
-var Close$1 = unwrapExports(Close);
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {withStyles: withStyles} = _dll_material_ui__core;
-const {color: color} = _dll_pie_lib__render_ui;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/evaluation-icon.jsx";
-const getCorrectnessClass = (isCorrect, filled) => {
-  if (filled) {
-    return isCorrect ? 'correctFilled' : 'incorrectFilled';
-  }
-  return isCorrect ? 'correctEmpty' : 'incorrectEmpty';
-};
-const EvaluationIcon = ({classes, containerStyle, isCorrect, filled}) => {
-  const Icon = isCorrect ? Check$1 : Close$1;
-  const showCorrectness = isCorrect !== undefined;
-  const correctness = showCorrectness ? getCorrectnessClass(isCorrect, filled) : '';
-  return showCorrectness ? React.createElement(Icon, {
-    className: `${classes.icon} ${classes[correctness]}`,
-    style: containerStyle,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName,
-      lineNumber: 22
-    }
-  }) : null;
-};
-EvaluationIcon.propTypes = {
-  classes: PropTypes.object,
-  containerStyle: PropTypes.object,
-  filled: PropTypes.bool,
-  isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.number])
-};
-EvaluationIcon.defaultProps = {
-  classes: {},
-  containerStyle: {},
-  filled: false,
-  isCorrect: undefined
-};
-const styles = () => ({
-  correctEmpty: {
-    color: color.correct()
-  },
-  correctFilled: {
-    color: color.background(),
-    backgroundColor: color.correct()
-  },
-  incorrectEmpty: {
-    color: color.incorrect()
-  },
-  incorrectFilled: {
-    color: color.background(),
-    backgroundColor: color.incorrect()
-  }
-});
-var EvaluationIcon$1 = withStyles(styles)(EvaluationIcon);
-var c = {
-  types: {
-    response: 'react-dnd-response'
-  }
-};
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {DragSource: DragSource} = _dll_pie_lib__drag;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const {color: color$1} = _dll_pie_lib__render_ui;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/possible-response.jsx";
-class PossibleResponse extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    PossibleResponse.prototype.__init.call(this);
-  }
-  __init() {
-    this.getClassname = () => {
-      const {classes, data: {isCorrect}} = this.props;
-      let styleProp;
-      switch (isCorrect) {
-        case undefined:
-          styleProp = null;
-          break;
-        case true:
-          styleProp = 'baseCorrect';
-          break;
-        default:
-          styleProp = 'baseIncorrect';
-          break;
-      }
-      return styleProp ? classes[styleProp] : '';
-    };
-  }
-  render() {
-    const {classes, connectDragSource, containerStyle, data} = this.props;
-    const additionalClass = this.getClassname();
-    const evaluationStyle = {
-      alignSelf: 'center',
-      fontSize: 14,
-      paddingRight: 2
-    };
-    return connectDragSource(React$1.createElement('div', {
-      className: `${classes.base} ${additionalClass}`,
-      style: containerStyle,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 36
-      }
-    }, React$1.createElement('span', {
-      className: classes.span,
-      dangerouslySetInnerHTML: {
-        __html: data.value
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 37
-      }
-    }), React$1.createElement(EvaluationIcon$1, {
-      isCorrect: data.isCorrect,
-      containerStyle: evaluationStyle,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 38
-      }
-    })));
-  }
-}
-PossibleResponse.propTypes = {
-  canDrag: PropTypes$1.bool.isRequired,
-  classes: PropTypes$1.object,
-  connectDragSource: PropTypes$1.func,
-  containerStyle: PropTypes$1.object,
-  data: PropTypes$1.object.isRequired,
-  onDragBegin: PropTypes$1.func.isRequired,
-  onDragEnd: PropTypes$1.func.isRequired
-};
-PossibleResponse.defaultProps = {
-  classes: {},
-  connectDragSource: () => {},
-  containerStyle: {}
-};
-const styles$1 = () => ({
-  base: {
-    backgroundColor: color$1.background(),
-    border: `1px solid ${color$1.primary()}`,
-    display: 'flex',
-    marginLeft: 2,
-    marginTop: 2,
-    width: 'fit-content'
-  },
-  baseCorrect: {
-    border: `2px solid ${color$1.correct()}`
-  },
-  baseIncorrect: {
-    border: `2px solid ${color$1.incorrect()}`
-  },
-  span: {
-    backgroundColor: color$1.background()
-  }
-});
-const Styled = withStyles$1(styles$1)(PossibleResponse);
-const tileSource = {
-  canDrag(props) {
-    const {canDrag} = props;
-    return canDrag;
-  },
-  beginDrag(props) {
-    const {data, data: {id, value, containerIndex}, onDragBegin} = props;
-    onDragBegin(data);
-    return {
-      id,
-      value,
-      containerIndex
-    };
-  },
-  endDrag(props) {
-    props.onDragEnd();
-  }
-};
-var PossibleResponse$1 = DragSource(c.types.response, tileSource, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-}))(Styled);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const {DropTarget: DropTarget} = _dll_pie_lib__drag;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const {color: color$2} = _dll_pie_lib__render_ui;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/image-drop-target.jsx";
-const ImageDropTarget = ({answers, canDrag, classes, containerStyle, draggingElement, duplicateResponses, onDragAnswerBegin, onDragAnswerEnd, connectDropTarget, isOverCurrent}) => connectDropTarget(React$2.createElement('div', {
-  className: `
-        ${classes.responseContainer}
-        ${draggingElement.id ? classes.responseContainerActive : ''}
-      `,
-  style: containerStyle,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 23
-  }
-}, isOverCurrent && !duplicateResponses ? React$2.createElement('div', {
-  className: classes.dragOverContainer,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 32
-  }
-}, React$2.createElement('span', {
-  dangerouslySetInnerHTML: {
-    __html: draggingElement.value
-  },
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 33
-  }
-})) : null, !isOverCurrent && answers.length || duplicateResponses && answers.length ? React$2.createElement('div', {
-  className: classes.answers,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 39
-  }
-}, answers.map(answer => React$2.createElement(PossibleResponse$1, {
-  canDrag: canDrag,
-  containerStyle: answer.isCorrect === undefined ? {
-    borderWidth: 0
-  } : {},
-  key: answer.id,
-  data: answer,
-  onDragBegin: () => onDragAnswerBegin(answer),
-  onDragEnd: onDragAnswerEnd,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 41
-  }
-}))) : null));
-ImageDropTarget.propTypes = {
-  answer: PropTypes$2.object,
-  canDrag: PropTypes$2.bool.isRequired,
-  classes: PropTypes$2.object,
-  containerStyle: PropTypes$2.object.isRequired,
-  draggingElement: PropTypes$2.object.isRequired,
-  onDragAnswerBegin: PropTypes$2.func.isRequired,
-  onDragAnswerEnd: PropTypes$2.func.isRequired,
-  onDrop: PropTypes$2.func.isRequired
-};
-ImageDropTarget.defaultProps = {
-  answer: {},
-  classes: {}
-};
-const styles$2 = () => ({
-  answers: {
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  dragOverContainer: {
-    backgroundColor: color$2.background(),
-    pointerEvents: 'none',
-    width: 'fit-content'
-  },
-  responseContainer: {
-    position: 'absolute'
-  },
-  responseContainerActive: {
-    border: `2px solid ${color$2.text()}`,
-    backgroundColor: 'rgba(230, 242, 252, .8)'
-  }
-});
-const Styled$1 = withStyles$2(styles$2)(ImageDropTarget);
-const tileSource$1 = {
-  hover(props, monitor) {
-    monitor.isOver({
-      shallow: true
-    });
-  },
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    props.onDrop(item);
-  }
-};
-var ImageDropTarget$1 = DropTarget(c.types.response, tileSource$1, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOverCurrent: monitor.isOver({
-    shallow: true
-  })
-}))(Styled$1);
-const React$3 = _dll_react;
-const {Component: Component} = _dll_react;
-const PropTypes$3 = _dll_prop_types;
-const {withStyles: withStyles$3} = _dll_material_ui__core;
-const _jsxFileName$3 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/image-container.jsx";
-class ImageContainer extends Component {
-  render() {
-    const {answers, canDrag, classes, draggingElement, duplicateResponses, image: {height, src, width}, onAnswerSelect, onDragAnswerBegin, onDragAnswerEnd, responseContainers} = this.props;
-    return React$3.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 27
-      }
-    }, React$3.createElement('img', {
-      src: src,
-      height: height,
-      width: width,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 28
-      }
-    }), responseContainers.map((r, i) => {
-      const rHeight = r.height.replace('%', '') / 100 * height;
-      const rWidth = r.width.replace('%', '') / 100 * width;
-      const rLeft = r.x / 100 * width;
-      const rTop = r.y / 100 * height;
-      const answersParsed = answers.filter(a => a.containerIndex === r.index);
-      return React$3.createElement(ImageDropTarget$1, {
-        answers: answersParsed,
-        canDrag: canDrag,
-        containerStyle: {
-          height: rHeight,
-          width: rWidth,
-          left: rLeft,
-          top: rTop
-        },
-        duplicateResponses: duplicateResponses,
-        key: r.id + i,
-        draggingElement: draggingElement,
-        onDrop: item => onAnswerSelect(item, r.index),
-        onDragAnswerBegin: onDragAnswerBegin,
-        onDragAnswerEnd: onDragAnswerEnd,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$3,
-          lineNumber: 41
-        }
-      });
-    }));
-  }
-}
-ImageContainer.propTypes = {
-  answers: PropTypes$3.array.isRequired,
-  canDrag: PropTypes$3.bool.isRequired,
-  classes: PropTypes$3.object,
-  draggingElement: PropTypes$3.shape({}).isRequired,
-  duplicateResponses: PropTypes$3.bool,
-  image: PropTypes$3.object.isRequired,
-  onAnswerSelect: PropTypes$3.func.isRequired,
-  onDragAnswerBegin: PropTypes$3.func.isRequired,
-  onDragAnswerEnd: PropTypes$3.func.isRequired,
-  responseContainers: PropTypes$3.array.isRequired
-};
-ImageContainer.defaultProps = {
-  classes: {},
-  duplicateResponses: false
-};
-const styles$3 = theme => ({
-  base: {
-    margin: theme.spacing.unit * 2,
-    position: 'relative'
-  }
-});
-var Image = withStyles$3(styles$3)(ImageContainer);
-const React$4 = _dll_react;
-const PropTypes$4 = _dll_prop_types;
-const {withStyles: withStyles$4} = _dll_material_ui__core;
-const {color: color$3} = _dll_pie_lib__render_ui;
-const _jsxFileName$4 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/interactive-section.jsx";
-class InteractiveSection extends React$4.Component {
-  getClassname() {
-    const {classes, responseCorrect} = this.props;
-    let styleProp;
-    switch (responseCorrect) {
-      case undefined:
-        styleProp = 'interactiveDefault';
-        break;
-      case true:
-        styleProp = 'interactiveCorrect';
-        break;
-      default:
-        styleProp = 'interactiveIncorrect';
-        break;
-    }
-    return classes[styleProp];
-  }
-  render() {
-    const {children, responseCorrect} = this.props;
-    const classname = this.getClassname();
-    const evaluationStyle = {
-      display: 'flex',
-      margin: '0 auto',
-      marginTop: -14
-    };
-    return React$4.createElement('div', {
-      className: classname,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 34
-      }
-    }, React$4.createElement(EvaluationIcon$1, {
-      containerStyle: evaluationStyle,
-      filled: true,
-      isCorrect: responseCorrect,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 35
-      }
-    }), children);
-  }
-}
-InteractiveSection.propTypes = {
-  classes: PropTypes$4.object,
-  children: PropTypes$4.oneOfType([PropTypes$4.element, PropTypes$4.array]).isRequired,
-  responseCorrect: PropTypes$4.oneOfType([PropTypes$4.bool, PropTypes$4.number])
-};
-InteractiveSection.defaultProps = {
-  classes: {},
-  responseCorrect: undefined
-};
-const styles$4 = () => ({
-  interactiveDefault: {
-    border: `1px solid ${color$3.disabled()}`
-  },
-  interactiveCorrect: {
-    border: `2px solid ${color$3.correct()}`
-  },
-  interactiveIncorrect: {
-    border: `2px solid ${color$3.incorrect()}`
-  }
-});
-var InteractiveSection$1 = withStyles$4(styles$4)(InteractiveSection);
-const React$5 = _dll_react;
-const PropTypes$5 = _dll_prop_types;
-const {DropTarget: DropTarget$1} = _dll_pie_lib__drag;
-const {withStyles: withStyles$5} = _dll_material_ui__core;
-const {color: color$4} = _dll_pie_lib__render_ui;
-const _jsxFileName$5 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/possible-responses.jsx";
-const PossibleResponses = ({canDrag, classes, connectDropTarget, data, isOverCurrent, onDragBegin, onDragEnd}) => connectDropTarget(React$5.createElement('div', {
-  className: `${classes.base} ${isOverCurrent ? classes.active : ''}`,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$5,
-    lineNumber: 13
-  }
-}, data.map(item => React$5.createElement(PossibleResponse$1, {
-  canDrag: canDrag,
-  key: item.id,
-  data: item,
-  onDragBegin: onDragBegin,
-  onDragEnd: onDragEnd,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$5,
-    lineNumber: 15
-  }
-}))));
-PossibleResponses.propTypes = {
-  canDrag: PropTypes$5.bool.isRequired,
-  classes: PropTypes$5.object,
-  data: PropTypes$5.array.isRequired,
-  onAnswerRemove: PropTypes$5.func.isRequired,
-  onDragBegin: PropTypes$5.func.isRequired,
-  onDragEnd: PropTypes$5.func.isRequired
-};
-PossibleResponses.defaultProps = {
-  classes: {}
-};
-const styles$5 = theme => ({
-  active: {
-    border: `1px solid ${color$4.primary()}`
-  },
-  base: {
-    backgroundColor: color$4.background(),
-    display: 'flex',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
-    padding: theme.spacing.unit * 2
-  }
-});
-const Styled$2 = withStyles$5(styles$5)(PossibleResponses);
-const tileSource$2 = {
-  hover(props, monitor) {
-    monitor.isOver({
-      shallow: true
-    });
-  },
-  drop(props, monitor) {
-    const item = monitor.getItem();
-    props.onAnswerRemove(item);
-  }
-};
-var PossibleResponses$1 = DropTarget$1(c.types.response, tileSource$2, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOverCurrent: monitor.isOver({
-    shallow: true
-  })
-}))(Styled$2);
-const getAllCorrectAnswers = (answers, responses) => answers.map(answer => ({
-  ...answer,
-  isCorrect: responses[answer.containerIndex].includes(answer.value)
-}));
-const getValidAnswer = (answer, response) => response[answer.containerIndex].filter(res => res === answer.value);
-const getUniqueCorrectAnswers = (answers, validResponses) => {
-  let finalAnswers = answers;
-  answers.forEach(answer1 => {
-    const valuesToParse = answers.filter(answer2 => answer2.value === answer1.value && answer2.containerIndex === answer1.containerIndex);
-    if (valuesToParse.length > 1) {
-      valuesToParse.shift();
-      valuesToParse.forEach((value, index) => {
-        finalAnswers = finalAnswers.map(finalAnswer => {
-          if (finalAnswer.id === value.id) {
-            let valid = getValidAnswer(finalAnswer, validResponses);
-            return {
-              ...finalAnswer,
-              isCorrect: valid.length > index + 1
-            };
-          }
-          return finalAnswer;
-        });
-      });
-    }
-  });
-  return finalAnswers;
-};
-const getAnswersCorrectness = (answers, validation) => {
-  const {validResponse: {value}, altResponses} = validation;
-  const allCorrect = getAllCorrectAnswers(answers, value);
-  const uniqueAnswers = getUniqueCorrectAnswers(allCorrect, value);
-  const noOfCorrect = uniqueAnswers.filter(answer => answer.isCorrect).length;
-  if (noOfCorrect < uniqueAnswers.length && (altResponses && altResponses.length)) {
-    const altUniqueStack = altResponses.map(altResponse => {
-      const altValue = altResponse.value;
-      const altAllCorrect = getAllCorrectAnswers(answers, altValue);
-      return getUniqueCorrectAnswers(altAllCorrect, altValue);
-    });
-    return altUniqueStack.sort((a, b) => b.filter(c => c.isCorrect).length - a.filter(c => c.isCorrect).length)[0];
-  }
-  return uniqueAnswers;
-};
-const React$6 = _dll_react;
-const PropTypes$6 = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withDragContext: withDragContext} = _dll_pie_lib__drag;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const _ = _dll_lodash;
-const _jsxFileName$6 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/image-cloze-association/src/root.jsx";
-const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
-class ImageClozeAssociationComponent extends React$6.Component {
-  constructor(props) {
-    super(props);
-    ImageClozeAssociationComponent.prototype.__init.call(this);
-    ImageClozeAssociationComponent.prototype.__init2.call(this);
-    ImageClozeAssociationComponent.prototype.__init3.call(this);
-    ImageClozeAssociationComponent.prototype.__init4.call(this);
-    const {model: {possibleResponses, responseContainers, duplicateResponses, maxResponsePerZone}, session} = props;
-    let {answers} = session || ({});
-    const possibleResponsesWithIds = (possibleResponses || []).map((item, index) => ({
-      value: item,
-      id: `${index}`
-    }));
-    answers = _(answers || []).groupBy('containerIndex').map(grp => grp.slice(-(maxResponsePerZone || 1))).flatMap().map((answer, index) => ({
-      ...answer,
-      id: `${index}`
-    })).filter(answer => answer.containerIndex < responseContainers.length).value();
-    const possibleResponsesFiltered = possibleResponsesWithIds.filter(response => !answers.find(answer => answer.value === response.value));
-    this.state = {
-      answers: answers || [],
-      draggingElement: {
-        id: '',
-        value: ''
-      },
-      possibleResponses: duplicateResponses ? possibleResponsesWithIds : possibleResponsesFiltered,
-      responseContainers: responseContainers.map((item, index) => ({
-        index,
-        ...item,
-        id: `${index}`
-      })),
-      maxResponsePerZone: maxResponsePerZone || 1
-    };
-  }
-  __init() {
-    this.beginDrag = draggingElement => {
-      this.setState({
-        draggingElement
-      });
-    };
-  }
-  __init2() {
-    this.handleOnDragEnd = () => {
-      this.setState({
-        draggingElement: {
-          id: '',
-          value: ''
-        }
-      });
-    };
-  }
-  __init3() {
-    this.handleOnAnswerSelect = (answer, responseContainerIndex) => {
-      const {model: {duplicateResponses}, updateAnswer} = this.props;
-      const {answers, possibleResponses, maxResponsePerZone} = this.state;
-      let answersToStore;
-      if (maxResponsePerZone === answers.filter(a => a.containerIndex === responseContainerIndex).length) {
-        const answersInThisContainer = answers.filter(a => a.containerIndex === responseContainerIndex);
-        const answersInOtherContainers = answers.filter(b => b.containerIndex !== responseContainerIndex);
-        const shiftedItem = answersInThisContainer[0];
-        answersInThisContainer.shift();
-        if (!duplicateResponses) {
-          possibleResponses.push({
-            ...shiftedItem,
-            containerIndex: '',
-            id: `${_.max(possibleResponses.map(c => parseInt(c.id)).filter(id => !isNaN(id))) + 1}`
-          });
-        }
-        answersToStore = [...answersInThisContainer, ...answersInOtherContainers.filter(a => duplicateResponses ? true : a.value !== answer.value), {
-          ...answer,
-          containerIndex: responseContainerIndex,
-          ...duplicateResponses ? {
-            id: generateId()
-          } : {}
-        }];
-      } else {
-        answersToStore = [...answers.filter(a => duplicateResponses ? true : a.value !== answer.value), {
-          ...answer,
-          containerIndex: responseContainerIndex,
-          ...duplicateResponses ? {
-            id: generateId()
-          } : {}
-        }];
-      }
-      this.setState({
-        answers: answersToStore,
-        possibleResponses: duplicateResponses ? possibleResponses : possibleResponses.filter(response => response.value !== answer.value)
-      });
-      updateAnswer(answersToStore);
-    };
-  }
-  __init4() {
-    this.handleOnAnswerRemove = answer => {
-      const {model: {duplicateResponses}, updateAnswer} = this.props;
-      const {answers, possibleResponses} = this.state;
-      const answersToStore = answers.filter(a => a.id !== answer.id);
-      const shouldNotPushInPossibleResponses = answer.containerIndex === undefined;
-      this.setState({
-        answers: answersToStore,
-        possibleResponses: duplicateResponses || shouldNotPushInPossibleResponses ? possibleResponses : [...possibleResponses, {
-          ...answer,
-          containerIndex: undefined
-        }]
-      });
-      updateAnswer(answersToStore);
-    };
-  }
-  render() {
-    const {model: {disabled, duplicateResponses, image, stimulus, responseCorrect, validation, teacherInstructions}} = this.props;
-    const {answers, draggingElement, possibleResponses, responseContainers} = this.state;
-    const answersToShow = responseCorrect !== undefined ? getAnswersCorrectness(answers, validation) : answers;
-    return React$6.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 217
-      }
-    }, teacherInstructions && React$6.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 219
-      }
-    }, React$6.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 225
-      }
-    })), React$6.createElement(Typography, {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 229
-      }
-    }, React$6.createElement('span', {
-      dangerouslySetInnerHTML: {
-        __html: stimulus
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 230
-      }
-    })), React$6.createElement(InteractiveSection$1, {
-      responseCorrect: responseCorrect,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 233
-      }
-    }, React$6.createElement(Image, {
-      canDrag: !disabled,
-      answers: answersToShow,
-      draggingElement: draggingElement,
-      duplicateResponses: duplicateResponses,
-      image: image,
-      onAnswerSelect: this.handleOnAnswerSelect,
-      onDragAnswerBegin: this.beginDrag,
-      onDragAnswerEnd: this.handleOnDragEnd,
-      responseContainers: responseContainers,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 234
-      }
-    }), React$6.createElement(PossibleResponses$1, {
-      canDrag: !disabled,
-      data: possibleResponses,
-      onAnswerRemove: this.handleOnAnswerRemove,
-      onDragBegin: this.beginDrag,
-      onDragEnd: this.handleOnDragEnd,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 246
-      }
-    })));
-  }
-}
-ImageClozeAssociationComponent.propTypes = {
-  classes: PropTypes$6.object,
-  model: PropTypes$6.object.isRequired,
-  session: PropTypes$6.object,
-  updateAnswer: PropTypes$6.func.isRequired
-};
-ImageClozeAssociationComponent.defaultProps = {
-  classes: {}
-};
-var ImageClozeAssociationComponent$1 = withDragContext(ImageClozeAssociationComponent);
-const React$7 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const {ModelSetEvent: ModelSetEvent} = _dll_pie_framework__pie_player_events;
-const {SessionChangedEvent: SessionChangedEvent} = _dll_pie_framework__pie_player_events;
-class ImageClozeAssociation extends HTMLElement {
-  set model(m) {
-    this._model = m;
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._render();
-  }
-  isComplete() {
-    if (!this._session) {
-      return false;
-    }
-    return Array.isArray(this._session.answers) && this._session.answers.length > 0;
-  }
-  set session(s) {
-    if (s && !s.answers) {
-      s.answers = [];
-    }
-    this._session = s;
-    this._render();
-  }
-  updateAnswer(data) {
-    this._session.answers = data;
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-    this._render();
-  }
-  connectedCallback() {
-    this._render();
-  }
-  _render() {
-    if (this._model && this._session) {
-      const el = React$7.createElement(ImageClozeAssociationComponent$1, {
-        model: this._model,
-        session: this._session,
-        updateAnswer: this.updateAnswer.bind(this)
-      });
-      ReactDOM.render(el, this, () => {
-        renderMath(this);
-      });
-    }
-  }
-}
-export default ImageClozeAssociation;