@pie-element/math-inline 5.8.11 → 5.9.2

package/module/element.js

@@ -0,0 +1,1208 @@
+import {_dll_react, _dll_classnames, _dll_material_ui__core_styles, _dll_prop_types, _dll_pie_lib__render_ui, _dll_pie_lib__correct_answer_toggle, _dll_material_ui__core, _dll_lodash, _dll_react_dom, _dll_debug} from "../../../@pie-lib/shared-module@^1.3.1/module/index.js";
+import {_dll_pie_lib__math_toolbar, _dll_pie_lib__math_input, _dll_pie_framework__mathquill} from "../../../@pie-lib/math-edit-module@^1.1.20/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.0.24/module/index.js";
+const ResponseTypes$1 = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+const React$2 = _dll_react;
+const cx$1 = _dll_classnames;
+const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
+const PropTypes$1 = _dll_prop_types;
+const {color: color$1} = _dll_pie_lib__render_ui;
+const {MathToolbar: MathToolbar} = _dll_pie_lib__math_toolbar;
+const {mq: mq$1} = _dll_pie_lib__math_input;
+const _jsxFileName$1 = "/home/circleci/repo/packages/math-inline/src/simple-question-block.jsx";
+class SimpleQuestionBlockRaw extends React$2.Component {
+  constructor(...args) {
+    super(...args);
+    SimpleQuestionBlockRaw.prototype.__init.call(this);
+    SimpleQuestionBlockRaw.prototype.__init2.call(this);
+    SimpleQuestionBlockRaw.prototype.__init3.call(this);
+  }
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes$1.object,
+      onSimpleResponseChange: PropTypes$1.func,
+      model: PropTypes$1.object.isRequired,
+      emptyResponse: PropTypes$1.bool,
+      session: PropTypes$1.object.isRequired,
+      showCorrect: PropTypes$1.bool
+    };
+  }
+  __init() {
+    this.state = {
+      showKeypad: true
+    };
+  }
+  __init2() {
+    this.onFocus = () => this.setState({
+      showKeypad: true
+    });
+  }
+  __init3() {
+    this.onBlur = e => {
+      const {relatedTarget, currentTarget} = e || ({});
+      if (!relatedTarget || !currentTarget || relatedTarget.offsetParent !== currentTarget.offsetParent) {
+        this.setState({
+          showKeypad: false
+        });
+      }
+    };
+  }
+  render() {
+    const {classes, model, showCorrect, session, emptyResponse, onSimpleResponseChange} = this.props;
+    const {config, disabled, correctness, view} = model || ({});
+    if (!config) {
+      return;
+    }
+    const correct = correctness && correctness.correct;
+    const {responses, equationEditor} = config;
+    return React$2.createElement('div', {
+      className: classes.expression,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 54
+      }
+    }, showCorrect || disabled ? React$2.createElement('div', {
+      className: cx$1(classes.static, {
+        [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
+        [classes.correct]: !emptyResponse && (correct || showCorrect)
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 56
+      }
+    }, React$2.createElement(mq$1.Static, {
+      latex: showCorrect ? responses && responses.length && responses[0].answer : session.response || '',
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 62
+      }
+    })) : React$2.createElement(MathToolbar, {
+      classNames: {
+        editor: classes.responseEditor
+      },
+      latex: session.response || '',
+      keypadMode: equationEditor,
+      onChange: onSimpleResponseChange,
+      onDone: () => {},
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      controlledKeypad: true,
+      showKeypad: this.state.showKeypad,
+      hideDoneButton: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$1,
+        lineNumber: 69
+      }
+    }));
+  }
+}
+SimpleQuestionBlockRaw.__initStatic();
+const SimpleQuestionBlock = withStyles$1(theme => ({
+  responseEditor: {
+    display: 'flex',
+    justifyContent: 'center',
+    width: 'auto',
+    maxWidth: 'fit-content',
+    height: 'auto',
+    textAlign: 'left',
+    padding: theme.spacing.unit,
+    '&.mq-math-mode': {
+      border: `1px solid ${color$1.primaryLight()}`
+    }
+  },
+  expression: {
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
+    padding: theme.spacing.unit
+  },
+  static: {
+    color: color$1.text(),
+    background: color$1.background(),
+    border: `1px solid ${color$1.primaryLight()}`,
+    width: 'fit-content',
+    fontSize: '1rem',
+    padding: theme.spacing.unit / 2,
+    '& > .mq-math-mode': {
+      '& > .mq-hasCursor': {
+        '& > .mq-cursor': {
+          display: 'none'
+        }
+      }
+    }
+  },
+  correct: {
+    border: `2px solid ${color$1.correct()} !important`,
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  },
+  incorrect: {
+    border: `2px solid ${color$1.incorrect()} !important`,
+    padding: theme.spacing.unit,
+    letterSpacing: '0.5px'
+  }
+}))(SimpleQuestionBlockRaw);
+const React$1 = _dll_react;
+const PropTypes = _dll_prop_types;
+const CorrectAnswerToggle = _dll_pie_lib__correct_answer_toggle;
+const {Feedback: Feedback} = _dll_pie_lib__render_ui;
+const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
+const {Readable: Readable} = _dll_pie_lib__render_ui;
+const {hasText: hasText} = _dll_pie_lib__render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__render_ui;
+const {color: color} = _dll_pie_lib__render_ui;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const {Tooltip: Tooltip} = _dll_material_ui__core;
+const {isEqual: isEqual} = _dll_lodash;
+const {isEmpty: isEmpty} = _dll_lodash;
+const cx = _dll_classnames;
+const {mq: mq} = _dll_pie_lib__math_input;
+const {HorizontalKeypad: HorizontalKeypad} = _dll_pie_lib__math_input;
+const {updateSpans: updateSpans} = _dll_pie_lib__math_input;
+const MathQuill = _dll_pie_framework__mathquill;
+const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
+const _jsxFileName = "/home/circleci/repo/packages/math-inline/src/main.jsx";
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
+let registered = false;
+const NEWLINE_LATEX = /\\newline/g;
+const REGEX = /{{response}}/gm;
+const DEFAULT_KEYPAD_VARIANT = 6;
+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 prepareForStatic(model, state) {
+  const {config, disabled} = model || ({});
+  const {expression, responses, printMode, alwaysShowCorrect} = config || ({});
+  if (config && expression) {
+    const modelExpression = expression;
+    if (state.showCorrect) {
+      return responses && responses.length && responses[0].answer;
+    }
+    let answerBlocks = 1;
+    return (modelExpression || '').replace(REGEX, function () {
+      const answer = state.session.answers[`r${answerBlocks}`];
+      if (printMode && !alwaysShowCorrect) {
+        const blankSpace = ('\\ \\ ').repeat(30) + '\\newline ';
+        return `\\MathQuillMathField[r${answerBlocks++}]{${blankSpace.repeat(3)}}`;
+      }
+      if (disabled) {
+        return `\\embed{answerBlock}[r${answerBlocks++}]`;
+      }
+      return `\\MathQuillMathField[r${answerBlocks++}]{${answer && answer.value || ''}}`;
+    }).replace(NEWLINE_LATEX, '\\embed{newLine}[]');
+  }
+}
+class Main extends React$1.Component {
+  static __initStatic() {
+    this.propTypes = {
+      classes: PropTypes.object,
+      session: PropTypes.object.isRequired,
+      onSessionChange: PropTypes.func,
+      model: PropTypes.object.isRequired
+    };
+  }
+  constructor(props) {
+    super(props);
+    Main.prototype.__init.call(this);
+    Main.prototype.__init2.call(this);
+    Main.prototype.__init3.call(this);
+    Main.prototype.__init4.call(this);
+    Main.prototype.__init5.call(this);
+    Main.prototype.__init6.call(this);
+    Main.prototype.__init7.call(this);
+    Main.prototype.__init8.call(this);
+    Main.prototype.__init9.call(this);
+    Main.prototype.__init10.call(this);
+    Main.prototype.__init11.call(this);
+    Main.prototype.__init12.call(this);
+    const answers = {};
+    if (props.model.config && props.model.config.expression) {
+      let answerBlocks = 1;
+      (props.model.config.expression || '').replace(REGEX, () => {
+        answers[`r${answerBlocks}`] = {
+          value: props.session && props.session.answers && props.session.answers[`r${answerBlocks}`] && props.session.answers[`r${answerBlocks}`].value || ''
+        };
+        answerBlocks += 1;
+      });
+    }
+    this.state = {
+      session: {
+        ...props.session,
+        answers
+      },
+      activeAnswerBlock: '',
+      showCorrect: this.props.model.config.alwaysShowCorrect || false
+    };
+  }
+  UNSAFE_componentWillMount() {
+    const {classes} = this.props;
+    if (typeof window !== 'undefined') {
+      let MQ = MathQuill.getInterface(2);
+      if (!registered) {
+        MQ.registerEmbed('answerBlock', data => {
+          return {
+            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;
+      }
+    }
+  }
+  __init() {
+    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) ; else {
+              el.parentElement.parentElement.classList.remove(classes.correct);
+              el.parentElement.parentElement.classList.remove(classes.incorrect);
+            }
+            MQ.StaticMath(el);
+            indexEl.textContent = 'R';
+          }
+        });
+      }
+      renderMath(this.root);
+    };
+  }
+  componentDidUpdate() {
+    this.handleAnswerBlockDomUpdate();
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    const {config} = this.props.model;
+    const {config: nextConfig = {}} = nextProps.model || ({});
+    if (config.env && config.env.mode !== 'evaluate' || nextConfig.env && nextConfig.env.mode !== 'evaluate') {
+      this.setState({
+        ...this.state.session,
+        showCorrect: false
+      });
+    }
+    if (nextConfig.alwaysShowCorrect) {
+      this.setState({
+        showCorrect: true
+      });
+    }
+    if (config && config.responses && config.responses.length !== nextConfig.responses.length || !config && nextConfig && nextConfig.responses || config && nextConfig && config.expression !== nextConfig.expression) {
+      const newAnswers = {};
+      const answers = this.state.session.answers;
+      let answerBlocks = 1;
+      (nextConfig.expression || '').replace(REGEX, () => {
+        newAnswers[`r${answerBlocks}`] = {
+          value: answers && answers[`r${answerBlocks}`] && answers[`r${answerBlocks}`].value || ''
+        };
+        answerBlocks++;
+      });
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+          answers: newAnswers
+        }
+      }), 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);
+  }
+  __init2() {
+    this.onDone = () => {};
+  }
+  __init3() {
+    this.onSimpleResponseChange = response => {
+      this.setState(state => ({
+        session: {
+          ...state.session,
+          response
+        }
+      }), this.callOnSessionChange);
+    };
+  }
+  __init4() {
+    this.onSubFieldFocus = id => {
+      this.setState({
+        activeAnswerBlock: id
+      });
+    };
+  }
+  __init5() {
+    this.toNodeData = data => {
+      if (!data) {
+        return;
+      }
+      const {type, value} = data;
+      if (type === 'command' || type === 'cursor') {
+        return data;
+      } else if (type === 'answer') {
+        return {
+          type: 'answer',
+          ...data
+        };
+      } else if (value === 'clear') {
+        return {
+          type: 'clear'
+        };
+      } else {
+        return {
+          type: 'write',
+          value
+        };
+      }
+    };
+  }
+  __init6() {
+    this.setInput = input => {
+      this.input = input;
+    };
+  }
+  __init7() {
+    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();
+    };
+  }
+  __init8() {
+    this.callOnSessionChange = () => {
+      const {onSessionChange} = this.props;
+      if (onSessionChange) {
+        onSessionChange(this.state.session);
+      }
+    };
+  }
+  __init9() {
+    this.toggleShowCorrect = show => {
+      this.setState({
+        showCorrect: show
+      }, this.handleAnswerBlockDomUpdate);
+    };
+  }
+  __init10() {
+    this.subFieldChanged = (name, subfieldValue) => {
+      updateSpans();
+      if (name) {
+        this.setState(state => ({
+          session: {
+            ...state.session,
+            completeAnswer: this.mqStatic && this.mqStatic.mathField.latex(),
+            answers: {
+              ...state.session.answers,
+              [name]: {
+                value: subfieldValue
+              }
+            }
+          }
+        }), this.callOnSessionChange);
+      }
+    };
+  }
+  __init11() {
+    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;
+        });
+      }
+    };
+  }
+  __init12() {
+    this.onBlur = e => {
+      const {relatedTarget, currentTarget} = e || ({});
+      if (!relatedTarget || !currentTarget || !IS_SAFARI && !_optionalChain([relatedTarget, 'optionalAccess', _13 => _13.offsetParent, 'optionalAccess', _14 => _14.children, 'access', _15 => _15[0], 'optionalAccess', _16 => _16.attributes, 'optionalAccess', _17 => _17['data-keypad']]) || IS_SAFARI && !_optionalChain([relatedTarget, 'optionalAccess', _18 => _18.offsetParent, 'optionalAccess', _19 => _19.children, 'access', _20 => _20[0], 'optionalAccess', _21 => _21.children, 'access', _22 => _22[0], 'optionalAccess', _23 => _23.attributes, 'optionalAccess', _24 => _24['data-keypad']])) {
+        this.setState({
+          activeAnswerBlock: ''
+        });
+      }
+    };
+  }
+  setTooltipRef(ref) {
+    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 {activeAnswerBlock, showCorrect, session} = this.state;
+    const {config, correctness, disabled, view, teacherInstructions, rationale, feedback, animationsDisabled, printMode, alwaysShowCorrect} = model || ({});
+    if (!config) {
+      return null;
+    }
+    const {showNote, note, prompt, responses, responseType, equationEditor, customKeys, env: {mode, role} = {}} = config || ({});
+    const displayNote = (showCorrect || mode === 'view' && role === 'instructor') && showNote && note;
+    const emptyResponse = isEmpty(responses);
+    const showCorrectAnswerToggle = !emptyResponse && correctness && correctness.correctness !== 'correct';
+    const tooltipModeEnabled = disabled && correctness;
+    const additionalKeys = generateAdditionalKeys(customKeys);
+    const correct = correctness && correctness.correct;
+    const staticLatex = prepareForStatic(model, this.state) || '';
+    const viewMode = disabled && !correctness;
+    const studentPrintMode = printMode && !alwaysShowCorrect;
+    const printView = React$1.createElement('div', {
+      className: classes.printContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 411
+      }
+    }, React$1.createElement(mq.Static, {
+      ref: mqStatic => this.mqStatic = mqStatic || this.mqStatic,
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 412
+      }
+    }));
+    const midContent = React$1.createElement('div', {
+      className: classes.main,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 424
+      }
+    }, prompt && React$1.createElement('div', {
+      className: classes.content,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 426
+      }
+    }, React$1.createElement(PreviewPrompt, {
+      prompt: prompt,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 427
+      }
+    })), studentPrintMode ? printView : React$1.createElement(Readable, {
+      false: true,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 430
+      }
+    }, React$1.createElement('div', {
+      className: classes.inputAndKeypadContainer,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 431
+      }
+    }, responseType === ResponseTypes$1.simple && React$1.createElement(SimpleQuestionBlock, {
+      onSimpleResponseChange: this.onSimpleResponseChange,
+      showCorrect: showCorrect,
+      emptyResponse: emptyResponse,
+      model: model,
+      session: session,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 433
+      }
+    }), responseType === ResponseTypes$1.advanced && React$1.createElement('div', {
+      className: cx(classes.expression, {
+        [classes.incorrect]: !emptyResponse && !correct && !showCorrect,
+        [classes.correct]: !emptyResponse && (correct || showCorrect),
+        [classes.showCorrectness]: !emptyResponse && disabled && correctness && !view,
+        [classes.correctAnswerShown]: showCorrect
+      }),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 442
+      }
+    }, React$1.createElement(Tooltip, {
+      ref: ref => this.setTooltipRef(ref),
+      interactive: true,
+      open: !!activeAnswerBlock,
+      classes: {
+        tooltip: classes.keypadTooltip,
+        popper: classes.keypadTooltipPopper
+      },
+      title: Object.keys(session.answers).map(answerId => answerId === activeAnswerBlock && !(showCorrect || disabled) && React$1.createElement('div', {
+        'data-keypad': true,
+        key: answerId,
+        className: classes.responseContainer,
+        style: {
+          width: getKeyPadWidth(additionalKeys, equationEditor)
+        },
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 462
+        }
+      }, React$1.createElement(HorizontalKeypad, {
+        additionalKeys: additionalKeys,
+        mode: equationEditor || DEFAULT_KEYPAD_VARIANT,
+        onClick: this.onClick,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 471
+        }
+      })) || null),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 450
+      }
+    }, React$1.createElement(mq.Static, {
+      ref: mqStatic => this.mqStatic = mqStatic || this.mqStatic,
+      latex: staticLatex,
+      onSubFieldChange: this.subFieldChanged,
+      getFieldName: this.getFieldName,
+      setInput: this.setInput,
+      onSubFieldFocus: this.onSubFieldFocus,
+      onBlur: this.onBlur,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 481
+      }
+    }))))), viewMode && teacherInstructions && hasText(teacherInstructions) && React$1.createElement(React$1.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 497
+      }
+    }, !animationsDisabled ? React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 498
+      }
+    }, React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 501
+      }
+    })) : React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: teacherInstructions
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 502
+      }
+    }), React$1.createElement('br', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 503
+      }
+    })), viewMode && rationale && hasText(rationale) && React$1.createElement(React$1.Fragment, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 509
+      }
+    }, !animationsDisabled ? React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Rationale',
+        visible: 'Hide Rationale'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 510
+      }
+    }, React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 513
+      }
+    })) : React$1.createElement('div', {
+      dangerouslySetInnerHTML: {
+        __html: rationale
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 514
+      }
+    })), displayNote && React$1.createElement('div', {
+      className: classes.note,
+      dangerouslySetInnerHTML: {
+        __html: `<strong>Note:</strong> ${note}`
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 519
+      }
+    }));
+    if (tooltipModeEnabled && (showCorrectAnswerToggle || teacherInstructions || rationale || feedback)) {
+      return React$1.createElement(Tooltip, {
+        interactive: true,
+        classes: {
+          tooltip: classes.tooltip,
+          popper: classes.tooltipPopper
+        },
+        title: React$1.createElement('div', {
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 536
+          }
+        }, React$1.createElement('div', {
+          className: classes.main,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 537
+          }
+        }, showCorrectAnswerToggle && React$1.createElement(CorrectAnswerToggle, {
+          className: classes.toggle,
+          show: true,
+          toggled: showCorrect,
+          onToggle: this.toggleShowCorrect,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 539
+          }
+        })), teacherInstructions && hasText(teacherInstructions) && [React$1.createElement(Collapsible, {
+          key: "collapsible",
+          labels: {
+            hidden: 'Show Teacher Instructions',
+            visible: 'Hide Teacher Instructions'
+          },
+          className: classes.collapsible,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 548
+          }
+        }, React$1.createElement(PreviewPrompt, {
+          prompt: teacherInstructions,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 556
+          }
+        })), React$1.createElement('br', {
+          key: "br",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 558
+          }
+        })], rationale && hasText(rationale) && [React$1.createElement(Collapsible, {
+          key: "collapsible",
+          labels: {
+            hidden: 'Show Rationale',
+            visible: 'Hide Rationale'
+          },
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 561
+          }
+        }, React$1.createElement(PreviewPrompt, {
+          prompt: rationale,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 568
+          }
+        })), React$1.createElement('br', {
+          key: "br",
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 570
+          }
+        })], feedback && React$1.createElement(Feedback, {
+          correctness: correctness.correctness,
+          feedback: feedback,
+          __self: this,
+          __source: {
+            fileName: _jsxFileName,
+            lineNumber: 573
+          }
+        })),
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 529
+        }
+      }, React$1.createElement('div', {
+        className: classes.mainContainer,
+        ref: r => this.root = r || this.root,
+        __self: this,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 581
+        }
+      }, midContent));
+    }
+    return React$1.createElement('div', {
+      className: classes.mainContainer,
+      ref: r => this.root = r || this.root,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 591
+      }
+    }, midContent);
+  }
+}
+Main.__initStatic();
+const styles = theme => ({
+  mainContainer: {
+    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
+  },
+  main: {
+    width: '100%',
+    position: 'relative',
+    padding: theme.spacing.unit / 2,
+    backgroundColor: color.background(),
+    color: color.text()
+  },
+  title: {
+    fontSize: '1.1rem',
+    display: 'block',
+    marginTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit
+  },
+  content: {
+    marginTop: theme.spacing.unit * 2
+  },
+  note: {
+    paddingTop: '15px'
+  },
+  collapsible: {
+    marginTop: 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',
+          margin: theme.spacing.unit * 2 / 3,
+          padding: theme.spacing.unit / 4
+        }
+      },
+      '& sup': {
+        top: 0
+      }
+    }
+  },
+  inputAndKeypadContainer: {
+    position: 'relative',
+    '& .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: 'lightgrey',
+    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()
+  },
+  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: '10px',
+    pointerEvents: 'none'
+  }
+});
+var Main$1 = withStyles(styles)(Main);
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelSetEvent extends CustomEvent {
+  constructor(component, complete, hasModel) {
+    super(ModelSetEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component,
+        hasModel
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+ModelSetEvent.TYPE = 'model-set';
+var ModelSetEvent_1 = lib.ModelSetEvent = ModelSetEvent;
+class SessionChangedEvent extends CustomEvent {
+  constructor(component, complete) {
+    super(SessionChangedEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+SessionChangedEvent.TYPE = 'session-changed';
+var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
+var defaults$1 = {};
+var utils = {};
+Object.defineProperty(utils, "__esModule", {
+  value: true
+});
+utils.ResponseTypes = void 0;
+var ResponseTypes = {
+  advanced: 'Advanced Multi',
+  simple: 'Simple'
+};
+utils.ResponseTypes = ResponseTypes;
+(function (exports) {
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports["default"] = void 0;
+  var _utils = utils;
+  var _default = {
+    model: {
+      partialScoring: true,
+      responseType: _utils.ResponseTypes.advanced,
+      element: 'math-inline',
+      feedback: {
+        correct: {
+          "default": 'Correct',
+          type: 'none'
+        },
+        incorrect: {
+          "default": 'Incorrect',
+          type: 'none'
+        },
+        partial: {
+          "default": 'Nearly',
+          type: 'none'
+        }
+      },
+      equationEditor: '8',
+      expression: '',
+      rationale: 'Rationale goes here.',
+      note: 'The answer shown above is the primary correct answer specified by the author for this item, but other answers may also be recognized as correct.',
+      prompt: '',
+      responses: [],
+      customKeys: [],
+      scoringType: 'auto',
+      feedbackEnabled: true,
+      promptEnabled: true,
+      rationaleEnabled: true,
+      teacherInstructionsEnabled: true,
+      studentInstructionsEnabled: true,
+      toolbarEditorPosition: 'bottom',
+      validationDefault: 'literal',
+      ignoreOrderDefault: false,
+      allowTrailingZerosDefault: false
+    },
+    configuration: {
+      prompt: {
+        settings: true,
+        label: 'Prompt'
+      },
+      feedback: {
+        settings: true,
+        label: 'Feedback'
+      },
+      responseType: {
+        settings: true,
+        label: 'Response type'
+      },
+      rationale: {
+        settings: true,
+        label: 'Rationale'
+      },
+      scoringType: {
+        settings: false,
+        label: 'Scoring Type'
+      },
+      studentInstructions: {
+        settings: false,
+        label: 'Student Instructions'
+      },
+      teacherInstructions: {
+        settings: true,
+        label: 'Teacher Instructions'
+      },
+      partialScoring: {
+        settings: false,
+        label: 'Allow Partial Scoring'
+      },
+      ignoreOrder: {
+        settings: false,
+        label: 'Ignore Order',
+        enabled: true
+      },
+      allowTrailingZeros: {
+        settings: false,
+        label: 'Allow Trailing Zeros',
+        enabled: true
+      }
+    }
+  };
+  exports["default"] = _default;
+})(defaults$1);
+var defaults = getDefaultExportFromCjs(defaults$1);
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const debug = _dll_debug;
+const _ = _dll_lodash;
+const log = debug('pie-ui:math-inline');
+class MathInline extends HTMLElement {
+  constructor() {
+    super();
+    this._configuration = defaults.configuration;
+    this.sessionChangedEventCaller = _.debounce(session => {
+      this.dispatchEvent(new SessionChangedEvent_1(session, true));
+    }, 1000);
+  }
+  set model(m) {
+    this._model = m;
+    this.dispatchEvent(new ModelSetEvent_1(this._model, true, !!this._model));
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+  sessionChanged(s) {
+    Object.keys(s).map(key => {
+      this._session[key] = s[key];
+    });
+    this.sessionChangedEventCaller(this._session);
+    log('session: ', this._session);
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+    const el = React.createElement(Main$1, {
+      model: this._model,
+      session: this._session,
+      configuration: this._configuration,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    ReactDOM.render(el, this);
+  }
+}
+export {Main$1 as Component, MathInline as default};