@pie-element/ebsr 10.2.9-next.20 → 10.2.9-next.7

package/module/element.js

@@ -40,7 +40,7 @@ class ModelSetEvent extends CustomEvent {
   }
 }
 ModelSetEvent.TYPE = 'model-set';
-var ModelSetEvent_1 = lib$8.ModelSetEvent = ModelSetEvent;
+lib$8.ModelSetEvent = ModelSetEvent;
 class SessionChangedEvent extends CustomEvent {
   constructor(component, complete) {
     super(SessionChangedEvent.TYPE, {
@@ -12703,8 +12703,9 @@ class MultipleChoice$1 extends React$2.Component {
     MultipleChoice$1.prototype.__init2.call(this);
     MultipleChoice$1.prototype.__init3.call(this);
     this.state = {
-      showCorrect: this.props.alwaysShowCorrect || false,
-      maxSelectionsErrorState: false
+      selectedValue: null,
+      selectedValues: [],
+      showCorrect: this.props.alwaysShowCorrect || false
     };
     this.onToggle = this.onToggle.bind(this);
   }
@@ -12715,14 +12716,22 @@ class MultipleChoice$1 extends React$2.Component {
   __init() {
     this.handleChange = event => {
       const {value, checked} = event.target;
-      const {maxSelections, onChoiceChanged, session} = this.props;
-      if (session.value && session.value.length >= maxSelections) {
+      const {choiceMode, maxSelections, onChoiceChanged} = this.props;
+      if (choiceMode === 'radio') {
         this.setState({
-          maxSelectionsErrorState: checked
+          selectedValue: value
         });
-        if (checked) {
+      } else {
+        const {selectedValues} = this.state;
+        if (checked && selectedValues.length >= maxSelections) {
           return;
         }
+        this.setState(prevState => {
+          const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
+          return {
+            selectedValues
+          };
+        });
       }
       onChoiceChanged({
         value,
@@ -12798,7 +12807,10 @@ class MultipleChoice$1 extends React$2.Component {
     if (this.state.showCorrect) {
       return choice.correct || false;
     }
-    return this.isSelected(choice.value);
+    if (this.isSelected(choice.value)) {
+      return true;
+    }
+    return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
   }
   renderHeading() {
     const {mode, choiceMode, classes} = this.props;
@@ -12810,20 +12822,20 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 209
+        lineNumber: 225
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 227
       }
     }, "Multiple Select Question");
   }
   render() {
     const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
-    const {showCorrect, maxSelectionsErrorState} = this.state;
+    const {showCorrect} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
     const columnsStyle = gridColumns > 1 ? {
@@ -12838,7 +12850,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 243
+        lineNumber: 259
       }
     });
     return React$2.createElement('div', {
@@ -12846,21 +12858,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 252
+        lineNumber: 268
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 253
+        lineNumber: 269
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 258
+        lineNumber: 274
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12870,14 +12882,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 276
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 290
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12887,7 +12899,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 275
+        lineNumber: 291
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12897,7 +12909,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 294
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12908,7 +12920,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 286
+        lineNumber: 302
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12931,24 +12943,24 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 310
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 334
       }
     }, translator.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
       minSelections
-    })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
+    })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 326
+        lineNumber: 342
       }
     }, translator.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13070,7 +13082,7 @@ const isComplete = (session, model) => {
   if (!session || !session.value) {
     return false;
   }
-  const {choiceMode, minSelections = 1, maxSelections} = model || ({});
+  const {choiceMode, minSelections, maxSelections} = model || ({});
   const selections = session.value.length || 0;
   if (choiceMode === 'radio') {
     return !!selections;
@@ -13108,10 +13120,27 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
     this._dispatchResponseChanged = debounce(() => {
-      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
+      console.log('>> dispatch event');
+      var event = new CustomEvent('session-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session, this._model),
+          component: this.tagName.toLowerCase()
+        }
+      });
+      this.dispatchEvent(event);
     });
     this._dispatchModelSet = debounce(() => {
-      this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model), this._model !== undefined));
+      this.dispatchEvent(new CustomEvent('model-set', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session, this._model),
+          component: this.tagName.toLowerCase(),
+          hasModel: this._model !== undefined
+        }
+      }));
     }, 50, {
       leading: false,
       trailing: true

package/module/print.js

@@ -12666,8 +12666,9 @@ class MultipleChoice$1 extends React$2.Component {
     MultipleChoice$1.prototype.__init2.call(this);
     MultipleChoice$1.prototype.__init3.call(this);
     this.state = {
-      showCorrect: this.props.alwaysShowCorrect || false,
-      maxSelectionsErrorState: false
+      selectedValue: null,
+      selectedValues: [],
+      showCorrect: this.props.alwaysShowCorrect || false
     };
     this.onToggle = this.onToggle.bind(this);
   }
@@ -12678,14 +12679,22 @@ class MultipleChoice$1 extends React$2.Component {
   __init() {
     this.handleChange = event => {
       const {value, checked} = event.target;
-      const {maxSelections, onChoiceChanged, session} = this.props;
-      if (session.value && session.value.length >= maxSelections) {
+      const {choiceMode, maxSelections, onChoiceChanged} = this.props;
+      if (choiceMode === 'radio') {
         this.setState({
-          maxSelectionsErrorState: checked
+          selectedValue: value
         });
-        if (checked) {
+      } else {
+        const {selectedValues} = this.state;
+        if (checked && selectedValues.length >= maxSelections) {
           return;
         }
+        this.setState(prevState => {
+          const selectedValues = checked ? [...prevState.selectedValues, value] : prevState.selectedValues.filter(currentValue => currentValue !== value);
+          return {
+            selectedValues
+          };
+        });
       }
       onChoiceChanged({
         value,
@@ -12761,7 +12770,10 @@ class MultipleChoice$1 extends React$2.Component {
     if (this.state.showCorrect) {
       return choice.correct || false;
     }
-    return this.isSelected(choice.value);
+    if (this.isSelected(choice.value)) {
+      return true;
+    }
+    return this.props.choiceMode === 'radio' ? this.state.selectedValue === choice.value : this.state.selectedValues.includes(choice.value);
   }
   renderHeading() {
     const {mode, choiceMode, classes} = this.props;
@@ -12773,20 +12785,20 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 209
+        lineNumber: 225
       }
     }, "Multiple Choice Question") : React$2.createElement('h2', {
       className: classes.srOnly,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 211
+        lineNumber: 227
       }
     }, "Multiple Select Question");
   }
   render() {
     const {mode, disabled, className, choices = [], choiceMode, gridColumns, partLabel, prompt, responseCorrect, teacherInstructions, classes, alwaysShowCorrect, animationsDisabled, language, isSelectionButtonBelow, minSelections, maxSelections, session} = this.props;
-    const {showCorrect, maxSelectionsErrorState} = this.state;
+    const {showCorrect} = this.state;
     const isEvaluateMode = mode === 'evaluate';
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
     const columnsStyle = gridColumns > 1 ? {
@@ -12801,7 +12813,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 243
+        lineNumber: 259
       }
     });
     return React$2.createElement('div', {
@@ -12809,21 +12821,21 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 252
+        lineNumber: 268
       }
     }, partLabel && React$2.createElement('h3', {
       className: classes.partLabel,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 253
+        lineNumber: 269
       }
     }, partLabel), this.renderHeading(), teacherInstructions && React$2.createElement('div', {
       className: classes.teacherInstructions,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 258
+        lineNumber: 274
       }
     }, !animationsDisabled ? React$2.createElement(Collapsible, {
       labels: {
@@ -12833,14 +12845,14 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 260
+        lineNumber: 276
       }
     }, teacherInstructionsDiv) : teacherInstructionsDiv), React$2.createElement('fieldset', {
       className: classes.fieldset,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 274
+        lineNumber: 290
       }
     }, React$2.createElement(PreviewPrompt, {
       className: "prompt",
@@ -12850,7 +12862,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 275
+        lineNumber: 291
       }
     }), !alwaysShowCorrect && React$2.createElement(CorrectAnswerToggle, {
       show: showCorrectAnswerToggle,
@@ -12860,7 +12872,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 278
+        lineNumber: 294
       }
     }), React$2.createElement('div', {
       className: classNames({
@@ -12871,7 +12883,7 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 286
+        lineNumber: 302
       }
     }, choices.map((choice, index) => React$2.createElement(StyledChoice, {
       choicesLayout: this.props.choicesLayout,
@@ -12894,24 +12906,24 @@ class MultipleChoice$1 extends React$2.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 294
+        lineNumber: 310
       }
     })))), choiceMode === 'checkbox' && selections < minSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 318
+        lineNumber: 334
       }
     }, translator$1.t(`translation:multipleChoice:minSelections_${minSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
       minSelections
-    })), choiceMode === 'checkbox' && maxSelectionsErrorState && React$2.createElement('div', {
+    })), choiceMode === 'checkbox' && selections >= maxSelections && React$2.createElement('div', {
       className: classes.errorText,
       __self: this,
       __source: {
         fileName: _jsxFileName$1,
-        lineNumber: 326
+        lineNumber: 342
       }
     }, translator$1.t(`translation:multipleChoice:maxSelections_${maxSelections === 1 ? 'one' : 'other'}`, {
       lng: language,
@@ -13003,43 +13015,6 @@ const Root = props => React$1.createElement(styles$b.MuiThemeProvider, {
     lineNumber: 59
   }
 }));
-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';
-var ModelSetEvent_1 = 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 {concat: concat} = _dll_lodash;
 const {uniq: uniq} = _dll_lodash;
 const {without: without} = _dll_lodash;
@@ -13070,7 +13045,7 @@ const isComplete = (session, model) => {
   if (!session || !session.value) {
     return false;
   }
-  const {choiceMode, minSelections = 1, maxSelections} = model || ({});
+  const {choiceMode, minSelections, maxSelections} = model || ({});
   const selections = session.value.length || 0;
   if (choiceMode === 'radio') {
     return !!selections;
@@ -13108,10 +13083,27 @@ class MultipleChoice extends HTMLElement {
       trailing: true
     });
     this._dispatchResponseChanged = debounce(() => {
-      this.dispatchEvent(new SessionChangedEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model)));
+      console.log('>> dispatch event');
+      var event = new CustomEvent('session-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session, this._model),
+          component: this.tagName.toLowerCase()
+        }
+      });
+      this.dispatchEvent(event);
     });
     this._dispatchModelSet = debounce(() => {
-      this.dispatchEvent(new ModelSetEvent_1(this.tagName.toLowerCase(), isComplete(this._session, this._model), this._model !== undefined));
+      this.dispatchEvent(new CustomEvent('model-set', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          complete: isComplete(this._session, this._model),
+          component: this.tagName.toLowerCase(),
+          hasModel: this._model !== undefined
+        }
+      }));
     }, 50, {
       leading: false,
       trailing: true
@@ -13147,6 +13139,43 @@ class MultipleChoice extends HTMLElement {
     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;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.2.9-next.20+e7e5cd4eb",
+  "version": "10.2.9-next.7+2e72baca5",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@pie-element/multiple-choice": "^9.7.2-next.20+e7e5cd4eb",
+    "@pie-element/multiple-choice": "^9.7.2-next.7+2e72baca5",
     "@pie-framework/pie-player-events": "^0.1.0",
     "@pie-lib/pie-toolbox": "2.6.1",
     "classnames": "^2.2.5",
@@ -16,7 +16,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "e7e5cd4eb2d1360d4b18ff8f0756cff448dc1574",
+  "gitHead": "2e72baca5a8804c802a4bd5e45ff59feccee930e",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },