@pie-element/drawing-response 3.7.2 → 3.7.3-next.1008

package/module/configure.js

@@ -1,1099 +0,0 @@
-import {_dll_pie_lib__config_ui, _dll_pie_lib__editable_html, _dll_pie_framework__pie_configure_events} from "../../shared-config@^1.8.13/module/index.js";
-import {_dll_prop_types, _dll_material_ui__core_styles, _dll_react, _dll_material_ui__core, _dll_lodash, _dll_react_dom} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var w = d * 7;
-var y = d * 365.25;
-var ms = function (val, options) {
-  options = options || ({});
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isFinite(val)) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error('val is not a non-empty string or a valid number. val=' + JSON.stringify(val));
-};
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = (/^(-?(?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|weeks?|w|years?|yrs?|y)?$/i).exec(str);
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'weeks':
-    case 'week':
-    case 'w':
-      return n * w;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-function fmtShort(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (msAbs >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (msAbs >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (msAbs >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-function fmtLong(ms) {
-  var msAbs = Math.abs(ms);
-  if (msAbs >= d) {
-    return plural(ms, msAbs, d, 'day');
-  }
-  if (msAbs >= h) {
-    return plural(ms, msAbs, h, 'hour');
-  }
-  if (msAbs >= m) {
-    return plural(ms, msAbs, m, 'minute');
-  }
-  if (msAbs >= s) {
-    return plural(ms, msAbs, s, 'second');
-  }
-  return ms + ' ms';
-}
-function plural(ms, msAbs, n, name) {
-  var isPlural = msAbs >= n * 1.5;
-  return Math.round(ms / n) + ' ' + name + (isPlural ? 's' : '');
-}
-function setup(env) {
-  createDebug.debug = createDebug;
-  createDebug.default = createDebug;
-  createDebug.coerce = coerce;
-  createDebug.disable = disable;
-  createDebug.enable = enable;
-  createDebug.enabled = enabled;
-  createDebug.humanize = ms;
-  Object.keys(env).forEach(function (key) {
-    createDebug[key] = env[key];
-  });
-  createDebug.instances = [];
-  createDebug.names = [];
-  createDebug.skips = [];
-  createDebug.formatters = {};
-  function selectColor(namespace) {
-    var hash = 0;
-    for (var i = 0; i < namespace.length; i++) {
-      hash = (hash << 5) - hash + namespace.charCodeAt(i);
-      hash |= 0;
-    }
-    return createDebug.colors[Math.abs(hash) % createDebug.colors.length];
-  }
-  createDebug.selectColor = selectColor;
-  function createDebug(namespace) {
-    var prevTime;
-    function debug() {
-      if (!debug.enabled) {
-        return;
-      }
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      var self = debug;
-      var curr = Number(new Date());
-      var ms = curr - (prevTime || curr);
-      self.diff = ms;
-      self.prev = prevTime;
-      self.curr = curr;
-      prevTime = curr;
-      args[0] = createDebug.coerce(args[0]);
-      if (typeof args[0] !== 'string') {
-        args.unshift('%O');
-      }
-      var index = 0;
-      args[0] = args[0].replace(/%([a-zA-Z%])/g, function (match, format) {
-        if (match === '%%') {
-          return match;
-        }
-        index++;
-        var formatter = createDebug.formatters[format];
-        if (typeof formatter === 'function') {
-          var val = args[index];
-          match = formatter.call(self, val);
-          args.splice(index, 1);
-          index--;
-        }
-        return match;
-      });
-      createDebug.formatArgs.call(self, args);
-      var logFn = self.log || createDebug.log;
-      logFn.apply(self, args);
-    }
-    debug.namespace = namespace;
-    debug.enabled = createDebug.enabled(namespace);
-    debug.useColors = createDebug.useColors();
-    debug.color = selectColor(namespace);
-    debug.destroy = destroy;
-    debug.extend = extend;
-    if (typeof createDebug.init === 'function') {
-      createDebug.init(debug);
-    }
-    createDebug.instances.push(debug);
-    return debug;
-  }
-  function destroy() {
-    var index = createDebug.instances.indexOf(this);
-    if (index !== -1) {
-      createDebug.instances.splice(index, 1);
-      return true;
-    }
-    return false;
-  }
-  function extend(namespace, delimiter) {
-    return createDebug(this.namespace + (typeof delimiter === 'undefined' ? ':' : delimiter) + namespace);
-  }
-  function enable(namespaces) {
-    createDebug.save(namespaces);
-    createDebug.names = [];
-    createDebug.skips = [];
-    var i;
-    var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-    var len = split.length;
-    for (i = 0; i < len; i++) {
-      if (!split[i]) {
-        continue;
-      }
-      namespaces = split[i].replace(/\*/g, '.*?');
-      if (namespaces[0] === '-') {
-        createDebug.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-      } else {
-        createDebug.names.push(new RegExp('^' + namespaces + '$'));
-      }
-    }
-    for (i = 0; i < createDebug.instances.length; i++) {
-      var instance = createDebug.instances[i];
-      instance.enabled = createDebug.enabled(instance.namespace);
-    }
-  }
-  function disable() {
-    createDebug.enable('');
-  }
-  function enabled(name) {
-    if (name[name.length - 1] === '*') {
-      return true;
-    }
-    var i;
-    var len;
-    for ((i = 0, len = createDebug.skips.length); i < len; i++) {
-      if (createDebug.skips[i].test(name)) {
-        return false;
-      }
-    }
-    for ((i = 0, len = createDebug.names.length); i < len; i++) {
-      if (createDebug.names[i].test(name)) {
-        return true;
-      }
-    }
-    return false;
-  }
-  function coerce(val) {
-    if (val instanceof Error) {
-      return val.stack || val.message;
-    }
-    return val;
-  }
-  createDebug.enable(createDebug.load());
-  return createDebug;
-}
-var common = setup;
-var browser = createCommonjsModule(function (module, exports) {
-  function _typeof(obj) {
-    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
-      _typeof = function _typeof(obj) {
-        return typeof obj;
-      };
-    } else {
-      _typeof = function _typeof(obj) {
-        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-      };
-    }
-    return _typeof(obj);
-  }
-  exports.log = log;
-  exports.formatArgs = formatArgs;
-  exports.save = save;
-  exports.load = load;
-  exports.useColors = useColors;
-  exports.storage = localstorage();
-  exports.colors = ['#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC', '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF', '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC', '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF', '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC', '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033', '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366', '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933', '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC', '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF', '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'];
-  function useColors() {
-    if (typeof window !== 'undefined' && window.process && (window.process.type === 'renderer' || window.process.__nwjs)) {
-      return true;
-    }
-    if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-      return false;
-    }
-    return typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance || typeof window !== 'undefined' && window.console && (window.console.firebug || window.console.exception && window.console.table) || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31 || typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/);
-  }
-  function formatArgs(args) {
-    args[0] = (this.useColors ? '%c' : '') + this.namespace + (this.useColors ? ' %c' : ' ') + args[0] + (this.useColors ? '%c ' : ' ') + '+' + module.exports.humanize(this.diff);
-    if (!this.useColors) {
-      return;
-    }
-    var c = 'color: ' + this.color;
-    args.splice(1, 0, c, 'color: inherit');
-    var index = 0;
-    var lastC = 0;
-    args[0].replace(/%[a-zA-Z%]/g, function (match) {
-      if (match === '%%') {
-        return;
-      }
-      index++;
-      if (match === '%c') {
-        lastC = index;
-      }
-    });
-    args.splice(lastC, 0, c);
-  }
-  function log() {
-    var _console;
-    return (typeof console === "undefined" ? "undefined" : _typeof(console)) === 'object' && console.log && (_console = console).log.apply(_console, arguments);
-  }
-  function save(namespaces) {
-    try {
-      if (namespaces) {
-        exports.storage.setItem('debug', namespaces);
-      } else {
-        exports.storage.removeItem('debug');
-      }
-    } catch (error) {}
-  }
-  function load() {
-    var r;
-    try {
-      r = exports.storage.getItem('debug');
-    } catch (error) {}
-    if (!r && typeof process !== 'undefined' && ('env' in process)) {
-      r = process.env.DEBUG;
-    }
-    return r;
-  }
-  function localstorage() {
-    try {
-      return localStorage;
-    } catch (error) {}
-  }
-  module.exports = common(exports);
-  var formatters = module.exports.formatters;
-  formatters.j = function (v) {
-    try {
-      return JSON.stringify(v);
-    } catch (error) {
-      return '[UnexpectedJSONParseError]: ' + error.message;
-    }
-  };
-});
-browser.log;
-browser.formatArgs;
-browser.save;
-browser.load;
-browser.useColors;
-browser.storage;
-browser.colors;
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {Button: Button} = _dll_material_ui__core;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/packages/drawing-response/configure/src/button.jsx";
-const RawButton = ({classes, className, label, onClick, disabled}) => React.createElement(Button, {
-  onClick: onClick,
-  disabled: disabled,
-  className: classnames(classes.addButton, className),
-  size: "small",
-  variant: "contained",
-  color: "default",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 8
-  }
-}, label);
-RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  label: PropTypes.string,
-  onClick: PropTypes.func
-};
-RawButton.defaultProps = {
-  className: '',
-  disabled: false,
-  label: 'Add',
-  onClick: () => {}
-};
-const styles = () => ({
-  addButton: {
-    marginLeft: 8
-  }
-});
-const ButtonStyled = withStyles(styles)(RawButton);
-const React$1 = _dll_react;
-const {Component: Component} = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/packages/drawing-response/configure/src/image-container.jsx";
-const isImage = file => {
-  const imageType = /image.*/;
-  return file.type.match(imageType);
-};
-class ImageContainer extends Component {
-  constructor(props) {
-    super(props);
-    ImageContainer.prototype.__init.call(this);
-    ImageContainer.prototype.__init2.call(this);
-    ImageContainer.prototype.__init3.call(this);
-    ImageContainer.prototype.__init4.call(this);
-    ImageContainer.prototype.__init5.call(this);
-    ImageContainer.prototype.__init6.call(this);
-    ImageContainer.prototype.__init7.call(this);
-    ImageContainer.prototype.__init8.call(this);
-    ImageContainer.prototype.__init9.call(this);
-    ImageContainer.prototype.__init10.call(this);
-    ImageContainer.prototype.__init11.call(this);
-    ImageContainer.prototype.__init12.call(this);
-    ImageContainer.prototype.__init13.call(this);
-    ImageContainer.prototype.__init14.call(this);
-    this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
-      dragEnabled: true,
-      dropzoneActive: false
-    };
-  }
-  componentDidMount() {
-    if (this.imageSection) {
-      const positionInfo = this.imageSection.getBoundingClientRect();
-      const {height, width} = positionInfo;
-      this.setState({
-        maxImageWidth: width,
-        maxImageHeight: height
-      });
-    }
-  }
-  __init() {
-    this.handleFileRead = file => {
-      const {onImageUpload} = this.props;
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        onImageUpload(reader.result);
-      };
-      reader.readAsDataURL(file);
-    };
-  }
-  __init2() {
-    this.handleUploadImage = e => {
-      e.preventDefault();
-      const file = e.target.files[0];
-      this.handleFileRead(file);
-    };
-  }
-  __init3() {
-    this.makeDropzoneActive = () => this.setState({
-      dropzoneActive: true
-    });
-  }
-  __init4() {
-    this.makeDropzoneInactive = () => this.setState({
-      dropzoneActive: false
-    });
-  }
-  __init5() {
-    this.handleOnDrop = e => {
-      e.preventDefault();
-      const {items, files} = e.dataTransfer;
-      if (items && items[0].kind === 'file') {
-        const file = items[0].getAsFile();
-        if (isImage(file)) {
-          this.handleFileRead(file);
-        }
-      } else if (isImage(files[0])) {
-        this.handleFileRead(files[0]);
-      }
-      this.makeDropzoneInactive();
-    };
-  }
-  __init6() {
-    this.handleOnDragOver = e => {
-      e.preventDefault();
-      const {dropzoneActive} = this.state;
-      if (!dropzoneActive) {
-        this.makeDropzoneActive();
-      }
-    };
-  }
-  __init7() {
-    this.handleOnDragExit = e => {
-      e.preventDefault();
-      this.makeDropzoneInactive();
-    };
-  }
-  __init8() {
-    this.handleEnableDrag = () => this.setState({
-      dragEnabled: true
-    });
-  }
-  __init9() {
-    this.handleDisableDrag = () => this.setState({
-      dragEnabled: false
-    });
-  }
-  __init10() {
-    this.handleInputClick = () => this.input.click();
-  }
-  __init11() {
-    this.handleOnImageLoad = ({target: {offsetHeight, offsetWidth}}) => {
-      const {onUpdateImageDimension} = this.props;
-      const resizeHandle = this.resize;
-      const dimensions = {
-        height: offsetHeight,
-        width: offsetWidth
-      };
-      this.setState({
-        dimensions
-      });
-      onUpdateImageDimension(dimensions);
-      resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
-    };
-  }
-  __init12() {
-    this.initialiseResize = () => {
-      window.addEventListener('mousemove', this.startResizing, false);
-      window.addEventListener('mouseup', this.stopResizing, false);
-    };
-  }
-  __init13() {
-    this.stopResizing = () => {
-      const {onUpdateImageDimension} = this.props;
-      const {dimensions} = this.state;
-      this.handleEnableDrag();
-      onUpdateImageDimension(dimensions);
-      window.removeEventListener('mousemove', this.startResizing, false);
-      window.removeEventListener('mouseup', this.stopResizing, false);
-    };
-  }
-  __init14() {
-    this.startResizing = e => {
-      const box = this.image;
-      const {maxImageWidth} = this.state;
-      const bounds = e.target.getBoundingClientRect();
-      const x = e.clientX - bounds.left;
-      const y = e.clientY - bounds.top;
-      const fitsContainer = x <= maxImageWidth + 5;
-      const hasMinimumWidth = x > 150 && y > 150;
-      if (fitsContainer && hasMinimumWidth) {
-        box.style.width = `${x}px`;
-        box.style.height = `${y}px`;
-        this.setState({
-          dimensions: {
-            height: y,
-            width: x
-          }
-        });
-      }
-      this.handleDisableDrag();
-    };
-  }
-  renderUploadControl(label) {
-    const {classes} = this.props;
-    return React$1.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 143
-      }
-    }, React$1.createElement(ButtonStyled, {
-      label: label,
-      onClick: this.handleInputClick,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 144
-      }
-    }), React$1.createElement('input', {
-      accept: "image/*",
-      className: classes.input,
-      onChange: this.handleUploadImage,
-      ref: ref => {
-        this.input = ref;
-      },
-      type: "file",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 148
-      }
-    }));
-  }
-  render() {
-    const {classes, imageUrl} = this.props;
-    const {dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth} = this.state;
-    return React$1.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 172
-      }
-    }, React$1.createElement('div', {
-      className: `${classes.box} ${dropzoneActive ? classes.boxActive : ''}`,
-      ...dragEnabled ? {
-        onDragExit: this.handleOnDragExit,
-        onDragLeave: this.handleOnDragExit,
-        onDragOver: this.handleOnDragOver,
-        onDrop: this.handleOnDrop
-      } : {},
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 173
-      }
-    }, React$1.createElement('div', {
-      className: classes.toolbar,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 181
-      }
-    }, this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')), React$1.createElement('div', {
-      ref: ref => {
-        this.imageSection = ref;
-      },
-      className: classes.drawableHeight,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 185
-      }
-    }, imageUrl ? React$1.createElement('div', {
-      className: classes.imageContainer,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 187
-      }
-    }, React$1.createElement('img', {
-      className: classes.image,
-      height: "auto",
-      onLoad: this.handleOnImageLoad,
-      ref: ref => {
-        this.image = ref;
-      },
-      src: imageUrl,
-      style: {
-        maxWidth: maxImageWidth,
-        maxHeight: maxImageHeight
-      },
-      alt: "",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 188
-      }
-    }), React$1.createElement('div', {
-      ref: ref => {
-        this.resize = ref;
-      },
-      className: classes.resize,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 197
-      }
-    })) : React$1.createElement('div', {
-      className: `${classes.drawableHeight} ${classes.centered}`,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 200
-      }
-    }, React$1.createElement('label', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 201
-      }
-    }, "Drag and drop or upload image from computer"), React$1.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 202
-      }
-    }), this.renderUploadControl('Upload Image')))));
-  }
-}
-const styles$1 = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 2
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px'
-  },
-  boxActive: {
-    border: '1px solid #0032C2'
-  },
-  centered: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center'
-  },
-  drawableHeight: {
-    minHeight: 350
-  },
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content'
-  },
-  resize: {
-    borderBottom: '1px solid #727272',
-    borderRight: '1px solid #727272',
-    bottom: '-10px',
-    cursor: 'se-resize',
-    height: '10px',
-    position: 'absolute',
-    right: '-10px',
-    width: '10px'
-  },
-  input: {
-    display: 'none'
-  },
-  toolbar: {
-    backgroundColor: '#ECEDF1',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    padding: '12px 8px'
-  }
-});
-ImageContainer.propTypes = {
-  classes: PropTypes$1.object.isRequired,
-  imageUrl: PropTypes$1.string.isRequired,
-  onImageUpload: PropTypes$1.func.isRequired,
-  onUpdateImageDimension: PropTypes$1.func.isRequired
-};
-var ImageContainer$1 = withStyles$1(styles$1)(ImageContainer);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const {cloneDeep: cloneDeep} = _dll_lodash;
-const {settings: settings} = _dll_pie_lib__config_ui;
-const {layout: layout} = _dll_pie_lib__config_ui;
-const {InputContainer: InputContainer} = _dll_pie_lib__config_ui;
-const EditableHtml = _dll_pie_lib__editable_html;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/packages/drawing-response/configure/src/root.jsx";
-const {Panel, toggle} = settings;
-class Root extends React$2.Component {
-  constructor(...args) {
-    super(...args);
-    Root.prototype.__init.call(this);
-    Root.prototype.__init2.call(this);
-    Root.prototype.__init3.call(this);
-    Root.prototype.__init4.call(this);
-    Root.prototype.__init5.call(this);
-  }
-  __init() {
-    this.onPromptChanged = prompt => {
-      const {model, onModelChanged} = this.props;
-      const update = cloneDeep(model);
-      onModelChanged({
-        ...update,
-        prompt
-      });
-    };
-  }
-  __init2() {
-    this.onRationaleChanged = rationale => {
-      const {model, onModelChanged} = this.props;
-      onModelChanged({
-        ...model,
-        rationale
-      });
-    };
-  }
-  __init3() {
-    this.onTeacherInstructionsChanged = teacherInstructions => {
-      const {model, onModelChanged} = this.props;
-      onModelChanged({
-        ...model,
-        teacherInstructions
-      });
-    };
-  }
-  __init4() {
-    this.onUpdateImageDimension = dimensions => {
-      const {model, onModelChanged} = this.props;
-      onModelChanged({
-        ...model,
-        imageDimensions: dimensions
-      });
-    };
-  }
-  __init5() {
-    this.onImageUpload = imageUrl => {
-      const {model, onModelChanged} = this.props;
-      onModelChanged({
-        ...model,
-        imageUrl
-      });
-    };
-  }
-  render() {
-    const {classes, configuration, model, imageSupport, onConfigurationChanged, onModelChanged} = this.props;
-    const {backgroundImage = {}, rationale = {}, prompt = {}, teacherInstructions = {}} = configuration || ({});
-    const {teacherInstructionsEnabled, promptEnabled, rationaleEnabled} = model || ({});
-    return React$2.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 75
-      }
-    }, React$2.createElement(layout.ConfigLayout, {
-      settings: React$2.createElement(Panel, {
-        model: model,
-        onChangeModel: onModelChanged,
-        configuration: configuration,
-        onChangeConfiguration: onConfigurationChanged,
-        groups: {
-          Settings: {
-            'backgroundImage.enabled': backgroundImage.settings && toggle(backgroundImage.label, true),
-            promptEnabled: prompt.settings && toggle(prompt.label)
-          },
-          Properties: {
-            teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-            rationaleEnabled: rationale.settings && toggle(rationale.label)
-          }
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$2,
-          lineNumber: 78
-        }
-      }),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 76
-      }
-    }, React$2.createElement('div', {
-      className: classes.regular,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 101
-      }
-    }, teacherInstructionsEnabled && React$2.createElement(InputContainer, {
-      label: teacherInstructions.label,
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 103
-      }
-    }, React$2.createElement(EditableHtml, {
-      markup: model.teacherInstructions || '',
-      onChange: this.onTeacherInstructionsChanged,
-      imageSupport: imageSupport,
-      nonEmpty: false,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 107
-      }
-    })), promptEnabled && React$2.createElement(InputContainer, {
-      label: "Item Stem",
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 117
-      }
-    }, React$2.createElement(EditableHtml, {
-      markup: model.prompt,
-      onChange: this.onPromptChanged,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 118
-      }
-    })), rationaleEnabled && React$2.createElement(InputContainer, {
-      label: rationale.label,
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 126
-      }
-    }, React$2.createElement(EditableHtml, {
-      markup: model.rationale || '',
-      onChange: this.onRationaleChanged,
-      imageSupport: imageSupport,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 130
-      }
-    })), backgroundImage.enabled && React$2.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 139
-      }
-    }, React$2.createElement(Typography, {
-      className: classes.label,
-      variant: "subheading",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 140
-      }
-    }, "Define Background Image"), React$2.createElement(ImageContainer$1, {
-      imageUrl: model.imageUrl,
-      onUpdateImageDimension: this.onUpdateImageDimension,
-      onImageUpload: this.onImageUpload,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$2,
-        lineNumber: 144
-      }
-    })))));
-  }
-}
-const styles$2 = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 3
-  },
-  label: {
-    marginTop: theme.spacing.unit * 4
-  },
-  prompt: {
-    paddingTop: theme.spacing.unit * 2,
-    width: '100%'
-  },
-  regular: {
-    marginBottom: theme.spacing.unit * 3
-  }
-});
-Root.propTypes = {
-  classes: PropTypes$2.object.isRequired,
-  configuration: PropTypes$2.object,
-  model: PropTypes$2.object.isRequired,
-  imageSupport: PropTypes$2.shape({
-    add: PropTypes$2.func,
-    delete: PropTypes$2.func
-  }),
-  onModelChanged: PropTypes$2.func.isRequired,
-  onConfigurationChanged: PropTypes$2.func.isRequired
-};
-var Root$1 = withStyles$2(styles$2)(Root);
-var sensibleDefaults = {
-  model: {
-    prompt: 'This is the question prompt',
-    imageUrl: '',
-    imageDimensions: {
-      height: 0,
-      width: 0
-    },
-    rationaleEnabled: true,
-    promptEnabled: true,
-    teacherInstructionsEnabled: true,
-    studentInstructionsEnabled: true
-  },
-  configuration: {
-    backgroundImage: {
-      settings: true,
-      label: 'Background Image',
-      enabled: true
-    },
-    rationale: {
-      settings: true,
-      label: 'Rationale'
-    },
-    prompt: {
-      settings: true,
-      label: 'Prompt'
-    },
-    teacherInstructions: {
-      settings: true,
-      label: 'Teacher Instructions'
-    }
-  }
-};
-const {ModelUpdatedEvent: ModelUpdatedEvent} = _dll_pie_framework__pie_configure_events;
-const {DeleteImageEvent: DeleteImageEvent} = _dll_pie_framework__pie_configure_events;
-const {InsertImageEvent: InsertImageEvent} = _dll_pie_framework__pie_configure_events;
-const React$3 = _dll_react;
-const ReactDOM = _dll_react_dom;
-const log = browser('hotspot:configure');
-class DrawableResponseConfigure extends HTMLElement {
-  static __initStatic() {
-    this.createDefaultModel = (model = {}) => ({
-      ...sensibleDefaults.model,
-      ...model
-    });
-  }
-  constructor() {
-    super();
-    DrawableResponseConfigure.prototype.__init.call(this);
-    DrawableResponseConfigure.prototype.__init2.call(this);
-    DrawableResponseConfigure.prototype.__init3.call(this);
-    DrawableResponseConfigure.prototype.__init4.call(this);
-    this._model = DrawableResponseConfigure.createDefaultModel();
-    this._configuration = sensibleDefaults.configuration;
-    this.onModelChanged = this.onModelChanged.bind(this);
-  }
-  set model(s) {
-    this._model = DrawableResponseConfigure.createDefaultModel(s);
-    this._render();
-  }
-  set configuration(c) {
-    this._configuration = c;
-    this._render();
-  }
-  dispatchModelUpdated(reset) {
-    const resetValue = !!reset;
-    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
-  }
-  __init() {
-    this.onModelChanged = (m, reset) => {
-      this._model = m;
-      this.dispatchModelUpdated(reset);
-      this._render();
-    };
-  }
-  __init2() {
-    this.onConfigurationChanged = c => {
-      if (!c.backgroundImage.enabled) {
-        this.onModelChanged({
-          ...this._model,
-          imageUrl: ''
-        });
-      }
-      this._configuration = c;
-      this._render();
-    };
-  }
-  __init3() {
-    this.insertImage = handler => {
-      this.dispatchEvent(new InsertImageEvent(handler));
-    };
-  }
-  __init4() {
-    this.onDeleteImage = (src, done) => {
-      this.dispatchEvent(new DeleteImageEvent(src, done));
-    };
-  }
-  _render() {
-    log('_render');
-    let element = React$3.createElement(Root$1, {
-      model: this._model,
-      configuration: this._configuration,
-      onModelChanged: this.onModelChanged,
-      onConfigurationChanged: this.onConfigurationChanged,
-      imageSupport: {
-        add: this.insertImage,
-        delete: this.onDeleteImage
-      }
-    });
-    ReactDOM.render(element, this);
-  }
-}
-DrawableResponseConfigure.__initStatic();
-export default DrawableResponseConfigure;