@pie-element/matrix 4.1.2-next.1 → 4.1.2

package/docs/demo/config.js

@@ -0,0 +1,8 @@
+const { model } = require('./generate');
+
+module.exports = {
+  elements: {
+    'matrix-element': '../..',
+  },
+  models: [model('1', 'matrix-element')],
+};

package/docs/demo/generate.js

@@ -0,0 +1,9 @@
+exports.model = (id, element) => ({
+  id,
+  element,
+  labelType: 'agreement',
+  rowLabels: ['I\'m interested in politics.', 'I\'m interested in economics.'],
+  columnLabels: ['Disagree', 'Unsure', 'Agree'],
+  matrixValues: {},
+  prompt: 'How interested are you in the following domains?',
+});

package/docs/demo/index.html

@@ -0,0 +1 @@
+<matrix-element pie-id="1"> </matrix-element>

package/docs/demo/session.js

@@ -0,0 +1,6 @@
+module.exports = [
+  {
+    id: '1',
+    element: 'matrix-element',
+  },
+];

package/docs/pie-schema.json

@@ -0,0 +1 @@
+{}

package/docs/pie-schema.json.md

@@ -0,0 +1 @@
+#

package/lib/ChoiceInput.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+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"));
+const StyledRadio = (0, _styles.styled)(_Radio.default)({
+  '&.MuiRadio-root': {
+    color: `var(--choice-input-color, ${_renderUi.color.text()})`
+  },
+  '&.MuiRadio-root.Mui-checked': {
+    color: `var(--choice-input-selected-color, ${_renderUi.color.primary()})`
+  },
+  '&.MuiRadio-root.Mui-disabled': {
+    color: `var(--choice-input-disabled-color, ${_renderUi.color.defaults.DISABLED})`
+  }
+});
+const ChoiceInput = props => {
+  const {
+    disabled,
+    checked,
+    matrixKey,
+    matrixValue,
+    onChange
+  } = props;
+  const onChangeWrapper = () => {
+    if (disabled) {
+      return;
+    }
+    onChange({
+      matrixValue,
+      matrixKey
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement(StyledRadio, {
+    checked: checked,
+    onChange: onChangeWrapper,
+    disabled: disabled
+  });
+};
+ChoiceInput.propTypes = {
+  checked: _propTypes.default.bool.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  matrixValue: _propTypes.default.number.isRequired,
+  matrixKey: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired
+};
+ChoiceInput.defaultProps = {
+  checked: false,
+  disabled: false
+};
+var _default = exports.default = ChoiceInput;
+//# sourceMappingURL=ChoiceInput.js.map

package/lib/ChoiceInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChoiceInput.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","_renderUi","_Radio","StyledRadio","styled","Radio","color","text","primary","defaults","DISABLED","ChoiceInput","props","disabled","checked","matrixKey","matrixValue","onChange","onChangeWrapper","default","createElement","propTypes","PropTypes","bool","isRequired","number","string","func","defaultProps","_default","exports"],"sources":["../src/ChoiceInput.jsx"],"sourcesContent":["import React from 'react';\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';\n\nconst StyledRadio = styled(Radio)({\n  '&.MuiRadio-root': {\n    color: `var(--choice-input-color, ${color.text()})`,\n  },\n  '&.MuiRadio-root.Mui-checked': {\n    color: `var(--choice-input-selected-color, ${color.primary()})`,\n  },\n  '&.MuiRadio-root.Mui-disabled': {\n    color: `var(--choice-input-disabled-color, ${color.defaults.DISABLED})`,\n  },\n});\n\nconst ChoiceInput = (props) => {\n  const { disabled, checked, matrixKey, matrixValue, onChange } = props;\n\n  const onChangeWrapper = () => {\n    if (disabled) {\n      return;\n    }\n    onChange({\n      matrixValue,\n      matrixKey,\n    });\n  };\n\n  return (\n    <StyledRadio\n      checked={checked}\n      onChange={onChangeWrapper}\n      disabled={disabled}\n    />\n  );\n};\n\nChoiceInput.propTypes = {\n  checked: PropTypes.bool.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  matrixValue: PropTypes.number.isRequired,\n  matrixKey: PropTypes.string.isRequired,\n  onChange: PropTypes.func.isRequired,\n};\n\nChoiceInput.defaultProps = {\n  checked: false,\n  disabled: false,\n};\n\nexport default ChoiceInput;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAEA,IAAAG,SAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AAEA,MAAMK,WAAW,GAAG,IAAAC,cAAM,EAACC,cAAK,CAAC,CAAC;EAChC,iBAAiB,EAAE;IACjBC,KAAK,EAAE,6BAA6BA,eAAK,CAACC,IAAI,CAAC,CAAC;EAClD,CAAC;EACD,6BAA6B,EAAE;IAC7BD,KAAK,EAAE,sCAAsCA,eAAK,CAACE,OAAO,CAAC,CAAC;EAC9D,CAAC;EACD,8BAA8B,EAAE;IAC9BF,KAAK,EAAE,sCAAsCA,eAAK,CAACG,QAAQ,CAACC,QAAQ;EACtE;AACF,CAAC,CAAC;AAEF,MAAMC,WAAW,GAAIC,KAAK,IAAK;EAC7B,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAErE,MAAMM,eAAe,GAAGA,CAAA,KAAM;IAC5B,IAAIL,QAAQ,EAAE;MACZ;IACF;IACAI,QAAQ,CAAC;MACPD,WAAW;MACXD;IACF,CAAC,CAAC;EACJ,CAAC;EAED,oBACEnB,MAAA,CAAAuB,OAAA,CAAAC,aAAA,CAACjB,WAAW;IACVW,OAAO,EAAEA,OAAQ;IACjBG,QAAQ,EAAEC,eAAgB;IAC1BL,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC;AAEDF,WAAW,CAACU,SAAS,GAAG;EACtBP,OAAO,EAAEQ,kBAAS,CAACC,IAAI,CAACC,UAAU;EAClCX,QAAQ,EAAES,kBAAS,CAACC,IAAI,CAACC,UAAU;EACnCR,WAAW,EAAEM,kBAAS,CAACG,MAAM,CAACD,UAAU;EACxCT,SAAS,EAAEO,kBAAS,CAACI,MAAM,CAACF,UAAU;EACtCP,QAAQ,EAAEK,kBAAS,CAACK,IAAI,CAACH;AAC3B,CAAC;AAEDb,WAAW,CAACiB,YAAY,GAAG;EACzBd,OAAO,EAAE,KAAK;EACdD,QAAQ,EAAE;AACZ,CAAC;AAAC,IAAAgB,QAAA,GAAAC,OAAA,CAAAX,OAAA,GAEaR,WAAW","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 _Matrix = _interopRequireDefault(require("./Matrix"));
+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(_Matrix.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","_Matrix","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 Matrix from './Matrix';\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    return (\n      <PreviewLayout extraCSSRules={extraCSSRules}>\n        <Matrix {...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;IAC/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,EArBKT,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,GAaYT,IAAI","ignoreList":[]}

package/lib/Matrix.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ChoiceInput = _interopRequireDefault(require("./ChoiceInput"));
+var _renderUi = require("@pie-lib/render-ui");
+const MatrixWrapper = _styledComponents.default.div`
+  color: ${_renderUi.color.text()};
+  background-color: ${_renderUi.color.background()};
+  font-family: Roboto, Arial, Helvetica, sans-serif;
+`;
+const MatrixGridWrapper = _styledComponents.default.div`
+  display: grid;
+  grid-template-columns: ${props => props.gridTemplateColumns};
+  grid-column-gap: 30px;
+  grid-row-gap: 20px;
+  margin-top: 20px;
+`;
+const TeacherInstructions = (0, _styledComponents.default)(_renderUi.Collapsible)`
+  margin-bottom: 16px;
+`;
+const MatrixGridItem = _styledComponents.default.div`
+  align-self: center;
+  justify-self: center;
+  white-space: nowrap;
+`;
+const Matrix = props => {
+  const {
+    disabled,
+    prompt,
+    onSessionChange,
+    columnLabels,
+    matrixValues,
+    rowLabels,
+    session,
+    teacherInstructions
+  } = props;
+  const gridMatrixItems = [];
+  for (let rowIndex = 0; rowIndex < rowLabels.length + 1; rowIndex++) {
+    for (let columnIndex = 0; columnIndex < columnLabels.length + 1; columnIndex++) {
+      let gridMatrixItem;
+      if (rowIndex === 0 && columnIndex === 0) {
+        gridMatrixItem = null;
+      } else if (rowIndex === 0) {
+        gridMatrixItem = columnLabels[columnIndex - 1];
+      } else if (columnIndex === 0) {
+        gridMatrixItem = rowLabels[rowIndex - 1];
+      } else {
+        const matrixKey = `${rowIndex - 1}-${columnIndex - 1}`;
+        const matrixValue = matrixValues[matrixKey];
+        gridMatrixItem = /*#__PURE__*/_react.default.createElement(_ChoiceInput.default, {
+          matrixKey: matrixKey,
+          matrixValue: matrixValue || 0,
+          disabled: disabled,
+          onChange: onSessionChange,
+          checked: session.value && Object.prototype.hasOwnProperty.call(session.value, matrixKey)
+        });
+      }
+      gridMatrixItems.push(gridMatrixItem);
+    }
+  }
+  const gridTemplateColumns = [...columnLabels, {}].map(() => 'min-content').join(' ');
+  return /*#__PURE__*/_react.default.createElement(MatrixWrapper, null, teacherInstructions && /*#__PURE__*/_react.default.createElement(TeacherInstructions, {
+    className: teacherInstructions,
+    labels: {
+      hidden: 'Show Teacher Instructions',
+      visible: 'Hide Teacher Instructions'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+    prompt: teacherInstructions
+  })), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+    className: "prompt",
+    prompt: prompt
+  }), /*#__PURE__*/_react.default.createElement(MatrixGridWrapper, {
+    gridTemplateColumns: gridTemplateColumns
+  }, gridMatrixItems.map((gridMatrixItem, gridMatrixIndex) => {
+    return /*#__PURE__*/_react.default.createElement(MatrixGridItem, {
+      key: `${gridMatrixIndex}`
+    }, gridMatrixItem);
+  })));
+};
+Matrix.propTypes = {
+  prompt: _propTypes.default.string,
+  teacherInstructions: _propTypes.default.string,
+  session: _propTypes.default.object,
+  matrixValues: _propTypes.default.object,
+  rowLabels: _propTypes.default.arrayOf(_propTypes.default.string),
+  columnLabels: _propTypes.default.arrayOf(_propTypes.default.string),
+  disabled: _propTypes.default.bool.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired
+};
+Matrix.defaultProps = {
+  session: {
+    value: {}
+  }
+};
+var _default = exports.default = Matrix;
+//# sourceMappingURL=Matrix.js.map

package/lib/Matrix.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Matrix.js","names":["_react","_interopRequireDefault","require","_propTypes","_styledComponents","_ChoiceInput","_renderUi","MatrixWrapper","styled","div","color","text","background","MatrixGridWrapper","props","gridTemplateColumns","TeacherInstructions","Collapsible","MatrixGridItem","Matrix","disabled","prompt","onSessionChange","columnLabels","matrixValues","rowLabels","session","teacherInstructions","gridMatrixItems","rowIndex","length","columnIndex","gridMatrixItem","matrixKey","matrixValue","default","createElement","onChange","checked","value","Object","prototype","hasOwnProperty","call","push","map","join","className","labels","hidden","visible","PreviewPrompt","gridMatrixIndex","key","propTypes","PropTypes","string","object","arrayOf","bool","isRequired","func","defaultProps","_default","exports"],"sources":["../src/Matrix.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport styled from 'styled-components';\n\nimport ChoiceInput from './ChoiceInput';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\n\nconst MatrixWrapper = styled.div`\n  color: ${color.text()};\n  background-color: ${color.background()};\n  font-family: Roboto, Arial, Helvetica, sans-serif;\n`;\n\nconst MatrixGridWrapper = styled.div`\n  display: grid;\n  grid-template-columns: ${(props) => props.gridTemplateColumns};\n  grid-column-gap: 30px;\n  grid-row-gap: 20px;\n  margin-top: 20px;\n`;\n\nconst TeacherInstructions = styled(Collapsible)`\n  margin-bottom: 16px;\n`;\n\nconst MatrixGridItem = styled.div`\n  align-self: center;\n  justify-self: center;\n  white-space: nowrap;\n`;\n\nconst Matrix = (props) => {\n  const { disabled, prompt, onSessionChange, columnLabels, matrixValues, rowLabels, session, teacherInstructions } =\n    props;\n\n  const gridMatrixItems = [];\n\n  for (let rowIndex = 0; rowIndex < rowLabels.length + 1; rowIndex++) {\n    for (let columnIndex = 0; columnIndex < columnLabels.length + 1; columnIndex++) {\n      let gridMatrixItem;\n\n      if (rowIndex === 0 && columnIndex === 0) {\n        gridMatrixItem = null;\n      } else if (rowIndex === 0) {\n        gridMatrixItem = columnLabels[columnIndex - 1];\n      } else if (columnIndex === 0) {\n        gridMatrixItem = rowLabels[rowIndex - 1];\n      } else {\n        const matrixKey = `${rowIndex - 1}-${columnIndex - 1}`;\n        const matrixValue = matrixValues[matrixKey];\n\n        gridMatrixItem = (\n          <ChoiceInput\n            matrixKey={matrixKey}\n            matrixValue={matrixValue || 0}\n            disabled={disabled}\n            onChange={onSessionChange}\n            checked={session.value && Object.prototype.hasOwnProperty.call(session.value, matrixKey)}\n          />\n        );\n      }\n\n      gridMatrixItems.push(gridMatrixItem);\n    }\n  }\n  const gridTemplateColumns = [...columnLabels, {}].map(() => 'min-content').join(' ');\n\n  return (\n    <MatrixWrapper>\n      {teacherInstructions && (\n        <TeacherInstructions\n          className={teacherInstructions}\n          labels={{\n            hidden: 'Show Teacher Instructions',\n            visible: 'Hide Teacher Instructions',\n          }}\n        >\n          <PreviewPrompt prompt={teacherInstructions} />\n        </TeacherInstructions>\n      )}\n\n      <PreviewPrompt className=\"prompt\" prompt={prompt} />\n\n      <MatrixGridWrapper gridTemplateColumns={gridTemplateColumns}>\n        {gridMatrixItems.map((gridMatrixItem, gridMatrixIndex) => {\n          return <MatrixGridItem key={`${gridMatrixIndex}`}>{gridMatrixItem}</MatrixGridItem>;\n        })}\n      </MatrixGridWrapper>\n    </MatrixWrapper>\n  );\n};\n\nMatrix.propTypes = {\n  prompt: PropTypes.string,\n  teacherInstructions: PropTypes.string,\n  session: PropTypes.object,\n  matrixValues: PropTypes.object,\n  rowLabels: PropTypes.arrayOf(PropTypes.string),\n  columnLabels: PropTypes.arrayOf(PropTypes.string),\n  disabled: PropTypes.bool.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n};\n\nMatrix.defaultProps = {\n  session: {\n    value: {},\n  },\n};\n\nexport default Matrix;\n"],"mappings":"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","ignoreList":[]}

package/lib/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isComplete = exports.default = void 0;
+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");
+var _Main = _interopRequireDefault(require("./Main"));
+const isComplete = session => {
+  if (!session || !session.value) {
+    return false;
+  }
+  return !!Object.keys(session.value).length;
+};
+exports.isComplete = isComplete;
+class Matrix 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({
+    matrixKey,
+    matrixValue
+  }) {
+    const matrixRowKey = matrixKey.split('-')[0];
+    const sessionValueClone = Object.keys(this._session.value || {}).reduce((acc, key) => {
+      if (!key.startsWith(matrixRowKey)) {
+        acc[key] = this._session.value[key];
+      }
+      return acc;
+    }, {});
+    sessionValueClone[matrixKey] = matrixValue;
+    this._session.value = sessionValueClone;
+    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 = Matrix;
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_piePlayerEvents","_mathRendering","_Main","isComplete","session","value","Object","keys","length","exports","Matrix","HTMLElement","constructor","_root","model","m","_model","_render","s","_session","sessionChanged","matrixKey","matrixValue","matrixRowKey","split","sessionValueClone","reduce","acc","key","startsWith","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 React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { SessionChangedEvent } from '@pie-framework/pie-player-events';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport Main from './Main';\n\nexport const isComplete = (session) => {\n  if (!session || !session.value) {\n    return false;\n  }\n  return !!Object.keys(session.value).length;\n};\n\nexport default class Matrix 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({ matrixKey, matrixValue }) {\n    const matrixRowKey = matrixKey.split('-')[0];\n    const sessionValueClone = Object.keys(this._session.value || {}).reduce((acc, key) => {\n      if (!key.startsWith(matrixRowKey)) {\n        acc[key] = this._session.value[key];\n      }\n      return acc;\n    }, {});\n    sessionValueClone[matrixKey] = matrixValue;\n    this._session.value = sessionValueClone;\n    const complete = isComplete(this._session, this._model);\n\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":"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","ignoreList":[]}

package/lib/session-updater.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateSessionValue = updateSessionValue;
+function updateSessionValue(session, data) {
+  session.value = data.value || 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"],"sources":["../src/session-updater.js"],"sourcesContent":["export function updateSessionValue(session, data) {\n  session.value = data.value || session.value || {};\n}\n"],"mappings":";;;;;;AAAO,SAASA,kBAAkBA,CAACC,OAAO,EAAEC,IAAI,EAAE;EAChDD,OAAO,CAACE,KAAK,GAAGD,IAAI,CAACC,KAAK,IAAIF,OAAO,CAACE,KAAK,IAAI,CAAC,CAAC;AACnD","ignoreList":[]}

package/package.json

@@ -1,96 +1,31 @@
 {
   "name": "@pie-element/matrix",
-  "version": "4.1.2-next.1",
+  "repository": "pie-framework/pie-elements",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "4.1.2",
   "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.0",
+    "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
     "debug": "^4.1.1",
     "prop-types": "^15.8.1",
-    "styled-components": "^5.2.1",
-    "@pie-lib/editable-html-tip-tap": "2.1.2-next.0",
-    "@pie-lib/config-ui": "13.0.4-next.0",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "@pie-element/shared-lodash": "0.1.1-next.0",
-    "@pie-element/shared-player-events": "0.1.0",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
-    "@emotion/core": "0.x.x",
-    "react-is": "^18.3.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",
+    "styled-components": "^5.2.1"
   },
-  "pie": {
-    "controller": "@pie-element/matrix/controller",
-    "configure": "@pie-element/matrix/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
-  }
+  "author": "",
+  "license": "ISC",
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
+  "main": "lib/index.js",
+  "module": "src/index.js"
 }

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/HeaderCommon.d.ts

@@ -1,12 +0,0 @@
-/**
- * @synced-from pie-elements/packages/matrix/configure/src/HeaderCommon.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.
- */
-export declare const ColumnsWrapper: any;
-export declare const ColumnsHeader: any;
-export declare const NumberInputFormGroupWrapper: any;
-export declare const IconWrapper: any;

package/dist/author/HeaderCommon.js

@@ -1,20 +0,0 @@
-import e from "styled-components";
-//#region src/author/HeaderCommon.ts
-var t = e.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`, n = e.p`
-  margin: 10px 0;
-  color: #c3c3c3;
-  font-size: 12px;
-`, r = e.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 110px;
-`, i = e.div`
-  cursor: pointer;
-`;
-//#endregion
-export { n as ColumnsHeader, t as ColumnsWrapper, i as IconWrapper, r as NumberInputFormGroupWrapper };

package/dist/author/Main.d.ts

@@ -1,27 +0,0 @@
-/**
- * @synced-from pie-elements/packages/matrix/configure/src/Main.jsx
- * @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.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare class Main extends React.Component {
-    static propTypes: {
-        model: PropTypes.Validator<object>;
-        disableSidePanel: PropTypes.Requireable<boolean>;
-        onModelChanged: PropTypes.Validator<(...args: any[]) => any>;
-        onConfigurationChanged: PropTypes.Validator<(...args: any[]) => any>;
-        imageSupport: PropTypes.Requireable<PropTypes.InferProps<{
-            add: PropTypes.Validator<(...args: any[]) => any>;
-            delete: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-    };
-    onPromptChanged: any;
-    onChangeModel: any;
-    onTeacherInstructionsChanged: any;
-    render(): React.JSX.Element;
-}
-export default Main;