@pie-element/fraction-model 2.6.8-next.5 → 2.6.8-next.72

package/configure/lib/main.js

@@ -23,9 +23,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireDefault(require("react"));
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
-var _editableHtml = require("@pie-lib/pie-toolbox/editable-html");
+var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -184,7 +184,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
         label: (title === null || title === void 0 ? void 0 : title.label) || 'Title',
         className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         className: classes.title,
         markup: model.title || '',
         onChange: function onChange(title) {
@@ -206,7 +206,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
         label: (prompt === null || prompt === void 0 ? void 0 : prompt.label) || 'Question',
         className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml.EditableHtml, {
+      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
         markup: model.prompt || '',
         minHeight: 60,
         onChange: function onChange(prompt) {

package/configure/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["styles","theme","label","marginBottom","spacing","unit","tooltip","fontSize","typography","whiteSpace","maxWidth","errorText","color","palette","error","main","paddingTop","flexRow","display","alignItems","gap","errorMessage","marginTop","modelError","border","Main","props","correctResponse","model","onChange","oldModel","newModel","showDiag","length","setState","correctAnswerChangeDialog","open","text","Math","floor","random","state","classes","configuration","imageSupport","uploadSoundSupport","baseInputConfiguration","contentDimensions","title","prompt","modelOptions","mathMlOptions","errors","extraCSSRules","spellCheckEnabled","toolbarEditorPosition","toolbarOpts","position","getPluginProps","fractionModelChartKey","generateRandomKey","inputConfiguration","language","onModelOptionsChange","marginLeft","modelTypeSelected","maxModelSelected","partsPerModel","showGraphLabels","onCorrectAnswerChange","React","Component","PropTypes","object","isRequired","onConfigurationChanged","func","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FormSection, layout, AlertDialog } from '@pie-lib/pie-toolbox/config-ui';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport CardBar from './card-bar';\nimport ModelOptions from './model-options';\nimport { FractionModelChart } from '@pie-element/fraction-model';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Info from '@material-ui/icons/Info';\n\nconst styles = (theme) => ({\n  label: {\n    marginBottom: theme.spacing.unit * 4,\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n  flexRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '10px',\n  },\n  errorMessage: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    marginTop: theme.spacing.unit,\n  },\n  modelError: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    uploadSoundSupport: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      correctAnswerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n  }\n\n  /*\n   * Method to handle correct answer change\n   * @param {array} correctResponse - correct response\n   * */\n  onCorrectAnswerChange = (correctResponse) => {\n    const { model, onChange } = this.props;\n    model.correctResponse = correctResponse;\n    onChange({ ...model });\n  };\n\n  /*\n   * Method to handle model options change\n   * @param {object} oldModel - old model\n   * @param {object} newModel - new model\n   * @param {boolean} showDiag - show dialog or not\n   * */\n  onModelOptionsChange = (oldModel, newModel, showDiag) => {\n    const { onChange } = this.props;\n    if (showDiag && oldModel.correctResponse.length > 0) {\n      this.setState({\n        correctAnswerChangeDialog: {\n          open: true,\n          oldModel: oldModel,\n          newModel: newModel,\n          text: 'Changing either the Number of Models or Parts per Model will remove added correct answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      onChange({ ...newModel });\n    }\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { classes, model, onChange, configuration, imageSupport, uploadSoundSupport } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      title = {},\n      prompt = {},\n      modelOptions = {},\n      mathMlOptions = {},\n    } = configuration || {};\n\n    const { errors = {}, extraCSSRules, spellCheckEnabled, toolbarEditorPosition } = model || {};\n\n    const { correctAnswerChangeDialog } = this.state;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <layout.ConfigLayout extraCSSRules={extraCSSRules} dimensions={contentDimensions} hideSettings={true}>\n        <CardBar header=\"Set Up\"></CardBar>\n\n        <FormSection label={title?.label || 'Title'} className={classes.label}>\n          <EditableHtml\n            className={classes.title}\n            markup={model.title || ''}\n            onChange={(title) => onChange({ title })}\n            toolbarOpts={toolbarOpts}\n            activePlugins={[\n              'bold',\n              'html',\n              'italic',\n              'underline',\n              'strikethrough',\n              'image',\n              'math',\n              'languageCharacters',\n              'responseArea',\n            ]}\n            pluginProps={getPluginProps(title?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection label={prompt?.label || 'Question'} className={classes.label}>\n          <EditableHtml\n            markup={model.prompt || ''}\n            minHeight={60}\n            onChange={(prompt) => onChange({ prompt })}\n            toolbarOpts={toolbarOpts}\n            pluginProps={getPluginProps(prompt?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            imageSupport={imageSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection>\n          <ModelOptions model={model} onChange={this.onModelOptionsChange} modelOptions={modelOptions} />\n        </FormSection>\n\n        <FormSection>\n          <CardBar\n            header=\"Correct Answer\"\n            info={\n              <Tooltip\n                classes={{ tooltip: classes.tooltip }}\n                disableFocusListener\n                disableTouchListener\n                placement={'right'}\n                title={'The correct answer should include no more than one partially-filled model'}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '8px' }} />\n              </Tooltip>\n            }\n          ></CardBar>\n\n          <br />\n          <label className={classes.label}>\n            Click/touch the number of parts to represent the correct fraction model\n          </label>\n          <br />\n\n          <div className={errors.correctResponse && classes.modelError}>\n            <FractionModelChart\n              key={fractionModelChartKey}\n              value={model.correctResponse}\n              modelType={model.modelTypeSelected}\n              noOfModels={model.maxModelSelected}\n              partsPerModel={model.partsPerModel}\n              showLabel={model.showGraphLabels}\n              onChange={this.onCorrectAnswerChange}\n            ></FractionModelChart>\n          </div>\n\n          {errors.correctResponse && <div className={classes.errorMessage}>{errors.correctResponse}</div>}\n        </FormSection>\n\n        <AlertDialog\n          open={correctAnswerChangeDialog.open}\n          title=\"Warning\"\n          text={correctAnswerChangeDialog.text}\n          onConfirm={() => {\n            let newModel = this.state.correctAnswerChangeDialog.newModel;\n            newModel.correctResponse = [];\n            onChange({ ...newModel });\n            this.setState({\n              correctAnswerChangeDialog: { open: false },\n            });\n          }}\n          onClose={() => {\n            const oldModel = this.state.correctAnswerChangeDialog.oldModel;\n            onChange({ ...oldModel });\n            this.setState({ correctAnswerChangeDialog: { open: false } });\n          }}\n          onConfirmText={'OK'}\n          onCloseText={'Cancel'}\n        />\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nexport default withStyles(styles, { name: 'Main' })(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["styles","theme","label","marginBottom","spacing","unit","tooltip","fontSize","typography","whiteSpace","maxWidth","errorText","color","palette","error","main","paddingTop","flexRow","display","alignItems","gap","errorMessage","marginTop","modelError","border","Main","props","correctResponse","model","onChange","oldModel","newModel","showDiag","length","setState","correctAnswerChangeDialog","open","text","Math","floor","random","state","classes","configuration","imageSupport","uploadSoundSupport","baseInputConfiguration","contentDimensions","title","prompt","modelOptions","mathMlOptions","errors","extraCSSRules","spellCheckEnabled","toolbarEditorPosition","toolbarOpts","position","getPluginProps","fractionModelChartKey","generateRandomKey","inputConfiguration","language","onModelOptionsChange","marginLeft","modelTypeSelected","maxModelSelected","partsPerModel","showGraphLabels","onCorrectAnswerChange","React","Component","PropTypes","object","isRequired","onConfigurationChanged","func","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FormSection, layout, AlertDialog } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport CardBar from './card-bar';\nimport ModelOptions from './model-options';\nimport { FractionModelChart } from '@pie-element/fraction-model';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Info from '@material-ui/icons/Info';\n\nconst styles = (theme) => ({\n  label: {\n    marginBottom: theme.spacing.unit * 4,\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n  flexRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '10px',\n  },\n  errorMessage: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    marginTop: theme.spacing.unit,\n  },\n  modelError: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    uploadSoundSupport: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      correctAnswerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n  }\n\n  /*\n   * Method to handle correct answer change\n   * @param {array} correctResponse - correct response\n   * */\n  onCorrectAnswerChange = (correctResponse) => {\n    const { model, onChange } = this.props;\n    model.correctResponse = correctResponse;\n    onChange({ ...model });\n  };\n\n  /*\n   * Method to handle model options change\n   * @param {object} oldModel - old model\n   * @param {object} newModel - new model\n   * @param {boolean} showDiag - show dialog or not\n   * */\n  onModelOptionsChange = (oldModel, newModel, showDiag) => {\n    const { onChange } = this.props;\n    if (showDiag && oldModel.correctResponse.length > 0) {\n      this.setState({\n        correctAnswerChangeDialog: {\n          open: true,\n          oldModel: oldModel,\n          newModel: newModel,\n          text: 'Changing either the Number of Models or Parts per Model will remove added correct answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      onChange({ ...newModel });\n    }\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { classes, model, onChange, configuration, imageSupport, uploadSoundSupport } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      title = {},\n      prompt = {},\n      modelOptions = {},\n      mathMlOptions = {},\n    } = configuration || {};\n\n    const { errors = {}, extraCSSRules, spellCheckEnabled, toolbarEditorPosition } = model || {};\n\n    const { correctAnswerChangeDialog } = this.state;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <layout.ConfigLayout extraCSSRules={extraCSSRules} dimensions={contentDimensions} hideSettings={true}>\n        <CardBar header=\"Set Up\"></CardBar>\n\n        <FormSection label={title?.label || 'Title'} className={classes.label}>\n          <EditableHtml\n            className={classes.title}\n            markup={model.title || ''}\n            onChange={(title) => onChange({ title })}\n            toolbarOpts={toolbarOpts}\n            activePlugins={[\n              'bold',\n              'html',\n              'italic',\n              'underline',\n              'strikethrough',\n              'image',\n              'math',\n              'languageCharacters',\n              'responseArea',\n            ]}\n            pluginProps={getPluginProps(title?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection label={prompt?.label || 'Question'} className={classes.label}>\n          <EditableHtml\n            markup={model.prompt || ''}\n            minHeight={60}\n            onChange={(prompt) => onChange({ prompt })}\n            toolbarOpts={toolbarOpts}\n            pluginProps={getPluginProps(prompt?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            imageSupport={imageSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection>\n          <ModelOptions model={model} onChange={this.onModelOptionsChange} modelOptions={modelOptions} />\n        </FormSection>\n\n        <FormSection>\n          <CardBar\n            header=\"Correct Answer\"\n            info={\n              <Tooltip\n                classes={{ tooltip: classes.tooltip }}\n                disableFocusListener\n                disableTouchListener\n                placement={'right'}\n                title={'The correct answer should include no more than one partially-filled model'}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '8px' }} />\n              </Tooltip>\n            }\n          ></CardBar>\n\n          <br />\n          <label className={classes.label}>\n            Click/touch the number of parts to represent the correct fraction model\n          </label>\n          <br />\n\n          <div className={errors.correctResponse && classes.modelError}>\n            <FractionModelChart\n              key={fractionModelChartKey}\n              value={model.correctResponse}\n              modelType={model.modelTypeSelected}\n              noOfModels={model.maxModelSelected}\n              partsPerModel={model.partsPerModel}\n              showLabel={model.showGraphLabels}\n              onChange={this.onCorrectAnswerChange}\n            ></FractionModelChart>\n          </div>\n\n          {errors.correctResponse && <div className={classes.errorMessage}>{errors.correctResponse}</div>}\n        </FormSection>\n\n        <AlertDialog\n          open={correctAnswerChangeDialog.open}\n          title=\"Warning\"\n          text={correctAnswerChangeDialog.text}\n          onConfirm={() => {\n            let newModel = this.state.correctAnswerChangeDialog.newModel;\n            newModel.correctResponse = [];\n            onChange({ ...newModel });\n            this.setState({\n              correctAnswerChangeDialog: { open: false },\n            });\n          }}\n          onClose={() => {\n            const oldModel = this.state.correctAnswerChangeDialog.oldModel;\n            onChange({ ...oldModel });\n            this.setState({ correctAnswerChangeDialog: { open: false } });\n          }}\n          onConfirmText={'OK'}\n          onCloseText={'Cancel'}\n        />\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nexport default withStyles(styles, { name: 'Main' })(Main);\n"],"file":"main.js"}

package/configure/lib/model-options.js

@@ -35,7 +35,7 @@ var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
 
 var _cardBar = _interopRequireDefault(require("./card-bar"));
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 

package/configure/lib/model-options.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/model-options.jsx"],"names":["ModelOptions","props","value","model","onChange","modelTypeSelected","target","changeMaxModel","change","bind","changePartModel","studentConfig","key","event","oldModel","newModel","showDiag","maxModelSelected","partsPerModel","allowedStudentConfig","classes","modelOptions","maxOfModel","modelTypeChoices","groupInline","group","inputLabel","container2","handleSelect","map","choice","index","label","min","max","checkbox","chkLabel","React","Component","PropTypes","object","isRequired","func","styles","alignItems","display","gap","margin","marginBottom","labelWidth","width","height","verticalAlign","border","borderRadius","paddingLeft","marginLeft","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MiniField } from './number-text-field';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CardBar from './card-bar';\nimport { Checkbox } from '@pie-lib/pie-toolbox/config-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nexport class ModelOptions extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    classes: PropTypes.object,\n    onChange: PropTypes.func,\n    modelOptions: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.changeMaxModel = this.change.bind(this, 'max');\n    this.changePartModel = this.change.bind(this, 'part');\n    this.studentConfig = this.change.bind(this, 'student-config');\n  }\n\n  /**\n   * Function to trigger when DOM elements value change for Number type\n   * @param {string} key contains key of element\n   * @param {object} event contains event object\n   * @param {string} value contains value of DOM element\n   */\n  change(key, event, value) {\n    const { model, onChange } = this.props;\n    const oldModel = cloneDeep(model);\n    let newModel = cloneDeep(model);\n    let showDiag = false;\n    if (key === 'max') {\n      newModel.maxModelSelected = value;\n      showDiag = true;\n    } else if (key === 'part') {\n      newModel.partsPerModel = value;\n      showDiag = true;\n    } else if (key === 'student-config') {\n      newModel.allowedStudentConfig = value;\n      showDiag = false;\n    }\n    onChange(oldModel, newModel, showDiag);\n  }\n\n  /**\n   * Function to trigger on change of dropdown value model type\n   * @param {string} value contains selection value\n   */\n  handleSelect = (value) => {\n    const { model, onChange } = this.props;\n    model.modelTypeSelected = value?.target.value;\n    onChange(model, { ...model }, false);\n  };\n\n  render() {\n    const { model, classes, modelOptions } = this.props;\n    const { maxOfModel, partsPerModel, modelTypeChoices } = modelOptions;\n\n    return (\n      <div>\n        <CardBar header=\"Configure Fraction Model\"></CardBar>\n        <br />\n        <div className={classes.groupInline}>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Model Type</label>\n            <Select className={classes.container2} onChange={this.handleSelect} value={model.modelTypeSelected}>\n              {modelTypeChoices.map((choice, index) => (\n                <MenuItem key={'item_' + index} value={choice.value}>\n                  {choice.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Max # of Models</label>\n            <MiniField\n              min={maxOfModel.min}\n              max={maxOfModel.max}\n              value={model.maxModelSelected}\n              name=\"max-model\"\n              onChange={this.changeMaxModel}\n            />\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Parts per Model</label>\n            <MiniField\n              min={partsPerModel.min}\n              max={partsPerModel.max}\n              value={model.partsPerModel}\n              name=\"model-parts\"\n              onChange={this.changePartModel}\n            />\n          </div>\n        </div>\n        <div className={classes.checkbox}>\n          <Checkbox onChange={this.studentConfig} checked={model.allowedStudentConfig} label={''} />\n          <span className={classes.chkLabel}>Allow student to configure number of models and parts per model</span>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  groupInline: {\n    alignItems: 'center',\n    display: 'flex',\n    gap: '20px',\n  },\n  group: {\n    margin: '12px 0',\n  },\n  inputLabel: {\n    display: 'block',\n    marginBottom: '4px',\n  },\n  labelWidth: {\n    width: '35%',\n  },\n  container2: {\n    width: '80px',\n    alignItems: 'center',\n    height: '40px',\n    verticalAlign: 'top',\n    border: '1px solid rgb(0, 0, 0, 0.23)',\n    borderRadius: '4px',\n    marginBottom: '8px',\n    paddingLeft: '10px',\n    ':hover': {\n      border: '1px solid rgb(0, 0, 0, 0.87)',\n    },\n  },\n  checkbox: {\n    marginLeft: '-15px',\n  },\n  chkLabel: {\n    verticalAlign: 'middle',\n  },\n});\n\nexport default withStyles(styles, { name: 'ModelOptions' })(ModelOptions);\n"],"file":"model-options.js"}
+{"version":3,"sources":["../src/model-options.jsx"],"names":["ModelOptions","props","value","model","onChange","modelTypeSelected","target","changeMaxModel","change","bind","changePartModel","studentConfig","key","event","oldModel","newModel","showDiag","maxModelSelected","partsPerModel","allowedStudentConfig","classes","modelOptions","maxOfModel","modelTypeChoices","groupInline","group","inputLabel","container2","handleSelect","map","choice","index","label","min","max","checkbox","chkLabel","React","Component","PropTypes","object","isRequired","func","styles","alignItems","display","gap","margin","marginBottom","labelWidth","width","height","verticalAlign","border","borderRadius","paddingLeft","marginLeft","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { MiniField } from './number-text-field';\nimport { withStyles } from '@material-ui/core/styles';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport CardBar from './card-bar';\nimport { Checkbox } from '@pie-lib/config-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nexport class ModelOptions extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    classes: PropTypes.object,\n    onChange: PropTypes.func,\n    modelOptions: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.changeMaxModel = this.change.bind(this, 'max');\n    this.changePartModel = this.change.bind(this, 'part');\n    this.studentConfig = this.change.bind(this, 'student-config');\n  }\n\n  /**\n   * Function to trigger when DOM elements value change for Number type\n   * @param {string} key contains key of element\n   * @param {object} event contains event object\n   * @param {string} value contains value of DOM element\n   */\n  change(key, event, value) {\n    const { model, onChange } = this.props;\n    const oldModel = cloneDeep(model);\n    let newModel = cloneDeep(model);\n    let showDiag = false;\n    if (key === 'max') {\n      newModel.maxModelSelected = value;\n      showDiag = true;\n    } else if (key === 'part') {\n      newModel.partsPerModel = value;\n      showDiag = true;\n    } else if (key === 'student-config') {\n      newModel.allowedStudentConfig = value;\n      showDiag = false;\n    }\n    onChange(oldModel, newModel, showDiag);\n  }\n\n  /**\n   * Function to trigger on change of dropdown value model type\n   * @param {string} value contains selection value\n   */\n  handleSelect = (value) => {\n    const { model, onChange } = this.props;\n    model.modelTypeSelected = value?.target.value;\n    onChange(model, { ...model }, false);\n  };\n\n  render() {\n    const { model, classes, modelOptions } = this.props;\n    const { maxOfModel, partsPerModel, modelTypeChoices } = modelOptions;\n\n    return (\n      <div>\n        <CardBar header=\"Configure Fraction Model\"></CardBar>\n        <br />\n        <div className={classes.groupInline}>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Model Type</label>\n            <Select className={classes.container2} onChange={this.handleSelect} value={model.modelTypeSelected}>\n              {modelTypeChoices.map((choice, index) => (\n                <MenuItem key={'item_' + index} value={choice.value}>\n                  {choice.label}\n                </MenuItem>\n              ))}\n            </Select>\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Max # of Models</label>\n            <MiniField\n              min={maxOfModel.min}\n              max={maxOfModel.max}\n              value={model.maxModelSelected}\n              name=\"max-model\"\n              onChange={this.changeMaxModel}\n            />\n          </div>\n          <div className={classes.group}>\n            <label className={classes.inputLabel}>Parts per Model</label>\n            <MiniField\n              min={partsPerModel.min}\n              max={partsPerModel.max}\n              value={model.partsPerModel}\n              name=\"model-parts\"\n              onChange={this.changePartModel}\n            />\n          </div>\n        </div>\n        <div className={classes.checkbox}>\n          <Checkbox onChange={this.studentConfig} checked={model.allowedStudentConfig} label={''} />\n          <span className={classes.chkLabel}>Allow student to configure number of models and parts per model</span>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  groupInline: {\n    alignItems: 'center',\n    display: 'flex',\n    gap: '20px',\n  },\n  group: {\n    margin: '12px 0',\n  },\n  inputLabel: {\n    display: 'block',\n    marginBottom: '4px',\n  },\n  labelWidth: {\n    width: '35%',\n  },\n  container2: {\n    width: '80px',\n    alignItems: 'center',\n    height: '40px',\n    verticalAlign: 'top',\n    border: '1px solid rgb(0, 0, 0, 0.23)',\n    borderRadius: '4px',\n    marginBottom: '8px',\n    paddingLeft: '10px',\n    ':hover': {\n      border: '1px solid rgb(0, 0, 0, 0.87)',\n    },\n  },\n  checkbox: {\n    marginLeft: '-15px',\n  },\n  chkLabel: {\n    verticalAlign: 'middle',\n  },\n});\n\nexport default withStyles(styles, { name: 'ModelOptions' })(ModelOptions);\n"],"file":"model-options.js"}

package/configure/lib/number-text-field.js

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/configure/lib/number-text-field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/number-text-field.jsx"],"names":["NumberTextField","classes","props","undefined","textField","className","React","Component","PropTypes","object","isRequired","styles","theme","marginLeft","spacing","unit","miniStyles","maxWidth","width","marginTop","height","fontSize","MiniField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,e;;;;;;;;;;;;WAKX,kBAAS;AACP,UAAQC,OAAR,GAAoB,KAAKC,KAAzB,CAAQD,OAAR;;AACA,UAAMC,KAAK,mCAAQ,KAAKA,KAAb;AAAoBD,QAAAA,OAAO,EAAEE;AAA7B,QAAX;;AACA,0BAAO,gCAAC,yBAAD,gCAASD,KAAT;AAAgB,QAAA,SAAS,EAAE,4BAAGD,OAAO,CAACG,SAAX,EAAsBF,KAAK,CAACG,SAA5B,CAA3B;AAAmE,QAAA,OAAO,EAAC;AAA3E,SAAP;AACD;;;EATkCC,kBAAMC,S;;;iCAA9BP,e,eACQ;AACjBC,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC;AADT,C;;AAWrB,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBR,IAAAA,SAAS,EAAE;AACTS,MAAAA,UAAU,EAAED,KAAK,CAACE,OAAN,CAAcC;AADjB;AADc,GAAZ;AAAA,CAAf;;AAMA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAO;AACxBZ,IAAAA,SAAS,EAAE;AACTa,MAAAA,QAAQ,EAAE,OADD;AAETC,MAAAA,KAAK,EAAE,OAFE;AAGTC,MAAAA,SAAS,EAAE,GAHF;AAIT,wCAAkC;AAChCC,QAAAA,MAAM,EAAE,EADwB;AAEhCC,QAAAA,QAAQ,EAAE;AAFsB;AAJzB;AADa,GAAP;AAAA,CAAnB;;AAWO,IAAMC,SAAS,GAAG,wBAAWN,UAAX,EAAuBhB,eAAvB,CAAlB;;;eAEQ,wBAAWW,MAAX,EAAmBX,eAAnB,C","sourcesContent":["import { NumberTextField as NTF } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\n\nexport class NumberTextField extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { classes } = this.props;\n    const props = { ...this.props, classes: undefined };\n    return <NTF {...props} className={cn(classes.textField, props.className)} variant=\"outlined\" />;\n  }\n}\n\nconst styles = (theme) => ({\n  textField: {\n    marginLeft: theme.spacing.unit,\n  },\n});\n\nconst miniStyles = () => ({\n  textField: {\n    maxWidth: '120px',\n    width: '120px',\n    marginTop: '0',\n    '& [class^=\"MuiInputBase-root\"]': {\n      height: 40,\n      fontSize: '14px',\n    },\n  },\n});\nexport const MiniField = withStyles(miniStyles)(NumberTextField);\n\nexport default withStyles(styles)(NumberTextField);\n"],"file":"number-text-field.js"}
+{"version":3,"sources":["../src/number-text-field.jsx"],"names":["NumberTextField","classes","props","undefined","textField","className","React","Component","PropTypes","object","isRequired","styles","theme","marginLeft","spacing","unit","miniStyles","maxWidth","width","marginTop","height","fontSize","MiniField"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;IAEaA,e;;;;;;;;;;;;WAKX,kBAAS;AACP,UAAQC,OAAR,GAAoB,KAAKC,KAAzB,CAAQD,OAAR;;AACA,UAAMC,KAAK,mCAAQ,KAAKA,KAAb;AAAoBD,QAAAA,OAAO,EAAEE;AAA7B,QAAX;;AACA,0BAAO,gCAAC,yBAAD,gCAASD,KAAT;AAAgB,QAAA,SAAS,EAAE,4BAAGD,OAAO,CAACG,SAAX,EAAsBF,KAAK,CAACG,SAA5B,CAA3B;AAAmE,QAAA,OAAO,EAAC;AAA3E,SAAP;AACD;;;EATkCC,kBAAMC,S;;;iCAA9BP,e,eACQ;AACjBC,EAAAA,OAAO,EAAEO,sBAAUC,MAAV,CAAiBC;AADT,C;;AAWrB,IAAMC,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBR,IAAAA,SAAS,EAAE;AACTS,MAAAA,UAAU,EAAED,KAAK,CAACE,OAAN,CAAcC;AADjB;AADc,GAAZ;AAAA,CAAf;;AAMA,IAAMC,UAAU,GAAG,SAAbA,UAAa;AAAA,SAAO;AACxBZ,IAAAA,SAAS,EAAE;AACTa,MAAAA,QAAQ,EAAE,OADD;AAETC,MAAAA,KAAK,EAAE,OAFE;AAGTC,MAAAA,SAAS,EAAE,GAHF;AAIT,wCAAkC;AAChCC,QAAAA,MAAM,EAAE,EADwB;AAEhCC,QAAAA,QAAQ,EAAE;AAFsB;AAJzB;AADa,GAAP;AAAA,CAAnB;;AAWO,IAAMC,SAAS,GAAG,wBAAWN,UAAX,EAAuBhB,eAAvB,CAAlB;;;eAEQ,wBAAWW,MAAX,EAAmBX,eAAnB,C","sourcesContent":["import { NumberTextField as NTF } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport cn from 'classnames';\n\nexport class NumberTextField extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n  };\n\n  render() {\n    const { classes } = this.props;\n    const props = { ...this.props, classes: undefined };\n    return <NTF {...props} className={cn(classes.textField, props.className)} variant=\"outlined\" />;\n  }\n}\n\nconst styles = (theme) => ({\n  textField: {\n    marginLeft: theme.spacing.unit,\n  },\n});\n\nconst miniStyles = () => ({\n  textField: {\n    maxWidth: '120px',\n    width: '120px',\n    marginTop: '0',\n    '& [class^=\"MuiInputBase-root\"]': {\n      height: 40,\n      fontSize: '14px',\n    },\n  },\n});\nexport const MiniField = withStyles(miniStyles)(NumberTextField);\n\nexport default withStyles(styles)(NumberTextField);\n"],"file":"number-text-field.js"}

package/configure/package.json

@@ -8,7 +8,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.25.0",
+    "@pie-lib/config-ui": "^11.19.0",
+    "@pie-lib/editable-html": "^11.11.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",

package/controller/package.json

@@ -6,7 +6,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.25.0",
+    "@pie-lib/text-select": "1.22.0",
     "debug": "^3.1.0",
     "lodash": "^4.17.15"
   },

package/lib/index.js

@@ -35,7 +35,7 @@ var _main = _interopRequireDefault(require("./main"));
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
-var _mathRendering = require("@pie-lib/pie-toolbox/math-rendering");
+var _mathRendering = require("@pie-lib/math-rendering");
 
 var _fractionModelChart = _interopRequireDefault(require("./fraction-model-chart"));
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["FractionModel","_model","m","_render","_session","s","session","model","answers","configComplete","allowedStudentConfig","noOfModel","partsPerModel","responseComplete","Array","isArray","response","length","complete","isSessionComplete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","el","React","createElement","Main","onSessionChange","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAKqBA,a;;;;;AACnB,2BAAc;AAAA;AAAA;AAEb;;;;SAOD,eAAY;AACV,aAAO,KAAKC,MAAZ;AACD,K;SAPD,aAAUC,CAAV,EAAa;AACX,WAAKD,MAAL,GAAcC,CAAd;;AACA,WAAKC,OAAL;AACD;;;SAWD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD;AAED;AACF;AACA;AACA;AACA;;SAbE,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;;AACA,WAAKF,OAAL;AACD;;;WAWD,2BAAkBG,OAAlB,EAA2BC,KAA3B,EAAkC;AAChC,UAAMC,OAAO,GAAGF,OAAO,IAAIA,OAAO,CAACE,OAAnC;AACA,UAAMC,cAAc,GAAGF,KAAK,CAACG,oBAAN,GAA6BF,OAAO,CAACG,SAAR,GAAoB,CAApB,IAAyBH,OAAO,CAACI,aAAR,GAAwB,CAA9E,GAAkF,IAAzG;AACA,UAAMC,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAcP,OAAO,CAACQ,QAAtB,KAAmCR,OAAO,CAACQ,QAAR,CAAiBC,MAAjB,GAA0B,CAAtF;AACA,aAAOR,cAAc,IAAII,gBAAzB;AACD;AAED;AACF;AACA;AACA;;;;WACE,yBAAgBP,OAAhB,EAAyB;AACvB,WAAKF,QAAL,CAAcI,OAAd,GAAwBF,OAAO,IAAIA,OAAO,CAACE,OAA3C;AACA,UAAMU,QAAQ,GAAG,KAAKC,iBAAL,CAAuB,KAAKf,QAA5B,EAAsC,KAAKH,MAA3C,CAAjB;AACA,WAAKmB,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,KAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDL,QAApD,CAAnB;AACD;;;WAED,6BAAoB;AAClB,WAAKf,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKF,MAAL,IAAe,KAAKG,QAAxB,EAAkC;AAChC,YAAIG,KAAK,GAAG,2BAAU,KAAKN,MAAf,CAAZ;;AACA,YAAMuB,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCpB,UAAAA,KAAK,EAALA,KADmC;AAEnCD,UAAAA,OAAO,EAAE,KAAKF,QAFqB;AAGnCwB,UAAAA,eAAe,EAAE,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B;AAHkB,SAA1B,CAAX;;AAMAC,6BAASC,MAAT,CAAgBP,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA9DwCQ,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { renderMath } from '@pie-lib/pie-toolbox/math-rendering';\nimport FractionModelChart from './fraction-model-chart';\n\n// Export FractionModelChart for use in configure\nexport { FractionModelChart };\n\nexport default class FractionModel extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  get model() {\n    return this._model;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  /*\n   * Method to check if student answered the question\n   * @param {session} session contains the session object\n   * @param {model} model contains the model object\n   * */\n  isSessionComplete(session, model) {\n    const answers = session && session.answers;\n    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;\n    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;\n    return configComplete && responseComplete;\n  }\n\n  /*\n   * Session change event handler\n   * @param {session} session contains the session object\n   * */\n  onSessionChange(session) {\n    this._session.answers = session && session.answers;\n    const complete = this.isSessionComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      let model = cloneDeep(this._model);\n      const el = React.createElement(Main, {\n        model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["FractionModel","_model","m","_render","_session","s","session","model","answers","configComplete","allowedStudentConfig","noOfModel","partsPerModel","responseComplete","Array","isArray","response","length","complete","isSessionComplete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","el","React","createElement","Main","onSessionChange","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAKqBA,a;;;;;AACnB,2BAAc;AAAA;AAAA;AAEb;;;;SAOD,eAAY;AACV,aAAO,KAAKC,MAAZ;AACD,K;SAPD,aAAUC,CAAV,EAAa;AACX,WAAKD,MAAL,GAAcC,CAAd;;AACA,WAAKC,OAAL;AACD;;;SAWD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD;AAED;AACF;AACA;AACA;AACA;;SAbE,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;;AACA,WAAKF,OAAL;AACD;;;WAWD,2BAAkBG,OAAlB,EAA2BC,KAA3B,EAAkC;AAChC,UAAMC,OAAO,GAAGF,OAAO,IAAIA,OAAO,CAACE,OAAnC;AACA,UAAMC,cAAc,GAAGF,KAAK,CAACG,oBAAN,GAA6BF,OAAO,CAACG,SAAR,GAAoB,CAApB,IAAyBH,OAAO,CAACI,aAAR,GAAwB,CAA9E,GAAkF,IAAzG;AACA,UAAMC,gBAAgB,GAAGC,KAAK,CAACC,OAAN,CAAcP,OAAO,CAACQ,QAAtB,KAAmCR,OAAO,CAACQ,QAAR,CAAiBC,MAAjB,GAA0B,CAAtF;AACA,aAAOR,cAAc,IAAII,gBAAzB;AACD;AAED;AACF;AACA;AACA;;;;WACE,yBAAgBP,OAAhB,EAAyB;AACvB,WAAKF,QAAL,CAAcI,OAAd,GAAwBF,OAAO,IAAIA,OAAO,CAACE,OAA3C;AACA,UAAMU,QAAQ,GAAG,KAAKC,iBAAL,CAAuB,KAAKf,QAA5B,EAAsC,KAAKH,MAA3C,CAAjB;AACA,WAAKmB,aAAL,CAAmB,IAAIC,oCAAJ,CAAwB,KAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoDL,QAApD,CAAnB;AACD;;;WAED,6BAAoB;AAClB,WAAKf,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKF,MAAL,IAAe,KAAKG,QAAxB,EAAkC;AAChC,YAAIG,KAAK,GAAG,2BAAU,KAAKN,MAAf,CAAZ;;AACA,YAAMuB,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCpB,UAAAA,KAAK,EAALA,KADmC;AAEnCD,UAAAA,OAAO,EAAE,KAAKF,QAFqB;AAGnCwB,UAAAA,eAAe,EAAE,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B;AAHkB,SAA1B,CAAX;;AAMAC,6BAASC,MAAT,CAAgBP,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA9DwCQ,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport FractionModelChart from './fraction-model-chart';\n\n// Export FractionModelChart for use in configure\nexport { FractionModelChart };\n\nexport default class FractionModel extends HTMLElement {\n  constructor() {\n    super();\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  get model() {\n    return this._model;\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  /*\n   * Method to check if student answered the question\n   * @param {session} session contains the session object\n   * @param {model} model contains the model object\n   * */\n  isSessionComplete(session, model) {\n    const answers = session && session.answers;\n    const configComplete = model.allowedStudentConfig ? answers.noOfModel > 0 && answers.partsPerModel > 0 : true;\n    const responseComplete = Array.isArray(answers.response) && answers.response.length > 0;\n    return configComplete && responseComplete;\n  }\n\n  /*\n   * Session change event handler\n   * @param {session} session contains the session object\n   * */\n  onSessionChange(session) {\n    this._session.answers = session && session.answers;\n    const complete = this.isSessionComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      let model = cloneDeep(this._model);\n      const el = React.createElement(Main, {\n        model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/lib/main.js

@@ -29,13 +29,13 @@ var _styles = require("@material-ui/core/styles");
 
 var _answerFraction = _interopRequireDefault(require("./answer-fraction"));
 
-var _correctAnswerToggle = require("@pie-lib/pie-toolbox/correct-answer-toggle");
+var _correctAnswerToggle = _interopRequireDefault(require("@pie-lib/correct-answer-toggle"));
 
 var _fractionModelChart = _interopRequireDefault(require("./fraction-model-chart"));
 
-var _configUi = require("@pie-lib/pie-toolbox/config-ui");
+var _configUi = require("@pie-lib/config-ui");
 
-var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
+var _renderUi = require("@pie-lib/render-ui");
 
 var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
 
@@ -172,7 +172,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
         className: "prompt",
         prompt: prompt,
         tagName: "p"
-      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle.CorrectAnswerToggle, {
+      }), /*#__PURE__*/_react["default"].createElement(_correctAnswerToggle["default"], {
         language: language,
         show: showCorrectAnswerToggle,
         toggled: showCorrect,

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["Main","props","onSessionChange","state","session","model","answers","response","allowedStudentConfig","noOfModel","partsPerModel","newAnswers","oldSession","newSession","length","setState","answerChangeDialog","open","text","callOnSessionChange","show","showCorrect","Math","floor","random","generateAnswers","classes","prompt","title","correctness","extraCSSRules","language","showCorrectAnswerToggle","fractionModelChartKey","generateRandomKey","modelPreview","titleContainer","toggleShowCorrect","view","onAnswerChange","correctResponse","modelTypeSelected","maxModelSelected","showGraphLabels","onResponseChange","prevState","React","Component","PropTypes","object","func","isRequired","styles","previewHeading","fontWeight","fontSize","margin","padding","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport AnswerFraction from './answer-fraction';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport FractionModelChart from './fraction-model-chart';\nimport { AlertDialog } from '@pie-lib/pie-toolbox/config-ui';\nimport { PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nexport class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onSessionChange: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      session: {\n        ...props.session,\n        answers: (props.session && props.session.answers) || this.generateAnswers(props.model),\n      },\n      showCorrect: false,\n      answerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n    this.callOnSessionChange();\n  }\n\n  /**\n   * Function to trigger when session value change for fraction model\n   */\n  callOnSessionChange = () => {\n    const { onSessionChange } = this.props;\n    if (onSessionChange) {\n      onSessionChange(this.state.session);\n    }\n  };\n\n  /**\n   * Function to generate answers for preview selection\n   * @param {object} model contains model object for fraction model\n   * @returns answer model\n   */\n  generateAnswers = (model) => {\n    const answers = {\n      response: [],\n    };\n    if (model.allowedStudentConfig) {\n      (answers.noOfModel = ''), (answers.partsPerModel = '');\n    }\n    return answers;\n  };\n\n  /**\n   * Function to trigger when answer change from preview\n   * @param {object} newAnswers contains updated answer model\n   */\n  onAnswerChange = (newAnswers) => {\n    let oldSession = cloneDeep(this.state.session);\n    let newSession = {\n      ...this.state.session,\n      answers: newAnswers,\n    };\n    if (newAnswers.response.length > 0) {\n      this.setState({\n        answerChangeDialog: {\n          open: true,\n          oldSession: oldSession,\n          newSession: newSession,\n          text: 'Changing either the Number of Models or Parts per Model will remove added answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      this.setState(\n        (state) => ({\n          session: newSession,\n        }),\n        this.callOnSessionChange,\n      );\n    }\n  };\n\n  /*\n   * Function to toggle correct answer\n   * @param {boolean} show contains boolean value to show correct answer\n   * */\n  toggleShowCorrect = (show) => {\n    this.setState({ showCorrect: show });\n  };\n\n  /*\n   * Function to trigger when response change from preview\n   * @param {object} response contains updated response model\n   * */\n  onResponseChange = (response) => {\n    this.setState(\n      (state) => ({\n        session: {\n          ...state.session,\n          answers: {\n            ...state.session.answers,\n            response,\n          },\n        },\n      }),\n      this.callOnSessionChange,\n    );\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { model, classes } = this.props;\n    const { showCorrect, session, answerChangeDialog } = this.state;\n    const { prompt, title, correctness = {}, extraCSSRules, language } = model;\n    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <div className={classes.modelPreview}>\n          <div className={classes.titleContainer}>\n            <PreviewPrompt className=\"prompt\" prompt={title} tagName=\"h3\" />\n          </div>\n          <PreviewPrompt className=\"prompt\" prompt={prompt} tagName=\"p\" />\n\n          <CorrectAnswerToggle\n            language={language}\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.toggleShowCorrect}\n          />\n\n          <AnswerFraction\n            model={model}\n            showCorrect={showCorrect}\n            disabled={model.view}\n            onAnswerChange={this.onAnswerChange}\n            answers={session.answers}\n          />\n\n          <FractionModelChart\n            key={fractionModelChartKey}\n            disabled={model.view}\n            value={showCorrect ? model.correctResponse : session.answers.response}\n            modelType={model.modelTypeSelected}\n            noOfModels={\n              showCorrect\n                ? model.maxModelSelected\n                : model.allowedStudentConfig\n                ? session.answers.noOfModel\n                : model.maxModelSelected\n            }\n            partsPerModel={\n              showCorrect\n                ? model.partsPerModel\n                : model.allowedStudentConfig\n                ? session.answers.partsPerModel\n                : model.partsPerModel\n            }\n            showLabel={model.showGraphLabels}\n            onChange={this.onResponseChange}\n          ></FractionModelChart>\n\n          <AlertDialog\n            open={answerChangeDialog.open}\n            title=\"Warning\"\n            text={answerChangeDialog.text}\n            onConfirm={() => {\n              let newSession = this.state.answerChangeDialog.newSession;\n              newSession.answers.response = [];\n              this.setState(\n                () => ({\n                  session: newSession,\n                  answerChangeDialog: { open: false },\n                }),\n                this.callOnSessionChange,\n              );\n            }}\n            onClose={() => {\n              this.setState(\n                (prevState) => ({\n                  session: prevState.answerChangeDialog.oldSession,\n                  answerChangeDialog: { open: false },\n                }),\n                this.callOnSessionChange,\n              );\n            }}\n            onConfirmText={'OK'}\n            onCloseText={'Cancel'}\n          />\n        </div>\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = () => ({\n  previewHeading: {\n    fontWeight: '400',\n    fontSize: '24px',\n    margin: '14px 0',\n  },\n  modelPreview: {\n    padding: '16px',\n  },\n  titleContainer: {\n    textAlign: 'center',\n    fontSize: '20px',\n  },\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["Main","props","onSessionChange","state","session","model","answers","response","allowedStudentConfig","noOfModel","partsPerModel","newAnswers","oldSession","newSession","length","setState","answerChangeDialog","open","text","callOnSessionChange","show","showCorrect","Math","floor","random","generateAnswers","classes","prompt","title","correctness","extraCSSRules","language","showCorrectAnswerToggle","fractionModelChartKey","generateRandomKey","modelPreview","titleContainer","toggleShowCorrect","view","onAnswerChange","correctResponse","modelTypeSelected","maxModelSelected","showGraphLabels","onResponseChange","prevState","React","Component","PropTypes","object","func","isRequired","styles","previewHeading","fontWeight","fontSize","margin","padding","textAlign"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport AnswerFraction from './answer-fraction';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport FractionModelChart from './fraction-model-chart';\nimport { AlertDialog } from '@pie-lib/config-ui';\nimport { PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\nimport cloneDeep from 'lodash/cloneDeep';\n\nexport class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onSessionChange: PropTypes.func.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      session: {\n        ...props.session,\n        answers: (props.session && props.session.answers) || this.generateAnswers(props.model),\n      },\n      showCorrect: false,\n      answerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n    this.callOnSessionChange();\n  }\n\n  /**\n   * Function to trigger when session value change for fraction model\n   */\n  callOnSessionChange = () => {\n    const { onSessionChange } = this.props;\n    if (onSessionChange) {\n      onSessionChange(this.state.session);\n    }\n  };\n\n  /**\n   * Function to generate answers for preview selection\n   * @param {object} model contains model object for fraction model\n   * @returns answer model\n   */\n  generateAnswers = (model) => {\n    const answers = {\n      response: [],\n    };\n    if (model.allowedStudentConfig) {\n      (answers.noOfModel = ''), (answers.partsPerModel = '');\n    }\n    return answers;\n  };\n\n  /**\n   * Function to trigger when answer change from preview\n   * @param {object} newAnswers contains updated answer model\n   */\n  onAnswerChange = (newAnswers) => {\n    let oldSession = cloneDeep(this.state.session);\n    let newSession = {\n      ...this.state.session,\n      answers: newAnswers,\n    };\n    if (newAnswers.response.length > 0) {\n      this.setState({\n        answerChangeDialog: {\n          open: true,\n          oldSession: oldSession,\n          newSession: newSession,\n          text: 'Changing either the Number of Models or Parts per Model will remove added answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      this.setState(\n        (state) => ({\n          session: newSession,\n        }),\n        this.callOnSessionChange,\n      );\n    }\n  };\n\n  /*\n   * Function to toggle correct answer\n   * @param {boolean} show contains boolean value to show correct answer\n   * */\n  toggleShowCorrect = (show) => {\n    this.setState({ showCorrect: show });\n  };\n\n  /*\n   * Function to trigger when response change from preview\n   * @param {object} response contains updated response model\n   * */\n  onResponseChange = (response) => {\n    this.setState(\n      (state) => ({\n        session: {\n          ...state.session,\n          answers: {\n            ...state.session.answers,\n            response,\n          },\n        },\n      }),\n      this.callOnSessionChange,\n    );\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { model, classes } = this.props;\n    const { showCorrect, session, answerChangeDialog } = this.state;\n    const { prompt, title, correctness = {}, extraCSSRules, language } = model;\n    const showCorrectAnswerToggle = correctness.correctness && correctness.correctness !== 'correct';\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        <div className={classes.modelPreview}>\n          <div className={classes.titleContainer}>\n            <PreviewPrompt className=\"prompt\" prompt={title} tagName=\"h3\" />\n          </div>\n          <PreviewPrompt className=\"prompt\" prompt={prompt} tagName=\"p\" />\n\n          <CorrectAnswerToggle\n            language={language}\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.toggleShowCorrect}\n          />\n\n          <AnswerFraction\n            model={model}\n            showCorrect={showCorrect}\n            disabled={model.view}\n            onAnswerChange={this.onAnswerChange}\n            answers={session.answers}\n          />\n\n          <FractionModelChart\n            key={fractionModelChartKey}\n            disabled={model.view}\n            value={showCorrect ? model.correctResponse : session.answers.response}\n            modelType={model.modelTypeSelected}\n            noOfModels={\n              showCorrect\n                ? model.maxModelSelected\n                : model.allowedStudentConfig\n                ? session.answers.noOfModel\n                : model.maxModelSelected\n            }\n            partsPerModel={\n              showCorrect\n                ? model.partsPerModel\n                : model.allowedStudentConfig\n                ? session.answers.partsPerModel\n                : model.partsPerModel\n            }\n            showLabel={model.showGraphLabels}\n            onChange={this.onResponseChange}\n          ></FractionModelChart>\n\n          <AlertDialog\n            open={answerChangeDialog.open}\n            title=\"Warning\"\n            text={answerChangeDialog.text}\n            onConfirm={() => {\n              let newSession = this.state.answerChangeDialog.newSession;\n              newSession.answers.response = [];\n              this.setState(\n                () => ({\n                  session: newSession,\n                  answerChangeDialog: { open: false },\n                }),\n                this.callOnSessionChange,\n              );\n            }}\n            onClose={() => {\n              this.setState(\n                (prevState) => ({\n                  session: prevState.answerChangeDialog.oldSession,\n                  answerChangeDialog: { open: false },\n                }),\n                this.callOnSessionChange,\n              );\n            }}\n            onConfirmText={'OK'}\n            onCloseText={'Cancel'}\n          />\n        </div>\n      </UiLayout>\n    );\n  }\n}\n\nconst styles = () => ({\n  previewHeading: {\n    fontWeight: '400',\n    fontSize: '24px',\n    margin: '14px 0',\n  },\n  modelPreview: {\n    padding: '16px',\n  },\n  titleContainer: {\n    textAlign: 'center',\n    fontSize: '20px',\n  },\n});\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}

package/package.json

@@ -4,12 +4,16 @@
     "access": "public"
   },
   "repository": "pie-framework/pie-elements",
-  "version": "2.6.8-next.5+1a8599988",
+  "version": "2.6.8-next.72+bb2d58615",
   "description": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.25.0",
+    "@pie-lib/config-ui": "^11.19.0",
+    "@pie-lib/correct-answer-toggle": "^2.15.0",
+    "@pie-lib/math-rendering": "^3.12.0",
+    "@pie-lib/render-ui": "^4.25.0",
+    "@pie-lib/test-utils": "0.12.0",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
@@ -17,7 +21,7 @@
   },
   "author": "",
   "license": "ISC",
-  "gitHead": "1a8599988419994ada116fac0862057925e4583c",
+  "gitHead": "bb2d58615291cb18ae4b0c5f3113c1309056ce62",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },