@pie-element/ebsr 9.12.1-next.13 → 9.12.1-next.14

package/{configure/node_modules/@pie-element/multiple-choice/module → module}/print.js

@@ -1,4 +1,4 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.9.1/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.9.1/module/index.js";
 import {_dll_pie_lib__pie_toolbox_render_ui, _dll_pie_lib__pie_toolbox_correct_answer_toggle} from "../../../@pie-lib/pie-toolbox-module@4.0.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -1381,8 +1381,8 @@ function createMuiTheme() {
 var _default$C = createMuiTheme;
 createMuiTheme$1.default = _default$C;
 var jssPreset$1 = {};
+var lib$8 = {};
 var lib$7 = {};
-var lib$6 = {};
 var getDynamicStyles = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -3631,8 +3631,8 @@ getDefaultExportFromCjs(Jss);
     return new _Jss2['default'](options);
   };
   exports['default'] = create();
-})(lib$6);
-getDefaultExportFromCjs(lib$6);
+})(lib$7);
+getDefaultExportFromCjs(lib$7);
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
@@ -3665,7 +3665,7 @@ getDefaultExportFromCjs(lib$6);
     };
   })();
   exports['default'] = jssGlobal;
-  var _jss = lib$6;
+  var _jss = lib$7;
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
       throw new TypeError("Cannot call a class as a function");
@@ -3792,9 +3792,9 @@ getDefaultExportFromCjs(lib$6);
       onProcessRule: onProcessRule
     };
   }
-})(lib$7);
-getDefaultExportFromCjs(lib$7);
-var lib$5 = {};
+})(lib$8);
+getDefaultExportFromCjs(lib$8);
+var lib$6 = {};
 var warning = function () {};
 {
   warning = function (condition, format, args) {
@@ -3824,7 +3824,7 @@ var warning = function () {};
   };
 }
 var browser = warning;
-Object.defineProperty(lib$5, "__esModule", {
+Object.defineProperty(lib$6, "__esModule", {
   value: true
 });
 var _extends = Object.assign || (function (target) {
@@ -3838,7 +3838,7 @@ var _extends = Object.assign || (function (target) {
   }
   return target;
 });
-lib$5.default = jssNested;
+lib$6.default = jssNested;
 var _warning$6 = browser;
 var _warning2 = _interopRequireDefault$A(_warning$6);
 function _interopRequireDefault$A(obj) {
@@ -3916,7 +3916,7 @@ function jssNested() {
     onProcessStyle: onProcessStyle
   };
 }
-var lib$4 = {};
+var lib$5 = {};
 var uppercasePattern = /[A-Z]/g;
 var msPattern = /^ms-/;
 var cache = {};
@@ -3978,9 +3978,9 @@ var require$$0$6 = getAugmentedNamespace(hyphenateStyleName$1);
       onChangeValue: onChangeValue
     };
   }
-})(lib$4);
-getDefaultExportFromCjs(lib$4);
-var lib$3 = {};
+})(lib$5);
+getDefaultExportFromCjs(lib$5);
+var lib$4 = {};
 var defaultUnits = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -4171,10 +4171,10 @@ getDefaultExportFromCjs(defaultUnits);
       onChangeValue: onChangeValue
     };
   }
-})(lib$3);
-getDefaultExportFromCjs(lib$3);
+})(lib$4);
+getDefaultExportFromCjs(lib$4);
+var lib$3 = {};
 var lib$2 = {};
-var lib$1 = {};
 var prefix = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
@@ -4334,14 +4334,14 @@ getDefaultExportFromCjs(supportedValue);
   exports.prefix = _prefix2['default'];
   exports.supportedProperty = _supportedProperty2['default'];
   exports.supportedValue = _supportedValue2['default'];
-})(lib$1);
-getDefaultExportFromCjs(lib$1);
+})(lib$2);
+getDefaultExportFromCjs(lib$2);
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
   });
   exports['default'] = jssVendorPrefixer;
-  var _cssVendor = lib$1;
+  var _cssVendor = lib$2;
   var vendor = _interopRequireWildcard(_cssVendor);
   function _interopRequireWildcard(obj) {
     if (obj && obj.__esModule) {
@@ -4389,9 +4389,9 @@ getDefaultExportFromCjs(lib$1);
       onChangeValue: onChangeValue
     };
   }
-})(lib$2);
-getDefaultExportFromCjs(lib$2);
-var lib = {};
+})(lib$3);
+getDefaultExportFromCjs(lib$3);
+var lib$1 = {};
 (function (exports) {
   Object.defineProperty(exports, "__esModule", {
     value: true
@@ -4414,19 +4414,19 @@ var lib = {};
       onProcessStyle: onProcessStyle
     };
   }
-})(lib);
-getDefaultExportFromCjs(lib);
+})(lib$1);
+getDefaultExportFromCjs(lib$1);
 var _interopRequireDefault$z = interopRequireDefault.exports;
 Object.defineProperty(jssPreset$1, "__esModule", {
   value: true
 });
 jssPreset$1.default = void 0;
-var _jssGlobal = _interopRequireDefault$z(lib$7);
-var _jssNested = _interopRequireDefault$z(lib$5);
-var _jssCamelCase = _interopRequireDefault$z(lib$4);
-var _jssDefaultUnit = _interopRequireDefault$z(lib$3);
-var _jssVendorPrefixer = _interopRequireDefault$z(lib$2);
-var _jssPropsSort = _interopRequireDefault$z(lib);
+var _jssGlobal = _interopRequireDefault$z(lib$8);
+var _jssNested = _interopRequireDefault$z(lib$6);
+var _jssCamelCase = _interopRequireDefault$z(lib$5);
+var _jssDefaultUnit = _interopRequireDefault$z(lib$4);
+var _jssVendorPrefixer = _interopRequireDefault$z(lib$3);
+var _jssPropsSort = _interopRequireDefault$z(lib$1);
 function jssPreset() {
   return {
     plugins: [(0, _jssGlobal.default)(), (0, _jssNested.default)(), (0, _jssCamelCase.default)(), (0, _jssDefaultUnit.default)(), typeof window === 'undefined' ? null : (0, _jssVendorPrefixer.default)(), (0, _jssPropsSort.default)()]
@@ -5026,7 +5026,7 @@ var _propTypes$d = _interopRequireDefault$u(require$$10$4);
 var _warning$2 = _interopRequireDefault$u(warning_1);
 var _hoistNonReactStatics$2 = _interopRequireDefault$u(hoistNonReactStatics_cjs);
 var _utils$7 = require$$7$1;
-var _jss = lib$6;
+var _jss = lib$7;
 var _reactJssContext = _interopRequireDefault$u(reactJssContext);
 var _jssPreset = _interopRequireDefault$u(jssPreset$1);
 var _mergeClasses = _interopRequireDefault$u(mergeClasses$1);
@@ -9312,7 +9312,7 @@ const styles$1 = theme => ({
     overflow: 'hidden'
   }
 });
-class MultipleChoice extends React$2.Component {
+class MultipleChoice$1 extends React$2.Component {
   static __initStatic() {
     this.propTypes = {
       className: PropTypes$1.string,
@@ -9338,9 +9338,9 @@ class MultipleChoice extends React$2.Component {
   }
   constructor(props) {
     super(props);
-    MultipleChoice.prototype.__init.call(this);
-    MultipleChoice.prototype.__init2.call(this);
-    MultipleChoice.prototype.__init3.call(this);
+    MultipleChoice$1.prototype.__init.call(this);
+    MultipleChoice$1.prototype.__init2.call(this);
+    MultipleChoice$1.prototype.__init3.call(this);
     this.state = {
       selectedValue: null,
       selectedValues: [],
@@ -9569,13 +9569,13 @@ class MultipleChoice extends React$2.Component {
     })))));
   }
 }
-MultipleChoice.__initStatic();
-MultipleChoice.defaultProps = {
+MultipleChoice$1.__initStatic();
+MultipleChoice$1.defaultProps = {
   session: {
     value: []
   }
 };
-var MultipleChoice$1 = styles$b.withStyles(styles$1)(MultipleChoice);
+var MultipleChoice$2 = styles$b.withStyles(styles$1)(MultipleChoice$1);
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
 const {PreviewLayout: PreviewLayout} = _dll_pie_lib__pie_toolbox_render_ui;
@@ -9607,7 +9607,7 @@ class Main extends React$1.Component {
         fileName: _jsxFileName,
         lineNumber: 31
       }
-    }, React$1.createElement(MultipleChoice$1, {
+    }, React$1.createElement(MultipleChoice$2, {
       ...model,
       session: session,
       onChoiceChanged: onChoiceChanged,
@@ -9644,20 +9644,156 @@ const Root = props => React$1.createElement(styles$b.MuiThemeProvider, {
     lineNumber: 48
   }
 }));
+const {concat: concat} = _dll_lodash;
+const {uniq: uniq} = _dll_lodash;
+const {without: without} = _dll_lodash;
+function updateSessionValue(session, choiceMode, data) {
+  session.value = session.value || [];
+  if (choiceMode === 'checkbox') {
+    if (data.selected) {
+      session.value = uniq(concat(session.value, [data.value]));
+    } else {
+      session.value = without(session.value, data.value);
+    }
+  }
+  if (choiceMode === 'radio') {
+    if (data.selected) {
+      session.value = [data.value];
+    } else {
+      session.value = [];
+    }
+  }
+}
 const React = _dll_react;
 const ReactDOM = _dll_react_dom;
 const {debounce: debounce} = _dll_lodash;
-const {cloneDeep: cloneDeep} = _dll_lodash;
+const debug$1 = _dll_debug;
 const {renderMath: renderMath} = _dll_pie_lib__pie_toolbox_math_rendering_accessible;
+const log$1 = debug$1('pie-ui:multiple-choice');
+const isComplete = session => !!(session && session.value && session.value.length);
+class MultipleChoice extends HTMLElement {
+  constructor() {
+    super();
+    this._model = null;
+    this._session = null;
+    this._rerender = debounce(() => {
+      if (this._model && this._session) {
+        var element = React.createElement(Root, {
+          model: this._model,
+          session: this._session,
+          onChoiceChanged: this._onChange.bind(this)
+        });
+        this.setAttribute('aria-label', this._model.choiceMode === 'radio' ? 'Multiple Choice Question' : 'Multiple Correct Answer Question');
+        this.setAttribute('role', 'region');
+        ReactDOM.render(element, this, () => {
+          log$1('render complete - render math');
+          renderMath(this);
+        });
+      } else {
+        log$1('skip');
+      }
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+    this._dispatchResponseChanged = debounce(() => {
+      var event = new CustomEvent('session-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session),
+          component: this.tagName.toLowerCase()
+        }
+      });
+      this.dispatchEvent(event);
+    });
+    this._dispatchModelSet = debounce(() => {
+      this.dispatchEvent(new CustomEvent('model-set', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session),
+          component: this.tagName.toLowerCase(),
+          hasModel: this._model !== undefined
+        }
+      }));
+    }, 50, {
+      leading: false,
+      trailing: true
+    });
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+    this._dispatchModelSet();
+  }
+  get session() {
+    return this._session;
+  }
+  set session(s) {
+    this._session = s;
+    this._rerender();
+    this._dispatchResponseChanged();
+  }
+  _onChange(data) {
+    updateSessionValue(this._session, this._model.choiceMode, data);
+    this._dispatchResponseChanged();
+    this._rerender();
+  }
+  connectedCallback() {
+    this._rerender();
+  }
+}
+var lib = {};
+Object.defineProperty(lib, "__esModule", {
+  value: true
+});
+class ModelSetEvent extends CustomEvent {
+  constructor(component, complete, hasModel) {
+    super(ModelSetEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component,
+        hasModel
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+ModelSetEvent.TYPE = 'model-set';
+lib.ModelSetEvent = ModelSetEvent;
+class SessionChangedEvent extends CustomEvent {
+  constructor(component, complete) {
+    super(SessionChangedEvent.TYPE, {
+      bubbles: true,
+      composed: true,
+      detail: {
+        complete,
+        component
+      }
+    });
+    this.component = component;
+    this.complete = complete;
+  }
+}
+SessionChangedEvent.TYPE = 'session-changed';
+var SessionChangedEvent_1 = lib.SessionChangedEvent = SessionChangedEvent;
+const {cloneDeep: cloneDeep} = _dll_lodash;
+const {get: get} = _dll_lodash;
 const debug = _dll_debug;
-const log = debug('pie-element:multiple-choice:print');
+const MC_TAG_NAME = 'ebsr-multiple-choice';
+const SESSION_CHANGED = SessionChangedEvent_1.TYPE;
+const log = debug('pie-element:ebsr:print');
 const preparePrintModel = (model, opts) => {
   const instr = opts.role === 'instructor';
   model.prompt = model.promptEnabled !== false ? model.prompt : undefined;
   model.teacherInstructions = instr && model.teacherInstructionsEnabled !== false ? model.teacherInstructions : undefined;
   model.showTeacherInstructions = instr;
   model.alwaysShowCorrect = instr;
-  model.mode = instr ? 'evaluate' : model.mode;
+  model.mode = instr ? 'evaluate' : 'gather';
   model.disabled = true;
   model.animationsDisabled = true;
   model.lockChoiceOrder = true;
@@ -9672,38 +9808,109 @@ const preparePrintModel = (model, opts) => {
   model.keyMode = model.choicePrefix || 'letters';
   return model;
 };
-class MultipleChoicePrint extends HTMLElement {
+class EbsrMC extends MultipleChoice {}
+const defineMultipleChoice = () => {
+  if (!customElements.get(MC_TAG_NAME)) {
+    customElements.define(MC_TAG_NAME, EbsrMC);
+  }
+};
+defineMultipleChoice();
+const isNonEmptyArray = a => Array.isArray(a) && a.length > 0;
+const isSessionComplete = session => {
+  const a = get(session, 'value.partA.value');
+  const b = get(session, 'value.partB.value');
+  return isNonEmptyArray(a) && isNonEmptyArray(b);
+};
+class Ebsr extends HTMLElement {
   constructor() {
     super();
+    Ebsr.prototype.__init.call(this);
+    this._model = {};
+    this._session = {};
     this._options = null;
-    this._model = null;
-    this._session = [];
-    this._rerender = debounce(() => {
-      if (this._model && this._session) {
-        const printModel = preparePrintModel(this._model, this._options);
-        const element = this._options && React.createElement(Root, {
-          model: printModel,
-          session: {}
-        });
-        ReactDOM.render(element, this, () => {
-          log('render complete - render math');
-          renderMath(this);
-        });
-      } else {
-        log('skip');
+  }
+  __init() {
+    this.onSessionUpdated = e => {
+      if (e.target === this) {
+        return;
       }
-    }, 50, {
-      leading: false,
-      trailing: true
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      const id = e.target.getAttribute('id');
+      if (id) {
+        const key = `part${id.toUpperCase()}`;
+        if (e.update) {
+          this._model[key] = e.update;
+        }
+        this.dispatchSessionChanged(e.srcElement._session, key);
+      }
+    };
+  }
+  set model(m) {
+    this._model = m;
+    customElements.whenDefined(MC_TAG_NAME).then(() => {
+      this.setPartModel(this.partA, 'partA');
+      this.setPartModel(this.partB, 'partB');
+    });
+  }
+  set session(s) {
+    this._session = s;
+    customElements.whenDefined(MC_TAG_NAME).then(() => {
+      this.setPartSession(this.partA, 'partA');
+      this.setPartSession(this.partB, 'partB');
     });
   }
+  setPartModel(part, key) {
+    if (this._model && this._model[key] && part) {
+      part.model = {
+        ...preparePrintModel(this._model[key], this._options),
+        keyMode: this._model[key].choicePrefix
+      };
+      if (!part._session) {
+        part.session = {};
+      }
+    }
+  }
   set options(o) {
     this._options = o;
   }
-  set model(s) {
-    this._model = s;
-    this._rerender();
+  setPartSession(part, key) {
+    if (this._session && this._model && part) {
+      const {value} = this._session;
+      part.session = value && value[key] ? value[key] : {
+        id: key
+      };
+    }
+  }
+  dispatchSessionChanged(partSession, key) {
+    this._session.value = {
+      ...this._session.value,
+      [key]: partSession
+    };
+    log('[onSessionChanged] session: ', this._session);
+    const complete = isSessionComplete(this._session);
+    this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), complete));
+  }
+  get partA() {
+    return this.querySelector(`${MC_TAG_NAME}#a`);
+  }
+  get partB() {
+    return this.querySelector(`${MC_TAG_NAME}#b`);
+  }
+  connectedCallback() {
+    this._render();
+    this.addEventListener(SESSION_CHANGED, this.onSessionUpdated);
+  }
+  disconnectedCallback() {
+    this.removeEventListener(SESSION_CHANGED, this.onSessionUpdated);
+  }
+  _render() {
+    this.innerHTML = `
+      <div>
+        <${MC_TAG_NAME} id="a"></${MC_TAG_NAME}>
+        <${MC_TAG_NAME} id="b"></${MC_TAG_NAME}>
+      </div>
+    `;
   }
-  connectedCallback() {}
 }
-export {MultipleChoicePrint as default};
+export {Ebsr as default, isSessionComplete};

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "9.12.1-next.13+3e11d30f5",
+  "version": "9.12.1-next.14+db26c4021",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@pie-element/multiple-choice": "next",
+    "@pie-element/multiple-choice": "^8.14.1-next.14+db26c4021",
     "@pie-framework/pie-player-events": "^0.1.0",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
@@ -15,7 +15,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "3e11d30f5a3d46583ad53b853616fd68f7fc20ac",
+  "gitHead": "db26c402149abdc2d6318dc1b0058f65f047f028",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },