@pie-element/multiple-choice 11.0.1-next.0 → 11.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,902 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import { ModelUpdatedEvent, InsertImageEvent, DeleteImageEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+import PropTypes from 'prop-types';
+import EditableHtml from '@pie-lib/editable-html';
+import { layout, InputContainer, ChoiceConfiguration, choiceUtils, AlertDialog, settings } from '@pie-lib/config-ui';
+import { color } from '@pie-lib/render-ui';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Tooltip from '@material-ui/core/Tooltip';
+import Typography from '@material-ui/core/Typography';
+import Info from '@material-ui/icons/Info';
+import merge from 'lodash/merge';
+import defaults from 'lodash/defaults';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const generateValidationMessage = config => {
+  const {
+    minAnswerChoices,
+    maxAnswerChoices
+  } = config;
+  const answerChoicesMessage = `\nThere should be at least ${minAnswerChoices} ` + (maxAnswerChoices ? `and at most ${maxAnswerChoices} ` : '') + 'answer choices defined.' + '\nEvery answer choice should be non-blank and unique.';
+  const correctAnswerMessage = '\nA correct answer must be defined.';
+  const message = 'Validation requirements:' + answerChoicesMessage + correctAnswerMessage;
+  return message;
+};
+
+const {
+  Panel,
+  toggle,
+  radio,
+  dropdown
+} = settings;
+const MAX_CHOICES = 9;
+
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  rationaleHolder: {
+    flex: 1,
+    marginTop: theme.spacing.unit * 1.5,
+    paddingTop: theme.spacing.unit * 2,
+    marginLeft: theme.spacing.unit * 3.5
+  },
+  choiceConfigurationHolder: {
+    display: 'flex',
+    flexDirection: 'column',
+    marginBottom: theme.spacing.unit
+  },
+  choiceConfiguration: {
+    width: '100%'
+  },
+  switchElement: {
+    justifyContent: 'space-between',
+    margin: 0
+  },
+  addButton: {
+    marginTop: theme.spacing.unit,
+    float: 'right'
+  },
+  disableButton: {
+    cursor: 'not-allowed',
+    pointerEvents: 'all',
+    backgroundColor: color.disabled(),
+    '&:hover': {
+      backgroundColor: color.disabled()
+    },
+    '&:focus': {
+      backgroundColor: color.disabled()
+    }
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  titleText: {
+    fontSize: theme.typography.fontSize + 2,
+    marginRight: theme.spacing.unit
+  },
+  tooltip: {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  }
+});
+
+const Design = withStyles(styles)(props => {
+  var _configuration$teache, _configuration$prompt;
+
+  const {
+    classes,
+    model,
+    configuration,
+    onPromptChanged,
+    onChoiceChanged,
+    onRemoveChoice,
+    onAddChoice,
+    imageSupport,
+    uploadSoundSupport,
+    onChangeModel,
+    onConfigurationChanged,
+    onTeacherInstructionsChanged
+  } = props;
+  const {
+    addChoiceButton = {},
+    contentDimensions = {},
+    feedback = {},
+    deleteChoice = {},
+    choiceMode = {},
+    choicePrefix = {},
+    partialScoring = {},
+    lockChoiceOrder = {},
+    teacherInstructions = {},
+    studentInstructions = {},
+    rationale = {},
+    scoringType = {},
+    sequentialChoiceLabels = {},
+    settingsPanelDisabled,
+    choicesLayout,
+    spellCheck = {},
+    gridColumns,
+    maxImageWidth = {},
+    maxImageHeight = {},
+    prompt = {},
+    withRubric = {},
+    mathMlOptions = {},
+    language = {},
+    languageChoices = {}
+  } = configuration || {};
+  let {
+    maxAnswerChoices
+  } = configuration || {};
+  const {
+    limitChoicesNumber,
+    teacherInstructionsEnabled,
+    rationaleEnabled,
+    feedbackEnabled,
+    promptEnabled,
+    spellCheckEnabled,
+    choices,
+    errors,
+    toolbarEditorPosition,
+    extraCSSRules
+  } = model || {};
+  const {
+    answerChoices: answerChoicesError,
+    choices: choicesErrors,
+    correctResponse: correctResponseError,
+    prompt: promptError,
+    rationale: rationaleErrors,
+    teacherInstructions: teacherInstructionsError
+  } = errors || {};
+  const nrOfColumnsAvailable = choices != null && choices.length ? Array.from({
+    length: choices.length
+  }, (_, i) => `${i + 1}`) : [];
+  const {
+    baseInputConfiguration = {}
+  } = configuration;
+  const toolbarOpts = {
+    position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+  }; // if old property is used, set maxAnswerChoices to 9
+
+  if (limitChoicesNumber) {
+    maxAnswerChoices = MAX_CHOICES;
+  }
+
+  const getPluginProps = (props = {}) => _extends({}, baseInputConfiguration, props);
+
+  const validationMessage = generateValidationMessage(configuration);
+  const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+  const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+  const addChoiceButtonTooltip = maxAnswerChoices && (choices == null ? void 0 : choices.length) >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '';
+  const panelSettings = {
+    choiceMode: choiceMode.settings && radio(choiceMode.label, ['checkbox', 'radio']),
+    'sequentialChoiceLabels.enabled': sequentialChoiceLabels.settings && toggle(sequentialChoiceLabels.label, true),
+    choicePrefix: choicePrefix.settings && radio(choicePrefix.label, ['numbers', 'letters']),
+    partialScoring: partialScoring.settings && toggle(partialScoring.label),
+    lockChoiceOrder: lockChoiceOrder.settings && toggle(lockChoiceOrder.label),
+    feedbackEnabled: feedback.settings && toggle(feedback.label),
+    choicesLayout: choicesLayout.settings && dropdown(choicesLayout.label, ['vertical', 'grid', 'horizontal']),
+    gridColumns: choicesLayout.settings && model.choicesLayout === 'grid' && nrOfColumnsAvailable.length > 0 && dropdown(gridColumns.label, nrOfColumnsAvailable),
+    'language.enabled': language.settings && toggle(language.label, true),
+    language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+  };
+  const panelProperties = {
+    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+    studentInstructionsEnabled: studentInstructions.settings && toggle(studentInstructions.label),
+    promptEnabled: prompt.settings && toggle(prompt.label),
+    rationaleEnabled: rationale.settings && toggle(rationale.label),
+    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric']),
+    rubricEnabled: (withRubric == null ? void 0 : withRubric.settings) && toggle(withRubric == null ? void 0 : withRubric.label)
+  };
+  return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
+    dimensions: contentDimensions,
+    hideSettings: settingsPanelDisabled,
+    extraCSSRules: extraCSSRules,
+    settings: /*#__PURE__*/React.createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Settings: panelSettings,
+        Properties: panelProperties
+      }
+    })
+  }, teacherInstructionsEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+    label: teacherInstructions.label,
+    className: classes.promptHolder
+  }, /*#__PURE__*/React.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.teacherInstructions || '',
+    onChange: onTeacherInstructionsChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    error: teacherInstructionsError,
+    toolbarOpts: toolbarOpts,
+    pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$teache = configuration.teacherInstructions) == null ? void 0 : _configuration$teache.inputConfiguration),
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+    maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }],
+    mathMlOptions: mathMlOptions
+  }), teacherInstructionsError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, teacherInstructionsError)), promptEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+    label: prompt.label,
+    className: classes.promptHolder
+  }, /*#__PURE__*/React.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.prompt,
+    onChange: onPromptChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    disableUnderline: true,
+    error: promptError,
+    toolbarOpts: toolbarOpts,
+    pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$prompt = configuration.prompt) == null ? void 0 : _configuration$prompt.inputConfiguration),
+    spellCheck: spellCheckEnabled,
+    maxImageWidth: maxImageWidth && maxImageWidth.prompt,
+    maxImageHeight: maxImageHeight && maxImageHeight.prompt,
+    uploadSoundSupport: uploadSoundSupport,
+    languageCharactersProps: [{
+      language: 'spanish'
+    }, {
+      language: 'special'
+    }],
+    mathMlOptions: mathMlOptions
+  }), promptError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, promptError)), /*#__PURE__*/React.createElement("div", {
+    className: classes.flexContainer
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: classes.titleText,
+    component: 'div'
+  }, "Choices"), /*#__PURE__*/React.createElement(Tooltip, {
+    classes: {
+      tooltip: classes.tooltip
+    },
+    disableFocusListener: true,
+    disableTouchListener: true,
+    placement: 'right',
+    title: validationMessage
+  }, /*#__PURE__*/React.createElement(Info, {
+    fontSize: 'small',
+    color: 'primary'
+  }))), choices.map((choice, index) => {
+    var _configuration$choice, _configuration$ration;
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: `choice-${index}`,
+      className: classes.choiceConfigurationHolder
+    }, /*#__PURE__*/React.createElement(ChoiceConfiguration, {
+      key: index,
+      index: index + 1,
+      useLetterOrdering: model.choicePrefix === 'letters',
+      className: classes.choiceConfiguration,
+      mode: model.choiceMode,
+      data: choice,
+      defaultFeedback: {},
+      imageSupport: imageSupport,
+      disableImageAlignmentButtons: true,
+      onDelete: () => onRemoveChoice(index),
+      onChange: c => onChoiceChanged(index, c),
+      allowFeedBack: feedbackEnabled,
+      allowDelete: deleteChoice.settings,
+      noLabels: true,
+      pluginOpts: getPluginProps(configuration == null ? void 0 : (_configuration$choice = configuration.choices) == null ? void 0 : _configuration$choice.inputConfiguration),
+      toolbarOpts: toolbarOpts,
+      spellCheck: spellCheckEnabled,
+      error: (choicesErrors == null ? void 0 : choicesErrors[choice.value]) || null,
+      noCorrectAnswerError: correctResponseError,
+      maxImageWidth: maxImageWidth && maxImageWidth.choices || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.choices || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      mathMlOptions: mathMlOptions
+    }), rationaleEnabled && /*#__PURE__*/React.createElement(InputContainer, {
+      key: `rationale-${index}`,
+      label: rationale.label,
+      className: classes.rationaleHolder
+    }, /*#__PURE__*/React.createElement(EditableHtml, {
+      className: classes.rationale,
+      markup: choice.rationale || '',
+      onChange: c => onChoiceChanged(index, _extends({}, choice, {
+        rationale: c
+      })),
+      imageSupport: imageSupport,
+      error: (rationaleErrors == null ? void 0 : rationaleErrors[choice.value]) || null,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(configuration == null ? void 0 : (_configuration$ration = configuration.rationale) == null ? void 0 : _configuration$ration.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), (rationaleErrors == null ? void 0 : rationaleErrors[choice.value]) && /*#__PURE__*/React.createElement("div", {
+      className: classes.errorText
+    }, rationaleErrors == null ? void 0 : rationaleErrors[choice.value])));
+  }), correctResponseError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, correctResponseError), answerChoicesError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, answerChoicesError), addChoiceButton.settings && /*#__PURE__*/React.createElement(Tooltip, {
+    title: addChoiceButtonTooltip,
+    classes: {
+      tooltip: classes.tooltip
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    classes: {
+      root: maxAnswerChoices && (choices == null ? void 0 : choices.length) >= maxAnswerChoices && classes.disableButton
+    },
+    className: classes.addButton,
+    variant: "contained",
+    color: "primary",
+    onClick: onAddChoice
+  }, addChoiceButton.label)));
+});
+class Main extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      showWarning: false
+    };
+
+    this.onRemoveChoice = index => {
+      const {
+        model,
+        configuration,
+        onModelChanged
+      } = this.props;
+      const {
+        minAnswerChoices
+      } = configuration || {};
+
+      if (minAnswerChoices && model.choices.length === minAnswerChoices) {
+        this.setState({
+          showWarning: true
+        });
+        return;
+      }
+
+      model.choices.splice(index, 1);
+      onModelChanged(model);
+    };
+
+    this.onAddChoice = () => {
+      const {
+        model,
+        configuration,
+        onModelChanged
+      } = this.props;
+      let {
+        maxAnswerChoices
+      } = configuration || {};
+      const {
+        limitChoicesNumber
+      } = model || {}; // if old property is used, set maxAnswerChoices to 9
+
+      if (limitChoicesNumber) {
+        maxAnswerChoices = MAX_CHOICES;
+      }
+
+      if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
+        return;
+      }
+
+      model.choices.push({
+        label: '',
+        value: choiceUtils.firstAvailableIndex(model.choices.map(c => c.value), 0),
+        feedback: {
+          type: 'none'
+        }
+      });
+      onModelChanged(model);
+    };
+
+    this.onChoiceChanged = (index, choice) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+
+      if (choice.correct && model.choiceMode === 'radio') {
+        model.choices = model.choices.map(c => merge({}, c, {
+          correct: false
+        }));
+      }
+
+      model.choices.splice(index, 1, choice);
+      onModelChanged(model);
+    };
+
+    this.onPromptChanged = prompt => {
+      this.props.onModelChanged(_extends({}, this.props.model, {
+        prompt
+      }));
+    };
+
+    this.onTeacherInstructionsChanged = teacherInstructions => {
+      this.props.onModelChanged(_extends({}, this.props.model, {
+        teacherInstructions
+      }));
+    };
+
+    this.onModelChanged = (model, key) => {
+      const {
+        onModelChanged
+      } = this.props;
+
+      switch (key) {
+        case 'choiceMode':
+          {
+            let value = model.choiceMode;
+
+            if (value === 'radio') {
+              let correctFound = false;
+              model.choices = model.choices.map(c => {
+                if (correctFound) {
+                  c.correct = false;
+                  return c;
+                }
+
+                if (c.correct) {
+                  correctFound = true;
+                }
+
+                return c;
+              });
+            }
+
+            onModelChanged(model, true);
+            break;
+          }
+
+        default:
+          onModelChanged(model);
+          break;
+      }
+    };
+  }
+
+  render() {
+    const {
+      configuration: {
+        minAnswerChoices
+      } = {}
+    } = this.props;
+    const {
+      showWarning
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AlertDialog, {
+      open: showWarning,
+      title: "Warning",
+      text: `There can't be less than ${minAnswerChoices || 0} choices.`,
+      onConfirm: () => this.setState({
+        showWarning: false
+      })
+    }), /*#__PURE__*/React.createElement(Design, _extends({}, this.props, {
+      onChangeModel: this.onModelChanged,
+      onRemoveChoice: this.onRemoveChoice,
+      onChoiceChanged: this.onChoiceChanged,
+      onAddChoice: this.onAddChoice,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+    })));
+  }
+
+}
+Main.propTypes = {
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  disableSidePanel: PropTypes.bool,
+  onModelChanged: PropTypes.func.isRequired,
+  onConfigurationChanged: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired
+  })
+};
+const Styled = withStyles(styles)(Main);
+
+/** NOTE: teacherInstructions, studentInstructions, rationale & scoringType
+ * functionalities are not defined yet - the value for those can belong to
+ * model or to configure
+ */
+var sensibleDefaults = {
+  model: {
+    choiceMode: 'checkbox',
+    choicePrefix: 'letters',
+    choices: [],
+    choicesLayout: 'vertical',
+    feedbackEnabled: false,
+    gridColumns: 2,
+    lockChoiceOrder: true,
+    partialScoring: true,
+    prompt: '',
+    promptEnabled: true,
+    rationale: '',
+    rationaleEnabled: true,
+    scoringType: 'auto',
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    selectedAnswerBackgroundColor: 'initial',
+    keyboardEventsEnabled: false
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    choices: {
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    choicesLayout: {
+      settings: false,
+      label: 'Choices Layout'
+    },
+    gridColumns: {
+      label: 'Grid columns'
+    },
+    answerChoiceCount: 0,
+    addChoiceButton: {
+      settings: true,
+      label: 'Add a Choice'
+    },
+    choiceMode: {
+      settings: true,
+      label: 'Response Type'
+    },
+    choicePrefix: {
+      settings: true,
+      label: 'Choice Labels'
+    },
+    deleteChoice: {
+      settings: true
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback'
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      inputConfiguration: {
+        audio: {
+          disabled: true
+        },
+        video: {
+          disabled: true
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position'
+    },
+    minAnswerChoices: 2,
+    maxAnswerChoices: 5,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 636,
+      choices: 900
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      choices: 300
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric'
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: []
+    }
+  }
+};
+
+const log = debug('multiple-choice:configure');
+
+const generateFormattedChoices = (choices, choiceCount = 0) => {
+  if (!choices || choices.length === 0) {
+    let formattedChoices = [];
+
+    for (let i = 0; i < choiceCount; i++) {
+      formattedChoices.push({
+        value: `${i}`,
+        label: '',
+        feedback: {
+          type: 'none',
+          value: ''
+        }
+      });
+    }
+
+    return formattedChoices;
+  }
+
+  return choices;
+};
+
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+  return {
+    configuration,
+    model: _extends({}, model, {
+      choices: generateFormattedChoices(model && model.choices || [], configuration && configuration.answerChoiceCount)
+    })
+  };
+};
+
+class MultipleChoice extends HTMLElement {
+  constructor() {
+    super();
+    this._model = MultipleChoice.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = MultipleChoice.createDefaultModel(s);
+
+    this._render();
+  }
+
+  set configuration(c) {
+    var _newConfiguration$lan;
+
+    const info = prepareCustomizationObject(c, this._model);
+    this.onModelChanged(info.model);
+
+    const newConfiguration = _extends({}, sensibleDefaults.configuration, info.configuration);
+
+    this._configuration = newConfiguration; // 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 (newConfiguration != null && (_newConfiguration$lan = newConfiguration.language) != null && _newConfiguration$lan.enabled) {
+      var _newConfiguration$lan2, _newConfiguration$lan3;
+
+      if (newConfiguration != null && (_newConfiguration$lan2 = newConfiguration.languageChoices) != null && (_newConfiguration$lan3 = _newConfiguration$lan2.options) != null && _newConfiguration$lan3.length) {
+        this._model.language = newConfiguration == null ? void 0 : newConfiguration.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.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 ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+
+    this._render();
+
+    this.dispatchModelUpdated(reset);
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = prepareCustomizationObject(c, this._model).configuration;
+
+    if (this._model) {
+      this.onModelChanged(this._model);
+    }
+
+    this._render();
+  }
+  /** @param {done, progress, file} handler */
+
+
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  _render() {
+    log('_render');
+    let element = /*#__PURE__*/React.createElement(Styled, {
+      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)
+      }
+    });
+    ReactDOM.render(element, this);
+  }
+
+}
+
+MultipleChoice.createDefaultModel = (model = {}) => {
+  const normalizedModel = choiceUtils.normalizeChoices(_extends({}, sensibleDefaults.model, model, {
+    choices: generateFormattedChoices(model && model.choices || [])
+  })); // This is used for offering support for old models which have the property "verticalMode"
+
+  normalizedModel.choicesLayout = model.choicesLayout || model.verticalMode === false && 'horizontal' || sensibleDefaults.model.choicesLayout;
+  return normalizedModel;
+};
+
+export { MultipleChoice as default };
+//# sourceMappingURL=configure.js.map