@pie-element/match 10.0.1-next.0 → 10.0.2-esm.0

package/esm/element.js

@@ -0,0 +1,472 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
+import { color, hasText, hasMedia, UiLayout, Collapsible, PreviewPrompt, Feedback } from '@pie-lib/render-ui';
+import cx from 'classnames';
+import Radio from '@material-ui/core/Radio';
+import Checkbox from '@material-ui/core/Checkbox';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
+import { SessionChangedEvent } from '@pie-framework/pie-player-events';
+import { renderMath } from '@pie-lib/math-rendering';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+class AnswerGrid extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onRowValueChange = (rowId, answerIndex) => event => {
+      const {
+        onAnswerChange,
+        choiceMode,
+        answers
+      } = this.props;
+
+      const newAnswers = _extends({}, answers);
+
+      if (choiceMode === 'radio') {
+        for (let i = 0; i < newAnswers[rowId].length; i++) {
+          newAnswers[rowId][i] = false;
+        }
+      }
+
+      newAnswers[rowId][answerIndex] = event.target.checked;
+      onAnswerChange(newAnswers);
+    };
+
+    this.answerIsCorrect = (rowId, rowValue, rowValueIndex) => {
+      const {
+        correctAnswers
+      } = this.props;
+      return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;
+    };
+
+    this.answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {
+      const {
+        correctAnswers
+      } = this.props;
+      return correctAnswers[rowId][rowValueIndex] === true && rowValue === false || correctAnswers[rowId][rowValueIndex] === false && rowValue === true;
+    };
+  }
+
+  render() {
+    const {
+      classes,
+      showCorrect,
+      headers,
+      rows,
+      choiceMode,
+      answers,
+      disabled,
+      view
+    } = this.props;
+    const Tag = choiceMode === 'radio' ? Radio : Checkbox;
+    const evaluate = disabled && !view;
+
+    if (!rows || rows.length === 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: classes.controlsContainer
+      }, /*#__PURE__*/React.createElement(Typography, {
+        className: classes.empty,
+        component: "div"
+      }, "There are currently no questions to show."));
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.controlsContainer
+    }, /*#__PURE__*/React.createElement("table", {
+      className: classes.table
+    }, /*#__PURE__*/React.createElement("colgroup", null, (headers || []).map((header, idx) => /*#__PURE__*/React.createElement("col", {
+      key: `col-${idx}`
+    }))), /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, (headers || []).map((header, idx) => /*#__PURE__*/React.createElement("th", {
+      className: classes.rowHeader,
+      key: `th-${idx}`,
+      "data-colno": `${idx}`,
+      scope: "row"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(classes.rowItem, {
+        [classes.questionText]: idx === 0
+      }),
+      dangerouslySetInnerHTML: {
+        __html: header
+      }
+    }))))), (rows || []).map((row, idx) => /*#__PURE__*/React.createElement("tbody", {
+      key: `row-${idx}`,
+      role: "group"
+    }, /*#__PURE__*/React.createElement("tr", {
+      className: classes.separator
+    }, /*#__PURE__*/React.createElement("td", {
+      key: `td-title-${idx}`,
+      "data-colno": '0'
+    }, /*#__PURE__*/React.createElement("div", {
+      className: cx(classes.rowItem, classes.questionText),
+      dangerouslySetInnerHTML: {
+        __html: row.title
+      }
+    })), (answers[row.id] || []).map((rowItem, answerIndex) => /*#__PURE__*/React.createElement("td", {
+      key: `td-${idx}-${answerIndex}`,
+      className: classes.column,
+      "data-colno": `${answerIndex + 1}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classes.rowItem
+    }, /*#__PURE__*/React.createElement(Tag, {
+      className: cx(classes.tag, {
+        [classes.correct]: showCorrect && rowItem === true || evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex),
+        [classes.checked]: rowItem === true && !evaluate,
+        [classes.tagDisabled]: disabled,
+        [classes.incorrect]: evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex)
+      }),
+      disabled: disabled,
+      onChange: this.onRowValueChange(row.id, answerIndex),
+      checked: rowItem === true
+    })))))))));
+  }
+
+}
+AnswerGrid.propTypes = {
+  classes: PropTypes.object.isRequired,
+  correctAnswers: PropTypes.object,
+  view: PropTypes.bool.isRequired,
+  showCorrect: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  onAnswerChange: PropTypes.func.isRequired,
+  choiceMode: PropTypes.string.isRequired,
+  rows: PropTypes.array.isRequired,
+  headers: PropTypes.array.isRequired,
+  answers: PropTypes.object.isRequired
+};
+
+const styles$1 = theme => ({
+  controlsContainer: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit
+  },
+  column: {
+    padding: '5px 0'
+  },
+  correct: {
+    color: `${color.correct()} !important`
+  },
+  incorrect: {
+    color: `${color.incorrect()} !important`
+  },
+  empty: {
+    margin: theme.spacing.unit * 2
+  },
+  rowContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  rowHeader: {
+    padding: 0
+  },
+  rowItem: {
+    padding: theme.spacing.unit * 1.5,
+    textAlign: 'center'
+  },
+  separator: {
+    border: 0,
+    borderTop: `2.5px solid ${color.primaryLight()}`,
+    width: '100%'
+  },
+  tag: {
+    padding: '6px',
+    color: color.text(),
+    '&:hover': {
+      color: color.primaryLight()
+    },
+    '& input': {
+      width: '100% !important'
+    }
+  },
+  checked: {
+    color: `${color.primary()} !important`
+  },
+  tagDisabled: {
+    color: color.disabled(),
+    cursor: 'not-allowed !important',
+    pointerEvents: 'initial !important',
+    opacity: 0.7,
+    '&:hover': {
+      color: color.disabled()
+    }
+  },
+  table: {
+    color: color.text(),
+    backgroundColor: color.background(),
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+    marginBottom: 0
+  },
+  questionText: {
+    textAlign: 'left'
+  }
+});
+
+var AnswerGrid$1 = withStyles(styles$1)(AnswerGrid);
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.generateAnswers = model => {
+      var _model$rows;
+
+      const answers = {};
+      (_model$rows = model.rows) == null ? void 0 : _model$rows.forEach(row => {
+        answers[row.id] = new Array(model.layout - 1).fill(false);
+      });
+      return answers;
+    };
+
+    this.isAnswerRegenerationRequired = nextProps => {
+      const {
+        model: {
+          choiceMode,
+          layout,
+          rows
+        } = {}
+      } = this.props;
+      const {
+        session: {
+          answers
+        } = {}
+      } = nextProps;
+      let isRequired = false;
+
+      if (choiceMode !== nextProps.model.choiceMode) {
+        isRequired = true;
+      }
+
+      if (layout !== nextProps.model.layout) {
+        isRequired = true;
+      }
+
+      if (rows.length !== nextProps.model.rows.length || answers && nextProps.model.rows.length !== Object.keys(answers).length) {
+        isRequired = true;
+      }
+
+      return isRequired || !answers;
+    };
+
+    this.callOnSessionChange = () => {
+      const {
+        onSessionChange
+      } = this.props;
+
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    };
+
+    this.toggleShowCorrect = show => {
+      this.setState({
+        showCorrect: show
+      });
+    };
+
+    this.onAnswerChange = newAnswers => {
+      this.setState(state => ({
+        session: _extends({}, state.session, {
+          answers: newAnswers
+        })
+      }), this.callOnSessionChange);
+    };
+
+    this.state = {
+      session: _extends({}, props.session, {
+        answers: props.session && props.session.answers || this.generateAnswers(props.model)
+      }),
+      showCorrect: false
+    };
+    this.callOnSessionChange();
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const regenAnswers = this.isAnswerRegenerationRequired(nextProps);
+    this.setState(state => ({
+      session: _extends({}, nextProps.session, {
+        // regenerate answers if layout or choiceMode change
+        answers: regenAnswers ? this.generateAnswers(nextProps.model) : nextProps.session.answers
+      }),
+      showCorrect: this.props.model.disabled && !nextProps.model.disabled && state.showCorrect ? false : state.showCorrect
+    }), () => {
+      if (regenAnswers) this.callOnSessionChange();
+    });
+  }
+
+  render() {
+    const {
+      model,
+      classes
+    } = this.props;
+    const {
+      showCorrect,
+      session
+    } = this.state;
+    const {
+      correctness = {},
+      extraCSSRules,
+      language
+    } = model;
+    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';
+    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));
+    const showTeacherInstructions = model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));
+    return /*#__PURE__*/React.createElement(UiLayout, {
+      extraCSSRules: extraCSSRules,
+      className: classes.mainContainer
+    }, showTeacherInstructions && /*#__PURE__*/React.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      className: classes.collapsible
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: model.teacherInstructions
+    })), model.prompt && /*#__PURE__*/React.createElement("div", {
+      className: classes.prompt
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: model.prompt
+    })), /*#__PURE__*/React.createElement(CorrectAnswerToggle, {
+      language: language,
+      show: showCorrectAnswerToggle,
+      toggled: showCorrect,
+      onToggle: this.toggleShowCorrect
+    }), /*#__PURE__*/React.createElement(AnswerGrid$1, {
+      showCorrect: showCorrect,
+      correctAnswers: model.correctResponse,
+      disabled: model.disabled,
+      view: model.view,
+      onAnswerChange: this.onAnswerChange,
+      choiceMode: model.choiceMode,
+      answers: showCorrect ? model.correctResponse || {} : session.answers,
+      headers: model.headers,
+      rows: model.rows
+    }), showRationale && /*#__PURE__*/React.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      },
+      className: classes.collapsible
+    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
+      prompt: model.rationale
+    })), model.feedback && /*#__PURE__*/React.createElement(Feedback, {
+      correctness: correctness.correctness,
+      feedback: model.feedback
+    }));
+  }
+
+}
+Main.propTypes = {
+  classes: PropTypes.object,
+  session: PropTypes.object.isRequired,
+  onSessionChange: PropTypes.func,
+  model: PropTypes.object.isRequired
+};
+
+const styles = theme => ({
+  mainContainer: {
+    color: color.text(),
+    backgroundColor: color.background()
+  },
+  main: {
+    width: '100%'
+  },
+  prompt: {
+    verticalAlign: 'middle'
+  },
+  collapsible: {
+    marginBottom: theme.spacing.unit * 2
+  }
+});
+
+var Main$1 = withStyles(styles)(Main);
+
+const isComplete = (session, model) => {
+  var _model$rows;
+
+  const ids = (model == null ? void 0 : (_model$rows = model.rows) == null ? void 0 : _model$rows.map(r => r.id)) || [];
+  return ids.reduce((acc, id) => {
+    if (!acc) {
+      return false;
+    }
+
+    const arr = session.answers && session.answers[id];
+    const hasChoice = Array.isArray(arr) && arr.includes(true);
+    return hasChoice && acc;
+  }, true);
+};
+class Match extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  set model(m) {
+    // config object props should be part of the model props
+    // model.config should be no longer used
+    this._model = _extends({}, m, (m == null ? void 0 : m.config) || {});
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+
+    this._render();
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  sessionChanged(s) {
+    this._session.answers = s.answers;
+    const complete = isComplete(this._session, this._model);
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));
+
+    this._render();
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+
+    const el = /*#__PURE__*/React.createElement(Main$1, {
+      model: this._model,
+      session: this._session,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    ReactDOM.render(el, this, () => {
+      renderMath(this);
+    });
+  }
+
+}
+
+export { Main$1 as Component, Match as default, isComplete };
+//# sourceMappingURL=element.js.map

package/esm/element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"element.js","sources":["../src/answer-grid.jsx","../src/main.jsx","../src/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport cx from 'classnames';\nimport Radio from '@material-ui/core/Radio';\nimport Checkbox from '@material-ui/core/Checkbox';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nexport class AnswerGrid extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    correctAnswers: PropTypes.object,\n    view: PropTypes.bool.isRequired,\n    showCorrect: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    onAnswerChange: PropTypes.func.isRequired,\n    choiceMode: PropTypes.string.isRequired,\n    rows: PropTypes.array.isRequired,\n    headers: PropTypes.array.isRequired,\n    answers: PropTypes.object.isRequired,\n  };\n\n  onRowValueChange = (rowId, answerIndex) => (event) => {\n    const { onAnswerChange, choiceMode, answers } = this.props;\n    const newAnswers = { ...answers };\n\n    if (choiceMode === 'radio') {\n      for (let i = 0; i < newAnswers[rowId].length; i++) {\n        newAnswers[rowId][i] = false;\n      }\n    }\n\n    newAnswers[rowId][answerIndex] = event.target.checked;\n\n    onAnswerChange(newAnswers);\n  };\n\n  answerIsCorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return correctAnswers[rowId][rowValueIndex] === rowValue && rowValue === true;\n  };\n\n  // needs a separate method because what isn't correct isn't necessarily incorrect\n  answerIsIncorrect = (rowId, rowValue, rowValueIndex) => {\n    const { correctAnswers } = this.props;\n\n    return (\n      (correctAnswers[rowId][rowValueIndex] === true && rowValue === false) ||\n      (correctAnswers[rowId][rowValueIndex] === false && rowValue === true)\n    );\n  };\n\n  render() {\n    const { classes, showCorrect, headers, rows, choiceMode, answers, disabled, view } = this.props;\n    const Tag = choiceMode === 'radio' ? Radio : Checkbox;\n    const evaluate = disabled && !view;\n\n    if (!rows || rows.length === 0) {\n      return (\n        <div className={classes.controlsContainer}>\n          <Typography className={classes.empty} component=\"div\">\n            There are currently no questions to show.\n          </Typography>\n        </div>\n      );\n    }\n\n    return (\n      <div className={classes.controlsContainer}>\n        <table className={classes.table}>\n          <colgroup>\n            {(headers || []).map((header, idx) => (\n              <col key={`col-${idx}`} />\n            ))}\n          </colgroup>\n\n          <thead>\n            <tr>\n              {(headers || []).map((header, idx) => (\n                <th className={classes.rowHeader} key={`th-${idx}`} data-colno={`${idx}`} scope=\"row\">\n                  <div\n                    className={cx(classes.rowItem, { [classes.questionText]: idx === 0 })}\n                    dangerouslySetInnerHTML={{ __html: header }}\n                  />\n                </th>\n              ))}\n            </tr>\n          </thead>\n\n          {(rows || []).map((row, idx) => (\n            <tbody key={`row-${idx}`} role=\"group\">\n              <tr className={classes.separator}>\n                <td key={`td-title-${idx}`} data-colno={'0'}>\n                  <div\n                    className={cx(classes.rowItem, classes.questionText)}\n                    dangerouslySetInnerHTML={{ __html: row.title }}\n                  />\n                </td>\n\n                {(answers[row.id] || []).map((rowItem, answerIndex) => (\n                  <td key={`td-${idx}-${answerIndex}`} className={classes.column} data-colno={`${answerIndex + 1}`}>\n                    <div className={classes.rowItem}>\n                      <Tag\n                        className={cx(classes.tag, {\n                          [classes.correct]:\n                            (showCorrect && rowItem === true) ||\n                            (evaluate && this.answerIsCorrect(row.id, rowItem, answerIndex)),\n                          [classes.checked]: rowItem === true && !evaluate,\n                          [classes.tagDisabled]: disabled,\n                          [classes.incorrect]: evaluate && this.answerIsIncorrect(row.id, rowItem, answerIndex),\n                        })}\n                        disabled={disabled}\n                        onChange={this.onRowValueChange(row.id, answerIndex)}\n                        checked={rowItem === true}\n                      />\n                    </div>\n                  </td>\n                ))}\n              </tr>\n            </tbody>\n          ))}\n        </table>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  controlsContainer: {\n    marginLeft: 'auto',\n    marginRight: 'auto',\n    marginTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  column: {\n    padding: '5px 0',\n  },\n  correct: {\n    color: `${color.correct()} !important`,\n  },\n  incorrect: {\n    color: `${color.incorrect()} !important`,\n  },\n  empty: {\n    margin: theme.spacing.unit * 2,\n  },\n  rowContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  rowHeader: {\n    padding: 0,\n  },\n  rowItem: {\n    padding: theme.spacing.unit * 1.5,\n    textAlign: 'center',\n  },\n  separator: {\n    border: 0,\n    borderTop: `2.5px solid ${color.primaryLight()}`,\n    width: '100%',\n  },\n  tag: {\n    padding: '6px',\n    color: color.text(),\n    '&:hover': {\n      color: color.primaryLight(),\n    },\n    '& input': {\n      width: '100% !important',\n    },\n  },\n  checked: {\n    color: `${color.primary()} !important`,\n  },\n  tagDisabled: {\n    color: color.disabled(),\n    cursor: 'not-allowed !important',\n    pointerEvents: 'initial !important',\n    opacity: 0.7,\n    '&:hover': {\n      color: color.disabled(),\n    },\n  },\n  table: {\n    color: color.text(),\n    backgroundColor: color.background(),\n    borderCollapse: 'collapse',\n    borderSpacing: 0,\n    marginBottom: 0,\n  },\n  questionText: {\n    textAlign: 'left',\n  },\n});\n\nexport default withStyles(styles)(AnswerGrid);\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, Feedback, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport AnswerGrid from './answer-grid';\nimport { withStyles } from '@material-ui/core/styles';\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func,\n    model: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      session: {\n        ...props.session,\n        answers: (props.session && props.session.answers) || this.generateAnswers(props.model),\n      },\n      showCorrect: false,\n    };\n\n    this.callOnSessionChange();\n  }\n\n  generateAnswers = (model) => {\n    const answers = {};\n\n    model.rows?.forEach((row) => {\n      answers[row.id] = new Array(model.layout - 1).fill(false);\n    });\n\n    return answers;\n  };\n\n  isAnswerRegenerationRequired = (nextProps) => {\n    const { model: { choiceMode, layout, rows } = {} } = this.props;\n    const { session: { answers } = {} } = nextProps;\n    let isRequired = false;\n\n    if (choiceMode !== nextProps.model.choiceMode) {\n      isRequired = true;\n    }\n\n    if (layout !== nextProps.model.layout) {\n      isRequired = true;\n    }\n\n    if (\n      rows.length !== nextProps.model.rows.length ||\n      (answers && nextProps.model.rows.length !== Object.keys(answers).length)\n    ) {\n      isRequired = true;\n    }\n\n    return isRequired || !answers;\n  };\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    const regenAnswers = this.isAnswerRegenerationRequired(nextProps);\n\n    this.setState(\n      (state) => ({\n        session: {\n          ...nextProps.session,\n          // regenerate answers if layout or choiceMode change\n          answers: regenAnswers ? this.generateAnswers(nextProps.model) : nextProps.session.answers,\n        },\n        showCorrect:\n          this.props.model.disabled && !nextProps.model.disabled && state.showCorrect ? false : state.showCorrect,\n      }),\n      () => {\n        if (regenAnswers) this.callOnSessionChange();\n      },\n    );\n  }\n\n  callOnSessionChange = () => {\n    const { onSessionChange } = this.props;\n\n    if (onSessionChange) {\n      onSessionChange(this.state.session);\n    }\n  };\n\n  toggleShowCorrect = (show) => {\n    this.setState({ showCorrect: show });\n  };\n\n  onAnswerChange = (newAnswers) => {\n    this.setState(\n      (state) => ({\n        session: {\n          ...state.session,\n          answers: newAnswers,\n        },\n      }),\n      this.callOnSessionChange,\n    );\n  };\n\n  render() {\n    const { model, classes } = this.props;\n    const { showCorrect, session } = this.state;\n    const { correctness = {}, extraCSSRules, language } = model;\n    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';\n\n    const showRationale = model.rationale && (hasText(model.rationale) || hasMedia(model.rationale));\n    const showTeacherInstructions =\n      model.teacherInstructions && (hasText(model.teacherInstructions) || hasMedia(model.teacherInstructions));\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.mainContainer}>\n        {showTeacherInstructions && (\n          <Collapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt prompt={model.teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {model.prompt && (\n          <div className={classes.prompt}>\n            <PreviewPrompt prompt={model.prompt} />\n          </div>\n        )}\n\n        <CorrectAnswerToggle\n          language={language}\n          show={showCorrectAnswerToggle}\n          toggled={showCorrect}\n          onToggle={this.toggleShowCorrect}\n        />\n\n        <AnswerGrid\n          showCorrect={showCorrect}\n          correctAnswers={model.correctResponse}\n          disabled={model.disabled}\n          view={model.view}\n          onAnswerChange={this.onAnswerChange}\n          choiceMode={model.choiceMode}\n          answers={showCorrect ? model.correctResponse || {} : session.answers}\n          headers={model.headers}\n          rows={model.rows}\n        />\n\n        {showRationale && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }} className={classes.collapsible}>\n            <PreviewPrompt prompt={model.rationale} />\n          </Collapsible>\n        )}\n\n        {model.feedback && <Feedback correctness={correctness.correctness} feedback={model.feedback} />}\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  mainContainer: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  main: {\n    width: '100%',\n  },\n  prompt: {\n    verticalAlign: 'middle',\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(Main);\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport Main from './main';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport { Main as Component };\n\nexport const isComplete = (session, model) => {\n  const ids = model?.rows?.map((r) => r.id) || [];\n\n  return ids.reduce((acc, id) => {\n    if (!acc) {\n      return false;\n    }\n\n    const arr = session.answers && session.answers[id];\n    const hasChoice = Array.isArray(arr) && arr.includes(true);\n\n    return hasChoice && acc;\n  }, true);\n};\n\nexport default class Match extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    // config object props should be part of the model props\n    // model.config should be no longer used\n    this._model = { ...m, ...(m?.config || {}) };\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  sessionChanged(s) {\n    this._session.answers = s.answers;\n    const complete = isComplete(this._session, this._model);\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    ReactDOM.render(el, this, () => {\n      renderMath(this);\n    });\n  }\n}\n"],"names":["AnswerGrid","React","Component","onRowValueChange","rowId","answerIndex","event","onAnswerChange","choiceMode","answers","props","newAnswers","i","length","target","checked","answerIsCorrect","rowValue","rowValueIndex","correctAnswers","answerIsIncorrect","render","classes","showCorrect","headers","rows","disabled","view","Tag","Radio","Checkbox","evaluate","controlsContainer","empty","table","map","header","idx","rowHeader","cx","rowItem","questionText","__html","row","separator","title","id","column","tag","correct","tagDisabled","incorrect","propTypes","PropTypes","object","isRequired","bool","func","string","array","styles","theme","marginLeft","marginRight","marginTop","spacing","unit","marginBottom","padding","color","margin","rowContainer","display","alignItems","textAlign","border","borderTop","primaryLight","width","text","primary","cursor","pointerEvents","opacity","backgroundColor","background","borderCollapse","borderSpacing","withStyles","Main","constructor","generateAnswers","model","forEach","Array","layout","fill","isAnswerRegenerationRequired","nextProps","session","Object","keys","callOnSessionChange","onSessionChange","state","toggleShowCorrect","show","setState","UNSAFE_componentWillReceiveProps","regenAnswers","correctness","extraCSSRules","language","showCorrectAnswerToggle","showRationale","rationale","hasText","hasMedia","showTeacherInstructions","teacherInstructions","mainContainer","hidden","visible","collapsible","prompt","correctResponse","feedback","main","verticalAlign","isComplete","ids","r","reduce","acc","arr","hasChoice","isArray","includes","Match","HTMLElement","m","_model","config","_render","s","_session","sessionChanged","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","el","createElement","bind","ReactDOM","renderMath"],"mappings":"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"}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "10.0.1-next.0+17e3b6c8d",
+  "version": "10.0.2-esm.0",
   "main": "lib/index.js",
   "description": "",
   "scripts": {
@@ -13,10 +13,10 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/correct-answer-toggle": "^2.21.0",
-    "@pie-lib/math-rendering": "^3.18.0",
-    "@pie-lib/render-ui": "^4.31.0",
-    "@pie-lib/test-utils": "^0.18.0",
+    "@pie-lib/correct-answer-toggle": "^2.22.1",
+    "@pie-lib/math-rendering": "^3.19.0",
+    "@pie-lib/render-ui": "^4.32.1",
+    "@pie-lib/test-utils": "^0.19.1",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.10",
@@ -26,6 +26,23 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "17e3b6c8d7cd3ad6a2698703e595dc03d51b9df9",
-  "module": "src/index.js"
+  "gitHead": "007ac5f6be719f57eccb8af3c08e7014c2797f1e",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "import": "./esm/element.js",
+      "require": "./lib/index.js",
+      "default": "./esm/element.js"
+    },
+    "./configure": {
+      "import": "./esm/configure.js",
+      "require": "./configure/lib/index.js",
+      "default": "./esm/configure.js"
+    },
+    "./controller": {
+      "import": "./esm/controller.js",
+      "require": "./controller/lib/index.js",
+      "default": "./esm/controller.js"
+    }
+  }
 }