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

package/configure/package.json

@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@pie-element/multiple-choice": "^9.7.1",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/pie-toolbox": "2.7.0",
+    "@pie-lib/pie-toolbox": "2.6.1",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",

package/controller/package.json

@@ -7,7 +7,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.7.0",
+    "@pie-lib/pie-toolbox": "2.6.1",
     "lodash": "^4.17.15"
   },
   "author": "",

package/module/configure.js

@@ -1,6 +1,6 @@
 import {_dll_react, _dll_prop_types, _dll_lodash, _dll_react_dom} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.1/module/index.js";
 import MultipleChoiceConfigure from '@pie-element/multiple-choice/configure/lib';
-import {_dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.7.2/module/index.js";
+import {_dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.7.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;

package/module/controller.js

@@ -23436,7 +23436,7 @@ var _default = {
     },
     imageClozeAssociation: {
       reachedLimit_one: 'You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.',
-      reachedLimit_other: 'Full'
+      reachedLimit_other: 'You’ve reached the limit of {{count}} responses per area. To add another response, one must first be removed.'
     },
     drawingResponse: {
       fillColor: 'Fill color',
@@ -23532,7 +23532,7 @@ var _default = {
     },
     imageClozeAssociation: {
       reachedLimit_one: 'Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.',
-      reachedLimit_other: 'Lleno'
+      reachedLimit_other: 'Has alcanzado el límite de {{count}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.'
     },
     drawingResponse: {
       fillColor: 'Color de relleno',

package/module/element.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.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@5.7.2/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@5.7.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -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, {
@@ -8451,7 +8451,7 @@ var en = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.',
-        reachedLimit_other: 'Full'
+        reachedLimit_other: 'You’ve reached the limit of {{count}} responses per area. To add another response, one must first be removed.'
       },
       drawingResponse: {
         fillColor: 'Fill color',
@@ -8544,7 +8544,7 @@ var es = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.',
-        reachedLimit_other: 'Lleno'
+        reachedLimit_other: 'Has alcanzado el límite de {{count}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.'
       },
       drawingResponse: {
         fillColor: 'Color de relleno',
@@ -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/manifest.json

@@ -8,7 +8,7 @@
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.7.2"
+      "version": "5.7.1"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
 import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering} from "../../../@pie-lib/pie-toolbox-math-rendering-module@3.0.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@5.7.2/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@5.7.1/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8414,7 +8414,7 @@ var en = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'You’ve reached the limit of {{count}} response per area. To add another response, one must first be removed.',
-        reachedLimit_other: 'Full'
+        reachedLimit_other: 'You’ve reached the limit of {{count}} responses per area. To add another response, one must first be removed.'
       },
       drawingResponse: {
         fillColor: 'Fill color',
@@ -8507,7 +8507,7 @@ var es = {};
       },
       imageClozeAssociation: {
         reachedLimit_one: 'Has alcanzado el límite de {{count}} respuesta por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.',
-        reachedLimit_other: 'Lleno'
+        reachedLimit_other: 'Has alcanzado el límite de {{count}} respuestas por área. Para agregar otra respuesta, primero se debe eliminar una respuesta.'
       },
       drawingResponse: {
         fillColor: 'Color de relleno',
@@ -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,22 +1,22 @@
 {
   "name": "@pie-element/ebsr",
-  "version": "10.2.9-next.22+6517bb532",
+  "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.22+6517bb532",
+    "@pie-element/multiple-choice": "^9.7.2-next.7+2e72baca5",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.7.0",
+    "@pie-lib/pie-toolbox": "2.6.1",
     "classnames": "^2.2.5",
     "debug": "^4.1.1",
     "lodash": "^4.17.11"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "6517bb532d2b416fdf57525a3d50c62c83fdc543",
+  "gitHead": "2e72baca5a8804c802a4bd5e45ff59feccee930e",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },