@pie-element/ebsr 6.6.2 → 6.6.3-next.1016

package/configure/node_modules/@pie-element/multiple-choice/module/configure.js

@@ -0,0 +1,843 @@
+import {_dll_react, _dll_prop_types, _dll_material_ui__core_styles, _dll_material_ui__core, _dll_lodash, _dll_material_ui__icons, _dll_pie_lib__render_ui, _dll_debug, _dll_react_dom} from "../../../@pie-lib/shared-module@^1.4.17/module/index.js";
+import {_dll_pie_lib__config_ui} from "../../../@pie-lib/config-module@^1.2.4/module/index.js";
+import {_dll_pie_lib__editable_html} from "../../../@pie-lib/editable-html-module@^1.5.4/module/index.js";
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelUpdatedEvent extends CustomEvent {
+  constructor(update, reset = false) {
+    super(ModelUpdatedEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        update,
+        reset
+      }
+    });
+    this.update = update;
+    this.reset = reset;
+  }
+}
+ModelUpdatedEvent.TYPE = 'model.updated';
+var ModelUpdatedEvent_1 = lib.ModelUpdatedEvent = ModelUpdatedEvent;
+class DeleteImageEvent extends CustomEvent {
+  constructor(src, done) {
+    super(DeleteImageEvent.TYPE, {
+      bubbles: true,
+      detail: {
+        src,
+        done
+      }
+    });
+    this.src = src;
+    this.done = done;
+  }
+}
+DeleteImageEvent.TYPE = 'delete.image';
+var DeleteImageEvent_1 = lib.DeleteImageEvent = DeleteImageEvent;
+class InsertImageEvent extends CustomEvent {
+  constructor(handler) {
+    super(InsertImageEvent.TYPE, {
+      bubbles: true,
+      detail: handler
+    });
+    this.handler = handler;
+  }
+}
+InsertImageEvent.TYPE = 'insert.image';
+var InsertImageEvent_1 = lib.InsertImageEvent = InsertImageEvent;
+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 React$1 = _dll_react;
+const PropTypes = _dll_prop_types;
+const {color: color} = _dll_pie_lib__render_ui;
+const {withStyles: withStyles} = _dll_material_ui__core_styles;
+const {Button: Button} = _dll_material_ui__core;
+const {Tooltip: Tooltip} = _dll_material_ui__core;
+const {Dialog: Dialog} = _dll_material_ui__core;
+const {DialogTitle: DialogTitle} = _dll_material_ui__core;
+const {DialogActions: DialogActions} = _dll_material_ui__core;
+const {Typography: Typography} = _dll_material_ui__core;
+const {merge: merge} = _dll_lodash;
+const {Info: Info} = _dll_material_ui__icons;
+const EditableHtml = _dll_pie_lib__editable_html;
+const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
+const {ChoiceConfiguration: ChoiceConfiguration} = _dll_pie_lib__config_ui;
+const {settings: settings} = _dll_pie_lib__config_ui;
+const {layout: layout} = _dll_pie_lib__config_ui;
+const {choiceUtils: utils$1} = _dll_pie_lib__config_ui;
+const _jsxFileName = "/home/circleci/repo/packages/multiple-choice/configure/src/main.jsx";
+const {Panel, toggle, radio, dropdown} = settings;
+const MAX_CHOICES = 9;
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingBottom: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  prompt: {
+    paddingTop: theme.spacing.unit * 2,
+    width: '100%'
+  },
+  rationaleHolder: {
+    width: '70%'
+  },
+  accessibilityHolder: {
+    width: '70%'
+  },
+  rationale: {
+    paddingTop: theme.spacing.unit * 2
+  },
+  accessibility: {
+    paddingTop: theme.spacing.unit * 2
+  },
+  design: {
+    paddingTop: theme.spacing.unit * 3
+  },
+  choiceConfigurationHolder: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center'
+  },
+  choiceConfiguration: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    paddingBottom: theme.spacing.unit * 2
+  },
+  switchElement: {
+    justifyContent: 'space-between',
+    margin: 0
+  },
+  addButton: {
+    float: 'right'
+  },
+  disableButton: {
+    cursor: 'not-allowed',
+    pointerEvents: 'all',
+    backgroundColor: color.disabled(),
+    '&:hover': {
+      backgroundColor: color.disabled()
+    },
+    '&:focus': {
+      backgroundColor: color.disabled()
+    }
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginBottom: '5px'
+  },
+  titleText: {
+    fontFamily: 'Cerebri Sans',
+    fontSize: '18px',
+    lineHeight: '19px',
+    color: '#495B8F',
+    marginRight: '5px'
+  },
+  tooltip: {
+    fontSize: '12px',
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  },
+  errorText: {
+    fontSize: '12px',
+    color: 'red',
+    paddingTop: '5px'
+  }
+});
+const Design = withStyles(styles)(props => {
+  const {classes, model, configuration, onPromptChanged, onChoiceChanged, onRemoveChoice, onAddChoice, imageSupport, onChangeModel, onConfigurationChanged, onTeacherInstructionsChanged} = props;
+  const {prompt = {}, addChoiceButton = {}, feedback = {}, deleteChoice = {}, choiceMode = {}, choicePrefix = {}, partialScoring = {}, lockChoiceOrder = {}, teacherInstructions = {}, studentInstructions = {}, rationale = {}, accessibility = {}, scoringType = {}, sequentialChoiceLabels = {}, settingsPanelDisabled, choicesLayout, spellCheck = {}, gridColumns} = configuration || ({});
+  let {maxAnswerChoices} = configuration || ({});
+  const {limitChoicesNumber, teacherInstructionsEnabled, rationaleEnabled, accessibilityLabelsEnabled, feedbackEnabled, promptEnabled, spellCheckEnabled, choices, errors} = model || ({});
+  const {choicesErrors, correctResponseError, answerChoicesError} = errors || ({});
+  const nrOfColumnsAvailable = choices && choices.length ? Array.from({
+    length: choices.length
+  }, (_, i) => `${i + 1}`) : [];
+  const labelPlugins = {
+    audio: {
+      disabled: true
+    },
+    video: {
+      disabled: true
+    }
+  };
+  const toolbarOpts = {};
+  switch (model.toolbarEditorPosition) {
+    case 'top':
+      toolbarOpts.position = 'top';
+      break;
+    default:
+      toolbarOpts.position = 'bottom';
+      break;
+  }
+  if (limitChoicesNumber) {
+    maxAnswerChoices = MAX_CHOICES;
+  }
+  const validationMessage = generateValidationMessage(configuration);
+  const Content = React$1.createElement('div', {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 180
+    }
+  }, teacherInstructionsEnabled && React$1.createElement(InputContainer, {
+    label: teacherInstructions.label,
+    className: classes.promptHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 182
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.teacherInstructions || '',
+    onChange: onTeacherInstructionsChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 186
+    }
+  })), promptEnabled && React$1.createElement(InputContainer, {
+    label: prompt.label,
+    className: classes.promptHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 199
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.prompt,
+    markup: model.prompt,
+    onChange: onPromptChanged,
+    imageSupport: imageSupport,
+    nonEmpty: false,
+    disableUnderline: true,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 200
+    }
+  })), React$1.createElement('div', {
+    className: classes.flexContainer,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 212
+    }
+  }, React$1.createElement(Typography, {
+    className: classes.titleText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 213
+    }
+  }, "Choices"), React$1.createElement(Tooltip, {
+    classes: {
+      tooltip: classes.tooltip
+    },
+    disableFocusListener: true,
+    disableTouchListener: true,
+    placement: 'right',
+    title: validationMessage,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 214
+    }
+  }, React$1.createElement(Info, {
+    fontSize: 'small',
+    color: 'primary',
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 221
+    }
+  }))), correctResponseError && React$1.createElement('div', {
+    className: classes.errorText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 224
+    }
+  }, correctResponseError), answerChoicesError && React$1.createElement('div', {
+    className: classes.errorText,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 225
+    }
+  }, answerChoicesError), choices.map((choice, index) => React$1.createElement('div', {
+    key: `choice-${index}`,
+    className: classes.choiceConfigurationHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 227
+    }
+  }, React$1.createElement(ChoiceConfiguration, {
+    key: index,
+    index: index + 1,
+    useLetterOrdering: model.choicePrefix === 'letters',
+    className: classes.choiceConfiguration,
+    mode: model.choiceMode,
+    data: choice,
+    defaultFeedback: {},
+    imageSupport: imageSupport,
+    onDelete: () => onRemoveChoice(index),
+    onChange: c => onChoiceChanged(index, c),
+    allowFeedBack: feedbackEnabled,
+    allowDelete: deleteChoice.settings,
+    noLabels: true,
+    toolbarOpts: toolbarOpts,
+    spellCheck: spellCheckEnabled,
+    error: choicesErrors && choicesErrors[choice.value] ? choicesErrors[choice.value] : null,
+    noCorrectAnswerError: correctResponseError,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 231
+    }
+  }), rationaleEnabled && React$1.createElement(InputContainer, {
+    key: `rationale-${index}`,
+    label: rationale.label,
+    className: classes.rationaleHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 251
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.rationale,
+    markup: choice.rationale || '',
+    onChange: c => onChoiceChanged(index, {
+      ...choice,
+      rationale: c
+    }),
+    imageSupport: imageSupport,
+    toolbarOpts: toolbarOpts,
+    pluginProps: labelPlugins,
+    spellCheck: spellCheckEnabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 256
+    }
+  })), accessibilityLabelsEnabled && React$1.createElement(InputContainer, {
+    key: `accessibility-${index}`,
+    label: accessibility.label,
+    className: classes.accessibilityHolder,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 273
+    }
+  }, React$1.createElement(EditableHtml, {
+    className: classes.accessibility,
+    markup: choice.accessibility || '',
+    onChange: c => onChoiceChanged(index, {
+      ...choice,
+      accessibility: c
+    }),
+    imageSupport: imageSupport,
+    pluginProps: labelPlugins,
+    spellCheck: spellCheckEnabled,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 278
+    }
+  })))), React$1.createElement('br', {
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 295
+    }
+  }), addChoiceButton.settings && React$1.createElement(Tooltip, {
+    title: maxAnswerChoices && model.choices.length >= maxAnswerChoices ? `Only ${maxAnswerChoices} allowed maximum` : '',
+    classes: {
+      tooltip: classes.tooltip
+    },
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 297
+    }
+  }, React$1.createElement(Button, {
+    classes: {
+      root: maxAnswerChoices && model.choices.length >= maxAnswerChoices && classes.disableButton
+    },
+    className: classes.addButton,
+    variant: "contained",
+    color: "primary",
+    onClick: onAddChoice,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 305
+    }
+  }, addChoiceButton.label)));
+  const settingsInPanel = {
+    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)
+  };
+  return React$1.createElement('div', {
+    className: classes.design,
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 342
+    }
+  }, settingsPanelDisabled ? Content : React$1.createElement(layout.ConfigLayout, {
+    settings: React$1.createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        Settings: settingsInPanel,
+        Properties: {
+          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),
+          accessibilityLabelsEnabled: accessibility.settings && toggle(accessibility.label),
+          scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
+        }
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 348
+      }
+    }),
+    __self: undefined,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 346
+    }
+  }, Content));
+});
+const InfoDialog = ({open, onCancel, onOk, title}) => React$1.createElement(Dialog, {
+  open: open,
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 385
+  }
+}, React$1.createElement(DialogTitle, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 386
+  }
+}, title), React$1.createElement(DialogActions, {
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 387
+  }
+}, onOk && React$1.createElement(Button, {
+  onClick: onOk,
+  color: "primary",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 389
+  }
+}, "OK"), onCancel && React$1.createElement(Button, {
+  onClick: onCancel,
+  color: "primary",
+  __self: undefined,
+  __source: {
+    fileName: _jsxFileName,
+    lineNumber: 394
+  }
+}, "Cancel")));
+InfoDialog.propTypes = {
+  open: PropTypes.bool,
+  onCancel: PropTypes.func,
+  onOk: PropTypes.func,
+  title: PropTypes.string
+};
+class Main extends React$1.Component {
+  constructor(...args) {
+    super(...args);
+    Main.prototype.__init.call(this);
+    Main.prototype.__init2.call(this);
+    Main.prototype.__init3.call(this);
+    Main.prototype.__init4.call(this);
+    Main.prototype.__init5.call(this);
+    Main.prototype.__init6.call(this);
+    Main.prototype.__init7.call(this);
+  }
+  static __initStatic() {
+    this.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
+      })
+    };
+  }
+  __init() {
+    this.state = {
+      dialog: {
+        open: false
+      }
+    };
+  }
+  __init2() {
+    this.onRemoveChoice = index => {
+      const {model, configuration} = this.props;
+      const {minAnswerChoices} = configuration || ({});
+      if (minAnswerChoices && model.choices.length === minAnswerChoices) {
+        this.setState({
+          dialog: {
+            open: true,
+            message: `There can't be less than ${minAnswerChoices} choices.`,
+            onOk: () => {
+              this.setState({
+                dialog: {
+                  open: false
+                }
+              });
+            }
+          }
+        });
+      } else {
+        model.choices.splice(index, 1);
+        this.props.onModelChanged(model);
+      }
+    };
+  }
+  __init3() {
+    this.onAddChoice = () => {
+      const {model, configuration} = this.props;
+      let {maxAnswerChoices} = configuration || ({});
+      const {limitChoicesNumber} = model || ({});
+      if (limitChoicesNumber) {
+        maxAnswerChoices = MAX_CHOICES;
+      }
+      if (maxAnswerChoices && model.choices.length >= maxAnswerChoices) {
+        return;
+      }
+      model.choices.push({
+        label: '',
+        value: utils$1.firstAvailableIndex(model.choices.map(c => c.value), 0),
+        feedback: {
+          type: 'none'
+        }
+      });
+      this.props.onModelChanged(model);
+    };
+  }
+  __init4() {
+    this.onChoiceChanged = (index, choice) => {
+      const {model} = this.props;
+      if (choice.correct && model.choiceMode === 'radio') {
+        model.choices = model.choices.map(c => {
+          return merge({}, c, {
+            correct: false
+          });
+        });
+      }
+      model.choices.splice(index, 1, choice);
+      this.props.onModelChanged(model);
+    };
+  }
+  __init5() {
+    this.onPromptChanged = prompt => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        prompt
+      });
+    };
+  }
+  __init6() {
+    this.onTeacherInstructionsChanged = teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
+    };
+  }
+  __init7() {
+    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 {dialog} = this.state;
+    return React$1.createElement(React$1.Fragment, null, React$1.createElement(InfoDialog, {
+      open: dialog.open,
+      title: dialog.message,
+      onCancel: dialog.onCancel,
+      onOk: dialog.onOk,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 542
+      }
+    }), React$1.createElement(Design, {
+      ...this.props,
+      onChangeModel: this.onModelChanged,
+      onRemoveChoice: this.onRemoveChoice,
+      onChoiceChanged: this.onChoiceChanged,
+      onAddChoice: this.onAddChoice,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 548
+      }
+    }));
+  }
+}
+Main.__initStatic();
+const Styled = withStyles(styles)(Main);
+var sensibleDefaults = {
+  model: {
+    choiceMode: 'checkbox',
+    choicePrefix: 'letters',
+    choices: [],
+    prompt: 'Question Prompt goes here',
+    lockChoiceOrder: true,
+    partialScoring: true,
+    scoringType: 'auto',
+    feedbackEnabled: true,
+    promptEnabled: true,
+    rationaleEnabled: true,
+    teacherInstructionsEnabled: true,
+    studentInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    choicesLayout: 'vertical',
+    gridColumns: '2'
+  },
+  configuration: {
+    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'
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order'
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring'
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale'
+    },
+    accessibility: {
+      settings: false,
+      label: 'Accessibility Label'
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type'
+    },
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions'
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions'
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position'
+    },
+    minAnswerChoices: 2,
+    maxAnswerChoices: 5
+  }
+};
+const React = _dll_react;
+const ReactDOM = _dll_react_dom;
+const debug = _dll_debug;
+const {defaults: defaults} = _dll_lodash;
+const {choiceUtils: utils} = _dll_pie_lib__config_ui;
+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: {
+      ...model,
+      choices: generateFormattedChoices(model && model.choices || [], configuration && configuration.answerChoiceCount)
+    }
+  };
+};
+class MultipleChoice extends HTMLElement {
+  static __initStatic() {
+    this.createDefaultModel = (model = {}) => {
+      const normalizedModel = utils.normalizeChoices({
+        ...sensibleDefaults.model,
+        ...model,
+        choices: generateFormattedChoices(model && model.choices || [])
+      });
+      normalizedModel.choicesLayout = model.choicesLayout || model.verticalMode === false && 'horizontal' || sensibleDefaults.model.choicesLayout;
+      return normalizedModel;
+    };
+  }
+  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) {
+    const info = prepareCustomizationObject(c, this._model);
+    this.onModelChanged(info.model);
+    this._configuration = info.configuration;
+    this._render();
+  }
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new ModelUpdatedEvent_1(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();
+  }
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent_1(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent_1(src, done));
+  }
+  _render() {
+    log('_render');
+    let element = 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)
+      }
+    });
+    ReactDOM.render(element, this);
+  }
+}
+MultipleChoice.__initStatic();
+export {MultipleChoice as default};