@pie-element/math-templated 7.1.1-next.12 → 7.1.2

package/configure/lib/index.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _debug = _interopRequireDefault(require("debug"));
+var _lodashEs = require("lodash-es");
+var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
+var _design = _interopRequireDefault(require("./design"));
+var _defaults = _interopRequireDefault(require("./defaults"));
+var _markupUtils = require("./markupUtils");
+const log = (0, _debug.default)('math-templated:configure');
+class MathTemplateConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    this._model = MathTemplateConfigure.prepareModel();
+    this._configuration = _defaults.default.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+  set model(s) {
+    this._model = MathTemplateConfigure.prepareModel(s);
+    this._render();
+  }
+  set configuration(c) {
+    this._configuration = (0, _lodashEs.defaults)(c, _defaults.default.configuration);
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (c.language?.enabled) {
+      if (c.languageChoices?.options?.length) {
+        this._model.language = c.languageChoices.options[0].value;
+      }
+    } else if (c.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find(option => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+    this._render();
+  }
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+  }
+  onModelChanged(m, reset) {
+    this._model = MathTemplateConfigure.prepareModel(m);
+    this._render();
+    this.dispatchModelUpdated(reset);
+  }
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this._render();
+  }
+
+  /** @param {done, progress, file} handler */
+  insertImage(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+  }
+  insertSound(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+  }
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  }
+  _render() {
+    log('_render');
+    let element = /*#__PURE__*/_react.default.createElement(_design.default, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged,
+      onConfigurationChanged: this.onConfigurationChanged,
+      disableSidePanel: this._disableSidePanel,
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this)
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(element);
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = MathTemplateConfigure;
+(0, _defineProperty2.default)(MathTemplateConfigure, "prepareModel", (model = {}) => {
+  const {
+    validationDefault,
+    allowTrailingZerosDefault,
+    ignoreOrderDefault,
+    responses = {}
+  } = model;
+  const updatedResponses = Object.keys(responses).reduce((acc, responseId) => {
+    const correctResponse = responses[responseId];
+    acc[responseId] = {
+      ...correctResponse,
+      validation: correctResponse.validation || validationDefault,
+      allowTrailingZeros: correctResponse.allowTrailingZeros || allowTrailingZerosDefault,
+      ignoreOrder: correctResponse.ignoreOrder || ignoreOrderDefault
+    };
+    return acc;
+  }, {});
+  const joinedObj = {
+    ..._defaults.default.model,
+    ...model,
+    responses: updatedResponses
+  };
+  const slateMarkup = joinedObj.slateMarkup || (0, _markupUtils.createSlateMarkup)(joinedObj.markup, joinedObj.responses);
+  const processedMarkup = (0, _markupUtils.processMarkup)(slateMarkup);
+
+  // this was added to treat an exception, when the model has responses without the "answer" property
+  if (joinedObj.responses) {
+    Object.keys(joinedObj.responses).forEach(key => {
+      if ((0, _lodashEs.isArray)(joinedObj.responses[key])) {
+        joinedObj.responses[key] = (joinedObj.responses[key] || []).map((item, index) => {
+          if (!item.answer) {
+            log('Choice does not contain "answer" property, which is required.', item);
+            return {
+              answer: `${index}`,
+              ...item
+            };
+          }
+          return item;
+        });
+      }
+    });
+  }
+  return {
+    ...joinedObj,
+    slateMarkup,
+    markup: processedMarkup
+  };
+});
+//# sourceMappingURL=index.js.map

package/configure/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_debug","_lodashEs","_pieConfigureEvents","_design","_defaults","_markupUtils","log","debug","MathTemplateConfigure","HTMLElement","constructor","_root","_model","prepareModel","_configuration","sensibleDefaults","configuration","onModelChanged","bind","onConfigurationChanged","model","s","_render","c","defaults","language","enabled","languageChoices","options","length","value","settings","find","option","push","label","disableSidePanel","_disableSidePanel","dispatchModelUpdated","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Main","imageSupport","add","delete","uploadSoundSupport","createRoot","render","disconnectedCallback","unmount","exports","default","_defineProperty2","validationDefault","allowTrailingZerosDefault","ignoreOrderDefault","responses","updatedResponses","Object","keys","reduce","acc","responseId","correctResponse","validation","allowTrailingZeros","ignoreOrder","joinedObj","slateMarkup","createSlateMarkup","markup","processedMarkup","processMarkup","forEach","key","isArray","map","item","index","answer"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\nimport { defaults, isArray } from 'lodash-es';\nimport {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport Main from './design';\n\nimport sensibleDefaults from './defaults';\nimport { processMarkup, createSlateMarkup } from './markupUtils';\n\nconst log = debug('math-templated:configure');\n\nexport default class MathTemplateConfigure extends HTMLElement {\n  static prepareModel = (model = {}) => {\n    const { validationDefault, allowTrailingZerosDefault, ignoreOrderDefault, responses = {} } = model;\n\n    const updatedResponses = Object.keys(responses).reduce((acc, responseId) => {\n      const correctResponse = responses[responseId];\n\n      acc[responseId] = {\n        ...correctResponse,\n        validation: correctResponse.validation || validationDefault,\n        allowTrailingZeros: correctResponse.allowTrailingZeros || allowTrailingZerosDefault,\n        ignoreOrder: correctResponse.ignoreOrder || ignoreOrderDefault,\n      };\n\n      return acc;\n    }, {});\n\n    const joinedObj = {\n      ...sensibleDefaults.model,\n      ...model,\n      responses: updatedResponses,\n    };\n\n    const slateMarkup = joinedObj.slateMarkup || createSlateMarkup(joinedObj.markup, joinedObj.responses);\n    const processedMarkup = processMarkup(slateMarkup);\n\n    // this was added to treat an exception, when the model has responses without the \"answer\" property\n    if (joinedObj.responses) {\n      Object.keys(joinedObj.responses).forEach((key) => {\n        if (isArray(joinedObj.responses[key])) {\n          joinedObj.responses[key] = (joinedObj.responses[key] || []).map((item, index) => {\n            if (!item.answer) {\n              log('Choice does not contain \"answer\" property, which is required.', item);\n              return { answer: `${index}`, ...item };\n            }\n\n            return item;\n          });\n        }\n      });\n    }\n\n    return {\n      ...joinedObj,\n      slateMarkup,\n      markup: processedMarkup,\n    };\n  };\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = MathTemplateConfigure.prepareModel();\n    this._configuration = sensibleDefaults.configuration;\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);\n  }\n\n  set model(s) {\n    this._model = MathTemplateConfigure.prepareModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = defaults(c, sensibleDefaults.configuration);\n\n    // if language:enabled is true, then the corresponding default item model should include a language value;\n    // if it is false, then the language field should be omitted from the item model.\n    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,\n    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).\n    if (c.language?.enabled) {\n      if (c.languageChoices?.options?.length) {\n        this._model.language = c.languageChoices.options[0].value;\n      }\n    } else if (c.language.settings && this._model.language) {\n      this._configuration.language.enabled = true;\n\n      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {\n        this._configuration.languageChoices.options = [];\n      }\n\n      // check if the language is already included in the languageChoices.options array\n      // and if not, then add it.\n      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {\n        this._configuration.languageChoices.options.push({\n          value: this._model.language,\n          label: this._model.language,\n        });\n      }\n    } else {\n      delete this._model.language;\n    }\n\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = MathTemplateConfigure.prepareModel(m);\n    this._render();\n    this.dispatchModelUpdated(reset);\n  }\n\n  onConfigurationChanged(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  /** @param {done, progress, file} handler */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Main, {\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged,\n      onConfigurationChanged: this.onConfigurationChanged,\n      disableSidePanel: this._disableSidePanel,\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(element);\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/markupUtils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.removeUnwantedCharacters = exports.processMarkup = exports.createSlateMarkup = void 0;
+// do not remove \t from \times, \triangle, \tan, \theta or \therefore
+const tSymbols = 'imes|riangle|an|heta|herefore';
+// do not remove \n from \nthroot, \nparallel, \ncong, \napprox, \neq, \ne or \nsim
+const nSymbols = 'throot|parallel|cong|approx|eq|e|sim';
+// match all \t and \n that are not part of math symbols that starts with \t or \n
+const matchTabAndNewLine = new RegExp(`(\\t(?!${tSymbols}))|(\\n(?!${nSymbols}))|(\\\\t(?!${tSymbols}))|(\\\\n(?!${nSymbols}))`, 'g');
+const removeUnwantedCharacters = markup => markup.replace(matchTabAndNewLine, '').replace(/\\"/g, '"').replace(/\\\//g, '/');
+exports.removeUnwantedCharacters = removeUnwantedCharacters;
+const createElementFromHTML = (htmlString = '') => {
+  const div = document.createElement('div');
+  div.innerHTML = htmlString.trim();
+  return div;
+};
+const processMarkup = markup => {
+  const newMarkup = removeUnwantedCharacters(markup || '');
+  const slateMarkup = createElementFromHTML(newMarkup || '');
+  slateMarkup.querySelectorAll('[data-type="math_templated"]').forEach(s => s.replaceWith(`{{${s.dataset.index}}}`));
+  return slateMarkup.innerHTML;
+};
+exports.processMarkup = processMarkup;
+const REGEX = /\{\{(\d+)\}\}/g;
+const createSlateMarkup = (markup, responses) => {
+  if (!markup) {
+    return '';
+  }
+  const newMarkup = removeUnwantedCharacters(markup);
+  return newMarkup.replace(REGEX, (match, groupIndex) => {
+    const responseValue = responses[groupIndex]?.answer || '';
+    return `<span data-type="math_templated" data-index="${groupIndex}" data-value="${responseValue}"></span>`;
+  });
+};
+exports.createSlateMarkup = createSlateMarkup;
+//# sourceMappingURL=markupUtils.js.map

package/configure/lib/markupUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markupUtils.js","names":["tSymbols","nSymbols","matchTabAndNewLine","RegExp","removeUnwantedCharacters","markup","replace","exports","createElementFromHTML","htmlString","div","document","createElement","innerHTML","trim","processMarkup","newMarkup","slateMarkup","querySelectorAll","forEach","s","replaceWith","dataset","index","REGEX","createSlateMarkup","responses","match","groupIndex","responseValue","answer"],"sources":["../src/markupUtils.js"],"sourcesContent":["// do not remove \\t from \\times, \\triangle, \\tan, \\theta or \\therefore\nconst tSymbols = 'imes|riangle|an|heta|herefore';\n// do not remove \\n from \\nthroot, \\nparallel, \\ncong, \\napprox, \\neq, \\ne or \\nsim\nconst nSymbols = 'throot|parallel|cong|approx|eq|e|sim';\n// match all \\t and \\n that are not part of math symbols that starts with \\t or \\n\nconst matchTabAndNewLine = new RegExp(\n  `(\\\\t(?!${tSymbols}))|(\\\\n(?!${nSymbols}))|(\\\\\\\\t(?!${tSymbols}))|(\\\\\\\\n(?!${nSymbols}))`,\n  'g'\n);\n\nexport const removeUnwantedCharacters = (markup) =>\n  markup.replace(matchTabAndNewLine, '').replace(/\\\\\"/g, '\"').replace(/\\\\\\//g, '/');\n\nconst createElementFromHTML = (htmlString = '') => {\n  const div = document.createElement('div');\n\n  div.innerHTML = htmlString.trim();\n\n  return div;\n};\n\nexport const processMarkup = (markup) => {\n  const newMarkup = removeUnwantedCharacters(markup || '');\n  const slateMarkup = createElementFromHTML(newMarkup || '');\n\n  slateMarkup.querySelectorAll('[data-type=\"math_templated\"]')\n    .forEach((s) => s.replaceWith(`{{${s.dataset.index}}}`));\n\n  return slateMarkup.innerHTML;\n};\n\nconst REGEX = /\\{\\{(\\d+)\\}\\}/g;\n\nexport const createSlateMarkup = (markup, responses) => {\n  if (!markup) {\n    return '';\n  }\n\n  const newMarkup = removeUnwantedCharacters(markup);\n\n  return newMarkup.replace(REGEX, (match, groupIndex) => {\n    const responseValue = responses[groupIndex]?.answer || '';\n    return `<span data-type=\"math_templated\" data-index=\"${groupIndex}\" data-value=\"${responseValue}\"></span>`;\n  });\n};\n"],"mappings":";;;;;;AAAA;AACA,MAAMA,QAAQ,GAAG,+BAA+B;AAChD;AACA,MAAMC,QAAQ,GAAG,sCAAsC;AACvD;AACA,MAAMC,kBAAkB,GAAG,IAAIC,MAAM,CACnC,UAAUH,QAAQ,aAAaC,QAAQ,eAAeD,QAAQ,eAAeC,QAAQ,IAAI,EACzF,GACF,CAAC;AAEM,MAAMG,wBAAwB,GAAIC,MAAM,IAC7CA,MAAM,CAACC,OAAO,CAACJ,kBAAkB,EAAE,EAAE,CAAC,CAACI,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAACA,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC;AAACC,OAAA,CAAAH,wBAAA,GAAAA,wBAAA;AAEpF,MAAMI,qBAAqB,GAAGA,CAACC,UAAU,GAAG,EAAE,KAAK;EACjD,MAAMC,GAAG,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEzCF,GAAG,CAACG,SAAS,GAAGJ,UAAU,CAACK,IAAI,CAAC,CAAC;EAEjC,OAAOJ,GAAG;AACZ,CAAC;AAEM,MAAMK,aAAa,GAAIV,MAAM,IAAK;EACvC,MAAMW,SAAS,GAAGZ,wBAAwB,CAACC,MAAM,IAAI,EAAE,CAAC;EACxD,MAAMY,WAAW,GAAGT,qBAAqB,CAACQ,SAAS,IAAI,EAAE,CAAC;EAE1DC,WAAW,CAACC,gBAAgB,CAAC,8BAA8B,CAAC,CACzDC,OAAO,CAAEC,CAAC,IAAKA,CAAC,CAACC,WAAW,CAAC,KAAKD,CAAC,CAACE,OAAO,CAACC,KAAK,IAAI,CAAC,CAAC;EAE1D,OAAON,WAAW,CAACJ,SAAS;AAC9B,CAAC;AAACN,OAAA,CAAAQ,aAAA,GAAAA,aAAA;AAEF,MAAMS,KAAK,GAAG,gBAAgB;AAEvB,MAAMC,iBAAiB,GAAGA,CAACpB,MAAM,EAAEqB,SAAS,KAAK;EACtD,IAAI,CAACrB,MAAM,EAAE;IACX,OAAO,EAAE;EACX;EAEA,MAAMW,SAAS,GAAGZ,wBAAwB,CAACC,MAAM,CAAC;EAElD,OAAOW,SAAS,CAACV,OAAO,CAACkB,KAAK,EAAE,CAACG,KAAK,EAAEC,UAAU,KAAK;IACrD,MAAMC,aAAa,GAAGH,SAAS,CAACE,UAAU,CAAC,EAAEE,MAAM,IAAI,EAAE;IACzD,OAAO,gDAAgDF,UAAU,iBAAiBC,aAAa,WAAW;EAC5G,CAAC,CAAC;AACJ,CAAC;AAACtB,OAAA,CAAAkB,iBAAA,GAAAA,iBAAA","ignoreList":[]}

package/configure/lib/response.js

@@ -0,0 +1,394 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Response = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _configUi = require("@pie-lib/config-ui");
+var _mathToolbar = require("@pie-lib/math-toolbar");
+var _Card = _interopRequireDefault(require("@mui/material/Card"));
+var _CardContent = _interopRequireDefault(require("@mui/material/CardContent"));
+var _Button = _interopRequireDefault(require("@mui/material/Button"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _styles = require("@mui/material/styles");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _renderUi = require("@pie-lib/render-ui");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ResponseContainer = (0, _styles.styled)(_Card.default)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2.5),
+  width: '100%',
+  minWidth: '548px',
+  border: `1px solid ${theme.palette.grey[700]}`,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between'
+}));
+const StyledCardContent = (0, _styles.styled)(_CardContent.default)(({
+  theme
+}) => ({
+  paddingBottom: `${theme.spacing(2)} !important`
+}));
+const StyledTitle = (0, _styles.styled)(_Typography.default)({
+  fontWeight: 700,
+  fontSize: '1.2rem',
+  flex: 3
+});
+const StyledSelectContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  flex: 2,
+  '& > *:not(label)': {
+    marginTop: theme.spacing(1)
+  }
+}));
+const InputContainerWrapper = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const TitleBar = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between'
+});
+const FlexContainer = (0, _styles.styled)('div')({
+  display: 'flex'
+});
+const AlternateButton = (0, _styles.styled)(_Button.default)(({
+  theme
+}) => ({
+  border: `1px solid ${theme.palette.grey['A400']}`,
+  color: _renderUi.color.text()
+}));
+const RemoveAlternateButton = (0, _styles.styled)(_IconButton.default)(({
+  theme
+}) => ({
+  marginLeft: theme.spacing(1)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+const ResponseBox = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  background: theme.palette.grey['A100'],
+  color: theme.palette.grey['A700'],
+  display: 'inline',
+  minWidth: '50px',
+  padding: '8px',
+  border: '1px solid #C0C3CF'
+}));
+const AlternateBar = (0, _styles.styled)('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center'
+});
+const CustomColorCheckbox = (0, _styles.styled)(_Checkbox.default)({
+  color: `${_renderUi.color.tertiary()} !important`
+});
+
+// CSS for MathToolbar classNames (used as strings)
+if (typeof document !== 'undefined') {
+  const styleId = 'math-templated-response-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      .response-editor {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-width: 500px;
+        max-width: 900px;
+        height: auto;
+        min-height: 40px;
+      }
+      .math-toolbar {
+        width: 100%;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+class Response extends React.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "onChange", name => evt => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = evt.target.value;
+      onResponseChange(newResponse, responseKey);
+    });
+    (0, _defineProperty2.default)(this, "onConfigChanged", name => evt => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = evt.target.checked;
+      onResponseChange(newResponse, responseKey);
+    });
+    (0, _defineProperty2.default)(this, "onLiteralOptionsChange", name => () => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse[name] = !response[name];
+      onResponseChange(newResponse, responseKey);
+    });
+    (0, _defineProperty2.default)(this, "onAnswerChange", answer => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse.answer = answer;
+      onResponseChange(newResponse, responseKey);
+    });
+    (0, _defineProperty2.default)(this, "onAlternateAnswerChange", alternateId => answer => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      newResponse.alternates[alternateId] = answer;
+      onResponseChange(newResponse, responseKey);
+    });
+    (0, _defineProperty2.default)(this, "onAddAlternate", () => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const {
+        alternateIdCounter
+      } = this.state;
+      const newResponse = {
+        ...response
+      };
+      if (!newResponse.alternates) {
+        newResponse.alternates = {};
+      }
+      newResponse.alternates[alternateIdCounter] = '';
+      onResponseChange(newResponse, responseKey);
+      this.setState({
+        alternateIdCounter: alternateIdCounter + 1
+      });
+    });
+    (0, _defineProperty2.default)(this, "onRemoveAlternate", alternateId => () => {
+      const {
+        response,
+        onResponseChange,
+        responseKey
+      } = this.props;
+      const newResponse = {
+        ...response
+      };
+      delete newResponse.alternates[alternateId];
+      onResponseChange(newResponse, responseKey);
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount : state.showKeypad.openCount - 1
+        }
+      }));
+    });
+    (0, _defineProperty2.default)(this, "onDone", () => {
+      const {
+        onResponseDone
+      } = this.props;
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: state.showKeypad.openCount - 1,
+          main: false
+        }
+      }));
+      onResponseDone();
+    });
+    (0, _defineProperty2.default)(this, "onFocus", () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad.main ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          main: true
+        }
+      }));
+    });
+    (0, _defineProperty2.default)(this, "onAlternateFocus", alternateId => () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: !state.showKeypad[alternateId] ? state.showKeypad.openCount + 1 : state.showKeypad.openCount,
+          [alternateId]: true
+        }
+      }));
+    });
+    (0, _defineProperty2.default)(this, "onAlternateDone", alternateId => () => {
+      this.setState(state => ({
+        showKeypad: {
+          ...state.showKeypad,
+          openCount: state.showKeypad.openCount - 1,
+          [alternateId]: false
+        }
+      }));
+    });
+    const {
+      response: {
+        alternates
+      } = {}
+    } = props || {};
+    const alternatesLength = Object.keys(alternates || {}).length;
+    this.state = {
+      alternateIdCounter: alternatesLength + 1,
+      showKeypad: {
+        openCount: 0,
+        main: false
+      }
+    };
+  }
+  render() {
+    const {
+      mode,
+      responseKey,
+      response,
+      cAllowTrailingZeros,
+      cIgnoreOrder,
+      error
+    } = this.props;
+    const {
+      showKeypad
+    } = this.state;
+    const {
+      validation,
+      answer,
+      alternates,
+      ignoreOrder,
+      allowTrailingZeros
+    } = response;
+    const hasAlternates = Object.keys(alternates || {}).length > 0;
+    const classNames = {
+      editor: 'response-editor',
+      mathToolbar: 'math-toolbar'
+    };
+    const styles = {
+      minHeight: `${showKeypad.openCount > 0 ? 430 : 230}px`
+    };
+    // add 1 to index to display R 1 instead of R 0
+    const keyToDisplay = `R ${parseInt(responseKey) + 1}`;
+    return /*#__PURE__*/React.createElement(ResponseContainer, {
+      style: styles
+    }, /*#__PURE__*/React.createElement(StyledCardContent, null, /*#__PURE__*/React.createElement(TitleBar, null, /*#__PURE__*/React.createElement(StyledTitle, {
+      component: "div"
+    }, "Response for ", /*#__PURE__*/React.createElement(ResponseBox, null, keyToDisplay)), /*#__PURE__*/React.createElement(StyledSelectContainer, {
+      label: "Validation"
+    }, /*#__PURE__*/React.createElement(_Select.default, {
+      onChange: this.onChange('validation'),
+      value: validation || 'literal',
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, /*#__PURE__*/React.createElement(_MenuItem.default, {
+      value: "literal"
+    }, "Literal Validation"), /*#__PURE__*/React.createElement(_MenuItem.default, {
+      value: "symbolic"
+    }, "Symbolic Validation")))), validation === 'literal' && /*#__PURE__*/React.createElement(FlexContainer, null, cAllowTrailingZeros.enabled && /*#__PURE__*/React.createElement(_FormControlLabel.default, {
+      label: cAllowTrailingZeros.label,
+      control: /*#__PURE__*/React.createElement(CustomColorCheckbox, {
+        checked: allowTrailingZeros,
+        onChange: this.onLiteralOptionsChange('allowTrailingZeros')
+      })
+    }), cIgnoreOrder.enabled && /*#__PURE__*/React.createElement(_FormControlLabel.default, {
+      label: cIgnoreOrder.label,
+      control: /*#__PURE__*/React.createElement(CustomColorCheckbox, {
+        checked: ignoreOrder,
+        onChange: this.onLiteralOptionsChange('ignoreOrder')
+      })
+    })), /*#__PURE__*/React.createElement(InputContainerWrapper, null, /*#__PURE__*/React.createElement(_InputLabel.default, null, "Correct Answer"), /*#__PURE__*/React.createElement(_mathToolbar.MathToolbar, {
+      keypadMode: mode,
+      classNames: classNames,
+      controlledKeypad: true,
+      showKeypad: showKeypad.main,
+      latex: answer || '',
+      onChange: this.onAnswerChange,
+      onFocus: this.onFocus,
+      onDone: this.onDone,
+      error: error && error.answer
+    }), error && error.answer ? /*#__PURE__*/React.createElement(ErrorText, null, error.answer) : null), hasAlternates && Object.keys(alternates).map((alternateId, altIdx) => /*#__PURE__*/React.createElement(InputContainerWrapper, {
+      key: alternateId
+    }, /*#__PURE__*/React.createElement(_InputLabel.default, null, "Alternate", Object.keys(alternates).length > 1 ? ` ${altIdx + 1}` : ''), /*#__PURE__*/React.createElement(AlternateBar, null, /*#__PURE__*/React.createElement(_mathToolbar.MathToolbar, {
+      classNames: classNames,
+      controlledKeypad: true,
+      keypadMode: mode,
+      showKeypad: showKeypad[alternateId] || false,
+      latex: alternates[alternateId] || '',
+      onChange: this.onAlternateAnswerChange(alternateId),
+      onFocus: this.onAlternateFocus(alternateId),
+      onDone: this.onAlternateDone(alternateId),
+      error: error && error[alternateId]
+    }), /*#__PURE__*/React.createElement(RemoveAlternateButton, {
+      onClick: this.onRemoveAlternate(alternateId),
+      size: "large"
+    }, /*#__PURE__*/React.createElement(_Delete.default, null))), error && error[alternateId] ? /*#__PURE__*/React.createElement(ErrorText, null, error[alternateId]) : null)), /*#__PURE__*/React.createElement(AlternateButton, {
+      type: "primary",
+      onClick: this.onAddAlternate
+    }, "ADD ALTERNATE")));
+  }
+}
+exports.Response = Response;
+(0, _defineProperty2.default)(Response, "propTypes", {
+  defaultResponse: _propTypes.default.bool,
+  error: _propTypes.default.object,
+  mode: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  onResponseChange: _propTypes.default.func.isRequired,
+  onResponseDone: _propTypes.default.func.isRequired,
+  response: _propTypes.default.object.isRequired,
+  cIgnoreOrder: _propTypes.default.object.isRequired,
+  cAllowTrailingZeros: _propTypes.default.object.isRequired,
+  responseKey: _propTypes.default.number.isRequired
+});
+(0, _defineProperty2.default)(Response, "defaultProps", {
+  defaultResponse: false,
+  mode: '8'
+});
+var _default = exports.default = Response;
+//# sourceMappingURL=response.js.map