@pie-element/math-templated 5.0.2-esm.0 → 5.2.0

package/esm/element.js

@@ -1,900 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import isEqual from 'lodash/isEqual';
-import isEmpty from 'lodash/isEmpty';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
-import { updateSpans, mq, HorizontalKeypad } from '@pie-lib/math-input';
-import { hasText, hasMedia, Collapsible, UiLayout, PreviewPrompt, Readable, color } from '@pie-lib/render-ui';
-import { renderMath } from '@pie-lib/math-rendering';
-import MathQuill from '@pie-framework/mathquill';
-import { Customizable } from '@pie-lib/mask-markup';
-import CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';
-import _ from 'lodash';
-
-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);
-}
-
-let registered = false; // Define a regex pattern to match {{number}}
-
-const REGEX = /(\{\{\d+\}\})/gm;
-const DEFAULT_KEYPAD_VARIANT = 6; // !!! If you're using Chrome but have selected the "iPad" device in Chrome Developer Tools, the navigator.userAgent string may still report as
-//  Safari because Chrome on iOS actually uses the Safari rendering engine under the hood due to Apple's restrictions on third-party browser engines.
-// When you select the "iPad" device in Chrome Developer Tools, you're essentially emulating the behavior of Safari on an iPad, including the user agent string.
-//  Therefore, even though you're using Chrome, the user agent string will resemble that of Safari on an iPad.
-// Since the regular expression /^((?!chrome|android).)*safari/i checks for the presence of "safari" in the user agent string while excluding "chrome" and "android",
-//  it will return true in this case because "safari" is present in the user agent string emulated by Chrome when in iPad mode.
-
-const IS_SAFARI = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
-function generateAdditionalKeys(keyData = []) {
-  return keyData.map(key => ({
-    name: key,
-    latex: key,
-    write: key,
-    label: key
-  }));
-}
-
-function getKeyPadWidth(additionalKeys = [], equationEditor) {
-  return Math.floor(additionalKeys.length / 5) * 30 + (equationEditor === 'miscellaneous' ? 600 : 500);
-}
-
-function splitByParts(text) {
-  // Use the regex pattern to split the text
-  const parts = text.split(REGEX); // Filter out empty strings that might result from splitting
-
-  return parts.filter(part => part);
-}
-
-function prepareForStatic(model, state) {
-  const {
-    responses,
-    disabled,
-    markup,
-    printMode,
-    alwaysShowCorrect
-  } = model || {};
-
-  if (markup) {
-    if (state.showCorrect) {
-      return Object.keys(responses || {}).reduce((acc, responseKey) => {
-        var _responses$responseKe;
-
-        acc[responseKey] = responses == null ? void 0 : (_responses$responseKe = responses[responseKey]) == null ? void 0 : _responses$responseKe.answer;
-        return acc;
-      }, {});
-    }
-
-    const splitted = splitByParts(markup);
-    return splitted.reduce((acc, split) => {
-      if (split.match(REGEX)) {
-        const responseKey = Main.getResponseKey(split);
-        const answer = state.session.answers[`r${responseKey}`];
-
-        if (printMode && !alwaysShowCorrect) {
-          const blankSpace = '\\ \\ '.repeat(30) + '\\embed{newLine}[] ';
-          return _extends({}, acc, {
-            [responseKey]: `\\MathQuillMathField[r${responseKey}]{${blankSpace.repeat(3)}}`
-          });
-        }
-
-        if (disabled) {
-          return _extends({}, acc, {
-            [responseKey]: `\\embed{answerBlock}[r${responseKey}]`
-          });
-        }
-
-        return _extends({}, acc, {
-          [responseKey]: `\\MathQuillMathField[r${responseKey}]{${answer && answer.value || ''}}`
-        });
-      }
-
-      return acc;
-    }, {});
-  }
-}
-
-class Main extends React.Component {
-  // removes {{ and }} and returns only key response. Eg: {{0}} => 0
-  constructor(props) {
-    super(props);
-
-    this.handleAnswerBlockDomUpdate = () => {
-      const {
-        model,
-        classes
-      } = this.props;
-      const {
-        session,
-        showCorrect
-      } = this.state;
-      const answers = session.answers;
-
-      if (this.root && model.disabled && !showCorrect) {
-        Object.keys(answers).forEach(answerId => {
-          const el = this.root.querySelector(`#${answerId}`);
-          const indexEl = this.root.querySelector(`#${answerId}Index`);
-
-          if (el) {
-            let MQ = MathQuill.getInterface(2);
-            const answer = answers[answerId];
-            el.textContent = answer && answer.value || '';
-
-            if (model.view) {
-              el.parentElement.parentElement.classList.remove(classes.correct);
-              el.parentElement.parentElement.classList.remove(classes.incorrect);
-            }
-
-            MQ.StaticMath(el);
-            indexEl.textContent = 'R';
-          }
-        });
-      }
-
-      renderMath(this.root);
-    };
-
-    this.onSubFieldFocus = id => {
-      this.setState({
-        activeAnswerBlock: id
-      });
-    };
-
-    this.toNodeData = data => {
-      if (!data) {
-        return;
-      }
-
-      const {
-        type,
-        value
-      } = data;
-      if (type === 'command' || type === 'cursor') return data;
-      if (type === 'answer') return _extends({
-        type: 'answer'
-      }, data);
-      if (value === 'clear') return {
-        type: 'clear'
-      };
-      return {
-        type: 'write',
-        value
-      };
-    };
-
-    this.setInput = input => {
-      this.input = input;
-    };
-
-    this.onClick = data => {
-      const c = this.toNodeData(data);
-
-      if (c.type === 'clear') {
-        this.input.clear();
-      } else if (c.type === 'command') {
-        if (Array.isArray(c.value)) {
-          c.value.forEach(vv => {
-            this.input.cmd(vv);
-          });
-        } else {
-          this.input.cmd(c.value);
-        }
-      } else if (c.type === 'cursor') {
-        this.input.keystroke(c.value);
-      } else {
-        this.input.write(c.value);
-      }
-
-      this.input.focus();
-    };
-
-    this.callOnSessionChange = () => {
-      const {
-        onSessionChange
-      } = this.props;
-
-      if (onSessionChange) {
-        onSessionChange(this.state.session);
-      }
-    };
-
-    this.toggleShowCorrect = show => {
-      this.setState({
-        showCorrect: show
-      }, this.handleAnswerBlockDomUpdate);
-    };
-
-    this.subFieldChanged = (name, subfieldValue) => {
-      updateSpans();
-
-      if (name) {
-        this.setState(state => ({
-          session: _extends({}, state.session, {
-            answers: _extends({}, state.session.answers, {
-              [name]: {
-                value: subfieldValue
-              }
-            })
-          })
-        }), this.callOnSessionChange);
-      }
-    };
-
-    this.getFieldName = (changeField, fields) => {
-      const {
-        answers
-      } = this.state.session;
-
-      if (Object.keys(answers || {}).length) {
-        const keys = Object.keys(answers);
-        return keys.find(k => {
-          const tf = fields[k];
-          return tf && tf.id == changeField.id;
-        });
-      }
-    };
-
-    this.onBlur = e => {
-      const {
-        relatedTarget,
-        currentTarget
-      } = e || {};
-
-      function getParentWithRoleTooltip(element, depth = 0) {
-        // only run this max 16 times
-        if (!element || depth >= 16) return null;
-        const parent = element.offsetParent;
-        if (!parent) return null;
-
-        if (parent.getAttribute('role') === 'tooltip') {
-          return parent;
-        }
-
-        return getParentWithRoleTooltip(parent, depth + 1);
-      }
-
-      function getDeepChildDataKeypad(element, depth = 0) {
-        var _element$children;
-
-        // only run this max 4 times
-        if (!element || depth >= 4) return null;
-        const child = element == null ? void 0 : (_element$children = element.children) == null ? void 0 : _element$children[0];
-        if (!child) return null;
-
-        if (child.attributes && child.attributes['data-keypad']) {
-          return child;
-        }
-
-        return getDeepChildDataKeypad(child, depth + 1);
-      }
-
-      const parentWithTooltipRole = getParentWithRoleTooltip(relatedTarget);
-      const childWithDataKeypad = parentWithTooltipRole ? getDeepChildDataKeypad(parentWithTooltipRole) : null;
-
-      if (!relatedTarget || !currentTarget || !(childWithDataKeypad != null && childWithDataKeypad.attributes['data-keypad'])) {
-        this.setState({
-          activeAnswerBlock: ''
-        });
-      }
-    };
-
-    this.renderTeacherInstructions = () => {
-      const {
-        model,
-        classes
-      } = this.props;
-      const {
-        teacherInstructions,
-        animationsDisabled
-      } = model || {};
-      const showTeacherInstructions = teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
-      const teacherInstructionsDiv = /*#__PURE__*/React.createElement(PreviewPrompt, {
-        defaultClassName: "teacher-instructions",
-        prompt: teacherInstructions
-      });
-      return showTeacherInstructions && /*#__PURE__*/React.createElement("div", {
-        className: classes.collapsible
-      }, !animationsDisabled ? /*#__PURE__*/React.createElement(Collapsible, {
-        labels: {
-          hidden: 'Show Teacher Instructions',
-          visible: 'Hide Teacher Instructions'
-        }
-      }, teacherInstructionsDiv) : teacherInstructionsDiv);
-    };
-
-    this.renderRationale = () => {
-      const {
-        model,
-        classes
-      } = this.props;
-      const {
-        rationale,
-        animationsDisabled
-      } = model || {};
-      const rationaleDiv = /*#__PURE__*/React.createElement(PreviewPrompt, {
-        prompt: rationale
-      });
-      const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
-      return showRationale && /*#__PURE__*/React.createElement("div", {
-        className: classes.collapsible
-      }, !animationsDisabled ? /*#__PURE__*/React.createElement(Collapsible, {
-        labels: {
-          hidden: 'Show Rationale',
-          visible: 'Hide Rationale'
-        }
-      }, rationaleDiv) : rationaleDiv);
-    };
-
-    this.renderPlayerContent = () => {
-      const {
-        model,
-        classes
-      } = this.props;
-      const {
-        activeAnswerBlock,
-        showCorrect,
-        session
-      } = this.state;
-      const {
-        correctness,
-        disabled,
-        view,
-        responses,
-        equationEditor,
-        customKeys,
-        feedback,
-        env: {
-          mode
-        } = {},
-        printMode,
-        alwaysShowCorrect
-      } = model || {};
-      const emptyResponse = isEmpty(responses);
-      const additionalKeys = generateAdditionalKeys(customKeys);
-      const statics = prepareForStatic(model, this.state) || '';
-      const studentPrintMode = printMode && !alwaysShowCorrect;
-      return /*#__PURE__*/React.createElement("div", {
-        className: classes.inputAndKeypadContainer
-      }, /*#__PURE__*/React.createElement(Customizable, {
-        disabled: disabled,
-        markup: model.markup // TODO remove the need of value?
-        ,
-        value: {},
-        customMarkMarkupComponent: id => {
-          const responseIsCorrect = mode === 'evaluate' && feedback && feedback[id];
-          const MQStatic = /*#__PURE__*/React.createElement(mq.Static, {
-            className: classes.static,
-            ref: mqStatic => {
-              this.mqStatic = mqStatic || this.mqStatic;
-            },
-            latex: statics[id],
-            onSubFieldChange: this.subFieldChanged,
-            getFieldName: this.getFieldName,
-            setInput: this.setInput,
-            onSubFieldFocus: this.onSubFieldFocus,
-            onBlur: this.onBlur
-          });
-          return /*#__PURE__*/React.createElement("div", {
-            className: cx(classes.expression, {
-              [classes.incorrect]: !emptyResponse && !responseIsCorrect && !showCorrect,
-              [classes.correct]: !emptyResponse && (responseIsCorrect || showCorrect),
-              [classes.showCorrectness]: !emptyResponse && disabled && correctness && !view,
-              [classes.correctAnswerShown]: showCorrect
-            })
-          }, /*#__PURE__*/React.createElement(Tooltip, {
-            ref: ref => this.setTooltipRef(ref),
-            enterTouchDelay: 0,
-            interactive: true,
-            open: activeAnswerBlock === `r${id}`,
-            classes: {
-              tooltip: classes.keypadTooltip,
-              popper: classes.keypadTooltipPopper
-            },
-            title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && /*#__PURE__*/React.createElement("div", {
-              "data-keypad": true,
-              key: answerId,
-              className: classes.responseContainer,
-              style: {
-                width: getKeyPadWidth(additionalKeys, equationEditor)
-              }
-            }, /*#__PURE__*/React.createElement(HorizontalKeypad, {
-              additionalKeys: additionalKeys,
-              mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
-              onClick: this.onClick
-            })) || null)
-          }, studentPrintMode ? /*#__PURE__*/React.createElement("div", {
-            className: classes.printContainer
-          }, MQStatic) : MQStatic));
-        }
-      }));
-    };
-
-    const _answers = {};
-    const {
-      model: _model,
-      session: _session
-    } = props || {};
-    const {
-      markup,
-      alwaysShowCorrect: _alwaysShowCorrect
-    } = _model || {};
-    const {
-      answers: sessionAnswers
-    } = _session || {};
-
-    if (markup) {
-      // build out local state model using responses declared in markup
-      (markup || '').replace(REGEX, response => {
-        const responseKey = Main.getResponseKey(response);
-        const sessionAnswerForResponse = sessionAnswers && sessionAnswers[`r${responseKey}`];
-        _answers[`r${responseKey}`] = {
-          value: (sessionAnswerForResponse == null ? void 0 : sessionAnswerForResponse.value) || ''
-        };
-      });
-    }
-
-    this.state = {
-      session: _extends({}, props.session, {
-        answers: _answers
-      }),
-      activeAnswerBlock: '',
-      showCorrect: _alwaysShowCorrect || false
-    };
-  }
-
-  UNSAFE_componentWillMount() {
-    const {
-      classes
-    } = this.props;
-
-    if (typeof window !== 'undefined') {
-      let MQ = MathQuill.getInterface(2);
-
-      if (!registered) {
-        MQ.registerEmbed('answerBlock', data => ({
-          htmlString: `<div class="${classes.blockContainer}">
-              <div class="${classes.blockResponse}" id="${data}Index">R</div>
-              <div class="${classes.blockMath}">
-                <span id="${data}"></span>
-              </div>
-            </div>`,
-          text: () => 'text',
-          latex: () => `\\embed{answerBlock}[${data}]`
-        }));
-        registered = true;
-      }
-    }
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    const {
-      model
-    } = this.props;
-    const {
-      model: nextModel = {}
-    } = nextProps || {};
-    const {
-      markup = '',
-      env = {}
-    } = model || {};
-    const {
-      markup: nextMarkup = '',
-      env: nextEnv = {},
-      alwaysShowCorrect: nextAlwaysShowCorrect = false
-    } = nextModel;
-
-    const isEvaluateMode = env => env && env.mode === 'evaluate';
-
-    if (!isEvaluateMode(env) || !isEvaluateMode(nextEnv)) {
-      this.setState(prevState => _extends({}, prevState.session, {
-        showCorrect: false
-      }));
-    }
-
-    if (nextAlwaysShowCorrect) {
-      this.setState({
-        showCorrect: true
-      });
-    }
-
-    const matches = markup.match(REGEX);
-    const nextMatches = nextMarkup.match(REGEX); // If markup changed, and we no longer have the same response area, the session needs to be updated
-
-    if (!isEqual(matches, nextMatches)) {
-      const newAnswers = {};
-      const answers = this.state.session.answers;
-      (nextMatches || []).forEach(nextMatch => {
-        const responseKey = Main.getResponseKey(nextMatch);
-        const sessionAnswerForResponse = answers && answers[`r${responseKey}`]; // build out local state model using responses declared in markup
-
-        newAnswers[`r${responseKey}`] = {
-          value: (sessionAnswerForResponse == null ? void 0 : sessionAnswerForResponse.value) || ''
-        };
-      });
-      this.setState(state => ({
-        session: _extends({}, state.session, {
-          answers: newAnswers
-        })
-      }), () => {
-        this.props.onSessionChange(this.state.session);
-        this.handleAnswerBlockDomUpdate();
-      });
-    }
-  }
-
-  shouldComponentUpdate(nextProps, nextState) {
-    const sameModel = isEqual(this.props.model, nextProps.model);
-    const sameState = isEqual(this.state, nextState);
-    return !sameModel || !sameState;
-  }
-
-  componentDidMount() {
-    this.handleAnswerBlockDomUpdate();
-    setTimeout(() => renderMath(this.root), 100);
-  }
-
-  componentDidUpdate() {
-    this.handleAnswerBlockDomUpdate();
-  }
-
-  // function for tooltip
-  setTooltipRef(ref) {
-    // Safari Hack: https://stackoverflow.com/a/42764495/5757635
-    setTimeout(() => {
-      if (ref && IS_SAFARI) {
-        const div = document.querySelector("[role='tooltip']");
-
-        if (div) {
-          const el = div.firstChild;
-          el.setAttribute('tabindex', '-1');
-        }
-      }
-    }, 1);
-  }
-
-  render() {
-    const {
-      model,
-      classes
-    } = this.props;
-    const {
-      showCorrect
-    } = this.state;
-    const {
-      prompt,
-      env: {
-        mode,
-        role
-      } = {},
-      extraCSSRules,
-      correctness,
-      responses,
-      language,
-      showNote,
-      note
-    } = model || {};
-    const emptyResponse = isEmpty(responses);
-    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
-    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
-    return /*#__PURE__*/React.createElement(UiLayout, {
-      extraCSSRules: extraCSSRules,
-      className: classes.mainContainer,
-      ref: r => {
-        // eslint-disable-next-line react/no-find-dom-node
-        const domNode = ReactDOM.findDOMNode(r);
-        this.root = domNode || this.root;
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: classes.main
-    }, mode === 'gather' && /*#__PURE__*/React.createElement("h2", {
-      className: classes.srOnly
-    }, "Math Equation Response Question"), /*#__PURE__*/React.createElement("div", {
-      className: classes.main
-    }, showCorrectAnswerToggle && /*#__PURE__*/React.createElement(CorrectAnswerToggle, {
-      language: language,
-      className: classes.toggle,
-      show: true,
-      toggled: showCorrect,
-      onToggle: this.toggleShowCorrect
-    })), this.renderTeacherInstructions(), prompt && /*#__PURE__*/React.createElement("div", {
-      className: classes.promptContainer
-    }, /*#__PURE__*/React.createElement(PreviewPrompt, {
-      prompt: prompt
-    })), /*#__PURE__*/React.createElement(Readable, {
-      false: true
-    }, this.renderPlayerContent()), displayNote && /*#__PURE__*/React.createElement("div", {
-      className: cx(classes.note, 'note'),
-      dangerouslySetInnerHTML: {
-        __html: note
-      }
-    }), this.renderRationale()));
-  }
-
-}
-
-Main.getResponseKey = response => (response || '').replaceAll('{{', '').replaceAll('}}', '');
-
-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(),
-    display: 'inline-block'
-  },
-  tooltip: {
-    background: `${color.primaryLight()} !important`,
-    color: color.text(),
-    padding: theme.spacing.unit * 2,
-    border: `1px solid ${color.secondary()}`,
-    fontSize: '16px',
-    '& :not(.MathJax) > table tr': {
-      '&:nth-child(2n)': {
-        backgroundColor: 'unset !important'
-      }
-    }
-  },
-  tooltipPopper: {
-    opacity: 1
-  },
-  keypadTooltip: {
-    fontSize: 'initial',
-    background: 'transparent',
-    width: '600px',
-    marginTop: 0,
-    paddingTop: 0
-  },
-  keypadTooltipPopper: {
-    background: 'transparent',
-    width: '650px',
-    opacity: 1
-  },
-  promptContainer: {
-    marginBottom: theme.spacing.unit * 2
-  },
-  main: {
-    width: '100%',
-    position: 'relative',
-    backgroundColor: color.background(),
-    color: color.text()
-  },
-  title: {
-    fontSize: '1.1rem',
-    display: 'block',
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit
-  },
-  collapsible: {
-    marginBottom: theme.spacing.unit * 2
-  },
-  responseContainer: {
-    zIndex: 10,
-    minWidth: '400px',
-    marginTop: theme.spacing.unit * 2
-  },
-  expression: {
-    maxWidth: 'fit-content',
-    '& > .mq-math-mode': {
-      '& > .mq-root-block': {
-        '& > .mq-editable-field': {
-          minWidth: '10px',
-          padding: theme.spacing.unit / 4
-        }
-      },
-      '& sup': {
-        top: 0
-      }
-    }
-  },
-  static: {
-    '& > .mq-root-block': {
-      '& > .mq-editable-field': {
-        borderColor: color.text()
-      }
-    }
-  },
-  inputAndKeypadContainer: {
-    position: 'relative',
-    '& > div > div': {
-      display: 'flex',
-      alignItems: 'baseline',
-      flexWrap: 'wrap'
-    },
-    '& .mq-overarrow-inner': {
-      border: 'none !important',
-      padding: '0 !important'
-    },
-    '& .mq-overarrow-inner-right': {
-      display: 'none !important'
-    },
-    '& .mq-overarrow-inner-left': {
-      display: 'none !important'
-    },
-    '& .mq-overarrow.mq-arrow-both': {
-      minWidth: '1.23em',
-      '& *': {
-        lineHeight: '1 !important'
-      },
-      '&:before': {
-        top: '-0.4em',
-        left: '-1px'
-      },
-      '&:after': {
-        top: '-2.4em',
-        right: '-1px'
-      },
-      '&.mq-empty:after': {
-        top: '-0.45em'
-      }
-    },
-    '& .mq-overarrow.mq-arrow-right': {
-      '&:before': {
-        top: '-0.4em',
-        right: '-1px'
-      }
-    },
-    '& .mq-longdiv-inner': {
-      borderTop: '1px solid !important',
-      paddingTop: '1.5px !important'
-    },
-    '& .mq-parallelogram': {
-      lineHeight: 0.85
-    }
-  },
-  showCorrectness: {
-    border: '2px solid'
-  },
-  correctAnswerShown: {
-    padding: theme.spacing.unit,
-    letterSpacing: '0.5px'
-  },
-  correct: {
-    borderColor: `${color.correct()} !important`
-  },
-  incorrect: {
-    borderColor: `${color.incorrect()} !important`
-  },
-  blockContainer: {
-    margin: `${theme.spacing.unit}px !important`,
-    display: 'inline-flex',
-    border: '2px solid grey !important'
-  },
-  blockResponse: {
-    flex: 2,
-    color: 'grey',
-    background: theme.palette.grey['A100'],
-    fontSize: '0.8rem !important',
-    padding: `${theme.spacing.unit / 2}px !important`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRight: `2px solid ${color.disabled()} !important`
-  },
-  toggle: {
-    color: color.text(),
-    marginBottom: theme.spacing.unit * 2
-  },
-  blockMath: {
-    color: color.text(),
-    backgroundColor: color.background(),
-    padding: `${theme.spacing.unit / 2}px !important`,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flex: 8,
-    '& > .mq-math-mode': {
-      '& > .mq-hasCursor': {
-        '& > .mq-cursor': {
-          display: 'none'
-        }
-      }
-    }
-  },
-  printContainer: {
-    marginBottom: theme.spacing.unit,
-    pointerEvents: 'none'
-  },
-  srOnly: {
-    position: 'absolute',
-    left: '-10000px',
-    top: 'auto',
-    width: '1px',
-    height: '1px',
-    overflow: 'hidden'
-  },
-  note: {
-    marginBottom: theme.spacing.unit * 2
-  }
-});
-
-var Main$1 = withStyles(styles)(Main);
-
-class MathTemplated extends HTMLElement {
-  constructor() {
-    super();
-    this.sessionChangedEventCaller = _.debounce(() => {
-      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), true));
-    }, 1000);
-  }
-
-  set model(m) {
-    this._model = m;
-    this.render();
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined));
-  }
-
-  get model() {
-    return this._model;
-  }
-
-  set session(s) {
-    this._session = s;
-    this.render();
-  }
-
-  get session() {
-    return this._session;
-  }
-
-  isSessionComplete() {
-    // a method to check if student answered the question
-    return true;
-  }
-
-  onSessionChange(session) {
-    // you can add an extra step here to validate session
-    Object.keys(session).map(key => {
-      this._session[key] = session[key];
-    });
-    this.sessionChangedEventCaller();
-    this.render();
-  }
-
-  connectedCallback() {
-    // TODO set accessibility labels
-    this.render();
-  }
-
-  render() {
-    if (!this._model || !this._session) {
-      return;
-    }
-
-    if (this._model && this._session) {
-      const el = /*#__PURE__*/React.createElement(Main$1, {
-        model: this._model,
-        session: this._session,
-        onSessionChange: this.onSessionChange.bind(this)
-      });
-      ReactDOM.render(el, this);
-    }
-  }
-
-}
-
-export { MathTemplated as default };
-//# sourceMappingURL=element.js.map