@pie-element/categorize 6.7.2 → 6.7.3-next.1008

package/module/element.js

@@ -1,1470 +0,0 @@
-import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_react_dnd, _dll_pie_lib__drag, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_lodash, _dll_pie_lib__correct_answer_toggle, _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 createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var w = d * 7;
-var y = d * 365.25;
-var ms = function (val, options) {
-  options = options || ({});
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isFinite(val)) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val));
-};
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = (/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i).exec(str);
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'weeks':
-    case 'week':
-    case 'w':
-      return n * w;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-function fmtShort(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (msAbs >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (msAbs >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (msAbs >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-function fmtLong(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return plural(ms, msAbs, d, 'day');
-  }
-  if (msAbs >= h) {
-    return plural(ms, msAbs, h, 'hour');
-  }
-  if (msAbs >= m) {
-    return plural(ms, msAbs, m, 'minute');
-  }
-  if (msAbs >= s) {
-    return plural(ms, msAbs, s, 'second');
-  }
-  return ms + ' ms';
-}
-function plural(ms, msAbs, n, name) {
-  var isPlural = msAbs >= n * 1.5;
-  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
-}
-function setup(env) {
-  createDebug.debug = createDebug;
-  createDebug.default = createDebug;
-  createDebug.coerce = coerce;
-  createDebug.disable = disable;
-  createDebug.enable = enable;
-  createDebug.enabled = enabled;
-  createDebug.humanize = ms;
-  createDebug.destroy = destroy;
-  Object.keys(env).forEach(key => {
-    createDebug[key] = env[key];
-  });
-  createDebug.names = [];
-  createDebug.skips = [];
-  createDebug.formatters = {};
-  function selectColor(namespace) {
-    let hash = 0;
-    for (let i = 0; i < namespace.length; i++) {
-      hash = (hash << 5) - hash + namespace.charCodeAt(i);
-      hash |= 0;
-    }
-    return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
-  }
-  createDebug.selectColor = selectColor;
-  function createDebug(namespace) {
-    let prevTime;
-    let enableOverride = null;
-    function debug(...args) {
-      if (!debug.enabled) {
-        return;
-      }
-      const self = debug;
-      const curr = Number(new Date());
-      const ms = curr - (prevTime || curr);
-      self.diff = ms;
-      self.prev = prevTime;
-      self.curr = curr;
-      prevTime = curr;
-      args[0] = createDebug.coerce(args[0]);
-      if (typeof args[0] !== 'string') {
-        args.unshift('%O');
-      }
-      let index = 0;
-      args[0] = args[0].replace(/%([a-zA-Z%])/g, (match, format) => {
-        if (match === '%%') {
-          return '%';
-        }
-        index++;
-        const formatter = createDebug.formatters[format];
-        if (typeof formatter === 'function') {
-          const val = args[index];
-          match = formatter.call(self, val);
-          args.splice(index, 1);
-          index--;
-        }
-        return match;
-      });
-      createDebug.formatArgs.call(self, args);
-      const logFn = self.log || createDebug.log;
-      logFn.apply(self, args);
-    }
-    debug.namespace = namespace;
-    debug.useColors = createDebug.useColors();
-    debug.color = createDebug.selectColor(namespace);
-    debug.extend = extend;
-    debug.destroy = createDebug.destroy;
-    Object.defineProperty(debug, 'enabled', {
-      enumerable: true,
-      configurable: false,
-      get: () => enableOverride === null ? createDebug.enabled(namespace) : enableOverride,
-      set: v => {
-        enableOverride = v;
-      }
-    });
-    if (typeof createDebug.init === 'function') {
-      createDebug.init(debug);
-    }
-    return debug;
-  }
-  function extend(namespace, delimiter) {
-    const newDebug = createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
-    newDebug.log = this.log;
-    return newDebug;
-  }
-  function enable(namespaces) {
-    createDebug.save(namespaces);
-    createDebug.names = [];
-    createDebug.skips = [];
-    let i;
-    const split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-    const len = split.length;
-    for (i = 0; i < len; i++) {
-      if (!split[i]) {
-        continue;
-      }
-      namespaces = split[i].replace(/\*/g, '.*?');
-      if (namespaces[0] === '-') {
-        createDebug.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-      } else {
-        createDebug.names.push(new RegExp('^' + namespaces + '$'));
-      }
-    }
-  }
-  function disable() {
-    const namespaces = [...createDebug.names.map(toNamespace), ...createDebug.skips.map(toNamespace).map(namespace => '-' + namespace)].join(',');
-    createDebug.enable('');
-    return namespaces;
-  }
-  function enabled(name) {
-    if (name[name.length - 1] === '*') {
-      return true;
-    }
-    let i;
-    let len;
-    for ((i = 0, len = createDebug.skips.length); i < len; i++) {
-      if (createDebug.skips[i].test(name)) {
-        return false;
-      }
-    }
-    for ((i = 0, len = createDebug.names.length); i < len; i++) {
-      if (createDebug.names[i].test(name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function toNamespace(regexp) {
-    return regexp.toString().substring(2, regexp.toString().length - 2).replace(/\.\*\?$/, '*');
-  }
-  function coerce(val) {
-    if (val instanceof Error) {
-      return val.stack || val.message;
-    }
-    return val;
-  }
-  function destroy() {
-    console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
-  }
-  createDebug.enable(createDebug.load());
-  return createDebug;
-}
-var common = setup;
-var browser = createCommonjsModule(function (module, exports) {
-  exports.formatArgs = formatArgs;
-  exports.save = save;
-  exports.load = load;
-  exports.useColors = useColors;
-  exports.storage = localstorage();
-  exports.destroy = (() => {
-    let warned = false;
-    return () => {
-      if (!warned) {
-        warned = true;
-        console.warn('Instance method `debug.destroy()` is deprecated and no longer does anything. It will be removed in the next major version of `debug`.');
-      }
-    };
-  })();
-  exports.colors = ['#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC', '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF', '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC', '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF', '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC', '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033', '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366', '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933', '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC', '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF', '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'];
-  function useColors() {
-    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
-      return true;
-    }
-    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-      return false;
-    }
-    return typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || typeof window !== 'undefined' && window.console && (window.console.firebug || window.console.exception && window.console.table) || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
-  }
-  function formatArgs(args) {
-    args[0] = (this.useColors ? '%c' : '') + this.namespace + (this.useColors ? ' %c' : ' ') + args[0] + (this.useColors ? '%c ' : ' ') + '+' + module.exports.humanize(this.diff);
-    if (!this.useColors) {
-      return;
-    }
-    const c = 'color: ' + this.color;
-    args.splice(1, 0, c, 'color: inherit');
-    let index = 0;
-    let lastC = 0;
-    args[0].replace(/%[a-zA-Z%]/g, match => {
-      if (match === '%%') {
-        return;
-      }
-      index++;
-      if (match === '%c') {
-        lastC = index;
-      }
-    });
-    args.splice(lastC, 0, c);
-  }
-  exports.log = console.debug || console.log || (() => {});
-  function save(namespaces) {
-    try {
-      if (namespaces) {
-        exports.storage.setItem('debug', namespaces);
-      } else {
-        exports.storage.removeItem('debug');
-      }
-    } catch (error) {}
-  }
-  function load() {
-    let r;
-    try {
-      r = exports.storage.getItem('debug');
-    } catch (error) {}
-    if (!r && typeof process !== 'undefined' && ('env' in process)) {
-      r = process.env.DEBUG;
-    }
-    return r;
-  }
-  function localstorage() {
-    try {
-      return localStorage;
-    } catch (error) {}
-  }
-  module.exports = common(exports);
-  const {formatters} = module.exports;
-  formatters.j = function (v) {
-    try {
-      return JSON.stringify(v);
-    } catch (error) {
-      return '[UnexpectedJSONParseError]: ' + error.message;
-    }
-  };
-});
-browser.formatArgs;
-browser.save;
-browser.load;
-browser.useColors;
-browser.storage;
-browser.destroy;
-browser.colors;
-browser.log;
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {DragSource: DragSource} = _dll_react_dnd;
-const {uid: uid} = _dll_pie_lib__drag;
-const {Card: Card} = _dll_material_ui__core;
-const {CardContent: CardContent} = _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/categorize/src/categorize/choice.jsx";
-const log = browser('@pie-ui:categorize:choice');
-const ChoiceType = {
-  content: PropTypes.string.isRequired,
-  id: PropTypes.string
-};
-class Layout extends React.Component {
-  static __initStatic() {
-    this.propTypes = {
-      ...ChoiceType,
-      classes: PropTypes.object.isRequired,
-      className: PropTypes.string,
-      disabled: PropTypes.bool,
-      correct: PropTypes.bool
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {};
-  }
-  render() {
-    const {classes, className, content, isDragging, disabled, correct} = this.props;
-    const rootNames = classnames(correct === true && 'correct', correct === false && 'incorrect', classes.choice, isDragging && classes.dragging, disabled && classes.disabled, className);
-    const cardNames = classnames(classes.card);
-    return React.createElement('div', {
-      className: rootNames,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 48
-      }
-    }, React.createElement(Card, {
-      className: cardNames,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 49
-      }
-    }, React.createElement(CardContent, {
-      classes: {
-        root: classes.cardRoot
-      },
-      dangerouslySetInnerHTML: {
-        __html: content
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 50
-      }
-    })));
-  }
-}
-Layout.__initStatic();
-Layout.__initStatic2();
-const styles = () => ({
-  choice: {
-    cursor: 'pointer',
-    height: '100%',
-    width: '100%',
-    '&.correct': {
-      border: `solid 2px ${color.correct()}`
-    },
-    '&.incorrect': {
-      border: `solid 2px ${color.incorrect()}`
-    }
-  },
-  cardRoot: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    border: '1px solid'
-  },
-  disabled: {
-    cursor: 'not-allowed',
-    opacity: '0.6'
-  },
-  dragging: {
-    cursor: 'move'
-  },
-  card: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    width: '100%'
-  }
-});
-const Styled = withStyles(styles)(Layout);
-class Choice extends React.Component {
-  static __initStatic3() {
-    this.propTypes = {
-      ...ChoiceType,
-      connectDragSource: PropTypes.func.isRequired
-    };
-  }
-  render() {
-    const {connectDragSource, id, content, disabled, isDragging, correct} = this.props;
-    return connectDragSource(React.createElement('div', {
-      style: {
-        width: '100%',
-        height: 'max-content'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 106
-      }
-    }, React.createElement(Styled, {
-      id: id,
-      content: content,
-      disabled: disabled,
-      correct: correct,
-      isDragging: isDragging,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 107
-      }
-    })));
-  }
-}
-Choice.__initStatic3();
-const spec = {
-  canDrag: props => !props.disabled,
-  beginDrag: props => {
-    const out = {
-      id: props.id,
-      categoryId: props.categoryId,
-      choiceIndex: props.choiceIndex
-    };
-    log('[beginDrag] out:', out);
-    return out;
-  },
-  endDrag: (props, monitor) => {
-    if (!monitor.didDrop()) {
-      const item = monitor.getItem();
-      if (item.categoryId) {
-        log('wasnt droppped - what to do?');
-        props.onRemoveChoice(item);
-      }
-    }
-  }
-};
-const DraggableChoice = DragSource(({uid}) => uid, spec, (connect, monitor) => ({
-  connectDragSource: connect.dragSource(),
-  isDragging: monitor.isDragging()
-}))(Choice);
-var Choice$1 = uid.withUid(DraggableChoice);
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/grid-content.jsx";
-class GridContent extends React$1.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$1.object.isRequired,
-      className: PropTypes$1.string,
-      children: PropTypes$1.oneOfType([PropTypes$1.arrayOf(PropTypes$1.node), PropTypes$1.node]).isRequired,
-      columns: PropTypes$1.number,
-      rows: PropTypes$1.number,
-      extraStyle: PropTypes$1.object
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      columns: 2,
-      rows: 2
-    };
-  }
-  render() {
-    const {classes, className, children, columns, extraStyle, rows} = this.props;
-    const style = {
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      gridTemplateRows: `repeat(${rows}, auto)`,
-      ...extraStyle
-    };
-    return React$1.createElement('div', {
-      style: style,
-      className: classnames(classes.gridContent, className),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 32
-      }
-    }, children);
-  }
-}
-GridContent.__initStatic();
-GridContent.__initStatic2();
-const styles$1 = theme => ({
-  gridContent: {
-    display: 'grid',
-    columnGap: `${theme.spacing.unit}px`,
-    gridColumnGap: `${theme.spacing.unit}px`,
-    rowGap: `${theme.spacing.unit}px`,
-    gridRowGap: `${theme.spacing.unit}px`,
-    gridAutoRows: '1fr'
-  }
-});
-var GridContent$1 = withStyles$1(styles$1)(GridContent);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/choices.jsx";
-const Blank = () => React$2.createElement('div', {
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 8
-  }
-});
-class Choices extends React$2.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$2.object.isRequired,
-      choices: PropTypes$2.arrayOf(PropTypes$2.oneOfType([PropTypes$2.shape(ChoiceType), PropTypes$2.shape({
-        empty: PropTypes$2.bool
-      })])),
-      model: PropTypes$2.shape({
-        choicesPerRow: PropTypes$2.number,
-        choicesLabel: PropTypes$2.string
-      }),
-      disabled: PropTypes$2.bool,
-      choicePosition: PropTypes$2.string
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      model: {
-        choicesPerRow: 4,
-        choicesLabel: ''
-      }
-    };
-  }
-  render() {
-    const {classes, choices = [], model, disabled, choicePosition} = this.props;
-    let style = {
-      textAlign: 'center'
-    };
-    if (choicePosition === 'left') {
-      style.direction = 'rtl';
-    }
-    return React$2.createElement('div', {
-      className: classes.wrapper,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 51
-      }
-    }, model.choicesLabel && model.choicesLabel !== '' && React$2.createElement('div', {
-      className: classes.labelHolder,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 53
-      }
-    }, model.choicesLabel), React$2.createElement(GridContent$1, {
-      columns: model.choicesPerRow,
-      className: classes.choices,
-      extraStyle: style,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 55
-      }
-    }, choices.map((c, index) => {
-      return c.empty ? React$2.createElement(Blank, {
-        key: index,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 62
-        }
-      }) : React$2.createElement(Choice$1, {
-        disabled: disabled,
-        className: classes.choice,
-        key: index,
-        ...c,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 64
-        }
-      });
-    })));
-  }
-}
-Choices.__initStatic();
-Choices.__initStatic2();
-const styles$2 = theme => ({
-  wrapper: {
-    flex: 1,
-    padding: theme.spacing.unit
-  },
-  choices: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit
-  },
-  labelHolder: {
-    margin: '0 auto',
-    textAlign: 'center',
-    paddingTop: theme.spacing.unit
-  }
-});
-var Choices$1 = withStyles$2(styles$2)(Choices);
-const React$3 = _dll_react;
-const {PlaceHolder: PlaceHolder} = _dll_pie_lib__drag;
-const {uid: uid$1} = _dll_pie_lib__drag;
-const PropTypes$3 = _dll_prop_types;
-const {DropTarget: DropTarget} = _dll_react_dnd;
-const _jsxFileName$3 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/droppable-placeholder.jsx";
-const log$1 = browser('@pie-ui:categorize:droppable-placeholder');
-class DroppablePlaceholder extends React$3.Component {
-  static __initStatic() {
-    this.propTypes = {
-      connectDropTarget: PropTypes$3.func.isRequired,
-      isOver: PropTypes$3.bool,
-      children: PropTypes$3.oneOfType([PropTypes$3.arrayOf(PropTypes$3.node), PropTypes$3.node]).isRequired,
-      className: PropTypes$3.string,
-      grid: PropTypes$3.object,
-      disabled: PropTypes$3.bool
-    };
-  }
-  render() {
-    const {children, connectDropTarget, isOver, className, grid, disabled} = this.props;
-    return connectDropTarget(React$3.createElement('div', {
-      style: {
-        flex: 1
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 33
-      }
-    }, React$3.createElement(PlaceHolder, {
-      className: className,
-      isOver: isOver,
-      grid: grid,
-      disabled: disabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 34
-      }
-    }, children)));
-  }
-}
-DroppablePlaceholder.__initStatic();
-const spec$1 = {
-  drop: (props, monitor) => {
-    log$1('[drop] props: ', props);
-    const item = monitor.getItem();
-    props.onDropChoice(item);
-  },
-  canDrop: props => {
-    return !props.disabled;
-  }
-};
-const WithTarget = DropTarget(({uid}) => uid, spec$1, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver()
-}))(DroppablePlaceholder);
-var PlaceHolder$1 = uid$1.withUid(WithTarget);
-const React$4 = _dll_react;
-const PropTypes$4 = _dll_prop_types;
-const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
-const {color: color$1} = _dll_pie_lib__render_ui;
-const _jsxFileName$4 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/category.jsx";
-const CategoryType = {
-  id: PropTypes$4.string.isRequired,
-  categoryId: PropTypes$4.string
-};
-class Category extends React$4.Component {
-  static __initStatic() {
-    this.propTypes = {
-      ...CategoryType,
-      className: PropTypes$4.string,
-      disabled: PropTypes$4.bool,
-      classes: PropTypes$4.object.isRequired,
-      onDropChoice: PropTypes$4.func,
-      onRemoveChoice: PropTypes$4.func
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {};
-  }
-  render() {
-    const {classes, className, choices = [], disabled, onDropChoice, onRemoveChoice, grid, id, correct} = this.props;
-    const names = classnames(classes.category, className);
-    const placeholderNames = classnames(classes.placeholder, correct === false && classes.incorrect);
-    return React$4.createElement('div', {
-      className: names,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 47
-      }
-    }, React$4.createElement(PlaceHolder$1, {
-      grid: {
-        ...grid,
-        rowsRepeatValue: 'minmax(60px, auto)'
-      },
-      onDropChoice: onDropChoice,
-      disabled: disabled,
-      className: placeholderNames,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 48
-      }
-    }, choices.map((c, index) => React$4.createElement(Choice$1, {
-      onRemoveChoice: onRemoveChoice,
-      disabled: disabled,
-      key: index,
-      choiceIndex: index,
-      categoryId: id,
-      ...c,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 58
-      }
-    }))));
-  }
-}
-Category.__initStatic();
-Category.__initStatic2();
-const styles$3 = () => ({
-  incorrect: {
-    border: `solid 2px ${color$1.incorrect()}`
-  },
-  placeholder: {
-    minHeight: '60px',
-    flex: '1',
-    display: 'grid'
-  },
-  category: {
-    display: 'flex',
-    flexDirection: 'column'
-  }
-});
-var Category$1 = withStyles$3(styles$3)(Category);
-const React$5 = _dll_react;
-const PropTypes$5 = _dll_prop_types;
-const {withStyles: withStyles$4} = _dll_material_ui__core_styles;
-const {Typography: Typography} = _dll_material_ui__core;
-const {color: color$2} = _dll_pie_lib__render_ui;
-const {chunk: chunk} = _dll_lodash;
-const _jsxFileName$5 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/categories.jsx";
-class Categories extends React$5.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$5.object.isRequired,
-      categories: PropTypes$5.arrayOf(PropTypes$5.shape(CategoryType)),
-      model: PropTypes$5.shape({
-        categoriesPerRow: PropTypes$5.number,
-        choicesPerRow: PropTypes$5.number
-      }),
-      disabled: PropTypes$5.bool,
-      onDropChoice: PropTypes$5.func.isRequired,
-      onRemoveChoice: PropTypes$5.func.isRequired
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      model: {
-        categoriesPerRow: 1,
-        choicesPerRow: 1
-      }
-    };
-  }
-  render() {
-    const {classes, categories, model, disabled, onDropChoice, onRemoveChoice} = this.props;
-    const {choicesPerRow, categoriesPerRow} = model;
-    const columns = choicesPerRow / categoriesPerRow;
-    const chunkedCategories = chunk(categories, categoriesPerRow);
-    return React$5.createElement(GridContent$1, {
-      columns: categoriesPerRow,
-      className: classes.categories,
-      rows: Math.ceil(categories.length / categoriesPerRow) * 2,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$5,
-        lineNumber: 52
-      }
-    }, chunkedCategories.map(cat => {
-      let items = [];
-      cat.forEach(c => {
-        items.push(React$5.createElement(Typography, {
-          className: classes.label,
-          key: `category-label-${c.label}`,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 64
-          }
-        }, React$5.createElement('span', {
-          dangerouslySetInnerHTML: {
-            __html: c.label
-          },
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 65
-          }
-        })));
-      });
-      items = items.concat(Array(categoriesPerRow - cat.length).fill(React$5.createElement('div', {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$5,
-          lineNumber: 70
-        }
-      })));
-      cat.forEach((c, index) => {
-        const rows = Math.floor(c.choices.length / columns) + 1;
-        items.push(React$5.createElement(Category$1, {
-          grid: {
-            rows,
-            columns
-          },
-          onDropChoice: h => onDropChoice(c.id, h),
-          onRemoveChoice: onRemoveChoice,
-          disabled: disabled,
-          className: classes.category,
-          key: index,
-          ...c,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$5,
-            lineNumber: 76
-          }
-        }));
-      });
-      items = items.concat(Array(categoriesPerRow - cat.length).fill(React$5.createElement('div', {
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$5,
-          lineNumber: 88
-        }
-      })));
-      return items;
-    }));
-  }
-}
-Categories.__initStatic();
-Categories.__initStatic2();
-const styles$4 = theme => ({
-  categories: {
-    flex: 1
-  },
-  label: {
-    color: color$2.text(),
-    backgroundColor: color$2.background(),
-    textAlign: 'center',
-    paddingTop: theme.spacing.unit
-  }
-});
-var Categories$1 = withStyles$4(styles$4)(Categories);
-browser('@pie-lib:categorize:scoring');
-const {clone: clone} = _dll_lodash;
-const log$2 = browser('@pie-lib:categorize');
-const countChosen = (choice, categories) => {
-  if (!choice || !choice.id) {
-    return 0;
-  }
-  if (!Array.isArray(categories)) {
-    return 0;
-  }
-  return categories.reduce((acc, c) => {
-    const count = (c.choices || []).filter(h => h.id === choice.id).length;
-    return acc + count;
-  }, 0);
-};
-const removeChoiceFromCategory = (choiceId, categoryId, choiceIndex, answers) => {
-  log$2('[removeChoiceFromCategory] choiceIndex:', choiceIndex);
-  return answers.map(a => {
-    if (a.category === categoryId) {
-      const cloned = clone(a.choices);
-      const index = cloned.findIndex((v, index) => {
-        return v === choiceId && index >= choiceIndex;
-      });
-      if (index !== -1) {
-        cloned.splice(index, 1);
-      }
-      return {
-        ...a,
-        choices: cloned
-      };
-    } else {
-      return a;
-    }
-  });
-};
-const moveChoiceToCategory = (choiceId, from, to, choiceIndex, answers) => {
-  log$2('[moveChoiceToCategory] choice: ', choiceId, 'from: ', from, 'to: ', to, 'answers: ', answers);
-  if (from === to) {
-    return answers;
-  }
-  if (from) {
-    answers = removeChoiceFromCategory(choiceId, from, choiceIndex, answers);
-  }
-  const index = answers.findIndex(a => a.category === to);
-  if (index === -1) {
-    answers.push({
-      category: to,
-      choices: [choiceId]
-    });
-    return answers;
-  } else {
-    return answers.map(a => {
-      if (a.category === to) {
-        a.choices = a.choices || [];
-        a.choices.push(choiceId);
-        return a;
-      }
-      return a;
-    });
-  }
-};
-const stillSelectable = (h, builtCategories) => {
-  if (h.categoryCount > 0) {
-    const count = countChosen(h, builtCategories);
-    return count < h.categoryCount;
-  } else {
-    return true;
-  }
-};
-const buildChoices = (possibleResponseChoices, builtCategoryChoices) => {
-  return builtCategoryChoices.reduce((acc, builtChoice) => {
-    const index = acc.copyOfPossibleResponse.findIndex(cRC => cRC === builtChoice.id);
-    if (index >= 0) {
-      acc.builtChoices.push({
-        ...builtChoice,
-        correct: true
-      });
-      acc.copyOfPossibleResponse = [...acc.copyOfPossibleResponse.slice(0, index), ...acc.copyOfPossibleResponse.slice(index + 1)];
-    } else {
-      acc.builtChoices.push({
-        ...builtChoice,
-        correct: false
-      });
-      acc.allChoicesAreCorrect = false;
-    }
-    return acc;
-  }, {
-    builtChoices: [],
-    copyOfPossibleResponse: [...possibleResponseChoices],
-    allChoicesAreCorrect: true
-  });
-};
-const getBuiltCategories = (possibleResponse, builtCategories) => builtCategories.reduce((acc, builtCategory) => {
-  const possibleResponseChoices = possibleResponse[builtCategory.id] || [];
-  const builtCategoryChoices = builtCategory.choices || [];
-  const {builtChoices, allChoicesAreCorrect} = buildChoices(possibleResponseChoices, builtCategoryChoices);
-  const allChoicesAreInAnswer = builtCategoryChoices.length === possibleResponseChoices.length;
-  acc.builtCategories.push({
-    ...builtCategory,
-    correct: allChoicesAreCorrect && allChoicesAreInAnswer,
-    choices: builtChoices
-  });
-  acc.correct = acc.correct && allChoicesAreCorrect && allChoicesAreInAnswer;
-  return acc;
-}, {
-  builtCategories: [],
-  correct: true
-});
-const getAllPossibleResponses = correctResponse => {
-  if (!correctResponse) {
-    return [];
-  }
-  return correctResponse.reduce((acc, cR) => {
-    if (acc[0]) {
-      acc[0][cR.category] = cR.choices;
-    } else {
-      acc.push({
-        [cR.category]: cR.choices
-      });
-    }
-    if (cR.alternateResponses) {
-      cR.alternateResponses.forEach((aR, index) => {
-        if (acc[index + 1]) {
-          acc[index + 1][cR.category] = aR;
-        } else {
-          acc.push({
-            [cR.category]: aR
-          });
-        }
-      });
-    }
-    return acc;
-  }, []);
-};
-const buildCategories = (categories, choices, answers) => {
-  categories = categories || [];
-  answers = answers || [];
-  choices = choices || [];
-  return categories.map(category => {
-    const answer = answers.find(answer => answer.category === category.id);
-    const {choices: answerChoices = []} = answer || ({});
-    return {
-      ...category,
-      choices: answerChoices.map(chId => choices.find(ch => ch.id === chId))
-    };
-  });
-};
-const buildState = (categories, choices, answers, correctResponse) => {
-  categories = categories || [];
-  choices = choices || [];
-  answers = answers || [];
-  const allResponses = getAllPossibleResponses(correctResponse) || [];
-  let builtCategories = buildCategories(categories, choices, answers);
-  let bestResponse;
-  let entirelyCorrect;
-  if (allResponses.length) {
-    const builtData = allResponses.reduce((acc, possibleResponse) => {
-      const {builtCategories: categoriesWithChoices, correct} = getBuiltCategories(possibleResponse, builtCategories);
-      if (acc.bestResponse === null || !acc.entirelyCorrect && correct) {
-        return {
-          bestResponse: possibleResponse,
-          builtCategories: categoriesWithChoices,
-          entirelyCorrect: correct
-        };
-      }
-      return acc;
-    }, {
-      bestResponse: null,
-      builtCategories: [],
-      entirelyCorrect: false
-    });
-    builtCategories = builtData.builtCategories;
-    bestResponse = builtData.bestResponse;
-    entirelyCorrect = builtData.entirelyCorrect;
-  }
-  const filteredChoices = choices.map(ch => stillSelectable(ch, builtCategories) ? ch : {
-    empty: true
-  });
-  return {
-    choices: filteredChoices,
-    categories: builtCategories,
-    correct: entirelyCorrect,
-    bestResponse
-  };
-};
-const React$6 = _dll_react;
-const PropTypes$6 = _dll_prop_types;
-const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
-const {withStyles: withStyles$5} = _dll_material_ui__core_styles;
-const {withDragContext: withDragContext} = _dll_pie_lib__drag;
-const {uid: uid$2} = _dll_pie_lib__drag;
-const {color: color$3} = _dll_pie_lib__render_ui;
-const {Feedback: Feedback} = _dll_pie_lib__render_ui;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const {hasText: hasText} = _dll_pie_lib__render_ui;
-const _jsxFileName$6 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/categorize/src/categorize/index.jsx";
-const log$3 = browser('@pie-ui:categorize');
-const removeHTMLTags = html => {
-  const tmp = document.createElement('DIV');
-  tmp.innerHTML = html;
-  const value = tmp.textContent || tmp.innerText || '';
-  return value.trim();
-};
-class Categorize extends React$6.Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$6.object.isRequired,
-      model: PropTypes$6.object,
-      session: PropTypes$6.shape({
-        answers: PropTypes$6.arrayOf(PropTypes$6.shape({
-          choice: PropTypes$6.string,
-          category: PropTypes$6.string
-        }))
-      }),
-      onAnswersChange: PropTypes$6.func.isRequired,
-      onShowCorrectToggle: PropTypes$6.func.isRequired
-    };
-  }
-  static __initStatic2() {
-    this.defaultProps = {
-      disabled: false
-    };
-  }
-  constructor(props) {
-    super(props);
-    Categorize.prototype.__init.call(this);
-    Categorize.prototype.__init2.call(this);
-    Categorize.prototype.__init3.call(this);
-    Categorize.prototype.__init4.call(this);
-    this.state = {
-      showCorrect: false
-    };
-  }
-  __init() {
-    this.dropChoice = (categoryId, draggedChoice) => {
-      const {session, onAnswersChange} = this.props;
-      log$3('[dropChoice] category: ', draggedChoice.categoryId, 'choice: ', draggedChoice);
-      const answers = moveChoiceToCategory(draggedChoice.id, draggedChoice.categoryId, categoryId, draggedChoice.choiceIndex, session.answers);
-      onAnswersChange(answers);
-    };
-  }
-  __init2() {
-    this.removeChoice = c => {
-      log$3('[removeChoice]: ', c);
-      const {onAnswersChange, session} = this.props;
-      const answers = removeChoiceFromCategory(c.id, c.categoryId, c.choiceIndex, session.answers);
-      onAnswersChange(answers);
-    };
-  }
-  UNSAFE_componentWillReceiveProps() {
-    this.setState({
-      showCorrect: false
-    });
-  }
-  __init3() {
-    this.toggleShowCorrect = () => this.setState({
-      showCorrect: !this.state.showCorrect
-    }, () => {
-      this.props.onShowCorrectToggle();
-    });
-  }
-  __init4() {
-    this.getPositionDirection = choicePosition => {
-      let flexDirection;
-      switch (choicePosition) {
-        case 'left':
-          flexDirection = 'row-reverse';
-          break;
-        case 'right':
-          flexDirection = 'row';
-          break;
-        case 'below':
-          flexDirection = 'column';
-          break;
-        default:
-          flexDirection = 'column-reverse';
-          break;
-      }
-      return flexDirection;
-    };
-  }
-  render() {
-    const {classes, model, session} = this.props;
-    const {showCorrect} = this.state;
-    const {choicesPosition} = model;
-    const choicePosition = choicesPosition || 'above';
-    const style = {
-      flexDirection: this.getPositionDirection(choicePosition)
-    };
-    const {categories, choices, correct} = buildState(model.categories, model.choices, showCorrect ? model.correctResponse : session.answers, model.correctResponse);
-    log$3('[render] disabled: ', model.disabled);
-    const {rowLabels} = model;
-    return React$6.createElement('div', {
-      className: classes.mainContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 142
-      }
-    }, model.teacherInstructions && hasText(model.teacherInstructions) && React$6.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 145
-      }
-    }, React$6.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: model.teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 149
-      }
-    })), React$6.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 153
-      }
-    }), React$6.createElement(CorrectAnswerToggle, {
-      show: showCorrect || correct === false,
-      toggled: showCorrect,
-      onToggle: this.toggleShowCorrect,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 154
-      }
-    }), removeHTMLTags(model.prompt) && React$6.createElement('div', {
-      className: classes.prompt,
-      dangerouslySetInnerHTML: {
-        __html: model.prompt
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 161
-      }
-    }), React$6.createElement('div', {
-      className: classes.categorize,
-      style: style,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 166
-      }
-    }, React$6.createElement('div', {
-      style: {
-        display: 'flex'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 167
-      }
-    }, rowLabels && React$6.createElement('div', {
-      style: {
-        display: 'grid',
-        marginRight: '20px'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 170
-      }
-    }, rowLabels.map((label, index) => React$6.createElement('div', {
-      key: index,
-      style: {
-        alignItems: 'center',
-        display: 'flex',
-        justifyContent: 'center'
-      },
-      dangerouslySetInnerHTML: {
-        __html: label
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 172
-      }
-    }))), React$6.createElement(Categories$1, {
-      model: model,
-      disabled: model.disabled,
-      categories: categories,
-      onDropChoice: this.dropChoice,
-      onRemoveChoice: this.removeChoice,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 187
-      }
-    })), React$6.createElement(Choices$1, {
-      disabled: model.disabled,
-      model: model,
-      choices: choices,
-      choicePosition: choicePosition,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 195
-      }
-    })), model.rationale && hasText(model.rationale) && React$6.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Rationale',
-        visible: 'Hide Rationale'
-      },
-      className: classes.collapsible,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 204
-      }
-    }, React$6.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: model.rationale
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 208
-      }
-    })), model.correctness && model.feedback && !showCorrect && React$6.createElement(Feedback, {
-      correctness: model.correctness,
-      feedback: model.feedback,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 216
-      }
-    }));
-  }
-}
-Categorize.__initStatic();
-Categorize.__initStatic2();
-class CategorizeProvider extends React$6.Component {
-  constructor(props) {
-    super(props);
-    this.uid = uid$2.generateId();
-  }
-  render() {
-    return React$6.createElement(uid$2.Provider, {
-      value: this.uid,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 235
-      }
-    }, React$6.createElement(Categorize, {
-      ...this.props,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 236
-      }
-    }));
-  }
-}
-const styles$5 = theme => ({
-  mainContainer: {
-    padding: theme.spacing.unit,
-    color: color$3.text(),
-    backgroundColor: color$3.background()
-  },
-  prompt: {
-    marginBottom: '35px',
-    verticalAlign: 'middle'
-  },
-  categorize: {
-    marginBottom: theme.spacing.unit,
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  collapsible: {
-    paddingBottom: theme.spacing.unit * 2
-  }
-});
-var CategorizeComponent = withDragContext(withStyles$5(styles$5)(CategorizeProvider));
-const React$7 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const {SessionChangedEvent: SessionChangedEvent} = _dll_pie_framework__pie_player_events;
-const {ModelSetEvent: ModelSetEvent} = _dll_pie_framework__pie_player_events;
-class Categorize$1 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();
-  }
-  changeAnswers(answers) {
-    this._session.answers = answers;
-    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-    this.render();
-  }
-  onShowCorrectToggle() {
-    renderMath(this);
-  }
-  render() {
-    if (this._model && this._session) {
-      const el = React$7.createElement(CategorizeComponent, {
-        model: this._model,
-        session: this._session,
-        onAnswersChange: this.changeAnswers.bind(this),
-        onShowCorrectToggle: this.onShowCorrectToggle.bind(this)
-      });
-      ReactDOM.render(el, this, () => {
-        renderMath(this);
-      });
-    }
-  }
-}
-export default Categorize$1;