@pie-element/drawing-response 10.3.4-next.3 → 11.0.0-beta.1

package/lib/drawing-response/container.js

@@ -1,89 +1,79 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Container = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-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.Container = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _styles = require("@material-ui/core/styles");
-
+var _styles = require("@mui/material/styles");
 var _translator = _interopRequireDefault(require("@pie-lib/translator"));
-
 var _constants = _interopRequireDefault(require("./constants"));
-
 var _button = _interopRequireDefault(require("./button"));
-
 var _drawablePalette = _interopRequireDefault(require("./drawable-palette"));
-
 var _drawableMain = _interopRequireDefault(require("./drawable-main"));
-
 var _drawableText = _interopRequireDefault(require("./drawable-text"));
-
 var _icon = _interopRequireDefault(require("./icon"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-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 TOOLS = _constants["default"].tools;
-var translator = _translator["default"].translator;
-var ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(function (c) {
-  return {
-    value: c,
-    label: c
-  };
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  tools: TOOLS
+} = _constants.default;
+const {
+  translator
+} = _translator.default;
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2)
+}));
+const Box = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  border: '1px solid #E0E1E6',
+  borderRadius: '5px',
+  marginTop: theme.spacing(2),
+  backgroundColor: '#ECEDF1'
+}));
+const DrawableHeight = (0, _styles.styled)('div')({
+  minHeight: 350,
+  backgroundColor: '#fff'
 });
-
-var Container = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(Container, _Component);
-
-  var _super = _createSuper(Container);
-
-  function Container(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Container);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "checkIfToolIsDisabled", function (type) {
-      if (_this.props.disabled) return true;
-      var toolActive = _this.state.toolActive; // Text will never be disabled since on each "Text Entry" click a new text is added
-
+const Toolbar = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  borderBottom: '1px solid #E0E1E6',
+  borderTopLeftRadius: '5px',
+  borderTopRightRadius: '5px',
+  padding: '12px 8px 4px',
+  boxSizing: 'border-box',
+  maxWidth: 'calc(100% - 163px)',
+  // 163px is the width set on undoControls
+  '& button': {
+    marginBottom: theme.spacing(1)
+  }
+}));
+const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(c => ({
+  value: c,
+  label: c
+}));
+class Container extends _react.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "checkIfToolIsDisabled", type => {
+      if (this.props.disabled) return true;
+      const {
+        toolActive
+      } = this.state;
+      // Text will never be disabled since on each "Text Entry" click a new text is added
       if (type === 'Text') {
         return false;
       }
-
       return type === toolActive.type;
     });
-    var TextEntry = new _drawableText["default"]();
-    _this.state = {
+    const TextEntry = new _drawableText.default();
+    this.state = {
       scale: 1,
       drawableDimensions: {
         height: 0,
@@ -100,309 +90,238 @@ var Container = /*#__PURE__*/function (_Component) {
       }, {
         value: 'lightyellow',
         label: 'light yellow'
-      }].concat((0, _toConsumableArray2["default"])(ROGVAIV)),
+      }, ...ROGVAIV],
       outlineColor: 'black',
       outlineColorList: ROGVAIV,
       paintColor: 'red',
       paintColorList: ROGVAIV,
-      TextEntry: TextEntry
+      TextEntry
     };
-    return _this;
   }
-
-  (0, _createClass2["default"])(Container, [{
-    key: "setTranslatedState",
-    value: function setTranslatedState(language) {
-      var translatedROGVAIV = ROGVAIV.map(function (c) {
-        return {
-          value: c.value,
-          label: translator.t("drawingResponse.".concat(c.label), {
-            lng: language
-          })
-        };
-      });
-      this.setState({
-        fillColorList: [{
-          value: 'transparent',
-          label: translator.t('drawingResponse.noFill', {
-            lng: language
-          })
-        }, {
-          value: 'lightblue',
-          label: translator.t('drawingResponse.lightblue', {
-            lng: language
-          })
-        }, {
-          value: 'lightyellow',
-          label: translator.t('drawingResponse.lightyellow', {
-            lng: language
-          })
-        }].concat((0, _toConsumableArray2["default"])(translatedROGVAIV)),
-        paintColor: translator.t('drawingResponse.red', {
+  setTranslatedState(language) {
+    const translatedROGVAIV = ROGVAIV.map(c => ({
+      value: c.value,
+      label: translator.t(`drawingResponse.${c.label}`, {
+        lng: language
+      })
+    }));
+    this.setState({
+      fillColorList: [{
+        value: 'transparent',
+        label: translator.t('drawingResponse.noFill', {
           lng: language
-        }),
-        outlineColorList: translatedROGVAIV,
-        paintColorList: translatedROGVAIV
-      });
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(props) {
-      var language = props.language;
-      this.setTranslatedState(language);
-    }
-  }, {
-    key: "setDimensions",
-    value: function setDimensions() {
-      var _this2 = this;
-
-      var checkExist = setInterval(function () {
-        try {
-          var _this2$drawable$getBo = _this2.drawable.getBoundingClientRect(),
-              height = _this2$drawable$getBo.height,
-              width = _this2$drawable$getBo.width;
-
-          var effectiveWidth = _this2.props.session.width || width;
-
-          if (height !== 0 && width !== 0) {
-            _this2.setState({
-              drawableDimensions: {
-                height: height,
-                width: effectiveWidth
-              }
+        })
+      }, {
+        value: 'lightblue',
+        label: translator.t('drawingResponse.lightblue', {
+          lng: language
+        })
+      }, {
+        value: 'lightyellow',
+        label: translator.t('drawingResponse.lightyellow', {
+          lng: language
+        })
+      }, ...translatedROGVAIV],
+      paintColor: translator.t('drawingResponse.red', {
+        lng: language
+      }),
+      outlineColorList: translatedROGVAIV,
+      paintColorList: translatedROGVAIV
+    });
+  }
+  UNSAFE_componentWillReceiveProps(props) {
+    const {
+      language
+    } = props;
+    this.setTranslatedState(language);
+  }
+  setDimensions() {
+    const checkExist = setInterval(() => {
+      try {
+        const {
+          height,
+          width
+        } = this.drawable.getBoundingClientRect();
+        const effectiveWidth = this.props.session.width || width;
+        if (height !== 0 && width !== 0) {
+          this.setState({
+            drawableDimensions: {
+              height,
+              width: effectiveWidth
+            }
+          });
+        }
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn('setDimensions Error: ', e);
+      } finally {
+        clearInterval(checkExist);
+      }
+    }, 100);
+  }
+  componentDidMount() {
+    const {
+      language
+    } = this.props;
+    this.setTranslatedState(language);
+    this.setDimensions();
+    this.observer = new MutationObserver(mutations => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText;
+        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
+        const zoomParsed = zoom?.replace(/\s/g, '');
+        if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100
             });
           }
-        } catch (e) {
-          // eslint-disable-next-line no-console
-          console.warn('setDimensions Error: ', e);
-        } finally {
-          clearInterval(checkExist);
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1
+          });
         }
-      }, 100);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this3 = this;
+      });
+    });
 
-      var language = this.props.language;
-      this.setTranslatedState(language);
+    // Use ResizeObserver to detect when the drawable container becomes visible
+    // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.
+    // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.
+    this.resizeObserver = new ResizeObserver(() => {
       this.setDimensions();
-      this.observer = new MutationObserver(function (mutations) {
-        mutations.forEach(function () {
-          var _document$getElementB, _document$getElementB2;
-
-          var target = (_document$getElementB = document.getElementById('question-container')) === null || _document$getElementB === void 0 ? void 0 : (_document$getElementB2 = _document$getElementB.style) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.cssText;
-          var zoom = target === null || target === void 0 ? void 0 : target.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));
-          var zoomParsed = zoom === null || zoom === void 0 ? void 0 : zoom.replace(/\s/g, '');
-
-          if (zoomParsed) {
-            var newScale = parseFloat(zoomParsed) / 100;
-
-            if (newScale !== _this3.state.scale) {
-              _this3.setState({
-                scale: parseFloat(zoomParsed) / 100
-              });
-            }
-          } else if (!zoomParsed && _this3.state.scale !== 1) {
-            _this3.setState({
-              scale: 1
-            });
-          }
-        });
-      }); // Use ResizeObserver to detect when the drawable container becomes visible
-      // (e.g., after switching from build to item preview in New Item Bank) and trigger dimension calculation.
-      // This helps ensure the canvas is properly sized even when componentDidMount is not re-triggered.
-
-      this.resizeObserver = new ResizeObserver(function () {
-        _this3.setDimensions();
+    });
+    if (this.drawable) {
+      this.resizeObserver.observe(this.drawable);
+    }
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, {
+        attributes: true,
+        attributeFilter: ['style']
       });
-
-      if (this.drawable) {
-        this.resizeObserver.observe(this.drawable);
-      }
-
-      var target = document.getElementById('question-container');
-
-      if (target) {
-        this.observer.observe(target, {
-          attributes: true,
-          attributeFilter: ['style']
-        });
-      }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var _this$observer, _this$resizeObserver;
-
-      var TextEntry = this.state.TextEntry;
-      TextEntry.removeEventListeners();
-      (_this$observer = this.observer) === null || _this$observer === void 0 ? void 0 : _this$observer.disconnect();
-      (_this$resizeObserver = this.resizeObserver) === null || _this$resizeObserver === void 0 ? void 0 : _this$resizeObserver.disconnect();
+  }
+  componentWillUnmount() {
+    const {
+      TextEntry
+    } = this.state;
+    TextEntry.removeEventListeners();
+    this.observer?.disconnect();
+    this.resizeObserver?.disconnect();
+  }
+  handleMakeToolActive(tool) {
+    const {
+      TextEntry
+    } = this.state;
+    const {
+      type
+    } = tool;
+    const {
+      language
+    } = this.props;
+    if (type !== 'Text') {
+      this.setState({
+        toolActive: tool
+      });
+    } else {
+      TextEntry.addNewTextEntry(language);
+      // Force update
+      this.setState({
+        updatedAt: new Date()
+      });
     }
-  }, {
-    key: "handleMakeToolActive",
-    value: function handleMakeToolActive(tool) {
-      var TextEntry = this.state.TextEntry;
-      var type = tool.type;
-      var language = this.props.language;
-
-      if (type !== 'Text') {
-        this.setState({
-          toolActive: tool
-        });
-      } else {
-        TextEntry.addNewTextEntry(language); // Force update
-
-        this.setState({
-          updatedAt: new Date()
-        });
+  }
+  handleColorChange(type, color) {
+    const cType = `${type}Color`;
+    this.setState({
+      [cType]: color
+    });
+  }
+  render() {
+    const {
+      disabled,
+      imageUrl,
+      imageDimensions,
+      onSessionChange,
+      session,
+      backgroundImageEnabled,
+      language
+    } = this.props;
+    const {
+      drawableDimensions,
+      toolActive,
+      fillColor,
+      fillColorList,
+      outlineColor,
+      outlineColorList,
+      paintColor,
+      paintColorList,
+      TextEntry
+    } = this.state;
+    const heightToUse = drawableDimensions.height * this.state.scale;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, !disabled && /*#__PURE__*/_react.default.createElement(_drawablePalette.default, {
+      fillColor: fillColor,
+      fillList: fillColorList,
+      outlineColor: outlineColor,
+      outlineList: outlineColorList,
+      paintColor: paintColor,
+      paintList: paintColorList,
+      onFillColorChange: color => this.handleColorChange('fill', color),
+      onOutlineColorChange: color => this.handleColorChange('outline', color),
+      onPaintColorChange: color => this.handleColorChange('paint', color),
+      language: language
+    }), /*#__PURE__*/_react.default.createElement(Box, null, /*#__PURE__*/_react.default.createElement(Toolbar, null, TOOLS.map(tool => {
+      const {
+        type,
+        label,
+        icon
+      } = tool;
+      return /*#__PURE__*/_react.default.createElement(_button.default, {
+        title: label,
+        key: type,
+        disabled: this.checkIfToolIsDisabled(type),
+        onClick: () => this.handleMakeToolActive(tool),
+        label: /*#__PURE__*/_react.default.createElement(_icon.default, {
+          path: icon
+        })
+      });
+    })), /*#__PURE__*/_react.default.createElement(DrawableHeight, {
+      ref: drawable => {
+        this.drawable = drawable;
+      },
+      style: {
+        height: heightToUse,
+        maxHeight: heightToUse,
+        overflow: 'scroll'
       }
-    }
-  }, {
-    key: "handleColorChange",
-    value: function handleColorChange(type, color) {
-      var cType = "".concat(type, "Color");
-      this.setState((0, _defineProperty2["default"])({}, cType, color));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this4 = this;
-
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          disabled = _this$props.disabled,
-          imageUrl = _this$props.imageUrl,
-          imageDimensions = _this$props.imageDimensions,
-          onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session,
-          backgroundImageEnabled = _this$props.backgroundImageEnabled,
-          language = _this$props.language;
-      var _this$state = this.state,
-          drawableDimensions = _this$state.drawableDimensions,
-          toolActive = _this$state.toolActive,
-          fillColor = _this$state.fillColor,
-          fillColorList = _this$state.fillColorList,
-          outlineColor = _this$state.outlineColor,
-          outlineColorList = _this$state.outlineColorList,
-          paintColor = _this$state.paintColor,
-          paintColorList = _this$state.paintColorList,
-          TextEntry = _this$state.TextEntry;
-      var heightToUse = drawableDimensions.height * this.state.scale;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, !disabled && /*#__PURE__*/_react["default"].createElement(_drawablePalette["default"], {
-        fillColor: fillColor,
-        fillList: fillColorList,
-        outlineColor: outlineColor,
-        outlineList: outlineColorList,
-        paintColor: paintColor,
-        paintList: paintColorList,
-        onFillColorChange: function onFillColorChange(color) {
-          return _this4.handleColorChange('fill', color);
-        },
-        onOutlineColorChange: function onOutlineColorChange(color) {
-          return _this4.handleColorChange('outline', color);
-        },
-        onPaintColorChange: function onPaintColorChange(color) {
-          return _this4.handleColorChange('paint', color);
-        },
-        language: language
-      }), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.box
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.toolbar
-      }, TOOLS.map(function (tool) {
-        var type = tool.type,
-            label = tool.label,
-            icon = tool.icon;
-        return /*#__PURE__*/_react["default"].createElement(_button["default"], {
-          title: label,
-          key: type,
-          disabled: _this4.checkIfToolIsDisabled(type),
-          onClick: function onClick() {
-            return _this4.handleMakeToolActive(tool);
-          },
-          label: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-            path: icon
-          })
-        });
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(drawable) {
-          _this4.drawable = drawable;
-        },
-        className: classes.drawableHeight,
-        style: {
-          height: heightToUse,
-          maxHeight: heightToUse,
-          overflow: 'scroll'
-        }
-      }, /*#__PURE__*/_react["default"].createElement(_drawableMain["default"], {
-        scale: this.state.scale,
-        session: session,
-        disabled: disabled,
-        onSessionChange: onSessionChange,
-        fillColor: fillColor,
-        outlineColor: outlineColor,
-        paintColor: paintColor,
-        imageUrl: imageUrl,
-        drawableDimensions: drawableDimensions,
-        imageDimensions: imageDimensions,
-        toolActive: toolActive,
-        TextEntry: TextEntry,
-        backgroundImageEnabled: backgroundImageEnabled,
-        language: language
-      }))));
-    }
-  }]);
-  return Container;
-}(_react.Component);
-
+    }, /*#__PURE__*/_react.default.createElement(_drawableMain.default, {
+      scale: this.state.scale,
+      session: session,
+      disabled: disabled,
+      onSessionChange: onSessionChange,
+      fillColor: fillColor,
+      outlineColor: outlineColor,
+      paintColor: paintColor,
+      imageUrl: imageUrl,
+      drawableDimensions: drawableDimensions,
+      imageDimensions: imageDimensions,
+      toolActive: toolActive,
+      TextEntry: TextEntry,
+      backgroundImageEnabled: backgroundImageEnabled,
+      language: language
+    }))));
+  }
+}
 exports.Container = Container;
-(0, _defineProperty2["default"])(Container, "propTypes", {
-  classes: _propTypes["default"].object.isRequired,
-  disabled: _propTypes["default"].bool,
-  session: _propTypes["default"].object.isRequired,
-  onSessionChange: _propTypes["default"].func.isRequired,
-  imageDimensions: _propTypes["default"].object.isRequired,
-  imageUrl: _propTypes["default"].string.isRequired,
-  backgroundImageEnabled: _propTypes["default"].bool.isRequired,
-  language: _propTypes["default"].string
+(0, _defineProperty2.default)(Container, "propTypes", {
+  disabled: _propTypes.default.bool,
+  session: _propTypes.default.object.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired,
+  imageDimensions: _propTypes.default.object.isRequired,
+  imageUrl: _propTypes.default.string.isRequired,
+  backgroundImageEnabled: _propTypes.default.bool.isRequired,
+  language: _propTypes.default.string
 });
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit * 2
-    },
-    box: {
-      border: '1px solid #E0E1E6',
-      borderRadius: '5px',
-      marginTop: theme.spacing.unit * 2,
-      backgroundColor: '#ECEDF1'
-    },
-    drawableHeight: {
-      minHeight: 350,
-      backgroundColor: '#fff'
-    },
-    toolbar: {
-      borderBottom: '1px solid #E0E1E6',
-      borderTopLeftRadius: '5px',
-      borderTopRightRadius: '5px',
-      padding: '12px 8px 4px',
-      boxSizing: 'border-box',
-      maxWidth: 'calc(100% - 163px)',
-      // 163px is the width set on undoControls
-      '& button': {
-        marginBottom: theme.spacing.unit
-      }
-    }
-  };
-};
-
-var _default = (0, _styles.withStyles)(styles)(Container);
-
-exports["default"] = _default;
+var _default = exports.default = Container;
 //# sourceMappingURL=container.js.map