@pie-element/fraction-model 4.3.4-next.0 → 5.0.0-beta.0

package/configure/lib/main.js

@@ -1,107 +1,84 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Main = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Main = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _configUi = require("@pie-lib/config-ui");
-
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _fractionModel = require("@pie-element/fraction-model");
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _styles = require("@mui/material/styles");
 var _cardBar = _interopRequireDefault(require("./card-bar"));
-
 var _modelOptions = _interopRequireDefault(require("./model-options"));
-
-var _fractionModel = require("@pie-element/fraction-model");
-
-var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
-
-var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var styles = function styles(theme) {
-  return {
-    label: {
-      marginBottom: theme.spacing.unit * 4
-    },
-    tooltip: {
-      fontSize: theme.typography.fontSize - 2,
-      whiteSpace: 'pre',
-      maxWidth: '500px'
-    },
-    errorText: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      paddingTop: theme.spacing.unit
-    },
-    flexRow: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '10px'
-    },
-    errorMessage: {
-      fontSize: theme.typography.fontSize - 2,
-      color: theme.palette.error.main,
-      marginTop: theme.spacing.unit
-    },
-    modelError: {
-      border: "2px solid ".concat(theme.palette.error.main)
-    }
-  };
-};
-
-var Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Main);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCorrectAnswerChange", function (correctResponse) {
-      var _this$props = _this.props,
-          model = _this$props.model,
-          onChange = _this$props.onChange;
+const StyledFormSection = (0, _styles.styled)(_configUi.FormSection)(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorMessage = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  marginTop: theme.spacing(1)
+}));
+const ModelErrorContainer = (0, _styles.styled)('div')(({
+  theme,
+  hasError
+}) => ({
+  ...(hasError && {
+    border: `2px solid ${theme.palette.error.main}`
+  })
+}));
+const Label = (0, _styles.styled)('label')(({
+  theme
+}) => ({
+  marginBottom: theme.spacing(4)
+}));
+class Main extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    /*
+     * Method to handle correct answer change
+     * @param {array} correctResponse - correct response
+     * */
+    (0, _defineProperty2.default)(this, "onCorrectAnswerChange", correctResponse => {
+      const {
+        model,
+        onChange
+      } = this.props;
       model.correctResponse = correctResponse;
-      onChange(_objectSpread({}, model));
+      onChange({
+        ...model
+      });
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onModelOptionsChange", function (oldModel, newModel, showDiag) {
-      var onChange = _this.props.onChange;
-
+    /*
+     * Method to handle model options change
+     * @param {object} oldModel - old model
+     * @param {object} newModel - new model
+     * @param {boolean} showDiag - show dialog or not
+     * */
+    (0, _defineProperty2.default)(this, "onModelOptionsChange", (oldModel, newModel, showDiag) => {
+      const {
+        onChange
+      } = this.props;
       if (showDiag && oldModel.correctResponse.length > 0) {
-        _this.setState({
+        this.setState({
           correctAnswerChangeDialog: {
             open: true,
             oldModel: oldModel,
@@ -110,204 +87,167 @@ var Main = /*#__PURE__*/function (_React$Component) {
           }
         });
       } else {
-        onChange(_objectSpread({}, newModel));
+        onChange({
+          ...newModel
+        });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "generateRandomKey", function () {
+    /*
+     * Method to generate random key
+     * */
+    (0, _defineProperty2.default)(this, "generateRandomKey", () => {
       return Math.floor(Math.random() * 10000);
     });
-    _this.state = {
+    this.state = {
       correctAnswerChangeDialog: {
         open: false,
         text: ''
       }
     };
-    return _this;
   }
-  /*
-   * Method to handle correct answer change
-   * @param {array} correctResponse - correct response
-   * */
-
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          model = _this$props2.model,
-          _onChange = _this$props2.onChange,
-          configuration = _this$props2.configuration,
-          imageSupport = _this$props2.imageSupport,
-          uploadSoundSupport = _this$props2.uploadSoundSupport;
-
-      var _ref = configuration || {},
-          _ref$baseInputConfigu = _ref.baseInputConfiguration,
-          baseInputConfiguration = _ref$baseInputConfigu === void 0 ? {} : _ref$baseInputConfigu,
-          _ref$contentDimension = _ref.contentDimensions,
-          contentDimensions = _ref$contentDimension === void 0 ? {} : _ref$contentDimension,
-          _ref$title = _ref.title,
-          title = _ref$title === void 0 ? {} : _ref$title,
-          _ref$prompt = _ref.prompt,
-          prompt = _ref$prompt === void 0 ? {} : _ref$prompt,
-          _ref$modelOptions = _ref.modelOptions,
-          modelOptions = _ref$modelOptions === void 0 ? {} : _ref$modelOptions,
-          _ref$mathMlOptions = _ref.mathMlOptions,
-          mathMlOptions = _ref$mathMlOptions === void 0 ? {} : _ref$mathMlOptions;
-
-      var _ref2 = model || {},
-          _ref2$errors = _ref2.errors,
-          errors = _ref2$errors === void 0 ? {} : _ref2$errors,
-          extraCSSRules = _ref2.extraCSSRules,
-          spellCheckEnabled = _ref2.spellCheckEnabled,
-          toolbarEditorPosition = _ref2.toolbarEditorPosition;
-
-      var correctAnswerChangeDialog = this.state.correctAnswerChangeDialog;
-      var toolbarOpts = {
-        position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
-      };
-
-      var getPluginProps = function getPluginProps() {
-        var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-        return _objectSpread(_objectSpread({}, baseInputConfiguration), props);
-      };
-
-      var fractionModelChartKey = this.generateRandomKey();
-      return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
-        extraCSSRules: extraCSSRules,
-        dimensions: contentDimensions,
-        hideSettings: true
-      }, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Set Up"
-      }), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        label: (title === null || title === void 0 ? void 0 : title.label) || 'Title',
-        className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        className: classes.title,
-        markup: model.title || '',
-        onChange: function onChange(title) {
-          return _onChange({
-            title: title
-          });
-        },
-        toolbarOpts: toolbarOpts,
-        activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
-        pluginProps: getPluginProps(title === null || title === void 0 ? void 0 : title.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        uploadSoundSupport: uploadSoundSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, {
-        label: (prompt === null || prompt === void 0 ? void 0 : prompt.label) || 'Question',
-        className: classes.label
-      }, /*#__PURE__*/_react["default"].createElement(_editableHtml["default"], {
-        markup: model.prompt || '',
-        minHeight: 60,
-        onChange: function onChange(prompt) {
-          return _onChange({
-            prompt: prompt
-          });
-        },
-        toolbarOpts: toolbarOpts,
-        pluginProps: getPluginProps(prompt === null || prompt === void 0 ? void 0 : prompt.inputConfiguration),
-        spellCheck: spellCheckEnabled,
-        uploadSoundSupport: uploadSoundSupport,
-        imageSupport: imageSupport,
-        languageCharactersProps: [{
-          language: 'spanish'
-        }, {
-          language: 'special'
-        }],
-        mathMlOptions: mathMlOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_modelOptions["default"], {
-        model: model,
-        onChange: this.onModelOptionsChange,
-        modelOptions: modelOptions
-      })), /*#__PURE__*/_react["default"].createElement(_configUi.FormSection, null, /*#__PURE__*/_react["default"].createElement(_cardBar["default"], {
-        header: "Correct Answer",
-        info: /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
-          classes: {
-            tooltip: classes.tooltip
-          },
-          disableFocusListener: true,
-          disableTouchListener: true,
-          placement: 'right',
-          title: 'The correct answer should include no more than one partially-filled model'
-        }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
-          fontSize: 'small',
-          color: 'primary',
-          style: {
-            marginLeft: '8px'
+  render() {
+    const {
+      model,
+      onChange,
+      configuration,
+      imageSupport,
+      uploadSoundSupport
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      title = {},
+      prompt = {},
+      modelOptions = {},
+      mathMlOptions = {}
+    } = configuration || {};
+    const {
+      errors = {},
+      extraCSSRules,
+      spellCheckEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      correctAnswerChangeDialog
+    } = this.state;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    const fractionModelChartKey = this.generateRandomKey();
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: true
+    }, /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Set Up"
+    }), /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: title?.label || 'Title'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.title || '',
+      onChange: title => onChange({
+        title
+      }),
+      toolbarOpts: toolbarOpts,
+      activePlugins: ['bold', 'html', 'italic', 'underline', 'strikethrough', 'image', 'math', 'languageCharacters', 'responseArea'],
+      pluginProps: getPluginProps(title?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), /*#__PURE__*/_react.default.createElement(StyledFormSection, {
+      label: prompt?.label || 'Question'
+    }, /*#__PURE__*/_react.default.createElement(_editableHtml.default, {
+      markup: model.prompt || '',
+      minHeight: 60,
+      onChange: prompt => onChange({
+        prompt
+      }),
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      uploadSoundSupport: uploadSoundSupport,
+      imageSupport: imageSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    })), /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, /*#__PURE__*/_react.default.createElement(_modelOptions.default, {
+      model: model,
+      onChange: this.onModelOptionsChange,
+      modelOptions: modelOptions
+    })), /*#__PURE__*/_react.default.createElement(_configUi.FormSection, null, "            ", /*#__PURE__*/_react.default.createElement(_cardBar.default, {
+      header: "Correct Answer",
+      info: /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'right',
+        title: 'The correct answer should include no more than one partially-filled model'
+      }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          marginLeft: '8px'
+        }
+      }))
+    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(Label, null, "Click/touch the number of parts to represent the correct fraction model"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(ModelErrorContainer, {
+      hasError: !!errors.correctResponse
+    }, /*#__PURE__*/_react.default.createElement(_fractionModel.FractionModelChart, {
+      key: fractionModelChartKey,
+      value: model.correctResponse,
+      modelType: model.modelTypeSelected,
+      noOfModels: model.maxModelSelected,
+      partsPerModel: model.partsPerModel,
+      showLabel: model.showGraphLabels,
+      onChange: this.onCorrectAnswerChange
+    })), errors.correctResponse && /*#__PURE__*/_react.default.createElement(ErrorMessage, null, errors.correctResponse)), /*#__PURE__*/_react.default.createElement(_configUi.AlertDialog, {
+      open: correctAnswerChangeDialog.open,
+      title: "Warning",
+      text: correctAnswerChangeDialog.text,
+      onConfirm: () => {
+        let newModel = this.state.correctAnswerChangeDialog.newModel;
+        newModel.correctResponse = [];
+        onChange({
+          ...newModel
+        });
+        this.setState({
+          correctAnswerChangeDialog: {
+            open: false
           }
-        }))
-      }), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("label", {
-        className: classes.label
-      }, "Click/touch the number of parts to represent the correct fraction model"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", {
-        className: errors.correctResponse && classes.modelError
-      }, /*#__PURE__*/_react["default"].createElement(_fractionModel.FractionModelChart, {
-        key: fractionModelChartKey,
-        value: model.correctResponse,
-        modelType: model.modelTypeSelected,
-        noOfModels: model.maxModelSelected,
-        partsPerModel: model.partsPerModel,
-        showLabel: model.showGraphLabels,
-        onChange: this.onCorrectAnswerChange
-      })), errors.correctResponse && /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.errorMessage
-      }, errors.correctResponse)), /*#__PURE__*/_react["default"].createElement(_configUi.AlertDialog, {
-        open: correctAnswerChangeDialog.open,
-        title: "Warning",
-        text: correctAnswerChangeDialog.text,
-        onConfirm: function onConfirm() {
-          var newModel = _this2.state.correctAnswerChangeDialog.newModel;
-          newModel.correctResponse = [];
-
-          _onChange(_objectSpread({}, newModel));
-
-          _this2.setState({
-            correctAnswerChangeDialog: {
-              open: false
-            }
-          });
-        },
-        onClose: function onClose() {
-          var oldModel = _this2.state.correctAnswerChangeDialog.oldModel;
-
-          _onChange(_objectSpread({}, oldModel));
-
-          _this2.setState({
-            correctAnswerChangeDialog: {
-              open: false
-            }
-          });
-        },
-        onConfirmText: 'OK',
-        onCloseText: 'Cancel'
-      }));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
+        });
+      },
+      onClose: () => {
+        const oldModel = this.state.correctAnswerChangeDialog.oldModel;
+        onChange({
+          ...oldModel
+        });
+        this.setState({
+          correctAnswerChangeDialog: {
+            open: false
+          }
+        });
+      },
+      onConfirmText: 'OK',
+      onCloseText: 'Cancel'
+    }));
+  }
+}
 exports.Main = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  model: _propTypes["default"].object.isRequired,
-  configuration: _propTypes["default"].object.isRequired,
-  onConfigurationChanged: _propTypes["default"].func.isRequired,
-  onChange: _propTypes["default"].func.isRequired,
-  uploadSoundSupport: _propTypes["default"].object.isRequired
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object.isRequired,
+  configuration: _propTypes.default.object.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  uploadSoundSupport: _propTypes.default.object.isRequired
 });
-
-var _default = (0, _styles.withStyles)(styles, {
-  name: 'Main'
-})(Main);
-
-exports["default"] = _default;
+var _default = exports.default = Main;
 //# sourceMappingURL=main.js.map

package/configure/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["styles","theme","label","marginBottom","spacing","unit","tooltip","fontSize","typography","whiteSpace","maxWidth","errorText","color","palette","error","main","paddingTop","flexRow","display","alignItems","gap","errorMessage","marginTop","modelError","border","Main","props","correctResponse","model","onChange","oldModel","newModel","showDiag","length","setState","correctAnswerChangeDialog","open","text","Math","floor","random","state","classes","configuration","imageSupport","uploadSoundSupport","baseInputConfiguration","contentDimensions","title","prompt","modelOptions","mathMlOptions","errors","extraCSSRules","spellCheckEnabled","toolbarEditorPosition","toolbarOpts","position","getPluginProps","fractionModelChartKey","generateRandomKey","inputConfiguration","language","onModelOptionsChange","marginLeft","modelTypeSelected","maxModelSelected","partsPerModel","showGraphLabels","onCorrectAnswerChange","React","Component","PropTypes","object","isRequired","onConfigurationChanged","func","name"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FormSection, layout, AlertDialog } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport CardBar from './card-bar';\nimport ModelOptions from './model-options';\nimport { FractionModelChart } from '@pie-element/fraction-model';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport Info from '@material-ui/icons/Info';\n\nconst styles = (theme) => ({\n  label: {\n    marginBottom: theme.spacing.unit * 4,\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\n  },\n  flexRow: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '10px',\n  },\n  errorMessage: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    marginTop: theme.spacing.unit,\n  },\n  modelError: {\n    border: `2px solid ${theme.palette.error.main}`,\n  },\n});\n\nexport class Main extends React.Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    uploadSoundSupport: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      correctAnswerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n  }\n\n  /*\n   * Method to handle correct answer change\n   * @param {array} correctResponse - correct response\n   * */\n  onCorrectAnswerChange = (correctResponse) => {\n    const { model, onChange } = this.props;\n    model.correctResponse = correctResponse;\n    onChange({ ...model });\n  };\n\n  /*\n   * Method to handle model options change\n   * @param {object} oldModel - old model\n   * @param {object} newModel - new model\n   * @param {boolean} showDiag - show dialog or not\n   * */\n  onModelOptionsChange = (oldModel, newModel, showDiag) => {\n    const { onChange } = this.props;\n    if (showDiag && oldModel.correctResponse.length > 0) {\n      this.setState({\n        correctAnswerChangeDialog: {\n          open: true,\n          oldModel: oldModel,\n          newModel: newModel,\n          text: 'Changing either the Number of Models or Parts per Model will remove added correct answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      onChange({ ...newModel });\n    }\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { classes, model, onChange, configuration, imageSupport, uploadSoundSupport } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      title = {},\n      prompt = {},\n      modelOptions = {},\n      mathMlOptions = {},\n    } = configuration || {};\n\n    const { errors = {}, extraCSSRules, spellCheckEnabled, toolbarEditorPosition } = model || {};\n\n    const { correctAnswerChangeDialog } = this.state;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <layout.ConfigLayout extraCSSRules={extraCSSRules} dimensions={contentDimensions} hideSettings={true}>\n        <CardBar header=\"Set Up\"></CardBar>\n\n        <FormSection label={title?.label || 'Title'} className={classes.label}>\n          <EditableHtml\n            className={classes.title}\n            markup={model.title || ''}\n            onChange={(title) => onChange({ title })}\n            toolbarOpts={toolbarOpts}\n            activePlugins={[\n              'bold',\n              'html',\n              'italic',\n              'underline',\n              'strikethrough',\n              'image',\n              'math',\n              'languageCharacters',\n              'responseArea',\n            ]}\n            pluginProps={getPluginProps(title?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection label={prompt?.label || 'Question'} className={classes.label}>\n          <EditableHtml\n            markup={model.prompt || ''}\n            minHeight={60}\n            onChange={(prompt) => onChange({ prompt })}\n            toolbarOpts={toolbarOpts}\n            pluginProps={getPluginProps(prompt?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            imageSupport={imageSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </FormSection>\n\n        <FormSection>\n          <ModelOptions model={model} onChange={this.onModelOptionsChange} modelOptions={modelOptions} />\n        </FormSection>\n\n        <FormSection>\n          <CardBar\n            header=\"Correct Answer\"\n            info={\n              <Tooltip\n                classes={{ tooltip: classes.tooltip }}\n                disableFocusListener\n                disableTouchListener\n                placement={'right'}\n                title={'The correct answer should include no more than one partially-filled model'}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '8px' }} />\n              </Tooltip>\n            }\n          ></CardBar>\n\n          <br />\n          <label className={classes.label}>\n            Click/touch the number of parts to represent the correct fraction model\n          </label>\n          <br />\n\n          <div className={errors.correctResponse && classes.modelError}>\n            <FractionModelChart\n              key={fractionModelChartKey}\n              value={model.correctResponse}\n              modelType={model.modelTypeSelected}\n              noOfModels={model.maxModelSelected}\n              partsPerModel={model.partsPerModel}\n              showLabel={model.showGraphLabels}\n              onChange={this.onCorrectAnswerChange}\n            ></FractionModelChart>\n          </div>\n\n          {errors.correctResponse && <div className={classes.errorMessage}>{errors.correctResponse}</div>}\n        </FormSection>\n\n        <AlertDialog\n          open={correctAnswerChangeDialog.open}\n          title=\"Warning\"\n          text={correctAnswerChangeDialog.text}\n          onConfirm={() => {\n            let newModel = this.state.correctAnswerChangeDialog.newModel;\n            newModel.correctResponse = [];\n            onChange({ ...newModel });\n            this.setState({\n              correctAnswerChangeDialog: { open: false },\n            });\n          }}\n          onClose={() => {\n            const oldModel = this.state.correctAnswerChangeDialog.oldModel;\n            onChange({ ...oldModel });\n            this.setState({ correctAnswerChangeDialog: { open: false } });\n          }}\n          onConfirmText={'OK'}\n          onCloseText={'Cancel'}\n        />\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nexport default withStyles(styles, { name: 'Main' })(Main);\n"],"file":"main.js"}
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_configUi","_editableHtml","_fractionModel","_Tooltip","_Info","_styles","_cardBar","_modelOptions","StyledFormSection","styled","FormSection","theme","marginBottom","spacing","StyledTooltip","Tooltip","fontSize","typography","whiteSpace","maxWidth","ErrorMessage","color","palette","error","main","marginTop","ModelErrorContainer","hasError","border","Label","Main","React","Component","constructor","props","_defineProperty2","default","correctResponse","model","onChange","oldModel","newModel","showDiag","length","setState","correctAnswerChangeDialog","open","text","Math","floor","random","state","render","configuration","imageSupport","uploadSoundSupport","baseInputConfiguration","contentDimensions","title","prompt","modelOptions","mathMlOptions","errors","extraCSSRules","spellCheckEnabled","toolbarEditorPosition","toolbarOpts","position","getPluginProps","fractionModelChartKey","generateRandomKey","createElement","layout","ConfigLayout","dimensions","hideSettings","header","label","markup","activePlugins","pluginProps","inputConfiguration","spellCheck","languageCharactersProps","language","minHeight","onModelOptionsChange","info","disableFocusListener","disableTouchListener","placement","style","marginLeft","FractionModelChart","key","value","modelType","modelTypeSelected","noOfModels","maxModelSelected","partsPerModel","showLabel","showGraphLabels","onCorrectAnswerChange","AlertDialog","onConfirm","onClose","onConfirmText","onCloseText","exports","PropTypes","object","isRequired","onConfigurationChanged","func","_default"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { FormSection, layout, AlertDialog } from '@pie-lib/config-ui';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { FractionModelChart } from '@pie-element/fraction-model';\nimport Tooltip from '@mui/material/Tooltip';\nimport Info from '@mui/icons-material/Info';\nimport { styled } from '@mui/material/styles';\n\nimport CardBar from './card-bar';\nimport ModelOptions from './model-options';\n\nconst StyledFormSection = styled(FormSection)(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n  '& .MuiTooltip-tooltip': {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n}));\n\nconst ErrorMessage = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  marginTop: theme.spacing(1),\n}));\n\nconst ModelErrorContainer = styled('div')(({ theme, hasError }) => ({\n  ...(hasError && {\n    border: `2px solid ${theme.palette.error.main}`,\n  }),\n}));\n\nconst Label = styled('label')(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nexport class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object.isRequired,\n    configuration: PropTypes.object.isRequired,\n    onConfigurationChanged: PropTypes.func.isRequired,\n    onChange: PropTypes.func.isRequired,\n    uploadSoundSupport: PropTypes.object.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      correctAnswerChangeDialog: {\n        open: false,\n        text: '',\n      },\n    };\n  }\n\n  /*\n   * Method to handle correct answer change\n   * @param {array} correctResponse - correct response\n   * */\n  onCorrectAnswerChange = (correctResponse) => {\n    const { model, onChange } = this.props;\n    model.correctResponse = correctResponse;\n    onChange({ ...model });\n  };\n\n  /*\n   * Method to handle model options change\n   * @param {object} oldModel - old model\n   * @param {object} newModel - new model\n   * @param {boolean} showDiag - show dialog or not\n   * */\n  onModelOptionsChange = (oldModel, newModel, showDiag) => {\n    const { onChange } = this.props;\n    if (showDiag && oldModel.correctResponse.length > 0) {\n      this.setState({\n        correctAnswerChangeDialog: {\n          open: true,\n          oldModel: oldModel,\n          newModel: newModel,\n          text: 'Changing either the Number of Models or Parts per Model will remove added correct answer. Are you sure you want to continue?',\n        },\n      });\n    } else {\n      onChange({ ...newModel });\n    }\n  };\n\n  /*\n   * Method to generate random key\n   * */\n  generateRandomKey = () => {\n    return Math.floor(Math.random() * 10000);\n  };\n\n  render() {\n    const { model, onChange, configuration, imageSupport, uploadSoundSupport } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      title = {},\n      prompt = {},\n      modelOptions = {},\n      mathMlOptions = {},\n    } = configuration || {};\n\n    const { errors = {}, extraCSSRules, spellCheckEnabled, toolbarEditorPosition } = model || {};\n\n    const { correctAnswerChangeDialog } = this.state;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    const fractionModelChartKey = this.generateRandomKey();\n\n    return (\n      <layout.ConfigLayout extraCSSRules={extraCSSRules} dimensions={contentDimensions} hideSettings={true}>\n        <CardBar header=\"Set Up\"></CardBar>\n\n        <StyledFormSection label={title?.label || 'Title'}>\n          <EditableHtml\n            markup={model.title || ''}\n            onChange={(title) => onChange({ title })}\n            toolbarOpts={toolbarOpts}\n            activePlugins={[\n              'bold',\n              'html',\n              'italic',\n              'underline',\n              'strikethrough',\n              'image',\n              'math',\n              'languageCharacters',\n              'responseArea',\n            ]}\n            pluginProps={getPluginProps(title?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </StyledFormSection>\n\n        <StyledFormSection label={prompt?.label || 'Question'}>\n          <EditableHtml\n            markup={model.prompt || ''}\n            minHeight={60}\n            onChange={(prompt) => onChange({ prompt })}\n            toolbarOpts={toolbarOpts}\n            pluginProps={getPluginProps(prompt?.inputConfiguration)}\n            spellCheck={spellCheckEnabled}\n            uploadSoundSupport={uploadSoundSupport}\n            imageSupport={imageSupport}\n            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n            mathMlOptions={mathMlOptions}\n          />\n        </StyledFormSection>\n\n        <FormSection>\n          <ModelOptions model={model} onChange={this.onModelOptionsChange} modelOptions={modelOptions} />\n        </FormSection>\n\n        <FormSection>            <CardBar\n            header=\"Correct Answer\"\n            info={\n              <StyledTooltip\n                disableFocusListener\n                disableTouchListener\n                placement={'right'}\n                title={'The correct answer should include no more than one partially-filled model'}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '8px' }} />\n              </StyledTooltip>\n            }\n          ></CardBar>\n\n          <br />\n          <Label>\n            Click/touch the number of parts to represent the correct fraction model\n          </Label>\n          <br />\n\n          <ModelErrorContainer hasError={!!errors.correctResponse}>\n            <FractionModelChart\n              key={fractionModelChartKey}\n              value={model.correctResponse}\n              modelType={model.modelTypeSelected}\n              noOfModels={model.maxModelSelected}\n              partsPerModel={model.partsPerModel}\n              showLabel={model.showGraphLabels}\n              onChange={this.onCorrectAnswerChange}\n            ></FractionModelChart>\n          </ModelErrorContainer>\n\n          {errors.correctResponse && <ErrorMessage>{errors.correctResponse}</ErrorMessage>}\n        </FormSection>\n\n        <AlertDialog\n          open={correctAnswerChangeDialog.open}\n          title=\"Warning\"\n          text={correctAnswerChangeDialog.text}\n          onConfirm={() => {\n            let newModel = this.state.correctAnswerChangeDialog.newModel;\n            newModel.correctResponse = [];\n            onChange({ ...newModel });\n            this.setState({\n              correctAnswerChangeDialog: { open: false },\n            });\n          }}\n          onClose={() => {\n            const oldModel = this.state.correctAnswerChangeDialog.oldModel;\n            onChange({ ...oldModel });\n            this.setState({ correctAnswerChangeDialog: { open: false } });\n          }}\n          onConfirmText={'OK'}\n          onCloseText={'Cancel'}\n        />\n      </layout.ConfigLayout>\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,aAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,QAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,KAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AAEA,IAAAQ,QAAA,GAAAT,sBAAA,CAAAC,OAAA;AACA,IAAAS,aAAA,GAAAV,sBAAA,CAAAC,OAAA;AAEA,MAAMU,iBAAiB,GAAG,IAAAC,cAAM,EAACC,qBAAW,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAC5DC,YAAY,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEH,MAAMC,aAAa,GAAG,IAAAL,cAAM,EAACM,gBAAO,CAAC,CAAC,CAAC;EAAEJ;AAAM,CAAC,MAAM;EACpD,uBAAuB,EAAE;IACvBK,QAAQ,EAAEL,KAAK,CAACM,UAAU,CAACD,QAAQ,GAAG,CAAC;IACvCE,UAAU,EAAE,KAAK;IACjBC,QAAQ,EAAE;EACZ;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,YAAY,GAAG,IAAAX,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE;AAAM,CAAC,MAAM;EACjDK,QAAQ,EAAEL,KAAK,CAACM,UAAU,CAACD,QAAQ,GAAG,CAAC;EACvCK,KAAK,EAAEV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,IAAI;EAC/BC,SAAS,EAAEd,KAAK,CAACE,OAAO,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,MAAMa,mBAAmB,GAAG,IAAAjB,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEE,KAAK;EAAEgB;AAAS,CAAC,MAAM;EAClE,IAAIA,QAAQ,IAAI;IACdC,MAAM,EAAE,aAAajB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,IAAI;EAC/C,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAMK,KAAK,GAAG,IAAApB,cAAM,EAAC,OAAO,CAAC,CAAC,CAAC;EAAEE;AAAM,CAAC,MAAM;EAC5CC,YAAY,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC;AAC/B,CAAC,CAAC,CAAC;AAEI,MAAMiB,IAAI,SAASC,cAAK,CAACC,SAAS,CAAC;EASxCC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAUd;AACF;AACA;AACA;IAHE,IAAAC,gBAAA,CAAAC,OAAA,iCAIyBC,eAAe,IAAK;MAC3C,MAAM;QAAEC,KAAK;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACL,KAAK;MACtCI,KAAK,CAACD,eAAe,GAAGA,eAAe;MACvCE,QAAQ,CAAC;QAAE,GAAGD;MAAM,CAAC,CAAC;IACxB,CAAC;IAED;AACF;AACA;AACA;AACA;AACA;IALE,IAAAH,gBAAA,CAAAC,OAAA,gCAMuB,CAACI,QAAQ,EAAEC,QAAQ,EAAEC,QAAQ,KAAK;MACvD,MAAM;QAAEH;MAAS,CAAC,GAAG,IAAI,CAACL,KAAK;MAC/B,IAAIQ,QAAQ,IAAIF,QAAQ,CAACH,eAAe,CAACM,MAAM,GAAG,CAAC,EAAE;QACnD,IAAI,CAACC,QAAQ,CAAC;UACZC,yBAAyB,EAAE;YACzBC,IAAI,EAAE,IAAI;YACVN,QAAQ,EAAEA,QAAQ;YAClBC,QAAQ,EAAEA,QAAQ;YAClBM,IAAI,EAAE;UACR;QACF,CAAC,CAAC;MACJ,CAAC,MAAM;QACLR,QAAQ,CAAC;UAAE,GAAGE;QAAS,CAAC,CAAC;MAC3B;IACF,CAAC;IAED;AACF;AACA;IAFE,IAAAN,gBAAA,CAAAC,OAAA,6BAGoB,MAAM;MACxB,OAAOY,IAAI,CAACC,KAAK,CAACD,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC;IAC1C,CAAC;IA7CC,IAAI,CAACC,KAAK,GAAG;MACXN,yBAAyB,EAAE;QACzBC,IAAI,EAAE,KAAK;QACXC,IAAI,EAAE;MACR;IACF,CAAC;EACH;EAyCAK,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEd,KAAK;MAAEC,QAAQ;MAAEc,aAAa;MAAEC,YAAY;MAAEC;IAAmB,CAAC,GAAG,IAAI,CAACrB,KAAK;IACvF,MAAM;MACJsB,sBAAsB,GAAG,CAAC,CAAC;MAC3BC,iBAAiB,GAAG,CAAC,CAAC;MACtBC,KAAK,GAAG,CAAC,CAAC;MACVC,MAAM,GAAG,CAAC,CAAC;MACXC,YAAY,GAAG,CAAC,CAAC;MACjBC,aAAa,GAAG,CAAC;IACnB,CAAC,GAAGR,aAAa,IAAI,CAAC,CAAC;IAEvB,MAAM;MAAES,MAAM,GAAG,CAAC,CAAC;MAAEC,aAAa;MAAEC,iBAAiB;MAAEC;IAAsB,CAAC,GAAG3B,KAAK,IAAI,CAAC,CAAC;IAE5F,MAAM;MAAEO;IAA0B,CAAC,GAAG,IAAI,CAACM,KAAK;IAEhD,MAAMe,WAAW,GAAG;MAClBC,QAAQ,EAAEF,qBAAqB,KAAK,KAAK,GAAG,KAAK,GAAG;IACtD,CAAC;IAED,MAAMG,cAAc,GAAGA,CAAClC,KAAK,GAAG,CAAC,CAAC,MAAM;MACtC,GAAGsB,sBAAsB;MACzB,GAAGtB;IACL,CAAC,CAAC;IAEF,MAAMmC,qBAAqB,GAAG,IAAI,CAACC,iBAAiB,CAAC,CAAC;IAEtD,oBACE1E,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACvE,SAAA,CAAAwE,MAAM,CAACC,YAAY;MAACV,aAAa,EAAEA,aAAc;MAACW,UAAU,EAAEjB,iBAAkB;MAACkB,YAAY,EAAE;IAAK,gBACnG/E,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACjE,QAAA,CAAA8B,OAAO;MAACwC,MAAM,EAAC;IAAQ,CAAU,CAAC,eAEnChF,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAAC/D,iBAAiB;MAACqE,KAAK,EAAEnB,KAAK,EAAEmB,KAAK,IAAI;IAAQ,gBAChDjF,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACtE,aAAA,CAAAmC,OAAY;MACX0C,MAAM,EAAExC,KAAK,CAACoB,KAAK,IAAI,EAAG;MAC1BnB,QAAQ,EAAGmB,KAAK,IAAKnB,QAAQ,CAAC;QAAEmB;MAAM,CAAC,CAAE;MACzCQ,WAAW,EAAEA,WAAY;MACzBa,aAAa,EAAE,CACb,MAAM,EACN,MAAM,EACN,QAAQ,EACR,WAAW,EACX,eAAe,EACf,OAAO,EACP,MAAM,EACN,oBAAoB,EACpB,cAAc,CACd;MACFC,WAAW,EAAEZ,cAAc,CAACV,KAAK,EAAEuB,kBAAkB,CAAE;MACvDC,UAAU,EAAElB,iBAAkB;MAC9BT,kBAAkB,EAAEA,kBAAmB;MACvC4B,uBAAuB,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAU,CAAC,EAAE;QAAEA,QAAQ,EAAE;MAAU,CAAC,CAAE;MAC5EvB,aAAa,EAAEA;IAAc,CAC9B,CACgB,CAAC,eAEpBjE,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAAC/D,iBAAiB;MAACqE,KAAK,EAAElB,MAAM,EAAEkB,KAAK,IAAI;IAAW,gBACpDjF,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACtE,aAAA,CAAAmC,OAAY;MACX0C,MAAM,EAAExC,KAAK,CAACqB,MAAM,IAAI,EAAG;MAC3B0B,SAAS,EAAE,EAAG;MACd9C,QAAQ,EAAGoB,MAAM,IAAKpB,QAAQ,CAAC;QAAEoB;MAAO,CAAC,CAAE;MAC3CO,WAAW,EAAEA,WAAY;MACzBc,WAAW,EAAEZ,cAAc,CAACT,MAAM,EAAEsB,kBAAkB,CAAE;MACxDC,UAAU,EAAElB,iBAAkB;MAC9BT,kBAAkB,EAAEA,kBAAmB;MACvCD,YAAY,EAAEA,YAAa;MAC3B6B,uBAAuB,EAAE,CAAC;QAAEC,QAAQ,EAAE;MAAU,CAAC,EAAE;QAAEA,QAAQ,EAAE;MAAU,CAAC,CAAE;MAC5EvB,aAAa,EAAEA;IAAc,CAC9B,CACgB,CAAC,eAEpBjE,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACvE,SAAA,CAAAU,WAAW,qBACVd,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAAChE,aAAA,CAAA6B,OAAY;MAACE,KAAK,EAAEA,KAAM;MAACC,QAAQ,EAAE,IAAI,CAAC+C,oBAAqB;MAAC1B,YAAY,EAAEA;IAAa,CAAE,CACnF,CAAC,eAEdhE,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACvE,SAAA,CAAAU,WAAW,QAAC,cAAY,eAAAd,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACjE,QAAA,CAAA8B,OAAO;MAC7BwC,MAAM,EAAC,gBAAgB;MACvBW,IAAI,eACF3F,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACzD,aAAa;QACZ0E,oBAAoB;QACpBC,oBAAoB;QACpBC,SAAS,EAAE,OAAQ;QACnBhC,KAAK,EAAE;MAA4E,gBAEnF9D,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACnE,KAAA,CAAAgC,OAAI;QAACpB,QAAQ,EAAE,OAAQ;QAACK,KAAK,EAAE,SAAU;QAACsE,KAAK,EAAE;UAAEC,UAAU,EAAE;QAAM;MAAE,CAAE,CAC7D;IAChB,CACO,CAAC,eAEXhG,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,WAAK,CAAC,eACN3E,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAAC1C,KAAK,QAAC,yEAEA,CAAC,eACRjC,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,WAAK,CAAC,eAEN3E,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAAC7C,mBAAmB;MAACC,QAAQ,EAAE,CAAC,CAACmC,MAAM,CAACzB;IAAgB,gBACtDzC,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACrE,cAAA,CAAA2F,kBAAkB;MACjBC,GAAG,EAAEzB,qBAAsB;MAC3B0B,KAAK,EAAEzD,KAAK,CAACD,eAAgB;MAC7B2D,SAAS,EAAE1D,KAAK,CAAC2D,iBAAkB;MACnCC,UAAU,EAAE5D,KAAK,CAAC6D,gBAAiB;MACnCC,aAAa,EAAE9D,KAAK,CAAC8D,aAAc;MACnCC,SAAS,EAAE/D,KAAK,CAACgE,eAAgB;MACjC/D,QAAQ,EAAE,IAAI,CAACgE;IAAsB,CAClB,CACF,CAAC,EAErBzC,MAAM,CAACzB,eAAe,iBAAIzC,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACnD,YAAY,QAAE0C,MAAM,CAACzB,eAA8B,CACpE,CAAC,eAEdzC,MAAA,CAAAwC,OAAA,CAAAmC,aAAA,CAACvE,SAAA,CAAAwG,WAAW;MACV1D,IAAI,EAAED,yBAAyB,CAACC,IAAK;MACrCY,KAAK,EAAC,SAAS;MACfX,IAAI,EAAEF,yBAAyB,CAACE,IAAK;MACrC0D,SAAS,EAAEA,CAAA,KAAM;QACf,IAAIhE,QAAQ,GAAG,IAAI,CAACU,KAAK,CAACN,yBAAyB,CAACJ,QAAQ;QAC5DA,QAAQ,CAACJ,eAAe,GAAG,EAAE;QAC7BE,QAAQ,CAAC;UAAE,GAAGE;QAAS,CAAC,CAAC;QACzB,IAAI,CAACG,QAAQ,CAAC;UACZC,yBAAyB,EAAE;YAAEC,IAAI,EAAE;UAAM;QAC3C,CAAC,CAAC;MACJ,CAAE;MACF4D,OAAO,EAAEA,CAAA,KAAM;QACb,MAAMlE,QAAQ,GAAG,IAAI,CAACW,KAAK,CAACN,yBAAyB,CAACL,QAAQ;QAC9DD,QAAQ,CAAC;UAAE,GAAGC;QAAS,CAAC,CAAC;QACzB,IAAI,CAACI,QAAQ,CAAC;UAAEC,yBAAyB,EAAE;YAAEC,IAAI,EAAE;UAAM;QAAE,CAAC,CAAC;MAC/D,CAAE;MACF6D,aAAa,EAAE,IAAK;MACpBC,WAAW,EAAE;IAAS,CACvB,CACkB,CAAC;EAE1B;AACF;AAACC,OAAA,CAAA/E,IAAA,GAAAA,IAAA;AAAA,IAAAK,gBAAA,CAAAC,OAAA,EA9LYN,IAAI,eACI;EACjBQ,KAAK,EAAEwE,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClC3D,aAAa,EAAEyD,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC1CC,sBAAsB,EAAEH,kBAAS,CAACI,IAAI,CAACF,UAAU;EACjDzE,QAAQ,EAAEuE,kBAAS,CAACI,IAAI,CAACF,UAAU;EACnCzD,kBAAkB,EAAEuD,kBAAS,CAACC,MAAM,CAACC;AACvC,CAAC;AAAA,IAAAG,QAAA,GAAAN,OAAA,CAAAzE,OAAA,GAyLYN,IAAI","ignoreList":[]}