@pie-element/complex-rubric 3.8.4-next.9 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/multi-trait-rubric/esm/element.js

@@ -0,0 +1,858 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ModelSetEvent } from '@pie-framework/pie-player-events';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { color, UiLayout } from '@pie-lib/render-ui';
+import require$$3 from '@material-ui/core/SvgIcon';
+import Link from '@material-ui/core/Link';
+import Collapse from '@material-ui/core/Collapse';
+import { renderMath } from '@pie-lib/math-rendering';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+const styles$1 = () => ({
+  trait: {
+    '&$traitName': {
+      color: color.primaryDark(),
+      verticalAlign: 'middle'
+    }
+  },
+  noDescription: {
+    color: color.secondaryBackground(),
+    textAlign: 'center'
+  },
+  traitName: {}
+});
+
+const Trait = props => {
+  const {
+    trait,
+    traitIndex,
+    scaleIndex,
+    showStandards,
+    showDescription,
+    scorePointsValues,
+    classes
+  } = props;
+  const {
+    name,
+    standards,
+    scorePointsDescriptors,
+    description
+  } = trait || {};
+  return /*#__PURE__*/React.createElement("tr", {
+    key: `scale-${scaleIndex}-trait-${traitIndex}`
+  }, /*#__PURE__*/React.createElement("td", {
+    className: `${classes.trait} ${classes.traitName}`
+  }, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: name
+    }
+  })), showStandards ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: standards.join(',')
+    }
+  })) : null, showDescription ? /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+    dangerouslySetInnerHTML: {
+      __html: description
+    }
+  })) : null, scorePointsValues && scorePointsValues.map((scorePointValue, index) => {
+    let scoreDescriptor;
+
+    try {
+      scoreDescriptor = scorePointsDescriptors[scorePointsValues.length - index - 1] || '';
+    } catch (e) {
+      scoreDescriptor = '';
+    }
+
+    return /*#__PURE__*/React.createElement("td", {
+      key: `table-cell-${index}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: !scoreDescriptor ? classes.noDescription : '',
+      dangerouslySetInnerHTML: {
+        __html: scoreDescriptor || 'No Description'
+      }
+    }));
+  }));
+};
+
+Trait.propTypes = {
+  classes: PropTypes.object,
+  showStandards: PropTypes.bool,
+  showDescription: PropTypes.bool,
+  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
+  scaleIndex: PropTypes.number,
+  traitIndex: PropTypes.number,
+  trait: PropTypes.shape({
+    name: PropTypes.string,
+    standards: PropTypes.arrayOf(PropTypes.string),
+    scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+    description: PropTypes.string
+  })
+};
+var Trait$1 = withStyles(styles$1)(Trait);
+
+var ArrowBackIos = {};
+
+var interopRequireDefault = {exports: {}};
+
+(function (module) {
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    "default": obj
+  };
+}
+
+module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(interopRequireDefault));
+
+var createSvgIcon$1 = {};
+
+var pure$1 = {};
+
+var shouldUpdate$1 = {};
+
+var inheritsLoose = {exports: {}};
+
+var setPrototypeOf = {exports: {}};
+
+(function (module) {
+function _setPrototypeOf(o, p) {
+  module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  }, module.exports.__esModule = true, module.exports["default"] = module.exports;
+  return _setPrototypeOf(o, p);
+}
+
+module.exports = _setPrototypeOf, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(setPrototypeOf));
+
+(function (module) {
+var setPrototypeOf$1 = setPrototypeOf.exports;
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  setPrototypeOf$1(subClass, superClass);
+}
+
+module.exports = _inheritsLoose, module.exports.__esModule = true, module.exports["default"] = module.exports;
+}(inheritsLoose));
+
+var setDisplayName$1 = {};
+
+var setStatic$1 = {};
+
+setStatic$1.__esModule = true;
+setStatic$1.default = void 0;
+
+var setStatic = function setStatic(key, value) {
+  return function (BaseComponent) {
+    /* eslint-disable no-param-reassign */
+    BaseComponent[key] = value;
+    /* eslint-enable no-param-reassign */
+
+    return BaseComponent;
+  };
+};
+
+var _default$9 = setStatic;
+setStatic$1.default = _default$9;
+
+var _interopRequireDefault$7 = interopRequireDefault.exports;
+
+setDisplayName$1.__esModule = true;
+setDisplayName$1.default = void 0;
+
+var _setStatic = _interopRequireDefault$7(setStatic$1);
+
+var setDisplayName = function setDisplayName(displayName) {
+  return (0, _setStatic.default)('displayName', displayName);
+};
+
+var _default$8 = setDisplayName;
+setDisplayName$1.default = _default$8;
+
+var wrapDisplayName$1 = {};
+
+var getDisplayName$1 = {};
+
+getDisplayName$1.__esModule = true;
+getDisplayName$1.default = void 0;
+
+var getDisplayName = function getDisplayName(Component) {
+  if (typeof Component === 'string') {
+    return Component;
+  }
+
+  if (!Component) {
+    return undefined;
+  }
+
+  return Component.displayName || Component.name || 'Component';
+};
+
+var _default$7 = getDisplayName;
+getDisplayName$1.default = _default$7;
+
+var _interopRequireDefault$6 = interopRequireDefault.exports;
+
+wrapDisplayName$1.__esModule = true;
+wrapDisplayName$1.default = void 0;
+
+var _getDisplayName = _interopRequireDefault$6(getDisplayName$1);
+
+var wrapDisplayName = function wrapDisplayName(BaseComponent, hocName) {
+  return hocName + "(" + (0, _getDisplayName.default)(BaseComponent) + ")";
+};
+
+var _default$6 = wrapDisplayName;
+wrapDisplayName$1.default = _default$6;
+
+var _interopRequireDefault$5 = interopRequireDefault.exports;
+
+shouldUpdate$1.__esModule = true;
+shouldUpdate$1.default = void 0;
+
+var _inheritsLoose2 = _interopRequireDefault$5(inheritsLoose.exports);
+
+var _react$3 = React;
+
+var _setDisplayName$1 = _interopRequireDefault$5(setDisplayName$1);
+
+var _wrapDisplayName$1 = _interopRequireDefault$5(wrapDisplayName$1);
+
+var shouldUpdate = function shouldUpdate(test) {
+  return function (BaseComponent) {
+    var factory = (0, _react$3.createFactory)(BaseComponent);
+
+    var ShouldUpdate =
+    /*#__PURE__*/
+    function (_Component) {
+      (0, _inheritsLoose2.default)(ShouldUpdate, _Component);
+
+      function ShouldUpdate() {
+        return _Component.apply(this, arguments) || this;
+      }
+
+      var _proto = ShouldUpdate.prototype;
+
+      _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
+        return test(this.props, nextProps);
+      };
+
+      _proto.render = function render() {
+        return factory(this.props);
+      };
+
+      return ShouldUpdate;
+    }(_react$3.Component);
+
+    if (process.env.NODE_ENV !== 'production') {
+      return (0, _setDisplayName$1.default)((0, _wrapDisplayName$1.default)(BaseComponent, 'shouldUpdate'))(ShouldUpdate);
+    }
+
+    return ShouldUpdate;
+  };
+};
+
+var _default$5 = shouldUpdate;
+shouldUpdate$1.default = _default$5;
+
+var shallowEqual$1 = {};
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @typechecks
+ * 
+ */
+
+var hasOwnProperty = Object.prototype.hasOwnProperty;
+
+/**
+ * inlined Object.is polyfill to avoid requiring consumers ship their own
+ * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+ */
+function is(x, y) {
+  // SameValue algorithm
+  if (x === y) {
+    // Steps 1-5, 7-10
+    // Steps 6.b-6.e: +0 != -0
+    // Added the nonzero y check to make Flow happy, but it is redundant
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    // Step 6.a: NaN == NaN
+    return x !== x && y !== y;
+  }
+}
+
+/**
+ * Performs equality by iterating through keys on an object and returning false
+ * when any key has values which are not strictly equal between the arguments.
+ * Returns true when the values of all keys are strictly equal.
+ */
+function shallowEqual(objA, objB) {
+  if (is(objA, objB)) {
+    return true;
+  }
+
+  if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) {
+    return false;
+  }
+
+  var keysA = Object.keys(objA);
+  var keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) {
+    return false;
+  }
+
+  // Test for A's keys different from B.
+  for (var i = 0; i < keysA.length; i++) {
+    if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+var shallowEqual_1 = shallowEqual;
+
+var _interopRequireDefault$4 = interopRequireDefault.exports;
+
+shallowEqual$1.__esModule = true;
+shallowEqual$1.default = void 0;
+
+var _shallowEqual$1 = _interopRequireDefault$4(shallowEqual_1);
+
+var _default$4 = _shallowEqual$1.default;
+shallowEqual$1.default = _default$4;
+
+var _interopRequireDefault$3 = interopRequireDefault.exports;
+
+pure$1.__esModule = true;
+pure$1.default = void 0;
+
+var _shouldUpdate = _interopRequireDefault$3(shouldUpdate$1);
+
+var _shallowEqual = _interopRequireDefault$3(shallowEqual$1);
+
+var _setDisplayName = _interopRequireDefault$3(setDisplayName$1);
+
+var _wrapDisplayName = _interopRequireDefault$3(wrapDisplayName$1);
+
+var pure = function pure(BaseComponent) {
+  var hoc = (0, _shouldUpdate.default)(function (props, nextProps) {
+    return !(0, _shallowEqual.default)(props, nextProps);
+  });
+
+  if (process.env.NODE_ENV !== 'production') {
+    return (0, _setDisplayName.default)((0, _wrapDisplayName.default)(BaseComponent, 'pure'))(hoc(BaseComponent));
+  }
+
+  return hoc(BaseComponent);
+};
+
+var _default$3 = pure;
+pure$1.default = _default$3;
+
+var _interopRequireDefault$2 = interopRequireDefault.exports;
+
+Object.defineProperty(createSvgIcon$1, "__esModule", {
+  value: true
+});
+createSvgIcon$1.default = void 0;
+
+var _react$2 = _interopRequireDefault$2(React);
+
+var _pure = _interopRequireDefault$2(pure$1);
+
+var _SvgIcon = _interopRequireDefault$2(require$$3);
+
+function createSvgIcon(path, displayName) {
+  var Icon = function Icon(props) {
+    return _react$2.default.createElement(_SvgIcon.default, props, path);
+  };
+
+  Icon.displayName = "".concat(displayName, "Icon");
+  Icon = (0, _pure.default)(Icon);
+  Icon.muiName = 'SvgIcon';
+  return Icon;
+}
+var _default$2 = createSvgIcon;
+createSvgIcon$1.default = _default$2;
+
+var _interopRequireDefault$1 = interopRequireDefault.exports;
+
+Object.defineProperty(ArrowBackIos, "__esModule", {
+  value: true
+});
+var default_1$1 = ArrowBackIos.default = void 0;
+
+var _react$1 = _interopRequireDefault$1(React);
+
+var _createSvgIcon$1 = _interopRequireDefault$1(createSvgIcon$1);
+
+var _default$1 = (0, _createSvgIcon$1.default)(_react$1.default.createElement(_react$1.default.Fragment, null, _react$1.default.createElement("path", {
+  d: "M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"
+}), _react$1.default.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+})), 'ArrowBackIos');
+
+default_1$1 = ArrowBackIos.default = _default$1;
+
+var ArrowForwardIos = {};
+
+var _interopRequireDefault = interopRequireDefault.exports;
+
+Object.defineProperty(ArrowForwardIos, "__esModule", {
+  value: true
+});
+var default_1 = ArrowForwardIos.default = void 0;
+
+var _react = _interopRequireDefault(React);
+
+var _createSvgIcon = _interopRequireDefault(createSvgIcon$1);
+
+var _default = (0, _createSvgIcon.default)(_react.default.createElement(_react.default.Fragment, null, _react.default.createElement("path", {
+  d: "M5.88 4.12L13.76 12l-7.88 7.88L8 22l10-10L8 2z"
+}), _react.default.createElement("path", {
+  fill: "none",
+  d: "M0 0h24v24H0z"
+})), 'ArrowForwardIos');
+
+default_1 = ArrowForwardIos.default = _default;
+
+const styles = theme => ({
+  wrapper: {
+    display: 'flex',
+    position: 'relative'
+  },
+  tableWrapper: {
+    width: '100%',
+    overflow: 'auto'
+  },
+  table: {
+    borderSpacing: 0,
+    marginBottom: theme.spacing.unit * 2,
+    borderRadius: '4px',
+    color: color.text(),
+    fontSize: theme.typography.fontSize,
+    lineHeight: '16px',
+    overflow: 'unset',
+    '& ul, ol': {
+      marginBlockStart: 0,
+      paddingInlineStart: theme.spacing.unit * 2
+    },
+    '& th': {
+      padding: theme.spacing.unit * 2,
+      textAlign: 'left',
+      backgroundColor: color.secondaryBackground(),
+      verticalAlign: 'bottom'
+    },
+    '& th div': {
+      width: '200px'
+    },
+    '& td': {
+      width: '200px',
+      padding: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px`,
+      verticalAlign: 'top'
+    }
+  },
+  scorePointHeader: {
+    '& td': {
+      border: 0,
+      padding: 0,
+      textAlign: 'center',
+      minWidth: '200px'
+    }
+  },
+  pointLabel: {
+    marginBottom: '4px'
+  },
+  scorePointValue: {
+    fontWeight: 'normal'
+  }
+});
+
+const ArrowContainer = ({
+  show,
+  onClick,
+  extraStyles,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  style: _extends({
+    height: 'calc(100% - 1px)',
+    top: '1px',
+    display: show ? 'flex' : 'none',
+    width: '50px',
+    margin: 'auto',
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    cursor: 'pointer'
+  }, extraStyles),
+  onClick: onClick
+}, children);
+
+ArrowContainer.propTypes = {
+  show: PropTypes.bool,
+  onClick: PropTypes.func,
+  extraStyles: PropTypes.object,
+  children: PropTypes.object
+};
+
+class Scale extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {};
+
+    this.scrollLeft = () => {
+      this.tableWrapper.scrollLeft -= this.tableWrapper.offsetWidth / 2;
+      this.setState({
+        showRight: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+        showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
+      });
+    };
+
+    this.scrollRight = () => {
+      const initialScrollLeft = this.tableWrapper.scrollLeft;
+      this.tableWrapper.scrollLeft += this.tableWrapper.offsetWidth / 2;
+      this.setState({
+        showRight: initialScrollLeft !== this.tableWrapper.scrollLeft && this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+        showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
+      });
+    };
+  }
+
+  componentDidMount() {
+    if (this.tableWrapper) {
+      if (this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth) {
+        this.setState({
+          showRight: true
+        });
+      }
+    }
+  }
+
+  render() {
+    const {
+      showRight,
+      showLeft
+    } = this.state;
+    const {
+      classes,
+      scale,
+      scaleIndex,
+      showDescription,
+      showPointsLabels,
+      showStandards,
+      arrowsDisabled
+    } = this.props;
+    const {
+      excludeZero,
+      maxPoints,
+      traitLabel,
+      traits,
+      scorePointsLabels
+    } = scale || {};
+    let scorePointsValues = [];
+    let descriptions;
+    let pointsLabels;
+    let standards;
+
+    try {
+      // determining the score points values
+      for (let pointValue = maxPoints; pointValue >= excludeZero ? 1 : 0; pointValue -= 1) {
+        scorePointsValues.push(pointValue);
+      }
+
+      const {
+        traitStandards,
+        traitDescriptions
+      } = traits.reduce((tcc, trait) => ({
+        traitStandards: [...tcc.traitStandards, ...(trait.standards || [])],
+        traitDescriptions: [...tcc.traitDescriptions, ...(trait.description || [])]
+      }), {
+        traitStandards: [],
+        traitDescriptions: []
+      });
+      descriptions = showDescription && traitDescriptions.length;
+      pointsLabels = showPointsLabels && scorePointsLabels.length;
+      standards = showStandards && traitStandards.length;
+    } catch (e) {
+      descriptions = false;
+      pointsLabels = false;
+      standards = false;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.wrapper
+    }, /*#__PURE__*/React.createElement(ArrowContainer, {
+      show: showLeft && !arrowsDisabled,
+      onClick: this.scrollLeft,
+      extraStyles: {
+        left: 0,
+        background: `linear-gradient(to right, white, ${color.background()})`
+      }
+    }, /*#__PURE__*/React.createElement(default_1$1, null)), /*#__PURE__*/React.createElement("div", {
+      className: classes.tableWrapper,
+      ref: ref => {
+        this.tableWrapper = ref;
+      },
+      onScroll: () => {
+        this.setState({
+          // 5 is a margin of error
+          showRight: this.tableWrapper.scrollLeft + this.tableWrapper.offsetWidth < this.tableWrapper.scrollWidth - 5 && this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth,
+          showLeft: this.tableWrapper.scrollLeft < this.tableWrapper.scrollWidth && this.tableWrapper.scrollLeft > 0
+        });
+      }
+    }, arrowsDisabled && (showRight || showLeft) ? /*#__PURE__*/React.createElement("div", null, "The item is too large to fit in print mode.") : null, /*#__PURE__*/React.createElement("table", {
+      key: `scale-${scaleIndex}`,
+      className: classes.table
+    }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: traitLabel
+      }
+    })), standards ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", null, "Standard(s)")) : null, descriptions ? /*#__PURE__*/React.createElement("th", null, /*#__PURE__*/React.createElement("div", null, "Description")) : null, scorePointsValues && scorePointsValues.map((scorePointValue, index) => {
+      let pointLabel = ''; // to handle the case when there aren't enough labels
+
+      try {
+        pointLabel = scorePointsLabels[scorePointsValues.length - index - 1] || '';
+      } catch (e) {
+        pointLabel = '';
+      }
+
+      return /*#__PURE__*/React.createElement("th", {
+        key: `table-header-${index}`
+      }, /*#__PURE__*/React.createElement("table", {
+        className: classes.scorePointHeader
+      }, /*#__PURE__*/React.createElement("thead", null, pointsLabels ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: classes.pointLabel,
+        dangerouslySetInnerHTML: {
+          __html: pointLabel
+        }
+      }))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: classes.scorePointValue
+      }, scorePointValue === 1 ? `${scorePointValue} point` : `${scorePointValue} points`)))));
+    }))), /*#__PURE__*/React.createElement("tbody", null, traits && traits.map((trait, traitIndex) => /*#__PURE__*/React.createElement(Trait$1, {
+      key: `trait_${scaleIndex}_${traitIndex}`,
+      trait: trait,
+      traitIndex: traitIndex,
+      showDescription: !!descriptions,
+      showStandards: !!standards,
+      scaleIndex: scaleIndex,
+      scorePointsValues: scorePointsValues,
+      excludeZero: excludeZero
+    }))))), /*#__PURE__*/React.createElement(ArrowContainer, {
+      show: showRight && !arrowsDisabled,
+      onClick: this.scrollRight,
+      extraStyles: {
+        right: 0,
+        background: `linear-gradient(to left, white, ${color.background()})`
+      }
+    }, /*#__PURE__*/React.createElement(default_1, null)));
+  }
+
+}
+
+Scale.propTypes = {
+  classes: PropTypes.object,
+  scaleIndex: PropTypes.number,
+  scale: PropTypes.shape({
+    excludeZero: PropTypes.bool,
+    maxPoints: PropTypes.number,
+    scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
+    traitLabel: PropTypes.string,
+    traits: PropTypes.arrayOf(PropTypes.shape({
+      name: PropTypes.string,
+      standards: PropTypes.arrayOf(PropTypes.string),
+      scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+      description: PropTypes.string
+    }))
+  }),
+  showPointsLabels: PropTypes.bool,
+  showDescription: PropTypes.bool,
+  showStandards: PropTypes.bool,
+  arrowsDisabled: PropTypes.bool
+};
+var Scale$1 = withStyles(styles)(Scale);
+
+class Main extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      rubricOpen: false,
+      linkPrefix: 'Show'
+    };
+    this.toggleRubric = this.toggleRubric.bind(this);
+  }
+
+  toggleRubric() {
+    this.setState({
+      rubricOpen: !this.state.rubricOpen
+    });
+    this.setState({
+      linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide'
+    });
+  }
+
+  render() {
+    const {
+      model
+    } = this.props;
+    let {
+      animationsDisabled
+    } = this.props;
+    const {
+      extraCSSRules,
+      halfScoring,
+      scales,
+      visible,
+      pointLabels,
+      description,
+      standards,
+      arrowsDisabled
+    } = model || {};
+    animationsDisabled = animationsDisabled || model.animationsDisabled;
+
+    if (!scales || !visible) {
+      return null;
+    }
+
+    const rubricItem = /*#__PURE__*/React.createElement(UiLayout, {
+      extraCSSRules: extraCSSRules,
+      style: {
+        fontFamily: 'Cerebri Sans',
+        color: color.text(),
+        backgroundColor: color.background()
+      }
+    }, halfScoring ? /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginBottom: '16px'
+      }
+    }, "* Half-point or in-between scores are permitted under this rubric.") : null, scales.map((scale, scaleIndex) => /*#__PURE__*/React.createElement(Scale$1, {
+      key: `scale_${scaleIndex}`,
+      scale: scale,
+      scaleIndex: scaleIndex,
+      showPointsLabels: pointLabels,
+      showDescription: description,
+      showStandards: standards,
+      arrowsDisabled: arrowsDisabled
+    })));
+
+    if (animationsDisabled) {
+      return rubricItem;
+    }
+
+    return /*#__PURE__*/React.createElement(UiLayout, {
+      extraCSSRules: extraCSSRules,
+      style: {
+        color: color.text(),
+        backgroundColor: color.background()
+      }
+    }, /*#__PURE__*/React.createElement(Link, {
+      style: {
+        backgroundColor: color.background()
+      },
+      href: this.dudUrl,
+      onClick: this.toggleRubric
+    }, this.state.linkPrefix, " Rubric"), /*#__PURE__*/React.createElement(Collapse, {
+      style: {
+        marginTop: '16px'
+      },
+      in: this.state.rubricOpen,
+      timeout: "auto"
+    }, rubricItem));
+  }
+
+}
+
+Main.propTypes = {
+  model: PropTypes.shape({
+    halfScoring: PropTypes.bool,
+    scales: PropTypes.arrayOf(PropTypes.shape({
+      excludeZero: PropTypes.bool,
+      maxPoints: PropTypes.number,
+      scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
+      traitLabel: PropTypes.string,
+      traits: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string,
+        description: PropTypes.string,
+        scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+        standards: PropTypes.arrayOf(PropTypes.string)
+      }))
+    })),
+    visible: PropTypes.bool,
+    pointLabels: PropTypes.bool,
+    description: PropTypes.bool,
+    standards: PropTypes.bool,
+    animationsDisabled: PropTypes.bool
+  }),
+  animationsDisabled: PropTypes.bool
+};
+
+class MultiTraitRubric extends HTMLElement {
+  constructor() {
+    super();
+    this._model = {};
+    this._session = null;
+  }
+
+  set model(s) {
+    this._model = s;
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this._session, !!this._model));
+
+    this._render();
+  }
+
+  set session(s) {
+    this._session = s;
+  }
+
+  get session() {
+    return this._session;
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    const el = /*#__PURE__*/React.createElement(Main, {
+      model: this._model,
+      session: this._session
+    });
+    ReactDOM.render(el, this, () => {
+      renderMath(this);
+    });
+  }
+
+}
+
+export { MultiTraitRubric as default };
+//# sourceMappingURL=element.js.map