@pie-element/image-cloze-association 8.3.4-next.3 → 9.0.0-beta.0

package/configure/lib/defaults.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var _default = {
+exports.default = void 0;
+var _default = exports.default = {
   model: {
     rationale: '',
     rationaleEnabled: true,
@@ -80,5 +80,4 @@ var _default = {
     }
   }
 };
-exports["default"] = _default;
 //# sourceMappingURL=defaults.js.map

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","rationale","rationaleEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","configuration","baseInputConfiguration","audio","disabled","video","image","textAlign","showParagraphs","separateParagraphs","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","label","settings","enabled","inputConfiguration","required","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,SAAS,EAAE,EADN;AAELC,IAAAA,gBAAgB,EAAE,IAFb;AAGLC,IAAAA,0BAA0B,EAAE,IAHvB;AAILC,IAAAA,mBAAmB,EAAE,EAJhB;AAKLC,IAAAA,0BAA0B,EAAE;AALvB,GADM;AAQbC,EAAAA,aAAa,EAAE;AACbC,IAAAA,sBAAsB,EAAE;AACtBC,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAE;AAAZ,OADe;AAEtBC,MAAAA,KAAK,EAAE;AAAED,QAAAA,QAAQ,EAAE;AAAZ,OAFe;AAGtBE,MAAAA,KAAK,EAAE;AAAEF,QAAAA,QAAQ,EAAE;AAAZ,OAHe;AAItBG,MAAAA,SAAS,EAAE;AAAEH,QAAAA,QAAQ,EAAE;AAAZ,OAJW;AAKtBI,MAAAA,cAAc,EAAE;AAAEJ,QAAAA,QAAQ,EAAE;AAAZ,OALM;AAMtBK,MAAAA,kBAAkB,EAAE;AAAEL,QAAAA,QAAQ,EAAE;AAAZ;AANE,KADX;AASbM,IAAAA,aAAa,EAAE;AACbX,MAAAA,mBAAmB,EAAE;AADR,KATF;AAYbY,IAAAA,cAAc,EAAE;AACdZ,MAAAA,mBAAmB,EAAE;AADP,KAZH;AAeba,IAAAA,qBAAqB,EAAE,KAfV;AAgBbC,IAAAA,UAAU,EAAE;AACVC,MAAAA,KAAK,EAAE,YADG;AAEVC,MAAAA,QAAQ,EAAE,KAFA;AAGVC,MAAAA,OAAO,EAAE;AAHC,KAhBC;AAqBbjB,IAAAA,mBAAmB,EAAE;AACnBgB,MAAAA,QAAQ,EAAE,IADS;AAEnBD,MAAAA,KAAK,EAAE,sBAFY;AAGnBG,MAAAA,kBAAkB,EAAE;AAClBd,QAAAA,KAAK,EAAE;AAAEC,UAAAA,QAAQ,EAAE;AAAZ,SADW;AAElBC,QAAAA,KAAK,EAAE;AAAED,UAAAA,QAAQ,EAAE;AAAZ,SAFW;AAGlBE,QAAAA,KAAK,EAAE;AAAEF,UAAAA,QAAQ,EAAE;AAAZ;AAHW,OAHD;AAQnBc,MAAAA,QAAQ,EAAE;AARS,KArBR;AA+BbC,IAAAA,UAAU,EAAE;AACVJ,MAAAA,QAAQ,EAAE,KADA;AAEVD,MAAAA,KAAK,EAAE;AAFG,KA/BC;AAmCbM,IAAAA,aAAa,EAAE;AACbC,MAAAA,SAAS,EAAE,KADE;AAEbC,MAAAA,UAAU,EAAE;AAFC,KAnCF;AAuCbC,IAAAA,QAAQ,EAAE;AACRR,MAAAA,QAAQ,EAAE,KADF;AAERD,MAAAA,KAAK,EAAE,kBAFC;AAGRE,MAAAA,OAAO,EAAE;AAHD,KAvCG;AA4CbQ,IAAAA,eAAe,EAAE;AACfV,MAAAA,KAAK,EAAE,kBADQ;AAEfW,MAAAA,OAAO,EAAE;AAFM;AA5CJ;AARF,C","sourcesContent":["export default {\n  model: {\n    rationale: '',\n    rationaleEnabled: true,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n  },\n  configuration: {\n    baseInputConfiguration: {\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"file":"defaults.js"}
+{"version":3,"file":"defaults.js","names":["model","rationale","rationaleEnabled","studentInstructionsEnabled","teacherInstructions","teacherInstructionsEnabled","configuration","baseInputConfiguration","audio","disabled","video","image","textAlign","showParagraphs","separateParagraphs","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","label","settings","enabled","inputConfiguration","required","withRubric","mathMlOptions","mmlOutput","mmlEditing","language","languageChoices","options"],"sources":["../src/defaults.js"],"sourcesContent":["export default {\n  model: {\n    rationale: '',\n    rationaleEnabled: true,\n    studentInstructionsEnabled: true,\n    teacherInstructions: '',\n    teacherInstructionsEnabled: true,\n  },\n  configuration: {\n    baseInputConfiguration: {\n      audio: { disabled: false },\n      video: { disabled: false },\n      image: { disabled: false },\n      textAlign: { disabled: true },\n      showParagraphs: { disabled: false },\n      separateParagraphs: { disabled: true },\n    },\n    maxImageWidth: {\n      teacherInstructions: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n    },\n    settingsPanelDisabled: false,\n    spellCheck: {\n      label: 'Spellcheck',\n      settings: false,\n      enabled: true,\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions',\n      inputConfiguration: {\n        audio: { disabled: false },\n        video: { disabled: false },\n        image: { disabled: false },\n      },\n      required: false,\n    },\n    withRubric: {\n      settings: false,\n      label: 'Add Rubric',\n    },\n    mathMlOptions: {\n      mmlOutput: false,\n      mmlEditing: false,\n    },\n    language: {\n      settings: false,\n      label: 'Specify Language',\n      enabled: false,\n    },\n    languageChoices: {\n      label: 'Language Choices',\n      options: [],\n    },\n  },\n};\n"],"mappings":";;;;;;iCAAe;EACbA,KAAK,EAAE;IACLC,SAAS,EAAE,EAAE;IACbC,gBAAgB,EAAE,IAAI;IACtBC,0BAA0B,EAAE,IAAI;IAChCC,mBAAmB,EAAE,EAAE;IACvBC,0BAA0B,EAAE;EAC9B,CAAC;EACDC,aAAa,EAAE;IACbC,sBAAsB,EAAE;MACtBC,KAAK,EAAE;QAAEC,QAAQ,EAAE;MAAM,CAAC;MAC1BC,KAAK,EAAE;QAAED,QAAQ,EAAE;MAAM,CAAC;MAC1BE,KAAK,EAAE;QAAEF,QAAQ,EAAE;MAAM,CAAC;MAC1BG,SAAS,EAAE;QAAEH,QAAQ,EAAE;MAAK,CAAC;MAC7BI,cAAc,EAAE;QAAEJ,QAAQ,EAAE;MAAM,CAAC;MACnCK,kBAAkB,EAAE;QAAEL,QAAQ,EAAE;MAAK;IACvC,CAAC;IACDM,aAAa,EAAE;MACbX,mBAAmB,EAAE;IACvB,CAAC;IACDY,cAAc,EAAE;MACdZ,mBAAmB,EAAE;IACvB,CAAC;IACDa,qBAAqB,EAAE,KAAK;IAC5BC,UAAU,EAAE;MACVC,KAAK,EAAE,YAAY;MACnBC,QAAQ,EAAE,KAAK;MACfC,OAAO,EAAE;IACX,CAAC;IACDjB,mBAAmB,EAAE;MACnBgB,QAAQ,EAAE,IAAI;MACdD,KAAK,EAAE,sBAAsB;MAC7BG,kBAAkB,EAAE;QAClBd,KAAK,EAAE;UAAEC,QAAQ,EAAE;QAAM,CAAC;QAC1BC,KAAK,EAAE;UAAED,QAAQ,EAAE;QAAM,CAAC;QAC1BE,KAAK,EAAE;UAAEF,QAAQ,EAAE;QAAM;MAC3B,CAAC;MACDc,QAAQ,EAAE;IACZ,CAAC;IACDC,UAAU,EAAE;MACVJ,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE;IACT,CAAC;IACDM,aAAa,EAAE;MACbC,SAAS,EAAE,KAAK;MAChBC,UAAU,EAAE;IACd,CAAC;IACDC,QAAQ,EAAE;MACRR,QAAQ,EAAE,KAAK;MACfD,KAAK,EAAE,kBAAkB;MACzBE,OAAO,EAAE;IACX,CAAC;IACDQ,eAAe,EAAE;MACfV,KAAK,EAAE,kBAAkB;MACzBW,OAAO,EAAE;IACX;EACF;AACF,CAAC","ignoreList":[]}

package/configure/lib/index.js

@@ -1,163 +1,99 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _pieConfigureEvents = require("@pie-framework/pie-configure-events");
-
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _debug = _interopRequireDefault(require("debug"));
-
 var _root = _interopRequireDefault(require("./root"));
-
 var _defaults = _interopRequireDefault(require("./defaults"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var log = (0, _debug["default"])('image-cloze-association:configure');
-
-var ImageClozeAssociationConfigure = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(ImageClozeAssociationConfigure, _HTMLElement);
-
-  var _super = _createSuper(ImageClozeAssociationConfigure);
-
-  function ImageClozeAssociationConfigure() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, ImageClozeAssociationConfigure);
-    _this = _super.call(this);
-    _this._model = ImageClozeAssociationConfigure.createDefaultModel();
-    _this.onModelChanged = _this.onModelChanged.bind((0, _assertThisInitialized2["default"])(_this));
-    _this._configuration = _defaults["default"].configuration;
-    return _this;
+const log = (0, _debug.default)('image-cloze-association:configure');
+class ImageClozeAssociationConfigure extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+    this._model = ImageClozeAssociationConfigure.createDefaultModel();
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._configuration = _defaults.default.configuration;
+  }
+  set model(s) {
+    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
+    this._render();
+  }
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+    this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
+  }
+  onModelChanged(m, reset) {
+    this._model = m;
+    this.dispatchModelUpdated(reset);
+    this._render();
+  }
+  onConfigurationChanged(config) {
+    this._configuration = config;
+    this._render();
   }
 
-  (0, _createClass2["default"])(ImageClozeAssociationConfigure, [{
-    key: "model",
-    set: function set(s) {
-      this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
-
-      this._render();
-    }
-  }, {
-    key: "configuration",
-    set: function set(c) {
-      this._configuration = c;
-
-      this._render();
-    }
-  }, {
-    key: "disableSidePanel",
-    set: function set(s) {
-      this._disableSidePanel = s;
-
-      this._render();
-    }
-  }, {
-    key: "dispatchModelUpdated",
-    value: function dispatchModelUpdated(reset) {
-      var resetValue = !!reset;
-      this.dispatchEvent(new _pieConfigureEvents.ModelUpdatedEvent(this._model, resetValue));
-    }
-  }, {
-    key: "onModelChanged",
-    value: function onModelChanged(m, reset) {
-      this._model = m;
-      this.dispatchModelUpdated(reset);
-
-      this._render();
-    }
-  }, {
-    key: "onConfigurationChanged",
-    value: function onConfigurationChanged(config) {
-      this._configuration = config;
-
-      this._render();
-    }
-    /**
-     *
-     * @param {done, progress, file} handler
-     */
-
-  }, {
-    key: "insertImage",
-    value: function insertImage(handler) {
-      this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
-    }
-  }, {
-    key: "onDeleteImage",
-    value: function onDeleteImage(src, done) {
-      this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
-    }
-  }, {
-    key: "insertSound",
-    value: function insertSound(handler) {
-      this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
-    }
-  }, {
-    key: "onDeleteSound",
-    value: function onDeleteSound(src, done) {
-      this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+  insertImage(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertImageEvent(handler));
+  }
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteImageEvent(src, done));
+  }
+  insertSound(handler) {
+    this.dispatchEvent(new _pieConfigureEvents.InsertSoundEvent(handler));
+  }
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new _pieConfigureEvents.DeleteSoundEvent(src, done));
+  }
+  _render() {
+    log('_render');
+    let element = /*#__PURE__*/_react.default.createElement(_root.default, {
+      disableSidePanel: this._disableSidePanel,
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged.bind(this),
+      onConfigurationChanged: this.onConfigurationChanged.bind(this),
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this)
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this)
+      }
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
     }
-  }, {
-    key: "_render",
-    value: function _render() {
-      log('_render');
-
-      var element = /*#__PURE__*/_react["default"].createElement(_root["default"], {
-        disableSidePanel: this._disableSidePanel,
-        model: this._model,
-        configuration: this._configuration,
-        onModelChanged: this.onModelChanged.bind(this),
-        onConfigurationChanged: this.onConfigurationChanged.bind(this),
-        imageSupport: {
-          add: this.insertImage.bind(this),
-          "delete": this.onDeleteImage.bind(this)
-        },
-        uploadSoundSupport: {
-          add: this.insertSound.bind(this),
-          "delete": this.onDeleteSound.bind(this)
-        }
-      });
-
-      _reactDom["default"].render(element, this);
+    this._root.render(element);
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
     }
-  }]);
-  return ImageClozeAssociationConfigure;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = ImageClozeAssociationConfigure;
-(0, _defineProperty2["default"])(ImageClozeAssociationConfigure, "createDefaultModel", function () {
-  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _objectSpread(_objectSpread({}, _defaults["default"].model), model);
-});
+  }
+}
+exports.default = ImageClozeAssociationConfigure;
+(0, _defineProperty2.default)(ImageClozeAssociationConfigure, "createDefaultModel", (model = {}) => ({
+  ..._defaults.default.model,
+  ...model
+}));
 //# sourceMappingURL=index.js.map

package/configure/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","ImageClozeAssociationConfigure","_model","createDefaultModel","onModelChanged","bind","_configuration","sensibleDefaults","configuration","s","_render","c","_disableSidePanel","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","dispatchModelUpdated","config","handler","InsertImageEvent","src","done","DeleteImageEvent","InsertSoundEvent","DeleteSoundEvent","element","React","createElement","Root","disableSidePanel","model","onConfigurationChanged","imageSupport","add","insertImage","onDeleteImage","uploadSoundSupport","insertSound","onDeleteSound","ReactDOM","render","HTMLElement"],"mappings":"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","sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('image-cloze-association:configure');\n\nexport default class ImageClozeAssociationConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._model = ImageClozeAssociationConfigure.createDefaultModel();\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._configuration = sensibleDefaults.configuration;\n  }\n\n  set model(s) {\n    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged(config) {\n    this._configuration = config;\n    this._render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Root, {\n      disableSidePanel: this._disableSidePanel,\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged.bind(this),\n      onConfigurationChanged: this.onConfigurationChanged.bind(this),\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    ReactDOM.render(element, this);\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_pieConfigureEvents","require","_react","_interopRequireDefault","_client","_debug","_root","_defaults","log","debug","ImageClozeAssociationConfigure","HTMLElement","constructor","_model","createDefaultModel","onModelChanged","bind","_configuration","sensibleDefaults","configuration","model","s","_render","c","disableSidePanel","_disableSidePanel","dispatchModelUpdated","reset","resetValue","dispatchEvent","ModelUpdatedEvent","m","onConfigurationChanged","config","insertImage","handler","InsertImageEvent","onDeleteImage","src","done","DeleteImageEvent","insertSound","InsertSoundEvent","onDeleteSound","DeleteSoundEvent","element","React","createElement","Root","imageSupport","add","delete","uploadSoundSupport","createRoot","render","disconnectedCallback","unmount","exports","default","_defineProperty2"],"sources":["../src/index.js"],"sourcesContent":["import {\n  ModelUpdatedEvent,\n  DeleteImageEvent,\n  InsertImageEvent,\n  InsertSoundEvent,\n  DeleteSoundEvent,\n} from '@pie-framework/pie-configure-events';\n\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debug from 'debug';\n\nimport Root from './root';\nimport sensibleDefaults from './defaults';\n\nconst log = debug('image-cloze-association:configure');\n\nexport default class ImageClozeAssociationConfigure extends HTMLElement {\n  static createDefaultModel = (model = {}) => ({\n    ...sensibleDefaults.model,\n    ...model,\n  });\n\n  constructor() {\n    super();\n    this._root = null;\n    this._model = ImageClozeAssociationConfigure.createDefaultModel();\n    this.onModelChanged = this.onModelChanged.bind(this);\n    this._configuration = sensibleDefaults.configuration;\n  }\n\n  set model(s) {\n    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);\n    this._render();\n  }\n\n  set configuration(c) {\n    this._configuration = c;\n    this._render();\n  }\n\n  set disableSidePanel(s) {\n    this._disableSidePanel = s;\n    this._render();\n  }\n\n  dispatchModelUpdated(reset) {\n    const resetValue = !!reset;\n\n    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));\n  }\n\n  onModelChanged(m, reset) {\n    this._model = m;\n    this.dispatchModelUpdated(reset);\n    this._render();\n  }\n\n  onConfigurationChanged(config) {\n    this._configuration = config;\n    this._render();\n  }\n\n  /**\n   *\n   * @param {done, progress, file} handler\n   */\n  insertImage(handler) {\n    this.dispatchEvent(new InsertImageEvent(handler));\n  }\n\n  onDeleteImage(src, done) {\n    this.dispatchEvent(new DeleteImageEvent(src, done));\n  }\n\n  insertSound(handler) {\n    this.dispatchEvent(new InsertSoundEvent(handler));\n  }\n\n  onDeleteSound(src, done) {\n    this.dispatchEvent(new DeleteSoundEvent(src, done));\n  }\n\n  _render() {\n    log('_render');\n\n    let element = React.createElement(Root, {\n      disableSidePanel: this._disableSidePanel,\n      model: this._model,\n      configuration: this._configuration,\n      onModelChanged: this.onModelChanged.bind(this),\n      onConfigurationChanged: this.onConfigurationChanged.bind(this),\n      imageSupport: {\n        add: this.insertImage.bind(this),\n        delete: this.onDeleteImage.bind(this),\n      },\n      uploadSoundSupport: {\n        add: this.insertSound.bind(this),\n        delete: this.onDeleteSound.bind(this),\n      },\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(element);\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/root.js

@@ -1,206 +1,135 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Root = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Root = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _configUi = require("@pie-lib/config-ui");
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _styles = require("@material-ui/core/styles");
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Panel = _configUi.settings.Panel,
-    toggle = _configUi.settings.toggle,
-    dropdown = _configUi.settings.dropdown;
-
-var Root = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Root, _React$Component);
-
-  var _super = _createSuper(Root);
-
-  function Root() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Root);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onTeacherInstructionsChanged", function (teacherInstructions) {
-      _this.props.onModelChanged(_objectSpread(_objectSpread({}, _this.props.model), {}, {
-        teacherInstructions: teacherInstructions
-      }));
+var _styles = require("@mui/material/styles");
+const {
+  Panel,
+  toggle,
+  dropdown
+} = _configUi.settings;
+const StyledInputContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2)
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Root extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onTeacherInstructionsChanged", teacherInstructions => {
+      this.props.onModelChanged({
+        ...this.props.model,
+        teacherInstructions
+      });
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Root, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          model = _this$props.model,
-          configuration = _this$props.configuration,
-          onModelChanged = _this$props.onModelChanged,
-          onConfigurationChanged = _this$props.onConfigurationChanged,
-          imageSupport = _this$props.imageSupport,
-          uploadSoundSupport = _this$props.uploadSoundSupport;
-
-      var _ref = configuration || {},
-          _ref$baseInputConfigu = _ref.baseInputConfiguration,
-          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
-          _ref$contentDimension = _ref.contentDimensions,
-          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
-          _ref$maxImageWidth = _ref.maxImageWidth,
-          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
-          _ref$maxImageHeight = _ref.maxImageHeight,
-          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight,
-          settingsPanelDisabled = _ref.settingsPanelDisabled,
-          _ref$spellCheck = _ref.spellCheck,
-          spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
-          _ref$teacherInstructi = _ref.teacherInstructions,
-          teacherInstructions = _ref$teacherInstructi === void 0 ? {} : _ref$teacherInstructi,
-          _ref$withRubric = _ref.withRubric,
-          withRubric = _ref$withRubric === void 0 ? {} : _ref$withRubric,
-          _ref$mathMlOptions = _ref.mathMlOptions,
-          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions,
-          _ref$language = _ref.language,
-          language = _ref$language === void 0 ? {} : _ref$language,
-          _ref$languageChoices = _ref.languageChoices,
-          languageChoices = _ref$languageChoices === void 0 ? {} : _ref$languageChoices;
-
-      var _ref2 = model || {},
-          _ref2$errors = _ref2.errors,
-          errors = _ref2$errors === void 0 ? {} : _ref2$errors,
-          extraCSSRules = _ref2.extraCSSRules,
-          spellCheckEnabled = _ref2.spellCheckEnabled;
-
-      var teacherInstructionsError = errors.teacherInstructions;
-      var panelProperties = {
-        teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
-        spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
-        rubricEnabled: (withRubric === null || withRubric === void 0 ? void 0 : withRubric.settings) && toggle(withRubric === null || withRubric === void 0 ? void 0 : withRubric.label),
-        'language.enabled': language.settings && toggle(language.label, true),
-        language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: settingsPanelDisabled,
-        settings: /*#__PURE__*/_react["default"].createElement(Panel, {
-          model: model,
-          configuration: configuration,
-          onChangeModel: function onChangeModel(model) {
-            return onModelChanged(model);
-          },
-          onChangeConfiguration: function onChangeConfiguration(config) {
-            return onConfigurationChanged(config);
-          },
-          groups: {
-            Properties: panelProperties
-          }
-        })
-      }, model && model.teacherInstructionsEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
-        label: teacherInstructions.label,
-        className: classes.promptHolder
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.prompt,
-        markup: model.teacherInstructions || '',
-        onChange: this.onTeacherInstructionsChanged,
-        imageSupport: imageSupport,
-        nonEmpty: false,
-        error: teacherInstructionsError,
-        spellCheck: spellCheckEnabled,
-        pluginProps: getPluginProps(teacherInstructions === null || teacherInstructions === void 0 ? void 0 : teacherInstructions.inputConfiguration),
-        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions,
-        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      }), teacherInstructionsError && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorText
-      }, teacherInstructionsError)), /*#__PURE__*/_react["default"].createElement("div", null, "Image cloze association"));
-    }
-  }]);
-  return Root;
-}(_react["default"].Component);
-
+  render() {
+    const {
+      model,
+      configuration,
+      onModelChanged,
+      onConfigurationChanged,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled
+    } = model || {};
+    const {
+      teacherInstructions: teacherInstructionsError
+    } = errors;
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        configuration: configuration,
+        onChangeModel: model => onModelChanged(model),
+        onChangeConfiguration: config => onConfigurationChanged(config),
+        groups: {
+          Properties: panelProperties
+        }
+      })
+    }, model && model.teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.teacherInstructions || '',
+      onChange: this.onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      spellCheck: spellCheckEnabled,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), /*#__PURE__*/_react.default.createElement("div", null, "Image cloze association"));
+  }
+}
 exports.Root = Root;
-
-var styles = function styles(theme) {
-  return {
-    promptHolder: {
-      width: '100%',
-      paddingTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    }
-  };
-};
-
 Root.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  onModelChanged: _propTypes["default"].func,
-  onConfigurationChanged: _propTypes["default"].func,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  imageSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+  onModelChanged: _propTypes.default.func,
+  onConfigurationChanged: _propTypes.default.func,
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   }),
-  uploadSoundSupport: _propTypes["default"].shape({
-    add: _propTypes["default"].func.isRequired,
-    "delete": _propTypes["default"].func.isRequired
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func.isRequired,
+    delete: _propTypes.default.func.isRequired
   })
 };
-
-var _default = (0, _styles.withStyles)(styles)(Root);
-
-exports["default"] = _default;
+var _default = exports.default = Root;
 //# sourceMappingURL=root.js.map