@pie-element/ebsr 7.0.22 → 7.0.24-next.2

package/configure/node_modules/@pie-element/multiple-choice/module/demo.js

@@ -0,0 +1,77 @@
+import Configure from './configure.js';
+import Element from './element.js';
+import * as controller from './controller.js';
+
+var generate = {};
+
+generate.model = (id, element) => ({
+  id,
+  element,
+  choiceMode: 'checkbox',
+  choicePrefix: 'numbers',
+  choices: [
+    {
+      correct: true,
+      value: 'sweden',
+      label: 'Sweden',
+      feedback: {
+        type: 'none',
+        value: ''
+      },
+      accessibility: 'sweden'
+    },
+    {
+      value: 'iceland',
+      label: 'Iceland',
+      feedback: {
+        type: 'none',
+        value: ''
+      },
+      rationale: 'Rationale for Iceland',
+      accessibility: 'iceland'
+    },
+    {
+      value: 'norway',
+      label: 'Norway',
+      feedback: {
+        type: 'none',
+        value: ''
+      },
+      rationale: 'Rationale for Norway',
+      accessibility: 'norway'
+    },
+    {
+      correct: true,
+      value: 'finland',
+      label: 'Finland',
+      feedback: {
+        type: 'none',
+        value: ''
+      },
+      rationale: 'Rationale for Finland',
+      accessibility: 'finland'
+    }
+  ],
+  prompt: 'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+  promptEnabled: true,
+  toolbarEditorPosition: 'bottom'
+});
+
+const { model } = generate;
+
+var config = {
+  elements: {
+    'multiple-choice': '../..'
+  },
+  models: [model('1', 'multiple-choice')]
+};
+
+//Note: demo-el is a custom element loaded in the markup.
+  customElements.whenDefined("demo-el").then(() => {
+    config.models.forEach((m) => {
+      const de = document.createElement("demo-el");
+      document.body.appendChild(de);
+      de.def = { tagName: m.element, Element, Configure, controller };
+      de.model = m;
+    });
+  });

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

@@ -1,5 +1,5 @@
-import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.13/module/index.js";
-import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.1/module/index.js";
+import {_dll_prop_types, _dll_react_dom, _dll_react, _dll_material_ui__core_styles, _dll_pie_lib__render_ui, _dll_material_ui__core, _dll_classnames, _dll_pie_lib__correct_answer_toggle, _dll_lodash, _dll_debug} from "../../../@pie-lib/shared-module@^1.4.17/module/index.js";
+import {_dll_pie_lib__math_rendering} from "../../../@pie-lib/math-rendering-module@^1.1.5/module/index.js";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
 }
@@ -19,43 +19,6 @@ function getAugmentedNamespace(n) {
   });
   return a;
 }
-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;
 var CSSTransition = {
   exports: {}
 };
@@ -1296,6 +1259,7 @@ const {color: color$1} = _dll_pie_lib__render_ui;
 const {PreviewPrompt: PreviewPrompt$1} = _dll_pie_lib__render_ui;
 const classNames$3 = _dll_classnames;
 const _jsxFileName$3 = "/home/circleci/repo/packages/multiple-choice/src/choice-input.jsx";
+const CLASS_NAME = 'multiple-choice-component';
 const styleSheet = () => ({
   row: {
     display: 'flex',
@@ -1310,6 +1274,11 @@ const styleSheet = () => ({
     '& label': {
       color: color$1.text()
     }
+  },
+  horizontalLayout: {
+    [`& .${CLASS_NAME}`]: {
+      paddingRight: '8px'
+    }
   }
 });
 const formStyleSheet = {
@@ -1328,10 +1297,9 @@ const StyledFormControlLabel = withStyles$3(formStyleSheet, {
   __self: undefined,
   __source: {
     fileName: _jsxFileName$3,
-    lineNumber: 39
+    lineNumber: 46
   }
 }));
-const CLASS_NAME = 'multiple-choice-component';
 const colorStyle = (varName, fallback) => ({
   [`&.${CLASS_NAME}`]: {
     color: `var(--choice-input-${varName}, ${fallback}) !important`
@@ -1383,7 +1351,7 @@ const StyledCheckbox = withStyles$3(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 92
+      lineNumber: 97
     }
   });
 });
@@ -1412,7 +1380,7 @@ const StyledRadio = withStyles$3(inputStyles)(props => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$3,
-      lineNumber: 125
+      lineNumber: 130
     }
   });
 });
@@ -1433,7 +1401,8 @@ class ChoiceInput extends React$4.Component {
       classes: PropTypes$3.object,
       className: PropTypes$3.string,
       hideTick: PropTypes$3.bool,
-      isEvaluateMode: PropTypes$3.bool
+      isEvaluateMode: PropTypes$3.bool,
+      choicesLayout: PropTypes$3.oneOf(['vertical', 'grid', 'horizontal'])
     };
   }
   static __initStatic2() {
@@ -1455,36 +1424,39 @@ class ChoiceInput extends React$4.Component {
     });
   }
   render() {
-    const {choiceMode, disabled, displayKey, feedback, label, checked, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode} = this.props;
+    const {choiceMode, disabled, displayKey, feedback, label, checked, correctness, classes, className, rationale, accessibility, hideTick, isEvaluateMode, choicesLayout} = this.props;
     const Tag = choiceMode === 'checkbox' ? StyledCheckbox : StyledRadio;
     const classSuffix = choiceMode === 'checkbox' ? 'checkbox' : 'radio-button';
+    const holderClassNames = classNames$3(classes.checkboxHolder, {
+      [classes.horizontalLayout]: choicesLayout === 'horizontal'
+    });
     return React$4.createElement('div', {
       className: classNames$3(className, 'corespring-' + classSuffix, 'choice-input'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 197
+        lineNumber: 208
       }
     }, React$4.createElement('div', {
       className: classes.row,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 198
+        lineNumber: 209
       }
     }, !hideTick && isEvaluateMode && React$4.createElement(FeedbackTick$1, {
       correctness: correctness,
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 199
+        lineNumber: 210
       }
     }), React$4.createElement('div', {
-      className: classNames$3(classes.checkboxHolder, 'checkbox-holder'),
+      className: classNames$3(holderClassNames, 'checkbox-holder'),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 200
+        lineNumber: 211
       }
     }, React$4.createElement(StyledFormControlLabel, {
       disabled: disabled,
@@ -1497,13 +1469,13 @@ class ChoiceInput extends React$4.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$3,
-          lineNumber: 205
+          lineNumber: 216
         }
       }),
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 201
+        lineNumber: 212
       }
     }), React$4.createElement(PreviewPrompt$1, {
       className: "label",
@@ -1513,7 +1485,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 213
+        lineNumber: 224
       }
     }))), rationale && React$4.createElement(PreviewPrompt$1, {
       className: "rationale",
@@ -1522,7 +1494,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 222
+        lineNumber: 233
       }
     }), React$4.createElement(Feedback, {
       feedback: feedback,
@@ -1530,7 +1502,7 @@ class ChoiceInput extends React$4.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$3,
-        lineNumber: 224
+        lineNumber: 235
       }
     }));
   }
@@ -1574,7 +1546,8 @@ class Choice extends React$3.Component {
       isEvaluateMode
     };
     const names = classNames$2(classes.choice, {
-      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical'
+      [classes.noBorder]: index === choicesLength - 1 || choicesLayout !== 'vertical',
+      [classes.horizontalLayout]: choicesLayout === 'horizontal'
     });
     return React$3.createElement('div', {
       className: choiceClass,
@@ -1582,7 +1555,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 56
+        lineNumber: 57
       }
     }, React$3.createElement(ChoiceInput$1, {
       ...choiceProps,
@@ -1590,7 +1563,7 @@ class Choice extends React$3.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName$2,
-        lineNumber: 57
+        lineNumber: 58
       }
     }));
   }
@@ -1619,6 +1592,12 @@ var StyledChoice = withStyles$2({
   },
   noBorder: {
     borderBottom: 'none'
+  },
+  horizontalLayout: {
+    paddingRight: '20px',
+    '& label': {
+      marginRight: '8px'
+    }
   }
 })(Choice);
 const React$2 = _dll_react;
@@ -1962,9 +1941,9 @@ function updateSessionValue(session, choiceMode, data) {
 const React = _dll_react;
 const ReactDOM = _dll_react_dom;
 const {debounce: debounce} = _dll_lodash;
-const debug$1 = _dll_debug;
+const debug = _dll_debug;
 const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const log$1 = debug$1('pie-ui:multiple-choice');
+const log = debug('pie-ui:multiple-choice');
 const isComplete = session => !!(session && session.value && session.value.length);
 class MultipleChoice extends HTMLElement {
   constructor() {
@@ -1979,11 +1958,11 @@ class MultipleChoice extends HTMLElement {
           onChoiceChanged: this._onChange.bind(this)
         });
         ReactDOM.render(element, this, () => {
-          log$1('render complete - render math');
+          log('render complete - render math');
           renderMath(this);
         });
       } else {
-        log$1('skip');
+        log('skip');
       }
     }, 50, {
       leading: false,
@@ -2037,112 +2016,4 @@ class MultipleChoice extends HTMLElement {
     this._rerender();
   }
 }
-const {get: get} = _dll_lodash;
-const debug = _dll_debug;
-const SESSION_CHANGED = SessionChangedEvent_1.TYPE;
-const MC_TAG_NAME = 'ebsr-multiple-choice';
-const log = debug('pie-elements:ebsr');
-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 = {};
-  }
-  __init() {
-    this.onSessionUpdated = e => {
-      if (e.target === this) {
-        return;
-      }
-      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');
-    });
-  }
-  get session() {
-    return this._session;
-  }
-  setPartModel(part, key) {
-    if (this._model && this._model[key]) {
-      const {mode} = this._model;
-      part.model = {
-        ...this._model[key],
-        mode,
-        keyMode: this._model[key].choicePrefix
-      };
-    }
-  }
-  setPartSession(part, key) {
-    if (this._session && this._model) {
-      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>
-    `;
-  }
-}
-export {Ebsr as default, isSessionComplete};
+export {MultipleChoice as default, isComplete};

package/{module → configure/node_modules/@pie-element/multiple-choice/module}/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/ebsr@7.0.21</title>
+      <title>@pie-element/multiple-choice@6.3.1</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/{module → configure/node_modules/@pie-element/multiple-choice/module}/manifest.json

@@ -1,14 +1,14 @@
 {
-  "name": "@pie-element/ebsr",
-  "version": "7.0.21",
+  "name": "@pie-element/multiple-choice",
+  "version": "6.3.1",
   "modules": [
     {
       "name": "@pie-lib/shared-module",
-      "version": "^1.4.13"
+      "version": "^1.4.17"
     },
     {
       "name": "@pie-lib/math-rendering-module",
-      "version": "^1.1.1"
+      "version": "^1.1.5"
     }
   ]
 }

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

@@ -5,63 +5,63 @@ var generate = {};
 generate.model = (id, element) => ({
   id,
   element,
-  partA: {
-    choiceMode: 'radio',
-    choices: [
-      {
-        value: 'yellow',
-        label: 'Yellow',
+  choiceMode: 'checkbox',
+  choicePrefix: 'numbers',
+  choices: [
+    {
+      correct: true,
+      value: 'sweden',
+      label: 'Sweden',
+      feedback: {
+        type: 'none',
+        value: ''
       },
-      {
-        value: 'green',
-        label: 'Green',
+      accessibility: 'sweden'
+    },
+    {
+      value: 'iceland',
+      label: 'Iceland',
+      feedback: {
+        type: 'none',
+        value: ''
       },
-      {
-        correct: true,
-        value: 'blue',
-        label: 'Blue',
+      rationale: 'Rationale for Iceland',
+      accessibility: 'iceland'
+    },
+    {
+      value: 'norway',
+      label: 'Norway',
+      feedback: {
+        type: 'none',
+        value: ''
       },
-    ],
-    choicePrefix: 'numbers',
-    partialScoring: false,
-    prompt: 'What color is the sky?',
-    promptEnabled: true
-  },
-  partB: {
-    choiceMode: 'radio',
-    choices: [
-      {
-        value: 'orange',
-        label: 'Orange',
-      },
-      {
-        correct: true,
-        value: 'purple',
-        label: 'Purple',
-      },
-      {
-        value: 'pink',
-        label: 'Pink',
-      },
-      {
-        value: 'green',
-        label: 'Green',
+      rationale: 'Rationale for Norway',
+      accessibility: 'norway'
+    },
+    {
+      correct: true,
+      value: 'finland',
+      label: 'Finland',
+      feedback: {
+        type: 'none',
+        value: ''
       },
-    ],
-    choicePrefix: 'numbers',
-    partialScoring: false,
-    prompt: 'What color do you get when you mix Red with your answer in Part 1?',
-    promptEnabled: true
-  }
+      rationale: 'Rationale for Finland',
+      accessibility: 'finland'
+    }
+  ],
+  prompt: 'Which of these northern European countries are EU members? <math><mstack><msrow><mn>111</mn></msrow><msline/></mstack></math>',
+  promptEnabled: true,
+  toolbarEditorPosition: 'bottom'
 });
 
 const { model } = generate;
 
 var config = {
   elements: {
-    'ebsr-element': '../..'
+    'multiple-choice': '../..'
   },
-  models: [model('1', 'ebsr-element')/*, model('2', 'ebsr-element')*/]
+  models: [model('1', 'multiple-choice')]
 };
 
 // new init - just shows off print!

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

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/ebsr@7.0.21</title>
+      <title>@pie-element/multiple-choice@6.3.1</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"