@pie-element/likert 2.0.1-next.0 → 2.0.2-esm.0

package/esm/configure.js

@@ -0,0 +1,890 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import debug from 'debug';
+import { ModelUpdatedEvent, InsertSoundEvent, DeleteSoundEvent } from '@pie-framework/pie-configure-events';
+import PropTypes from 'prop-types';
+import EditableHtml from '@pie-lib/editable-html';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { layout, InputContainer, NumberTextField, settings } from '@pie-lib/config-ui';
+import { withStyles } from '@material-ui/core/styles';
+import merge from 'lodash/merge';
+import { color } from '@pie-lib/render-ui';
+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 LIKERT_SCALE = {
+  likert3: 'likert3',
+  likert5: 'likert5',
+  likert7: 'likert7'
+};
+const LIKERT_TYPE = {
+  agreement: 'agreement',
+  frequency: 'frequency',
+  yesNo: 'yesNo',
+  importance: 'importance',
+  likelihood: 'likelihood',
+  like: 'like'
+};
+const LIKERT_ORIENTATION = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+const likert3Agreement = [{
+  label: 'Disagree',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Agree',
+  value: 1
+}];
+const likert5Agreement = [{
+  label: 'Strongly Disagree',
+  value: -2
+}, ...likert3Agreement, {
+  label: 'Strongly Agree',
+  value: 2
+}];
+const likert7Agreement = [{
+  label: 'Extremely Disagree',
+  value: -3
+}, ...likert5Agreement, {
+  label: 'Extremely Agree',
+  value: 3
+}];
+const likert3Frequency = [{
+  label: 'Infrequently',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Frequently',
+  value: 1
+}];
+const likert5Frequency = [{
+  label: 'Very Infrequently',
+  value: -2
+}, ...likert3Frequency, {
+  label: 'Very Frequently',
+  value: 2
+}];
+const likert7Frequency = [{
+  label: 'Never',
+  value: -3
+}, ...likert5Frequency, {
+  label: 'Always',
+  value: 3
+}];
+const likert3YesNo = [{
+  label: 'No',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Yes',
+  value: 1
+}];
+const likert5YesNo = [{
+  label: 'No',
+  value: -2
+}, {
+  label: 'Not really',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Sometimes',
+  value: 1
+}, {
+  label: 'Yes',
+  value: 2
+}];
+const likert7YesNo = [{
+  label: 'No',
+  value: -3
+}, {
+  label: 'Rarely',
+  value: -2
+}, {
+  label: 'Not really',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Sometimes',
+  value: 1
+}, {
+  label: 'Very Often',
+  value: 2
+}, {
+  label: 'Always',
+  value: 3
+}];
+const likert3Likelihood = [{
+  label: 'Not Likely',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Likely',
+  value: 1
+}];
+const likert5Likelihood = [{
+  label: 'Very Unlikely',
+  value: -2
+}, ...likert3Likelihood, {
+  label: 'Very Likely',
+  value: 2
+}];
+const likert7Likelihood = [{
+  label: 'Extremely Unlikely',
+  value: -3
+}, ...likert5Likelihood, {
+  label: 'Extremely Likely',
+  value: 3
+}];
+const likert3Importance = [{
+  label: 'Not Important',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Important',
+  value: 1
+}];
+const likert5Importance = [{
+  label: 'Very Not Important',
+  value: -2
+}, ...likert3Importance, {
+  label: 'Very Important',
+  value: 2
+}];
+const likert7Importance = [{
+  label: 'Extremely Not Important',
+  value: -3
+}, ...likert5Importance, {
+  label: 'Extremely Important',
+  value: 3
+}];
+const likert3Like = [{
+  label: 'Dislike',
+  value: -1
+}, {
+  label: 'Unsure',
+  value: 0
+}, {
+  label: 'Like',
+  value: 1
+}];
+const likert5Like = [{
+  label: 'Really Dislike',
+  value: -2
+}, ...likert3Like, {
+  label: 'Really Like',
+  value: 2
+}];
+const likert7Like = [{
+  label: 'Extremely Dislike',
+  value: -3
+}, ...likert5Like, {
+  label: 'Extremely Like',
+  value: 3
+}];
+
+const generateChoices = (likertScale, likertType) => {
+  switch (`${likertScale}-${likertType}`) {
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.agreement}`:
+      return [...likert3Agreement];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.agreement}`:
+      return [...likert5Agreement];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.agreement}`:
+      return [...likert7Agreement];
+
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.frequency}`:
+      return [...likert3Frequency];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.frequency}`:
+      return [...likert5Frequency];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.frequency}`:
+      return [...likert7Frequency];
+
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.yesNo}`:
+      return [...likert3YesNo];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.yesNo}`:
+      return [...likert5YesNo];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.yesNo}`:
+      return [...likert7YesNo];
+
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.likelihood}`:
+      return [...likert3Likelihood];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.likelihood}`:
+      return [...likert5Likelihood];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.likelihood}`:
+      return [...likert7Likelihood];
+
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.importance}`:
+      return [...likert3Importance];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.importance}`:
+      return [...likert5Importance];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.importance}`:
+      return [...likert7Importance];
+
+    case `${LIKERT_SCALE.likert3}-${LIKERT_TYPE.like}`:
+      return [...likert3Like];
+
+    case `${LIKERT_SCALE.likert5}-${LIKERT_TYPE.like}`:
+      return [...likert5Like];
+
+    case `${LIKERT_SCALE.likert7}-${LIKERT_TYPE.like}`:
+      return [...likert7Like];
+
+    default:
+      return [];
+  }
+};
+
+const {
+  Panel,
+  toggle,
+  radio
+} = settings;
+
+const styles = theme => ({
+  promptHolder: {
+    width: '100%',
+    paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2
+  },
+  radioButtonsWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  radioButtonsColumnHeader: {
+    color: theme.palette.grey[400],
+    fontSize: theme.typography.fontSize - 2
+  },
+  likertLabelHolder: {
+    display: 'flex',
+    width: '100%',
+    alignItems: 'flex-start',
+    marginBottom: theme.spacing.unit * 2
+  },
+  likertOptionsHolder: {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-around',
+    marginBottom: theme.spacing.unit * 2.5
+  },
+  likertLabelInput: {
+    width: 'calc(100% - 200px)',
+    marginRight: 0
+  },
+  errorMessage: {
+    color: theme.palette.error.main,
+    fontSize: theme.typography.fontSize - 2
+  },
+  width100: {
+    width: '100%'
+  },
+  flexRow: {
+    display: 'flex',
+    flexDirection: 'row'
+  },
+  likertValueHolder: {
+    paddingLeft: theme.spacing.unit * 2.5,
+    width: '150px'
+  },
+  likertLabelEditableHtml: {
+    paddingTop: theme.spacing.unit * 2
+  },
+  inputFormGroupIndex: {
+    width: '30px',
+    paddingTop: theme.spacing.unit * 4
+  },
+  errorText: {
+    fontSize: theme.typography.fontSize - 2,
+    color: theme.palette.error.main,
+    paddingTop: theme.spacing.unit
+  },
+  customColor: {
+    color: `${color.tertiary()} !important`
+  }
+});
+
+const LikertOrientation = withStyles(styles)(props => {
+  const {
+    classes,
+    model,
+    onChangeModel
+  } = props;
+
+  const onChangeLikertOrientation = e => {
+    const likertOrientation = e.target.value;
+    onChangeModel(_extends({}, model, {
+      likertOrientation
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.radioButtonsWrapper
+  }, /*#__PURE__*/React.createElement("p", {
+    className: classes.radioButtonsColumnHeader
+  }, "Likert Orientation"), /*#__PURE__*/React.createElement(RadioGroup, {
+    "aria-label": "likertOrientation",
+    name: "likertOrientation",
+    value: model.likertOrientation,
+    onChange: onChangeLikertOrientation
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_ORIENTATION.horizontal,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Horizontal"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_ORIENTATION.vertical,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Vertical"
+  })));
+});
+const LikertScale = withStyles(styles)(props => {
+  const {
+    classes,
+    model,
+    onChangeModel
+  } = props;
+
+  const onChangeLikertScale = e => {
+    const likertScale = e.target.value;
+    onChangeModel(_extends({}, model, {
+      likertScale,
+      choices: generateChoices(likertScale, model.likertType)
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.radioButtonsWrapper
+  }, /*#__PURE__*/React.createElement("p", {
+    className: classes.radioButtonsColumnHeader
+  }, "Likert Scale"), /*#__PURE__*/React.createElement(RadioGroup, {
+    "aria-label": "likertScale",
+    name: "likertScale",
+    value: model.likertScale,
+    onChange: onChangeLikertScale
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_SCALE.likert3,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Likert 3"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_SCALE.likert5,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Likert 5"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_SCALE.likert7,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Likert 7"
+  })));
+});
+const LikertType = withStyles(styles)(props => {
+  const {
+    classes,
+    model,
+    onChangeModel
+  } = props;
+
+  const onChangeLikertType = e => {
+    const likertType = e.target.value;
+    onChangeModel(_extends({}, model, {
+      likertType,
+      choices: generateChoices(model.likertScale, likertType)
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.radioButtonsWrapper
+  }, /*#__PURE__*/React.createElement("p", {
+    className: classes.radioButtonsColumnHeader
+  }, "Label Type"), /*#__PURE__*/React.createElement("div", {
+    className: classes.flexRow
+  }, /*#__PURE__*/React.createElement(RadioGroup, {
+    "aria-label": "likertLabelType",
+    name: "likertLabelType",
+    value: model.likertType,
+    onChange: onChangeLikertType
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.agreement,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Agreement"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.frequency,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Frequency"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.yesNo,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Yes/No"
+  })), /*#__PURE__*/React.createElement(RadioGroup, {
+    "aria-label": "likertLabelType",
+    name: "likertLabelType",
+    value: model.likertType,
+    onChange: onChangeLikertType
+  }, /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.importance,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Importance"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.likelihood,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Likelihood"
+  }), /*#__PURE__*/React.createElement(FormControlLabel, {
+    value: LIKERT_TYPE.like,
+    control: /*#__PURE__*/React.createElement(Radio, {
+      className: classes.customColor
+    }),
+    label: "Like"
+  }))));
+});
+
+const buildValuesMap = model => model.choices.reduce((acc, choice) => {
+  const accClone = _extends({}, acc);
+
+  const choiceValue = parseInt(choice.value);
+
+  if (!accClone[choiceValue]) {
+    accClone[choiceValue] = 0;
+  }
+
+  return _extends({}, accClone, {
+    [choiceValue]: accClone[choiceValue] + 1
+  });
+}, {});
+
+const Design = withStyles(styles)(props => {
+  const {
+    classes,
+    configuration,
+    imageSupport,
+    model,
+    onChangeModel,
+    onChoiceChanged,
+    onConfigurationChanged,
+    onPromptChanged,
+    onTeacherInstructionsChanged,
+    uploadSoundSupport
+  } = props;
+  const {
+    contentDimensions = {},
+    prompt = {},
+    scoringType = {},
+    settingsPanelDisabled,
+    spellCheck = {},
+    teacherInstructions = {},
+    baseInputConfiguration = {},
+    likertChoice = {}
+  } = configuration || {};
+  const {
+    errors = {},
+    extraCSSRules,
+    spellCheckEnabled,
+    teacherInstructionsEnabled
+  } = model || {};
+  const {
+    prompt: promptError,
+    teacherInstructions: teacherInstructionsError
+  } = errors;
+  const valuesMap = buildValuesMap(model);
+  const panelProperties = {
+    teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+    spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+    scoringType: scoringType.settings && radio(scoringType.label, ['auto', 'rubric'])
+  };
+
+  const getPluginProps = (props = {}) => {
+    return Object.assign(_extends({}, baseInputConfiguration), props || {});
+  };
+
+  return /*#__PURE__*/React.createElement(layout.ConfigLayout, {
+    extraCSSRules: extraCSSRules,
+    dimensions: contentDimensions,
+    hideSettings: settingsPanelDisabled,
+    settings: /*#__PURE__*/React.createElement(Panel, {
+      model: model,
+      onChangeModel: onChangeModel,
+      configuration: configuration,
+      onChangeConfiguration: onConfigurationChanged,
+      groups: {
+        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,
+    spellCheck: spellCheckEnabled,
+    uploadSoundSupport: uploadSoundSupport,
+    pluginProps: getPluginProps(teacherInstructions == null ? void 0 : teacherInstructions.inputConfiguration)
+  }), teacherInstructionsError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, teacherInstructionsError)), /*#__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,
+    error: promptError,
+    spellCheck: spellCheckEnabled,
+    disableUnderline: true,
+    uploadSoundSupport: uploadSoundSupport,
+    pluginProps: getPluginProps(prompt == null ? void 0 : prompt.inputConfiguration)
+  }), promptError && /*#__PURE__*/React.createElement("div", {
+    className: classes.errorText
+  }, promptError)), /*#__PURE__*/React.createElement("div", {
+    className: classes.likertOptionsHolder
+  }, /*#__PURE__*/React.createElement(LikertScale, {
+    model: model,
+    onChangeModel: onChangeModel
+  }), /*#__PURE__*/React.createElement(LikertType, {
+    model: model,
+    onChangeModel: onChangeModel
+  }), /*#__PURE__*/React.createElement(LikertOrientation, {
+    model: model,
+    onChangeModel: onChangeModel
+  })), model.choices.map((choice, index) => /*#__PURE__*/React.createElement("div", {
+    key: `choice-${index}`,
+    className: classes.likertLabelHolder
+  }, /*#__PURE__*/React.createElement("span", {
+    className: classes.inputFormGroupIndex
+  }, index + 1, "."), /*#__PURE__*/React.createElement(InputContainer, {
+    key: `likert-label-${index}`,
+    label: 'Likert Label',
+    className: classes.likertLabelInput
+  }, /*#__PURE__*/React.createElement(EditableHtml, {
+    className: classes.likertLabelEditableHtml,
+    markup: choice.label || '',
+    onChange: c => onChoiceChanged(index, _extends({}, choice, {
+      label: c
+    })),
+    imageSupport: imageSupport,
+    spellCheck: spellCheckEnabled,
+    uploadSoundSupport: uploadSoundSupport,
+    pluginProps: getPluginProps(likertChoice == null ? void 0 : likertChoice.inputConfiguration)
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classes.likertValueHolder
+  }, /*#__PURE__*/React.createElement(NumberTextField, {
+    label: 'Likert Value',
+    value: choice.value,
+    className: classes.width100,
+    max: 100,
+    min: -100,
+    onChange: (e, t) => {
+      onChoiceChanged(index, _extends({}, choice, {
+        value: t
+      }));
+    },
+    imageSupport: imageSupport
+  }), valuesMap[choice.value] && valuesMap[choice.value] > 1 && /*#__PURE__*/React.createElement("p", {
+    className: classes.errorMessage
+  }, "Value should be unique")))));
+});
+class Main extends React.Component {
+  constructor(...args) {
+    super(...args);
+
+    this.onChoiceChanged = (index, choice) => {
+      const {
+        model,
+        onModelChanged
+      } = this.props;
+      model.choices = model.choices.map(choice => merge({}, choice));
+      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
+      }));
+    };
+  }
+
+  render() {
+    return /*#__PURE__*/React.createElement(Design, _extends({}, this.props, {
+      onChangeModel: this.props.onModelChanged,
+      onChoiceChanged: this.onChoiceChanged,
+      onPromptChanged: this.onPromptChanged,
+      onTeacherInstructionsChanged: this.onTeacherInstructionsChanged
+    }));
+  }
+
+}
+Main.propTypes = {
+  model: 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: {
+    choices: [],
+    likertOrientation: 'horizontal',
+    likertScale: 'likert3',
+    likertType: 'agreement',
+    prompt: '',
+    promptEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true
+  },
+  configuration: {
+    baseInputConfiguration: {
+      audio: {
+        disabled: false
+      },
+      video: {
+        disabled: false
+      },
+      image: {
+        disabled: false
+      },
+      textAlign: {
+        disabled: true
+      },
+      showParagraphs: {
+        disabled: false
+      },
+      separateParagraphs: {
+        disabled: true
+      }
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      },
+      required: false
+    },
+    likertChoice: {
+      label: 'Choice',
+      inputConfiguration: {
+        audio: {
+          disabled: false
+        },
+        video: {
+          disabled: false
+        },
+        image: {
+          disabled: false
+        }
+      }
+    }
+  }
+};
+
+const log = debug('likert:configure');
+
+const prepareCustomizationObject = (config, model) => {
+  const configuration = defaults(config, sensibleDefaults.configuration);
+  return {
+    configuration,
+    model
+  };
+};
+
+class Likert extends HTMLElement {
+  constructor() {
+    super();
+    this._model = Likert.createDefaultModel();
+    this._configuration = sensibleDefaults.configuration;
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
+  }
+
+  set model(s) {
+    this._model = Likert.createDefaultModel(s);
+    this._model = _extends({}, this._model, {
+      choices: this._model.choices.map(choice => _extends({}, choice, {
+        value: parseInt(choice.value)
+      }))
+    });
+
+    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(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();
+  }
+
+  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,
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    ReactDOM.render(element, this);
+  }
+
+}
+
+Likert.createDefaultModel = (model = {}) => _extends({}, sensibleDefaults.model, model, {
+  choices: model && model.choices || []
+});
+
+export { Likert as default };
+//# sourceMappingURL=configure.js.map