@pie-element/likert 4.1.2-next.5 → 4.1.3

package/lib/choice-input.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioStyled = exports.ChoiceInput = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _FormControlLabel = _interopRequireDefault(require("@mui/material/FormControlLabel"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _Radio = _interopRequireDefault(require("@mui/material/Radio"));
+var _likertEntities = require("./likertEntities");
+const RadioStyled = exports.RadioStyled = (0, _styles.styled)(_Radio.default)({
+  color: `var(--choice-input-color, ${_renderUi.color.text()})`,
+  '&.Mui-checked': {
+    color: `var(--choice-input-selected-color, ${_renderUi.color.primary()})`
+  },
+  '&.Mui-disabled': {
+    color: `var(--choice-input-disabled-color, ${_renderUi.color.defaults.DISABLED})`
+  }
+});
+const LabelRoot = (0, _styles.styled)('p')({
+  color: _renderUi.color.text(),
+  textAlign: 'center',
+  cursor: 'pointer'
+});
+const CheckboxHolderRoot = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center',
+  flex: 1,
+  padding: '0 5px',
+  '& label': {}
+});
+const StyledFormControlLabel = (0, _styles.styled)(_FormControlLabel.default)({
+  margin: 0
+});
+class ChoiceInput extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onToggleChoice", () => {
+      this.props.onChange({
+        value: this.props.value,
+        selected: !this.props.checked
+      });
+    });
+  }
+  render() {
+    const {
+      disabled,
+      label,
+      checked,
+      likertOrientation
+    } = this.props;
+    const flexDirection = likertOrientation === _likertEntities.LIKERT_ORIENTATION.vertical ? 'row' : 'column';
+    return /*#__PURE__*/_react.default.createElement(CheckboxHolderRoot, {
+      style: {
+        flexDirection
+      }
+    }, /*#__PURE__*/_react.default.createElement(StyledFormControlLabel, {
+      disabled: disabled,
+      control: /*#__PURE__*/_react.default.createElement(RadioStyled, {
+        checked: checked,
+        onChange: this.onToggleChoice,
+        disabled: disabled
+      })
+    }), /*#__PURE__*/_react.default.createElement(LabelRoot, {
+      onClick: this.onToggleChoice,
+      dangerouslySetInnerHTML: {
+        __html: label
+      }
+    }));
+  }
+}
+exports.ChoiceInput = ChoiceInput;
+(0, _defineProperty2.default)(ChoiceInput, "propTypes", {
+  checked: _propTypes.default.bool.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  label: _propTypes.default.string.isRequired,
+  likertOrientation: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  value: _propTypes.default.number.isRequired
+});
+(0, _defineProperty2.default)(ChoiceInput, "defaultProps", {
+  checked: false
+});
+var _default = exports.default = ChoiceInput;
+//# sourceMappingURL=choice-input.js.map

package/lib/choice-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"choice-input.js","names":["_react","_interopRequireDefault","require","_FormControlLabel","_propTypes","_styles","_renderUi","_Radio","_likertEntities","RadioStyled","exports","styled","Radio","color","text","primary","defaults","DISABLED","LabelRoot","textAlign","cursor","CheckboxHolderRoot","display","alignItems","flex","padding","StyledFormControlLabel","FormControlLabel","margin","ChoiceInput","React","Component","constructor","args","_defineProperty2","default","props","onChange","value","selected","checked","render","disabled","label","likertOrientation","flexDirection","LIKERT_ORIENTATION","vertical","createElement","style","control","onToggleChoice","onClick","dangerouslySetInnerHTML","__html","PropTypes","bool","isRequired","string","func","number","_default"],"sources":["../src/choice-input.jsx"],"sourcesContent":["import React from 'react';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport { color } from '@pie-lib/render-ui';\nimport Radio from '@mui/material/Radio';\nimport { LIKERT_ORIENTATION } from './likertEntities';\n\nexport const RadioStyled = styled(Radio)({\n  color: `var(--choice-input-color, ${color.text()})`,\n  '&.Mui-checked': {\n    color: `var(--choice-input-selected-color, ${color.primary()})`,\n  },\n  '&.Mui-disabled': {\n    color: `var(--choice-input-disabled-color, ${color.defaults.DISABLED})`,\n  },\n});\n\nconst LabelRoot = styled('p')({\n  color: color.text(),\n  textAlign: 'center',\n  cursor: 'pointer',\n});\n\nconst CheckboxHolderRoot = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n  flex: 1,\n  padding: '0 5px',\n  '& label': {},\n});\n\nconst StyledFormControlLabel = styled(FormControlLabel)({\n  margin: 0,\n});\n\nexport class ChoiceInput extends React.Component {\n  static propTypes = {\n    checked: PropTypes.bool.isRequired,\n    disabled: PropTypes.bool.isRequired,\n    label: PropTypes.string.isRequired,\n    likertOrientation: PropTypes.string.isRequired,\n    onChange: PropTypes.func.isRequired,\n    value: PropTypes.number.isRequired,\n  };\n\n  static defaultProps = {\n    checked: false,\n  };\n\n  onToggleChoice = () => {\n    this.props.onChange({\n      value: this.props.value,\n      selected: !this.props.checked,\n    });\n  };\n\n  render() {\n    const { disabled, label, checked, likertOrientation } = this.props;\n    const flexDirection = likertOrientation === LIKERT_ORIENTATION.vertical ? 'row' : 'column';\n\n    return (\n      <CheckboxHolderRoot style={{ flexDirection }}>\n        <StyledFormControlLabel\n          disabled={disabled}\n          control={<RadioStyled checked={checked} onChange={this.onToggleChoice} disabled={disabled} />}\n        />\n        <LabelRoot onClick={this.onToggleChoice} dangerouslySetInnerHTML={{ __html: label }} />\n      </CheckboxHolderRoot>\n    );\n  }\n}\n\nexport default ChoiceInput;\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,UAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AAEO,MAAMO,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAG,IAAAE,cAAM,EAACC,cAAK,CAAC,CAAC;EACvCC,KAAK,EAAE,6BAA6BA,eAAK,CAACC,IAAI,CAAC,CAAC,GAAG;EACnD,eAAe,EAAE;IACfD,KAAK,EAAE,sCAAsCA,eAAK,CAACE,OAAO,CAAC,CAAC;EAC9D,CAAC;EACD,gBAAgB,EAAE;IAChBF,KAAK,EAAE,sCAAsCA,eAAK,CAACG,QAAQ,CAACC,QAAQ;EACtE;AACF,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAG,IAAAP,cAAM,EAAC,GAAG,CAAC,CAAC;EAC5BE,KAAK,EAAEA,eAAK,CAACC,IAAI,CAAC,CAAC;EACnBK,SAAS,EAAE,QAAQ;EACnBC,MAAM,EAAE;AACV,CAAC,CAAC;AAEF,MAAMC,kBAAkB,GAAG,IAAAV,cAAM,EAAC,KAAK,CAAC,CAAC;EACvCW,OAAO,EAAE,MAAM;EACfC,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE,CAAC;EACPC,OAAO,EAAE,OAAO;EAChB,SAAS,EAAE,CAAC;AACd,CAAC,CAAC;AAEF,MAAMC,sBAAsB,GAAG,IAAAf,cAAM,EAACgB,yBAAgB,CAAC,CAAC;EACtDC,MAAM,EAAE;AACV,CAAC,CAAC;AAEK,MAAMC,WAAW,SAASC,cAAK,CAACC,SAAS,CAAC;EAAAC,YAAA,GAAAC,IAAA;IAAA,SAAAA,IAAA;IAAA,IAAAC,gBAAA,CAAAC,OAAA,0BAc9B,MAAM;MACrB,IAAI,CAACC,KAAK,CAACC,QAAQ,CAAC;QAClBC,KAAK,EAAE,IAAI,CAACF,KAAK,CAACE,KAAK;QACvBC,QAAQ,EAAE,CAAC,IAAI,CAACH,KAAK,CAACI;MACxB,CAAC,CAAC;IACJ,CAAC;EAAA;EAEDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,QAAQ;MAAEC,KAAK;MAAEH,OAAO;MAAEI;IAAkB,CAAC,GAAG,IAAI,CAACR,KAAK;IAClE,MAAMS,aAAa,GAAGD,iBAAiB,KAAKE,kCAAkB,CAACC,QAAQ,GAAG,KAAK,GAAG,QAAQ;IAE1F,oBACE/C,MAAA,CAAAmC,OAAA,CAAAa,aAAA,CAAC3B,kBAAkB;MAAC4B,KAAK,EAAE;QAAEJ;MAAc;IAAE,gBAC3C7C,MAAA,CAAAmC,OAAA,CAAAa,aAAA,CAACtB,sBAAsB;MACrBgB,QAAQ,EAAEA,QAAS;MACnBQ,OAAO,eAAElD,MAAA,CAAAmC,OAAA,CAAAa,aAAA,CAACvC,WAAW;QAAC+B,OAAO,EAAEA,OAAQ;QAACH,QAAQ,EAAE,IAAI,CAACc,cAAe;QAACT,QAAQ,EAAEA;MAAS,CAAE;IAAE,CAC/F,CAAC,eACF1C,MAAA,CAAAmC,OAAA,CAAAa,aAAA,CAAC9B,SAAS;MAACkC,OAAO,EAAE,IAAI,CAACD,cAAe;MAACE,uBAAuB,EAAE;QAAEC,MAAM,EAAEX;MAAM;IAAE,CAAE,CACpE,CAAC;EAEzB;AACF;AAACjC,OAAA,CAAAmB,WAAA,GAAAA,WAAA;AAAA,IAAAK,gBAAA,CAAAC,OAAA,EAnCYN,WAAW,eACH;EACjBW,OAAO,EAAEe,kBAAS,CAACC,IAAI,CAACC,UAAU;EAClCf,QAAQ,EAAEa,kBAAS,CAACC,IAAI,CAACC,UAAU;EACnCd,KAAK,EAAEY,kBAAS,CAACG,MAAM,CAACD,UAAU;EAClCb,iBAAiB,EAAEW,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC9CpB,QAAQ,EAAEkB,kBAAS,CAACI,IAAI,CAACF,UAAU;EACnCnB,KAAK,EAAEiB,kBAAS,CAACK,MAAM,CAACH;AAC1B,CAAC;AAAA,IAAAvB,gBAAA,CAAAC,OAAA,EARUN,WAAW,kBAUA;EACpBW,OAAO,EAAE;AACX,CAAC;AAAA,IAAAqB,QAAA,GAAAnD,OAAA,CAAAyB,OAAA,GAyBYN,WAAW","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isComplete = exports.default = void 0;
+var _main = _interopRequireDefault(require("./main"));
+var _react = _interopRequireDefault(require("react"));
+var _client = require("react-dom/client");
+var _piePlayerEvents = require("@pie-framework/pie-player-events");
+var _mathRendering = require("@pie-lib/math-rendering");
+const isComplete = session => !!(session && session.value && session.value.length);
+exports.isComplete = isComplete;
+class Likert extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
+  }
+  set model(m) {
+    this._model = m;
+    this._render();
+  }
+  set session(s) {
+    this._session = s;
+    this._render();
+  }
+  get session() {
+    return this._session;
+  }
+  sessionChanged(s) {
+    this._session.value = s.value;
+    const complete = isComplete(this._session, this._model);
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), complete));
+    this._render();
+  }
+  connectedCallback() {
+    this._render();
+  }
+  _render() {
+    if (!this._model || !this._session) {
+      return;
+    }
+    const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+      model: this._model,
+      session: this._session,
+      onSessionChange: this.sessionChanged.bind(this)
+    });
+    if (!this._root) {
+      this._root = (0, _client.createRoot)(this);
+    }
+    this._root.render(el);
+    queueMicrotask(() => {
+      (0, _mathRendering.renderMath)(this);
+    });
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = Likert;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_main","_interopRequireDefault","require","_react","_client","_piePlayerEvents","_mathRendering","isComplete","session","value","length","exports","Likert","HTMLElement","constructor","_root","model","m","_model","_render","s","_session","sessionChanged","complete","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","connectedCallback","el","React","createElement","Main","onSessionChange","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","default"],"sources":["../src/index.js"],"sourcesContent":["import Main from './main';\nimport React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport const isComplete = (session) => !!(session && session.value && session.value.length);\n\nexport default class Likert extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n    this._render();\n  }\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  sessionChanged(s) {\n    this._session.value = s.value;\n    const complete = isComplete(this._session, this._model);\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), complete));\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (!this._model || !this._session) {\n      return;\n    }\n\n    const el = React.createElement(Main, {\n      model: this._model,\n      session: this._session,\n      onSessionChange: this.sessionChanged.bind(this),\n    });\n\n    if (!this._root) {\n      this._root = createRoot(this);\n    }\n    this._root.render(el);\n    queueMicrotask(() => {\n      renderMath(this);\n    });\n  }\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AACA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAEO,MAAMK,UAAU,GAAIC,OAAO,IAAK,CAAC,EAAEA,OAAO,IAAIA,OAAO,CAACC,KAAK,IAAID,OAAO,CAACC,KAAK,CAACC,MAAM,CAAC;AAACC,OAAA,CAAAJ,UAAA,GAAAA,UAAA;AAE7E,MAAMK,MAAM,SAASC,WAAW,CAAC;EAC9CC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACP,IAAI,CAACC,KAAK,GAAG,IAAI;EACnB;EAEA,IAAIC,KAAKA,CAACC,CAAC,EAAE;IACX,IAAI,CAACC,MAAM,GAAGD,CAAC;IACf,IAAI,CAACE,OAAO,CAAC,CAAC;EAChB;EAEA,IAAIX,OAAOA,CAACY,CAAC,EAAE;IACb,IAAI,CAACC,QAAQ,GAAGD,CAAC;IACjB,IAAI,CAACD,OAAO,CAAC,CAAC;EAChB;EAEA,IAAIX,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACa,QAAQ;EACtB;EAEAC,cAAcA,CAACF,CAAC,EAAE;IAChB,IAAI,CAACC,QAAQ,CAACZ,KAAK,GAAGW,CAAC,CAACX,KAAK;IAC7B,MAAMc,QAAQ,GAAGhB,UAAU,CAAC,IAAI,CAACc,QAAQ,EAAE,IAAI,CAACH,MAAM,CAAC;IACvD,IAAI,CAACM,aAAa,CAAC,IAAIC,oCAAmB,CAAC,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC,EAAEJ,QAAQ,CAAC,CAAC;IACjF,IAAI,CAACJ,OAAO,CAAC,CAAC;EAChB;EAEAS,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACT,OAAO,CAAC,CAAC;EAChB;EAEAA,OAAOA,CAAA,EAAG;IACR,IAAI,CAAC,IAAI,CAACD,MAAM,IAAI,CAAC,IAAI,CAACG,QAAQ,EAAE;MAClC;IACF;IAEA,MAAMQ,EAAE,gBAAGC,cAAK,CAACC,aAAa,CAACC,aAAI,EAAE;MACnChB,KAAK,EAAE,IAAI,CAACE,MAAM;MAClBV,OAAO,EAAE,IAAI,CAACa,QAAQ;MACtBY,eAAe,EAAE,IAAI,CAACX,cAAc,CAACY,IAAI,CAAC,IAAI;IAChD,CAAC,CAAC;IAEF,IAAI,CAAC,IAAI,CAACnB,KAAK,EAAE;MACf,IAAI,CAACA,KAAK,GAAG,IAAAoB,kBAAU,EAAC,IAAI,CAAC;IAC/B;IACA,IAAI,CAACpB,KAAK,CAACqB,MAAM,CAACP,EAAE,CAAC;IACrBQ,cAAc,CAAC,MAAM;MACnB,IAAAC,yBAAU,EAAC,IAAI,CAAC;IAClB,CAAC,CAAC;EACJ;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACxB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACyB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAAC7B,OAAA,CAAA8B,OAAA,GAAA7B,MAAA","ignoreList":[]}

package/lib/likert.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Likert = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _choiceInput = _interopRequireDefault(require("./choice-input"));
+var _styles = require("@mui/material/styles");
+var _renderUi = require("@pie-lib/render-ui");
+var _likertEntities = require("./likertEntities");
+const Main = (0, _styles.styled)('div')({
+  color: _renderUi.color.text(),
+  backgroundColor: _renderUi.color.background(),
+  '& *': {
+    '-webkit-font-smoothing': 'antialiased'
+  }
+});
+const StyledCollapsible = (0, _styles.styled)(_renderUi.Collapsible)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(2)
+}));
+const Prompt = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  verticalAlign: 'middle',
+  color: 'var(--pie-primary-text, var(--pie-text, #000000))',
+  paddingBottom: theme.spacing(2)
+}));
+const ChoicesWrapper = (0, _styles.styled)('div')({
+  display: 'flex'
+});
+class Likert extends _react.default.Component {
+  UNSAFE_componentWillReceiveProps() {}
+  isSelected(value) {
+    return this.props.session && this.props.session.value === value;
+  }
+  render() {
+    const {
+      disabled,
+      choices = [],
+      prompt,
+      onSessionChange,
+      teacherInstructions,
+      className,
+      likertOrientation
+    } = this.props;
+    const flexDirection = likertOrientation === _likertEntities.LIKERT_ORIENTATION.vertical ? 'column' : 'row';
+    return /*#__PURE__*/_react.default.createElement(Main, {
+      className: className
+    }, teacherInstructions && /*#__PURE__*/_react.default.createElement(StyledCollapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: teacherInstructions
+    })), prompt && /*#__PURE__*/_react.default.createElement(Prompt, null, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: prompt
+    })), /*#__PURE__*/_react.default.createElement(ChoicesWrapper, {
+      style: {
+        flexDirection
+      }
+    }, choices.map((choice, index) => /*#__PURE__*/_react.default.createElement(_choiceInput.default, {
+      key: `choice-${index}`,
+      label: choice.label,
+      value: choice.value,
+      index: index,
+      disabled: disabled,
+      onChange: onSessionChange,
+      likertOrientation: likertOrientation,
+      checked: this.isSelected(choice.value)
+    }))));
+  }
+}
+exports.Likert = Likert;
+(0, _defineProperty2.default)(Likert, "propTypes", {
+  className: _propTypes.default.string,
+  choices: _propTypes.default.array,
+  prompt: _propTypes.default.string,
+  teacherInstructions: _propTypes.default.string,
+  session: _propTypes.default.object,
+  disabled: _propTypes.default.bool.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired,
+  likertOrientation: _propTypes.default.string.isRequired
+});
+Likert.defaultProps = {
+  session: {
+    value: []
+  }
+};
+var _default = exports.default = Likert;
+//# sourceMappingURL=likert.js.map

package/lib/likert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"likert.js","names":["_react","_interopRequireDefault","require","_propTypes","_choiceInput","_styles","_renderUi","_likertEntities","Main","styled","color","text","backgroundColor","background","StyledCollapsible","Collapsible","theme","marginBottom","spacing","Prompt","verticalAlign","paddingBottom","ChoicesWrapper","display","Likert","React","Component","UNSAFE_componentWillReceiveProps","isSelected","value","props","session","render","disabled","choices","prompt","onSessionChange","teacherInstructions","className","likertOrientation","flexDirection","LIKERT_ORIENTATION","vertical","default","createElement","labels","hidden","visible","PreviewPrompt","style","map","choice","index","key","label","onChange","checked","exports","_defineProperty2","PropTypes","string","array","object","bool","isRequired","func","defaultProps","_default"],"sources":["../src/likert.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ChoiceInput from './choice-input';\nimport { styled } from '@mui/material/styles';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { LIKERT_ORIENTATION } from './likertEntities';\n\nconst Main = styled('div')({\n  color: color.text(),\n  backgroundColor: color.background(),\n  '& *': {\n    '-webkit-font-smoothing': 'antialiased',\n  },\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n  marginBottom: theme.spacing(2),\n}));\n\nconst Prompt = styled('div')(({ theme }) => ({\n  verticalAlign: 'middle',\n  color: 'var(--pie-primary-text, var(--pie-text, #000000))',\n  paddingBottom: theme.spacing(2),\n}));\n\nconst ChoicesWrapper = styled('div')({\n  display: 'flex',\n});\n\nexport class Likert extends React.Component {\n  static propTypes = {\n    className: PropTypes.string,\n    choices: PropTypes.array,\n    prompt: PropTypes.string,\n    teacherInstructions: PropTypes.string,\n    session: PropTypes.object,\n    disabled: PropTypes.bool.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    likertOrientation: PropTypes.string.isRequired,\n  };\n\n  UNSAFE_componentWillReceiveProps() {}\n\n  isSelected(value) {\n    return this.props.session && this.props.session.value === value;\n  }\n\n  render() {\n    const {\n      disabled,\n      choices = [],\n      prompt,\n      onSessionChange,\n      teacherInstructions,\n      className,\n      likertOrientation,\n    } = this.props;\n\n    const flexDirection = likertOrientation === LIKERT_ORIENTATION.vertical ? 'column' : 'row';\n\n    return (\n      <Main className={className}>\n        {teacherInstructions && (\n          <StyledCollapsible\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </StyledCollapsible>\n        )}\n\n        {prompt && (\n          <Prompt>\n            <PreviewPrompt prompt={prompt} />\n          </Prompt>\n        )}\n\n        <ChoicesWrapper style={{ flexDirection }}>\n          {choices.map((choice, index) => (\n            <ChoiceInput\n              key={`choice-${index}`}\n              label={choice.label}\n              value={choice.value}\n              index={index}\n              disabled={disabled}\n              onChange={onSessionChange}\n              likertOrientation={likertOrientation}\n              checked={this.isSelected(choice.value)}\n            />\n          ))}\n        </ChoicesWrapper>\n      </Main>\n    );\n  }\n}\n\nLikert.defaultProps = {\n  session: {\n    value: [],\n  },\n};\n\nexport default Likert;\n"],"mappings":"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","ignoreList":[]}

package/lib/likertEntities.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LIKERT_ORIENTATION = void 0;
+const LIKERT_ORIENTATION = exports.LIKERT_ORIENTATION = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+//# sourceMappingURL=likertEntities.js.map

package/lib/likertEntities.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"likertEntities.js","names":["LIKERT_ORIENTATION","exports","horizontal","vertical"],"sources":["../src/likertEntities.js"],"sourcesContent":["export const LIKERT_ORIENTATION = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n};\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG;EAChCE,UAAU,EAAE,YAAY;EACxBC,QAAQ,EAAE;AACZ,CAAC","ignoreList":[]}

package/lib/main.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+var _likert = _interopRequireDefault(require("./likert"));
+class Main extends _react.default.Component {
+  render() {
+    const {
+      model,
+      onSessionChange,
+      session
+    } = this.props;
+    const {
+      extraCSSRules
+    } = model;
+    return /*#__PURE__*/_react.default.createElement(_renderUi.PreviewLayout, {
+      extraCSSRules: extraCSSRules
+    }, /*#__PURE__*/_react.default.createElement(_likert.default, (0, _extends2.default)({}, model, {
+      session: session,
+      onSessionChange: onSessionChange
+    })));
+  }
+}
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  session: _propTypes.default.object,
+  onSessionChange: _propTypes.default.func
+});
+(0, _defineProperty2.default)(Main, "defaultProps", {
+  model: {},
+  session: {}
+});
+var _default = exports.default = Main;
+//# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","_likert","Main","React","Component","render","model","onSessionChange","session","props","extraCSSRules","default","createElement","PreviewLayout","_extends2","_defineProperty2","PropTypes","object","func","_default","exports"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PreviewLayout } from '@pie-lib/render-ui';\nimport Likert from './likert';\n\nclass Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onSessionChange: PropTypes.func,\n  };\n\n  static defaultProps = {\n    model: {},\n    session: {},\n  };\n\n  render() {\n    const { model, onSessionChange, session } = this.props;\n    const { extraCSSRules } = model;\n\n    return (\n      <PreviewLayout extraCSSRules={extraCSSRules}>\n        <Likert {...model} session={session} onSessionChange={onSessionChange} />\n      </PreviewLayout>\n    );\n  }\n}\n\nexport default Main;\n"],"mappings":";;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AAEA,MAAMI,IAAI,SAASC,cAAK,CAACC,SAAS,CAAC;EAYjCC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,KAAK;MAAEC,eAAe;MAAEC;IAAQ,CAAC,GAAG,IAAI,CAACC,KAAK;IACtD,MAAM;MAAEC;IAAc,CAAC,GAAGJ,KAAK;IAE/B,oBACEV,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACZ,SAAA,CAAAa,aAAa;MAACH,aAAa,EAAEA;IAAc,gBAC1Cd,MAAA,CAAAe,OAAA,CAAAC,aAAA,CAACX,OAAA,CAAAU,OAAM,MAAAG,SAAA,CAAAH,OAAA,MAAKL,KAAK;MAAEE,OAAO,EAAEA,OAAQ;MAACD,eAAe,EAAEA;IAAgB,EAAE,CAC3D,CAAC;EAEpB;AACF;AAAC,IAAAQ,gBAAA,CAAAJ,OAAA,EAtBKT,IAAI,eACW;EACjBI,KAAK,EAAEU,kBAAS,CAACC,MAAM;EACvBT,OAAO,EAAEQ,kBAAS,CAACC,MAAM;EACzBV,eAAe,EAAES,kBAAS,CAACE;AAC7B,CAAC;AAAA,IAAAH,gBAAA,CAAAJ,OAAA,EALGT,IAAI,kBAOc;EACpBI,KAAK,EAAE,CAAC,CAAC;EACTE,OAAO,EAAE,CAAC;AACZ,CAAC;AAAA,IAAAW,QAAA,GAAAC,OAAA,CAAAT,OAAA,GAcYT,IAAI","ignoreList":[]}

package/lib/session-updater.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSessionValue = updateSessionValue;
+function updateSessionValue(session, data) {
+  session.value = session.value || [];
+  if (data.selected) {
+    session.value = [data.value];
+  } else {
+    session.value = [];
+  }
+}
+//# sourceMappingURL=session-updater.js.map

package/lib/session-updater.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"session-updater.js","names":["updateSessionValue","session","data","value","selected"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, data) {\n  session.value = session.value || [];\n  if (data.selected) {\n    session.value = [data.value];\n  } else {\n    session.value = [];\n  }\n}\n"],"mappings":";;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,IAAI,EAAE;EAChDD,OAAO,CAACE,KAAK,GAAGF,OAAO,CAACE,KAAK,IAAI,EAAE;EACnC,IAAID,IAAI,CAACE,QAAQ,EAAE;IACjBH,OAAO,CAACE,KAAK,GAAG,CAACD,IAAI,CAACC,KAAK,CAAC;EAC9B,CAAC,MAAM;IACLF,OAAO,CAACE,KAAK,GAAG,EAAE;EACpB;AACF","ignoreList":[]}

package/package.json

@@ -1,95 +1,33 @@
 {
   "name": "@pie-element/likert",
-  "version": "4.1.2-next.5",
+  "repository": "pie-framework/pie-elements",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "4.1.3",
   "description": "",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/render-ui": "6.1.1-next.38",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.2",
+    "classnames": "^2.2.6",
     "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.8.1",
-    "react-test-renderer": "18.2.0",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@pie-element/shared-lodash": "0.1.1-next.1",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.31",
-    "@pie-lib/config-ui": "13.0.4-next.31",
-    "@pie-element/shared-player-events": "0.1.0",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "clsx": "^2.1.1"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
-  },
-  "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-test-renderer": "18.2.0"
   },
-  "pie": {
-    "controller": "@pie-element/likert/controller",
-    "configure": "@pie-element/likert/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "author": "",
+  "license": "ISC",
+  "gitHead": "213c3a293da2591ffaf2ba5c5fb50f0fe7577cfa",
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

package/readme.md

@@ -0,0 +1,55 @@
+# @pie-element/likert
+
+
+A [pie][pie]likert component.
+
+
+## Usage
+
+To use this pie, you need to configure it within an Assessment Item. This means that you'll need to add it to the `index.html` and `config.json` files.
+
+```html
+<likert-element pie-id="1"></likert-element>
+```
+
+```javascript
+{
+  elements: {
+    'likert': '@pie-element/likert-element@^0.0.1'
+  },
+  models: [
+    {
+      id : "1",
+      element: 'likert',
+      prompt : "How likely are you to report a problem?",
+      // more configuration...
+    }
+  ]
+```
+
+### Pie Demo
+There is a demo in `docs/demo` that you can run to see an example of it's usage.
+
+To preview it in that context you'll need the [pie][pie] tool.
+
+```shell
+npm install -g pie
+cd likert/docs/demo
+pie serve #will build and serve the pie... then go to http://localhost:4000
+```
+
+## Test
+
+```shell
+npm test # run client and controller tests
+npm run client-test # run client tests
+npm run controller-test # run controller tests
+```
+## Release
+
+```shell
+gulp release
+git checkout master
+npm publish
+```
+[pie]: http://npmjs.org/package/pie

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/choiceGenerator.d.ts

@@ -1,13 +0,0 @@
-/**
- * @synced-from pie-elements/packages/likert/configure/src/choiceGenerator.js
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-declare const generateChoices: (likertScale: any, likertType: any) => {
-    label: string;
-    value: number;
-}[];
-export default generateChoices;