@pie-element/boilerplate-item-type 5.3.4-next.0 → 6.0.0-beta.0

package/controller/lib/index.js

@@ -1,108 +1,77 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.validate = exports.outcome = exports.normalizeSession = exports.model = exports.getPartialScore = exports.getCorrectness = exports.createDefaultModel = exports.createCorrectResponseSession = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
-
 var _defaults = _interopRequireDefault(require("./defaults"));
-
-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; }
-
-var getCorrectness = function getCorrectness(model) {
-  var correctnessCondition = 'c';
-
+const getCorrectness = model => {
+  const correctnessCondition = 'c';
   switch (correctnessCondition) {
     case 'c':
       return 'correct';
-
     case 'pc':
       return 'partially-correct';
-
     case 'i':
       return 'incorrect';
-
     default:
       return 'unknown';
   }
 };
-
 exports.getCorrectness = getCorrectness;
-
-var getPartialScore = function getPartialScore(question, session) {
-  if (!session || (0, _isEmpty["default"])(session)) {
+const getPartialScore = (question, session) => {
+  if (!session || (0, _isEmpty.default)(session)) {
     return 0;
   }
-
   return 1;
 };
-
 exports.getPartialScore = getPartialScore;
-
-var outcome = function outcome(question, session, env) {
-  return new Promise(function (resolve) {
-    if (!session || (0, _isEmpty["default"])(session)) {
-      resolve({
-        score: 0,
-        empty: true
-      });
-    }
-
-    session = normalizeSession(session);
-
-    if (env.mode !== 'evaluate') {
-      resolve({
-        score: undefined,
-        completed: undefined
-      });
-    } else {
-      resolve({
-        score: 1
-      });
-    }
-  });
-};
-
+const outcome = (question, session, env) => new Promise(resolve => {
+  if (!session || (0, _isEmpty.default)(session)) {
+    resolve({
+      score: 0,
+      empty: true
+    });
+  }
+  session = normalizeSession(session);
+  if (env.mode !== 'evaluate') {
+    resolve({
+      score: undefined,
+      completed: undefined
+    });
+  } else {
+    resolve({
+      score: 1
+    });
+  }
+});
 exports.outcome = outcome;
-
-var createDefaultModel = function createDefaultModel() {
-  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return _objectSpread(_objectSpread({}, _defaults["default"].model), model);
-};
-
+const createDefaultModel = (model = {}) => ({
+  ..._defaults.default.model,
+  ...model
+});
 exports.createDefaultModel = createDefaultModel;
-
-var normalizeSession = function normalizeSession(s) {
-  return _objectSpread({}, s);
-};
-
+const normalizeSession = s => ({
+  ...s
+});
 exports.normalizeSession = normalizeSession;
-
-var model = function model(question, session, env) {
-  return new Promise(function (resolve) {
+const model = (question, session, env) => {
+  return new Promise(resolve => {
     session = session || {};
-    var normalizedQuestion = createDefaultModel(question);
-    var out = {
+    const normalizedQuestion = createDefaultModel(question);
+    const out = {
       prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,
       extraCSSRules: normalizedQuestion.extraCSSRules,
-      env: env
+      env
     };
     resolve(out);
   });
 };
-
 exports.model = model;
-
-var createCorrectResponseSession = function createCorrectResponseSession(question, env) {
-  return new Promise(function (resolve) {
+const createCorrectResponseSession = (question, env) => {
+  return new Promise(resolve => {
     if (env.mode !== 'evaluate' && env.role === 'instructor') {
       resolve({
         id: '1'
@@ -112,15 +81,10 @@ var createCorrectResponseSession = function createCorrectResponseSession(questio
     }
   });
 };
-
 exports.createCorrectResponseSession = createCorrectResponseSession;
-
-var validate = function validate() {
-  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var errors = {};
+const validate = (model = {}, config = {}) => {
+  const errors = {};
   return errors;
 };
-
 exports.validate = validate;
 //# sourceMappingURL=index.js.map

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["getCorrectness","model","correctnessCondition","getPartialScore","question","session","outcome","env","Promise","resolve","score","empty","normalizeSession","mode","undefined","completed","createDefaultModel","defaults","s","normalizedQuestion","out","prompt","promptEnabled","extraCSSRules","createCorrectResponseSession","role","id","validate","config","errors"],"mappings":"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","sourcesContent":["import isEmpty from 'lodash/isEmpty';\nimport defaults from './defaults';\n\nexport const getCorrectness = (model) => {\n  const correctnessCondition = 'c';\n\n  switch (correctnessCondition) {\n    case 'c':\n      return 'correct';\n    case 'pc':\n      return 'partially-correct';\n    case 'i':\n      return 'incorrect';\n    default:\n      return 'unknown';\n  }\n};\n\nexport const getPartialScore = (question, session) => {\n  if (!session || isEmpty(session)) {\n    return 0;\n  }\n\n  return 1;\n};\n\nexport const outcome = (question, session, env) =>\n  new Promise((resolve) => {\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    session = normalizeSession(session);\n\n    if (env.mode !== 'evaluate') {\n      resolve({ score: undefined, completed: undefined });\n    } else {\n      resolve({ score: 1 });\n    }\n  });\n\nexport const createDefaultModel = (model = {}) => ({ ...defaults.model, ...model });\n\nexport const normalizeSession = (s) => ({ ...s });\n\nexport const model = (question, session, env) => {\n  return new Promise((resolve) => {\n    session = session || {};\n    const normalizedQuestion = createDefaultModel(question);\n\n    const out = {\n      prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,\n      extraCSSRules: normalizedQuestion.extraCSSRules,\n      env,\n    };\n\n    resolve(out);\n  });\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise((resolve) => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      resolve({ id: '1' });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\nexport const validate = (model = {}, config = {}) => {\n  const errors = {};\n\n  return errors;\n};\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_isEmpty","_interopRequireDefault","require","_defaults","getCorrectness","model","correctnessCondition","exports","getPartialScore","question","session","isEmpty","outcome","env","Promise","resolve","score","empty","normalizeSession","mode","undefined","completed","createDefaultModel","defaults","s","normalizedQuestion","out","prompt","promptEnabled","extraCSSRules","createCorrectResponseSession","role","id","validate","config","errors"],"sources":["../src/index.js"],"sourcesContent":["import isEmpty from 'lodash/isEmpty';\nimport defaults from './defaults';\n\nexport const getCorrectness = (model) => {\n  const correctnessCondition = 'c';\n\n  switch (correctnessCondition) {\n    case 'c':\n      return 'correct';\n    case 'pc':\n      return 'partially-correct';\n    case 'i':\n      return 'incorrect';\n    default:\n      return 'unknown';\n  }\n};\n\nexport const getPartialScore = (question, session) => {\n  if (!session || isEmpty(session)) {\n    return 0;\n  }\n\n  return 1;\n};\n\nexport const outcome = (question, session, env) =>\n  new Promise((resolve) => {\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    session = normalizeSession(session);\n\n    if (env.mode !== 'evaluate') {\n      resolve({ score: undefined, completed: undefined });\n    } else {\n      resolve({ score: 1 });\n    }\n  });\n\nexport const createDefaultModel = (model = {}) => ({ ...defaults.model, ...model });\n\nexport const normalizeSession = (s) => ({ ...s });\n\nexport const model = (question, session, env) => {\n  return new Promise((resolve) => {\n    session = session || {};\n    const normalizedQuestion = createDefaultModel(question);\n\n    const out = {\n      prompt: normalizedQuestion.promptEnabled ? normalizedQuestion.prompt : null,\n      extraCSSRules: normalizedQuestion.extraCSSRules,\n      env,\n    };\n\n    resolve(out);\n  });\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise((resolve) => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      resolve({ id: '1' });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\nexport const validate = (model = {}, config = {}) => {\n  const errors = {};\n\n  return errors;\n};\n"],"mappings":"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","ignoreList":[]}

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/boilerplate-item-type-controller",
   "private": true,
-  "version": "4.2.1",
+  "version": "5.0.0-beta.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/lib/index.js

@@ -1,105 +1,68 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _piePlayerEvents = require("@pie-framework/pie-player-events");
-
 var _main = _interopRequireDefault(require("./main"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
-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 BoilerplateItemType = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(BoilerplateItemType, _HTMLElement);
-
-  var _super = _createSuper(BoilerplateItemType);
-
-  function BoilerplateItemType() {
-    (0, _classCallCheck2["default"])(this, BoilerplateItemType);
-    return _super.apply(this, arguments);
+class BoilerplateItemType extends HTMLElement {
+  constructor() {
+    super();
+    this._root = null;
   }
-
-  (0, _createClass2["default"])(BoilerplateItemType, [{
-    key: "model",
-    get: function get() {
-      return this._model;
-    },
-    set: function set(m) {
-      this._model = m;
-      this.render();
-      this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined));
-    }
-  }, {
-    key: "session",
-    get: function get() {
-      return this._session;
-    },
-    set: function set(s) {
-      this._session = s;
-      this.render();
-    }
-  }, {
-    key: "isSessionComplete",
-    value: function isSessionComplete() {
-      // a method to check if student answered the question
-      return true;
-    }
-  }, {
-    key: "onSessionChange",
-    value: function onSessionChange(session) {
-      // you can add an extra step here to validate session
-      this._session = session;
-      this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isSessionComplete()));
-    }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {
-      this.render();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this = this;
-
-      if (this._model && this._session) {
-        var el = /*#__PURE__*/_react["default"].createElement(_main["default"], {
-          model: this._model,
-          session: this._session,
-          onSessionChange: this.onSessionChange.bind(this)
-        });
-
-        _reactDom["default"].render(el, this, function () {
-          (0, _mathRendering.renderMath)(_this);
-        });
+  set model(m) {
+    this._model = m;
+    this.render();
+    this.dispatchEvent(new _piePlayerEvents.ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined));
+  }
+  get model() {
+    return this._model;
+  }
+  set session(s) {
+    this._session = s;
+    this.render();
+  }
+  get session() {
+    return this._session;
+  }
+  isSessionComplete() {
+    // a method to check if student answered the question
+    return true;
+  }
+  onSessionChange(session) {
+    // you can add an extra step here to validate session
+    this._session = session;
+    this.dispatchEvent(new _piePlayerEvents.SessionChangedEvent(this.tagName.toLowerCase(), this.isSessionComplete()));
+  }
+  connectedCallback() {
+    this.render();
+  }
+  render() {
+    if (this._model && this._session) {
+      const el = /*#__PURE__*/_react.default.createElement(_main.default, {
+        model: this._model,
+        session: this._session,
+        onSessionChange: this.onSessionChange.bind(this)
+      });
+      if (!this._root) {
+        this._root = (0, _client.createRoot)(this);
       }
+      this._root.render(el);
+      queueMicrotask(() => {
+        (0, _mathRendering.renderMath)(this);
+      });
     }
-  }]);
-  return BoilerplateItemType;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = BoilerplateItemType;
+  }
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}
+exports.default = BoilerplateItemType;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["BoilerplateItemType","_model","m","render","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isSessionComplete","undefined","_session","s","session","SessionChangedEvent","el","React","createElement","Main","model","onSessionChange","bind","ReactDOM","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEqBA,mB;;;;;;;;;;;;SAUnB,eAAY;AACV,aAAO,KAAKC,MAAZ;AACD,K;SAXD,aAAUC,CAAV,EAAa;AACX,WAAKD,MAAL,GAAcC,CAAd;AAEA,WAAKC,MAAL;AACA,WAAKC,aAAL,CACE,IAAIC,8BAAJ,CAAkB,KAAKC,OAAL,CAAaC,WAAb,EAAlB,EAA8C,KAAKC,iBAAL,EAA9C,EAAwE,KAAKP,MAAL,KAAgBQ,SAAxF,CADF;AAGD;;;SAYD,eAAc;AACZ,aAAO,KAAKC,QAAZ;AACD,K;SARD,aAAYC,CAAZ,EAAe;AACb,WAAKD,QAAL,GAAgBC,CAAhB;AAEA,WAAKR,MAAL;AACD;;;WAMD,6BAAoB;AAClB;AACA,aAAO,IAAP;AACD;;;WAED,yBAAgBS,OAAhB,EAAyB;AACvB;AACA,WAAKF,QAAL,GAAgBE,OAAhB;AAEA,WAAKR,aAAL,CAAmB,IAAIS,oCAAJ,CAAwB,KAAKP,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,iBAAL,EAApD,CAAnB;AACD;;;WAED,6BAAoB;AAClB,WAAKL,MAAL;AACD;;;WAED,kBAAS;AAAA;;AACP,UAAI,KAAKF,MAAL,IAAe,KAAKS,QAAxB,EAAkC;AAChC,YAAMI,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACnCC,UAAAA,KAAK,EAAE,KAAKjB,MADuB;AAEnCW,UAAAA,OAAO,EAAE,KAAKF,QAFqB;AAGnCS,UAAAA,eAAe,EAAE,KAAKA,eAAL,CAAqBC,IAArB,CAA0B,IAA1B;AAHkB,SAA1B,CAAX;;AAMAC,6BAASlB,MAAT,CAAgBW,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDApD8CQ,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport default class BoilerplateItemType extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.render();\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined),\n    );\n  }\n\n  get model() {\n    return this._model;\n  }\n\n  set session(s) {\n    this._session = s;\n\n    this.render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  isSessionComplete() {\n    // a method to check if student answered the question\n    return true;\n  }\n\n  onSessionChange(session) {\n    // you can add an extra step here to validate session\n    this._session = session;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isSessionComplete()));\n  }\n\n  connectedCallback() {\n    this.render();\n  }\n\n  render() {\n    if (this._model && this._session) {\n      const el = React.createElement(Main, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.bind(this),\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_piePlayerEvents","_main","_mathRendering","BoilerplateItemType","HTMLElement","constructor","_root","model","m","_model","render","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isSessionComplete","undefined","session","s","_session","onSessionChange","SessionChangedEvent","connectedCallback","el","React","createElement","Main","bind","createRoot","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\n\nexport default class BoilerplateItemType extends HTMLElement {\n  constructor() {\n    super();\n    this._root = null;\n  }\n\n  set model(m) {\n    this._model = m;\n\n    this.render();\n    this.dispatchEvent(\n      new ModelSetEvent(this.tagName.toLowerCase(), this.isSessionComplete(), this._model !== undefined),\n    );\n  }\n\n  get model() {\n    return this._model;\n  }\n\n  set session(s) {\n    this._session = s;\n\n    this.render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  isSessionComplete() {\n    // a method to check if student answered the question\n    return true;\n  }\n\n  onSessionChange(session) {\n    // you can add an extra step here to validate session\n    this._session = session;\n\n    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isSessionComplete()));\n  }\n\n  connectedCallback() {\n    this.render();\n  }\n\n  render() {\n    if (this._model && this._session) {\n      const el = React.createElement(Main, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.onSessionChange.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\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AAEe,MAAMK,mBAAmB,SAASC,WAAW,CAAC;EAC3DC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACP,IAAI,CAACC,KAAK,GAAG,IAAI;EACnB;EAEA,IAAIC,KAAKA,CAACC,CAAC,EAAE;IACX,IAAI,CAACC,MAAM,GAAGD,CAAC;IAEf,IAAI,CAACE,MAAM,CAAC,CAAC;IACb,IAAI,CAACC,aAAa,CAChB,IAAIC,8BAAa,CAAC,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAACN,MAAM,KAAKO,SAAS,CACnG,CAAC;EACH;EAEA,IAAIT,KAAKA,CAAA,EAAG;IACV,OAAO,IAAI,CAACE,MAAM;EACpB;EAEA,IAAIQ,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAACC,QAAQ,GAAGD,CAAC;IAEjB,IAAI,CAACR,MAAM,CAAC,CAAC;EACf;EAEA,IAAIO,OAAOA,CAAA,EAAG;IACZ,OAAO,IAAI,CAACE,QAAQ;EACtB;EAEAJ,iBAAiBA,CAAA,EAAG;IAClB;IACA,OAAO,IAAI;EACb;EAEAK,eAAeA,CAACH,OAAO,EAAE;IACvB;IACA,IAAI,CAACE,QAAQ,GAAGF,OAAO;IAEvB,IAAI,CAACN,aAAa,CAAC,IAAIU,oCAAmB,CAAC,IAAI,CAACR,OAAO,CAACC,WAAW,CAAC,CAAC,EAAE,IAAI,CAACC,iBAAiB,CAAC,CAAC,CAAC,CAAC;EACnG;EAEAO,iBAAiBA,CAAA,EAAG;IAClB,IAAI,CAACZ,MAAM,CAAC,CAAC;EACf;EAEAA,MAAMA,CAAA,EAAG;IACP,IAAI,IAAI,CAACD,MAAM,IAAI,IAAI,CAACU,QAAQ,EAAE;MAChC,MAAMI,EAAE,gBAAGC,cAAK,CAACC,aAAa,CAACC,aAAI,EAAE;QACnCnB,KAAK,EAAE,IAAI,CAACE,MAAM;QAClBQ,OAAO,EAAE,IAAI,CAACE,QAAQ;QACtBC,eAAe,EAAE,IAAI,CAACA,eAAe,CAACO,IAAI,CAAC,IAAI;MACjD,CAAC,CAAC;MAEF,IAAI,CAAC,IAAI,CAACrB,KAAK,EAAE;QACf,IAAI,CAACA,KAAK,GAAG,IAAAsB,kBAAU,EAAC,IAAI,CAAC;MAC/B;MACA,IAAI,CAACtB,KAAK,CAACI,MAAM,CAACa,EAAE,CAAC;MACrBM,cAAc,CAAC,MAAM;QACnB,IAAAC,yBAAU,EAAC,IAAI,CAAC;MAClB,CAAC,CAAC;IACJ;EACF;EAEAC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACzB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAAC0B,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAC,OAAA,GAAA/B,mBAAA","ignoreList":[]}

package/lib/main.js

@@ -1,64 +1,34 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-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 = void 0;
 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");
-
-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 Main = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Main, _React$Component);
-
-  var _super = _createSuper(Main);
-
-  function Main() {
-    (0, _classCallCheck2["default"])(this, Main);
-    return _super.apply(this, arguments);
+class Main extends _react.default.Component {
+  render() {
+    const {
+      model
+    } = this.props;
+    const {
+      extraCSSRules
+    } = model;
+    return /*#__PURE__*/_react.default.createElement(_renderUi.UiLayout, {
+      extraCSSRules: extraCSSRules
+    }, model.prompt && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Boilerplate Item"), /*#__PURE__*/_react.default.createElement(_renderUi.PreviewPrompt, {
+      prompt: model.prompt
+    })));
   }
-
-  (0, _createClass2["default"])(Main, [{
-    key: "render",
-    value: function render() {
-      var model = this.props.model;
-      var extraCSSRules = model.extraCSSRules;
-      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
-        extraCSSRules: extraCSSRules
-      }, model.prompt && /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Boilerplate Item"), /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
-        prompt: model.prompt
-      })));
-    }
-  }]);
-  return Main;
-}(_react["default"].Component);
-
-exports["default"] = Main;
-(0, _defineProperty2["default"])(Main, "propTypes", {
-  model: _propTypes["default"].object,
-  session: _propTypes["default"].object,
-  onSessionChange: _propTypes["default"].func.isRequired
+}
+exports.default = Main;
+(0, _defineProperty2.default)(Main, "propTypes", {
+  model: _propTypes.default.object,
+  session: _propTypes.default.object,
+  onSessionChange: _propTypes.default.func.isRequired
 });
-(0, _defineProperty2["default"])(Main, "defaultProps", {});
+(0, _defineProperty2.default)(Main, "defaultProps", {});
 //# sourceMappingURL=main.js.map

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["Main","model","props","extraCSSRules","prompt","React","Component","PropTypes","object","session","onSessionChange","func","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;;;;;IAEqBA,I;;;;;;;;;;;;WASnB,kBAAS;AACP,UAAQC,KAAR,GAAkB,KAAKC,KAAvB,CAAQD,KAAR;AACA,UAAQE,aAAR,GAA0BF,KAA1B,CAAQE,aAAR;AAEA,0BACE,gCAAC,kBAAD;AAAU,QAAA,aAAa,EAAEA;AAAzB,SACGF,KAAK,CAACG,MAAN,iBACC,0DACE,8DADF,eAEE,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAEH,KAAK,CAACG;AAA7B,QAFF,CAFJ,CADF;AAUD;;;EAvB+BC,kBAAMC,S;;;iCAAnBN,I,eACA;AACjBC,EAAAA,KAAK,EAAEM,sBAAUC,MADA;AAEjBC,EAAAA,OAAO,EAAEF,sBAAUC,MAFF;AAGjBE,EAAAA,eAAe,EAAEH,sBAAUI,IAAV,CAAeC;AAHf,C;iCADAZ,I,kBAOG,E","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\n\nexport default class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onSessionChange: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { model } = this.props;\n    const { extraCSSRules } = model;\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        {model.prompt && (\n          <div>\n            <p>Boilerplate Item</p>\n            <PreviewPrompt prompt={model.prompt} />\n          </div>\n        )}\n      </UiLayout>\n    );\n  }\n}\n"],"file":"main.js"}
+{"version":3,"file":"main.js","names":["_react","_interopRequireDefault","require","_propTypes","_renderUi","Main","React","Component","render","model","props","extraCSSRules","default","createElement","UiLayout","prompt","PreviewPrompt","exports","_defineProperty2","PropTypes","object","session","onSessionChange","func","isRequired"],"sources":["../src/main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { PreviewPrompt, UiLayout } from '@pie-lib/render-ui';\n\nexport default class Main extends React.Component {\n  static propTypes = {\n    model: PropTypes.object,\n    session: PropTypes.object,\n    onSessionChange: PropTypes.func.isRequired,\n  };\n\n  static defaultProps = {};\n\n  render() {\n    const { model } = this.props;\n    const { extraCSSRules } = model;\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules}>\n        {model.prompt && (\n          <div>\n            <p>Boilerplate Item</p>\n            <PreviewPrompt prompt={model.prompt} />\n          </div>\n        )}\n      </UiLayout>\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAEe,MAAMG,IAAI,SAASC,cAAK,CAACC,SAAS,CAAC;EAShDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC;IAAM,CAAC,GAAG,IAAI,CAACC,KAAK;IAC5B,MAAM;MAAEC;IAAc,CAAC,GAAGF,KAAK;IAE/B,oBACET,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,SAAA,CAAAU,QAAQ;MAACH,aAAa,EAAEA;IAAc,GACpCF,KAAK,CAACM,MAAM,iBACXf,MAAA,CAAAY,OAAA,CAAAC,aAAA,2BACEb,MAAA,CAAAY,OAAA,CAAAC,aAAA,YAAG,kBAAmB,CAAC,eACvBb,MAAA,CAAAY,OAAA,CAAAC,aAAA,CAACT,SAAA,CAAAY,aAAa;MAACD,MAAM,EAAEN,KAAK,CAACM;IAAO,CAAE,CACnC,CAEC,CAAC;EAEf;AACF;AAACE,OAAA,CAAAL,OAAA,GAAAP,IAAA;AAAA,IAAAa,gBAAA,CAAAN,OAAA,EAxBoBP,IAAI,eACJ;EACjBI,KAAK,EAAEU,kBAAS,CAACC,MAAM;EACvBC,OAAO,EAAEF,kBAAS,CAACC,MAAM;EACzBE,eAAe,EAAEH,kBAAS,CAACI,IAAI,CAACC;AAClC,CAAC;AAAA,IAAAN,gBAAA,CAAAN,OAAA,EALkBP,IAAI,kBAOD,CAAC,CAAC","ignoreList":[]}

package/lib/print.js

@@ -1,43 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = 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"));
-
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
-
+exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
+var _client = require("react-dom/client");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
-
 var _main = _interopRequireDefault(require("./main"));
-
 var _mathRendering = require("@pie-lib/math-rendering");
-
 var _debug = _interopRequireDefault(require("debug"));
+const log = (0, _debug.default)('pie-element:multiple-choice:print');
 
-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 log = (0, _debug["default"])('pie-element:multiple-choice:print');
 /**
  * Live in same package as main element - so we can access some of the shared comps!
  *
@@ -46,35 +21,30 @@ var log = (0, _debug["default"])('pie-element:multiple-choice:print');
  * - get configure/controller building
  */
 
-var preparePrintModel = function preparePrintModel(model, opts) {
+const preparePrintModel = model => {
   return model;
 };
-
-var BoilerPlateItemTypePrint = /*#__PURE__*/function (_HTMLElement) {
-  (0, _inherits2["default"])(BoilerPlateItemTypePrint, _HTMLElement);
-
-  var _super = _createSuper(BoilerPlateItemTypePrint);
-
-  function BoilerPlateItemTypePrint() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, BoilerPlateItemTypePrint);
-    _this = _super.call(this);
-    _this._options = null;
-    _this._model = null;
-    _this._session = [];
-    _this._rerender = (0, _debounce["default"])(function () {
-      if (_this._model && _this._session) {
-        var printModel = preparePrintModel(_this._model, _this._options);
-
-        var element = _this._options && /*#__PURE__*/_react["default"].createElement(_main["default"], {
+class BoilerPlateItemTypePrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = (0, _debounce.default)(() => {
+      if (this._model && this._session) {
+        const printModel = preparePrintModel(this._model, this._options);
+        const element = this._options && /*#__PURE__*/_react.default.createElement(_main.default, {
           model: printModel,
           session: {}
         });
-
-        _reactDom["default"].render(element, (0, _assertThisInitialized2["default"])(_this), function () {
+        if (!this._root) {
+          this._root = (0, _client.createRoot)(this);
+        }
+        this._root.render(element);
+        queueMicrotask(() => {
           log('render complete - render math');
-          (0, _mathRendering.renderMath)((0, _assertThisInitialized2["default"])(_this));
+          (0, _mathRendering.renderMath)(this);
         });
       } else {
         log('skip');
@@ -83,27 +53,20 @@ var BoilerPlateItemTypePrint = /*#__PURE__*/function (_HTMLElement) {
       leading: false,
       trailing: true
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(BoilerPlateItemTypePrint, [{
-    key: "options",
-    set: function set(o) {
-      this._options = o;
-    }
-  }, {
-    key: "model",
-    set: function set(s) {
-      this._model = s;
-
-      this._rerender();
+  set options(o) {
+    this._options = o;
+  }
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+  connectedCallback() {}
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
     }
-  }, {
-    key: "connectedCallback",
-    value: function connectedCallback() {}
-  }]);
-  return BoilerPlateItemTypePrint;
-}( /*#__PURE__*/(0, _wrapNativeSuper2["default"])(HTMLElement));
-
-exports["default"] = BoilerPlateItemTypePrint;
+  }
+}
+exports.default = BoilerPlateItemTypePrint;
 //# sourceMappingURL=print.js.map

package/lib/print.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/print.js"],"names":["log","preparePrintModel","model","opts","BoilerPlateItemTypePrint","_options","_model","_session","_rerender","printModel","element","React","createElement","Main","session","ReactDOM","render","leading","trailing","o","s","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,mCAAN,CAAZ;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,KAAD,EAAQC,IAAR,EAAiB;AACzC,SAAOD,KAAP;AACD,CAFD;;IAIqBE,wB;;;;;AACnB,sCAAc;AAAA;;AAAA;AACZ;AACA,UAAKC,QAAL,GAAgB,IAAhB;AACA,UAAKC,MAAL,GAAc,IAAd;AACA,UAAKC,QAAL,GAAgB,EAAhB;AACA,UAAKC,SAAL,GAAiB,0BACf,YAAM;AACJ,UAAI,MAAKF,MAAL,IAAe,MAAKC,QAAxB,EAAkC;AAChC,YAAME,UAAU,GAAGR,iBAAiB,CAAC,MAAKK,MAAN,EAAc,MAAKD,QAAnB,CAApC;;AAEA,YAAMK,OAAO,GACX,MAAKL,QAAL,iBACAM,kBAAMC,aAAN,CAAoBC,gBAApB,EAA0B;AACxBX,UAAAA,KAAK,EAAEO,UADiB;AAExBK,UAAAA,OAAO,EAAE;AAFe,SAA1B,CAFF;;AAOAC,6BAASC,MAAT,CAAgBN,OAAhB,kDAA+B,YAAM;AACnCV,UAAAA,GAAG,CAAC,+BAAD,CAAH;AACA;AACD,SAHD;AAID,OAdD,MAcO;AACLA,QAAAA,GAAG,CAAC,MAAD,CAAH;AACD;AACF,KAnBc,EAoBf,EApBe,EAqBf;AAAEiB,MAAAA,OAAO,EAAE,KAAX;AAAkBC,MAAAA,QAAQ,EAAE;AAA5B,KArBe,CAAjB;AALY;AA4Bb;;;;SACD,aAAYC,CAAZ,EAAe;AACb,WAAKd,QAAL,GAAgBc,CAAhB;AACD;;;SAED,aAAUC,CAAV,EAAa;AACX,WAAKd,MAAL,GAAcc,CAAd;;AACA,WAAKZ,SAAL;AACD;;;WAED,6BAAoB,CAAE;;;kDAvC8Ba,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model, opts) => {\n  return model;\n};\n\nexport default class BoilerPlateItemTypePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n            });\n\n          ReactDOM.render(element, this, () => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n}\n"],"file":"print.js"}
+{"version":3,"file":"print.js","names":["_react","_interopRequireDefault","require","_client","_debounce","_main","_mathRendering","_debug","log","debug","preparePrintModel","model","BoilerPlateItemTypePrint","HTMLElement","constructor","_options","_model","_session","_root","_rerender","debounce","printModel","element","React","createElement","Main","session","createRoot","render","queueMicrotask","renderMath","leading","trailing","options","o","s","connectedCallback","disconnectedCallback","unmount","exports","default"],"sources":["../src/print.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport debounce from 'lodash/debounce';\nimport Main from './main';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport debug from 'debug';\n\nconst log = debug('pie-element:multiple-choice:print');\n\n/**\n * Live in same package as main element - so we can access some of the shared comps!\n *\n * - update pslb to build print if src/print.js is there\n * - update demo el\n * - get configure/controller building\n */\n\nconst preparePrintModel = (model) => {\n  return model;\n};\n\nexport default class BoilerPlateItemTypePrint extends HTMLElement {\n  constructor() {\n    super();\n    this._options = null;\n    this._model = null;\n    this._session = [];\n    this._root = null;\n    this._rerender = debounce(\n      () => {\n        if (this._model && this._session) {\n          const printModel = preparePrintModel(this._model, this._options);\n\n          const element =\n            this._options &&\n            React.createElement(Main, {\n              model: printModel,\n              session: {},\n            });\n\n          if (!this._root) {\n            this._root = createRoot(this);\n          }\n          this._root.render(element);\n          queueMicrotask(() => {\n            log('render complete - render math');\n            renderMath(this);\n          });\n        } else {\n          log('skip');\n        }\n      },\n      50,\n      { leading: false, trailing: true },\n    );\n  }\n  set options(o) {\n    this._options = o;\n  }\n\n  set model(s) {\n    this._model = s;\n    this._rerender();\n  }\n\n  connectedCallback() {}\n\n  disconnectedCallback() {\n    if (this._root) {\n      this._root.unmount();\n    }\n  }\n}\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,OAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAH,sBAAA,CAAAC,OAAA;AACA,IAAAG,KAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,cAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AAEA,MAAMM,GAAG,GAAG,IAAAC,cAAK,EAAC,mCAAmC,CAAC;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,iBAAiB,GAAIC,KAAK,IAAK;EACnC,OAAOA,KAAK;AACd,CAAC;AAEc,MAAMC,wBAAwB,SAASC,WAAW,CAAC;EAChEC,WAAWA,CAAA,EAAG;IACZ,KAAK,CAAC,CAAC;IACP,IAAI,CAACC,QAAQ,GAAG,IAAI;IACpB,IAAI,CAACC,MAAM,GAAG,IAAI;IAClB,IAAI,CAACC,QAAQ,GAAG,EAAE;IAClB,IAAI,CAACC,KAAK,GAAG,IAAI;IACjB,IAAI,CAACC,SAAS,GAAG,IAAAC,iBAAQ,EACvB,MAAM;MACJ,IAAI,IAAI,CAACJ,MAAM,IAAI,IAAI,CAACC,QAAQ,EAAE;QAChC,MAAMI,UAAU,GAAGX,iBAAiB,CAAC,IAAI,CAACM,MAAM,EAAE,IAAI,CAACD,QAAQ,CAAC;QAEhE,MAAMO,OAAO,GACX,IAAI,CAACP,QAAQ,iBACbQ,cAAK,CAACC,aAAa,CAACC,aAAI,EAAE;UACxBd,KAAK,EAAEU,UAAU;UACjBK,OAAO,EAAE,CAAC;QACZ,CAAC,CAAC;QAEJ,IAAI,CAAC,IAAI,CAACR,KAAK,EAAE;UACf,IAAI,CAACA,KAAK,GAAG,IAAAS,kBAAU,EAAC,IAAI,CAAC;QAC/B;QACA,IAAI,CAACT,KAAK,CAACU,MAAM,CAACN,OAAO,CAAC;QAC1BO,cAAc,CAAC,MAAM;UACnBrB,GAAG,CAAC,+BAA+B,CAAC;UACpC,IAAAsB,yBAAU,EAAC,IAAI,CAAC;QAClB,CAAC,CAAC;MACJ,CAAC,MAAM;QACLtB,GAAG,CAAC,MAAM,CAAC;MACb;IACF,CAAC,EACD,EAAE,EACF;MAAEuB,OAAO,EAAE,KAAK;MAAEC,QAAQ,EAAE;IAAK,CACnC,CAAC;EACH;EACA,IAAIC,OAAOA,CAACC,CAAC,EAAE;IACb,IAAI,CAACnB,QAAQ,GAAGmB,CAAC;EACnB;EAEA,IAAIvB,KAAKA,CAACwB,CAAC,EAAE;IACX,IAAI,CAACnB,MAAM,GAAGmB,CAAC;IACf,IAAI,CAAChB,SAAS,CAAC,CAAC;EAClB;EAEAiB,iBAAiBA,CAAA,EAAG,CAAC;EAErBC,oBAAoBA,CAAA,EAAG;IACrB,IAAI,IAAI,CAACnB,KAAK,EAAE;MACd,IAAI,CAACA,KAAK,CAACoB,OAAO,CAAC,CAAC;IACtB;EACF;AACF;AAACC,OAAA,CAAAC,OAAA,GAAA5B,wBAAA","ignoreList":[]}