andoncloud-widget-preview 1.0.4 → 1.1.0

package/dist/index.js

@@ -8,6 +8,8 @@ var react = require('@emotion/react');
 var reactDom = require('react-dom');
 var require$$0 = require('react-is');
 var iconsMaterial = require('@mui/icons-material');
+var dragIcon_svg = require('../node_modules/andoncloud-dashboard-toolkit/dist/assets/drag-icon.svg');
+var require$$1 = require('../node_modules/andoncloud-dashboard-toolkit/dist/assets/resize-icon.svg');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,6 +20,8 @@ var react__default = /*#__PURE__*/_interopDefaultLegacy(react);
 var reactDom__default = /*#__PURE__*/_interopDefaultLegacy(reactDom);
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
 var iconsMaterial__default = /*#__PURE__*/_interopDefaultLegacy(iconsMaterial);
+var dragIcon_svg__default = /*#__PURE__*/_interopDefaultLegacy(dragIcon_svg);
+var require$$1__default = /*#__PURE__*/_interopDefaultLegacy(require$$1);
 
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -69,6 +73,36 @@ function _createClass(Constructor, protoProps, staticProps) {
   return Constructor;
 }
 
+var matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230);/g;
+var htmlEntities = {
+  '&': '&',
+  '&': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+  '&nbsp;': ' ',
+  '&#160;': ' ',
+  '&copy;': '©',
+  '&#169;': '©',
+  '&reg;': '®',
+  '&#174;': '®',
+  '&hellip;': '…',
+  '&#8230;': '…'
+};
+
+var unescapeHtmlEntity = function unescapeHtmlEntity(m) {
+  return htmlEntities[m];
+};
+
+var unescape = function unescape(text) {
+  return text.replace(matchHtmlEntity, unescapeHtmlEntity);
+};
+
 function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$7(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -79,9 +113,10 @@ var defaultOptions = {
   transSupportBasicHtmlNodes: true,
   transWrapTextNodes: '',
   transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
-  useSuspense: true
+  useSuspense: true,
+  unescape: unescape
 };
-React__default["default"].createContext();
+React.createContext();
 function setDefaults() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   defaultOptions = _objectSpread$7(_objectSpread$7({}, defaultOptions), options);
@@ -1129,7 +1164,7 @@ var Translator = function (_EventEmitter) {
             } else {
               var pluralSuffix;
               if (needsPluralHandling) pluralSuffix = _this4.pluralResolver.getSuffix(code, options.count, options);
-              var zeroSuffix = '_zero';
+              var zeroSuffix = "".concat(_this4.options.pluralSeparator, "zero");
 
               if (needsPluralHandling) {
                 finalKeys.push(key + pluralSuffix);
@@ -2065,6 +2100,8 @@ var Connector = function (_EventEmitter) {
     _this.waitingReads = [];
     _this.maxParallelReads = options.maxParallelReads || 10;
     _this.readingCalls = 0;
+    _this.maxRetries = options.maxRetries >= 0 ? options.maxRetries : 5;
+    _this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
     _this.state = {};
     _this.queue = [];
 
@@ -2171,7 +2208,7 @@ var Connector = function (_EventEmitter) {
       var _this3 = this;
 
       var tried = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-      var wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 350;
+      var wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.retryTimeout;
       var callback = arguments.length > 5 ? arguments[5] : undefined;
       if (!lng.length) return callback(null, {});
 
@@ -2189,13 +2226,6 @@ var Connector = function (_EventEmitter) {
 
       this.readingCalls++;
       return this.backend[fcName](lng, ns, function (err, data) {
-        if (err && data && tried < 5) {
-          setTimeout(function () {
-            _this3.read.call(_this3, lng, ns, fcName, tried + 1, wait * 2, callback);
-          }, wait);
-          return;
-        }
-
         _this3.readingCalls--;
 
         if (_this3.waitingReads.length > 0) {
@@ -2204,6 +2234,13 @@ var Connector = function (_EventEmitter) {
           _this3.read(next.lng, next.ns, next.fcName, next.tried, next.wait, next.callback);
         }
 
+        if (err && data && tried < _this3.maxRetries) {
+          setTimeout(function () {
+            _this3.read.call(_this3, lng, ns, fcName, tried + 1, wait * 2, callback);
+          }, wait);
+          return;
+        }
+
         callback(err, data);
       });
     }
@@ -2439,7 +2476,7 @@ var I18n = function (_EventEmitter) {
         options = {};
       }
 
-      if (!options.defaultNS && options.ns) {
+      if (!options.defaultNS && options.defaultNS !== false && options.ns) {
         if (typeof options.ns === 'string') {
           options.defaultNS = options.ns;
         } else if (options.ns.indexOf('translation') < 0) {
@@ -2795,8 +2832,9 @@ var I18n = function (_EventEmitter) {
         options.lng = options.lng || fixedT.lng;
         options.lngs = options.lngs || fixedT.lngs;
         options.ns = options.ns || fixedT.ns;
+        options.keyPrefix = options.keyPrefix || keyPrefix || fixedT.keyPrefix;
         var keySeparator = _this5.options.keySeparator || '.';
-        var resultKey = keyPrefix ? "".concat(keyPrefix).concat(keySeparator).concat(key) : key;
+        var resultKey = options.keyPrefix ? "".concat(options.keyPrefix).concat(keySeparator).concat(key) : key;
         return _this5.t(resultKey, options);
       };
 
@@ -3019,9 +3057,11 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React__default$1 = _interopDefault(React__default["default"]);
 
 
+
 var reactIs = _interopDefault(require$$0__default["default"]);
 
 
+var resizeIcon = _interopDefault(require$$1__default["default"]);
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -3041,6 +3081,21 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
 function _taggedTemplateLiteralLoose(strings, raw) {
   if (!raw) {
     raw = strings.slice(0);
@@ -3050,8 +3105,69 @@ function _taggedTemplateLiteralLoose(strings, raw) {
   return strings;
 }
 
+var styles = {
+  buttons: {
+    paddingTop: function paddingTop(theme) {
+      return theme.spacing(2);
+    }
+  },
+  cancelButton: {
+    marginRight: '10px'
+  },
+  popper: {
+    '.MuiTooltip-tooltip': {
+      padding: '20px',
+      fontSize: '14px',
+      color: 'rgba(0, 0, 0, 0.75)',
+      borderRadius: '8px',
+      backgroundColor: 'white'
+    },
+    '.MuiTooltip-arrow': {
+      color: 'white'
+    }
+  }
+};
+
+var _excluded = ["children", "confirmMessage", "confirmButtonText", "cancelButtonText", "onCancel", "onConfirm"];
+
+var ConfirmTooltip = function ConfirmTooltip(_ref) {
+  var children = _ref.children,
+      confirmMessage = _ref.confirmMessage,
+      confirmButtonText = _ref.confirmButtonText,
+      cancelButtonText = _ref.cancelButtonText,
+      onCancel = _ref.onCancel,
+      onConfirm = _ref.onConfirm,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return React__default$1.createElement(material__default["default"].Tooltip, Object.assign({}, props, {
+    placement: "bottom-end",
+    title: React__default$1.createElement(material__default["default"].Box, null, React__default$1.createElement(material__default["default"].Typography, null, confirmMessage), React__default$1.createElement(material__default["default"].Stack, {
+      direction: "row",
+      justifyContent: "flex-end",
+      sx: styles.buttons
+    }, React__default$1.createElement(material__default["default"].Button, {
+      color: "secondary",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onCancel();
+      },
+      sx: styles.cancelButton
+    }, cancelButtonText), React__default$1.createElement(material__default["default"].Button, {
+      color: "error",
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onConfirm();
+      }
+    }, confirmButtonText))),
+    PopperProps: {
+      sx: styles.popper
+    },
+    arrow: true
+  }), children);
+};
+
 function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
+  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -3064,7 +3180,6 @@ function _extends$1() {
 
     return target;
   };
-
   return _extends$1.apply(this, arguments);
 }
 
@@ -3080,7 +3195,7 @@ function _taggedTemplateLiteral(strings, raw) {
   }));
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -3097,7 +3212,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 function _objectWithoutProperties(source, excluded) {
   if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var target = _objectWithoutPropertiesLoose$1(source, excluded);
   var key, i;
 
   if (Object.getOwnPropertySymbols) {
@@ -3211,11 +3326,10 @@ function _createClass(Constructor, protoProps, staticProps) {
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 
@@ -4474,7 +4588,7 @@ var GroupHeading = function GroupHeading(props) {
   }, innerProps));
 };
 
-var _excluded = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
+var _excluded$4 = ["innerRef", "isDisabled", "isHidden", "inputClassName"];
 var inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
       value = _ref.value,
@@ -4534,7 +4648,7 @@ var Input = function Input(props) {
       isDisabled = _cleanCommonProps.isDisabled,
       isHidden = _cleanCommonProps.isHidden,
       inputClassName = _cleanCommonProps.inputClassName,
-      innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded);
+      innerProps = _objectWithoutProperties(_cleanCommonProps, _excluded$4);
 
   return react__default["default"].jsx("div", {
     className: cx({
@@ -4806,7 +4920,7 @@ var defaultComponents = function defaultComponents(props) {
   return _objectSpread2(_objectSpread2({}, components), props.components);
 };
 
-var _excluded$4 = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
+var _excluded$5 = ["defaultInputValue", "defaultMenuIsOpen", "defaultValue", "inputValue", "menuIsOpen", "onChange", "onInputChange", "onMenuClose", "onMenuOpen", "value"];
 function useStateManager(_ref) {
   var _ref$defaultInputValu = _ref.defaultInputValue,
       defaultInputValue = _ref$defaultInputValu === void 0 ? '' : _ref$defaultInputValu,
@@ -4821,7 +4935,7 @@ function useStateManager(_ref) {
       propsOnMenuClose = _ref.onMenuClose,
       propsOnMenuOpen = _ref.onMenuOpen,
       propsValue = _ref.value,
-      restSelectProps = _objectWithoutProperties(_ref, _excluded$4);
+      restSelectProps = _objectWithoutProperties(_ref, _excluded$5);
 
   var _useState = React__default["default"].useState(propsInputValue !== undefined ? propsInputValue : defaultInputValue),
       _useState2 = _slicedToArray(_useState, 2),
@@ -5490,10 +5604,10 @@ var createFilter = function createFilter(config) {
   };
 };
 
-var _excluded$5 = ["innerRef"];
+var _excluded$6 = ["innerRef"];
 function DummyInput(_ref) {
   var innerRef = _ref.innerRef,
-      props = _objectWithoutProperties(_ref, _excluded$5);
+      props = _objectWithoutProperties(_ref, _excluded$6);
 
   // Remove animation props not meant for HTML elements
   var filteredProps = removeProps(props, 'onExited', 'in', 'enter', 'exit', 'appear');
@@ -6768,7 +6882,7 @@ var Select = /*#__PURE__*/function (_Component) {
       }
 
       if (isFocused && isDisabled && !prevProps.isDisabled) {
-        // ensure select state gets blurred in case Select is programatically disabled while focused
+        // ensure select state gets blurred in case Select is programmatically disabled while focused
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           isFocused: false
@@ -7778,7 +7892,7 @@ function _slicedToArray(arr, i) {
 module.exports = _slicedToArray, module.exports.__esModule = true, module.exports["default"] = module.exports;
 });
 
-unwrapExports(slicedToArray);
+var _slicedToArray$1 = unwrapExports(slicedToArray);
 
 var objectWithoutPropertiesLoose = createCommonjsModule(function (module) {
 function _objectWithoutPropertiesLoose(source, excluded) {
@@ -7919,7 +8033,7 @@ function _defineProperty(obj, key, value) {
 module.exports = _defineProperty, module.exports.__esModule = true, module.exports["default"] = module.exports;
 });
 
-unwrapExports(defineProperty);
+var _defineProperty$2 = unwrapExports(defineProperty);
 
 var StateManagedSelect = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var baseSelectProps = useStateManager(props);
@@ -7966,7 +8080,7 @@ function _possibleConstructorReturn$1(self, call) {
 }
 
 function _getPrototypeOf$1(o) {
-  _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf$1 = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf$1(o);
@@ -10546,24 +10660,481 @@ var SortableSelect = function SortableSelect(_ref) {
   });
 };
 
-var WidgetSettingsButton = function WidgetSettingsButton(_ref) {
-  var onClick = _ref.onClick;
-  return React__default$1.createElement(material__default["default"].Box, {
-    sx: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      borderBottomRightRadius: 15,
-      background: 'rgba(0,0,0,0.15)',
-      zIndex: 1000
-    }
-  }, React__default$1.createElement(material__default["default"].IconButton, {
-    color: "primary",
-    onClick: onClick
-  }, React__default$1.createElement(iconsMaterial__default["default"].Settings, null)));
+var classCallCheck = createCommonjsModule(function (module) {
+function _classCallCheck(instance, Constructor) {
+  if (!(instance instanceof Constructor)) {
+    throw new TypeError("Cannot call a class as a function");
+  }
+}
+
+module.exports = _classCallCheck, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+var _classCallCheck$1 = unwrapExports(classCallCheck);
+
+var createClass = createCommonjsModule(function (module) {
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, descriptor.key, descriptor);
+  }
+}
+
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+module.exports = _createClass, module.exports.__esModule = true, module.exports["default"] = module.exports;
+});
+
+var _createClass$1 = unwrapExports(createClass);
+
+var matchHtmlEntity = /&(?:amp|#38|lt|#60|gt|#62|apos|#39|quot|#34|nbsp|#160|copy|#169|reg|#174|hellip|#8230);/g;
+var htmlEntities = {
+  '&amp;': '&',
+  '&#38;': '&',
+  '&lt;': '<',
+  '&#60;': '<',
+  '&gt;': '>',
+  '&#62;': '>',
+  '&apos;': "'",
+  '&#39;': "'",
+  '&quot;': '"',
+  '&#34;': '"',
+  '&nbsp;': ' ',
+  '&#160;': ' ',
+  '&copy;': '©',
+  '&#169;': '©',
+  '&reg;': '®',
+  '&#174;': '®',
+  '&hellip;': '…',
+  '&#8230;': '…'
 };
 
-/*! *****************************************************************************
+var unescapeHtmlEntity = function unescapeHtmlEntity(m) {
+  return htmlEntities[m];
+};
+
+var unescape = function unescape(text) {
+  return text.replace(matchHtmlEntity, unescapeHtmlEntity);
+};
+
+var defaultOptions = {
+  bindI18n: 'languageChanged',
+  bindI18nStore: '',
+  transEmptyNodeValue: '',
+  transSupportBasicHtmlNodes: true,
+  transWrapTextNodes: '',
+  transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
+  useSuspense: true,
+  unescape: unescape
+};
+var i18nInstance;
+var I18nContext = React__default["default"].createContext();
+function getDefaults() {
+  return defaultOptions;
+}
+var ReportNamespaces = function () {
+  function ReportNamespaces() {
+    _classCallCheck$1(this, ReportNamespaces);
+
+    this.usedNamespaces = {};
+  }
+
+  _createClass$1(ReportNamespaces, [{
+    key: "addUsedNamespaces",
+    value: function addUsedNamespaces(namespaces) {
+      var _this = this;
+
+      namespaces.forEach(function (ns) {
+        if (!_this.usedNamespaces[ns]) _this.usedNamespaces[ns] = true;
+      });
+    }
+  }, {
+    key: "getUsedNamespaces",
+    value: function getUsedNamespaces() {
+      return Object.keys(this.usedNamespaces);
+    }
+  }]);
+
+  return ReportNamespaces;
+}();
+function getI18n() {
+  return i18nInstance;
+}
+
+function warn() {
+  if (console && console.warn) {
+    var _console;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    if (typeof args[0] === 'string') args[0] = "react-i18next:: ".concat(args[0]);
+
+    (_console = console).warn.apply(_console, args);
+  }
+}
+var alreadyWarned = {};
+function warnOnce() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+
+  if (typeof args[0] === 'string' && alreadyWarned[args[0]]) return;
+  if (typeof args[0] === 'string') alreadyWarned[args[0]] = new Date();
+  warn.apply(void 0, args);
+}
+function loadNamespaces(i18n, ns, cb) {
+  i18n.loadNamespaces(ns, function () {
+    if (i18n.isInitialized) {
+      cb();
+    } else {
+      var initialized = function initialized() {
+        setTimeout(function () {
+          i18n.off('initialized', initialized);
+        }, 0);
+        cb();
+      };
+
+      i18n.on('initialized', initialized);
+    }
+  });
+}
+
+function oldI18nextHasLoadedNamespace(ns, i18n) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var lng = i18n.languages[0];
+  var fallbackLng = i18n.options ? i18n.options.fallbackLng : false;
+  var lastLng = i18n.languages[i18n.languages.length - 1];
+  if (lng.toLowerCase() === 'cimode') return true;
+
+  var loadNotPending = function loadNotPending(l, n) {
+    var loadState = i18n.services.backendConnector.state["".concat(l, "|").concat(n)];
+    return loadState === -1 || loadState === 2;
+  };
+
+  if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18n.services.backendConnector.backend && i18n.isLanguageChangingTo && !loadNotPending(i18n.isLanguageChangingTo, ns)) return false;
+  if (i18n.hasResourceBundle(lng, ns)) return true;
+  if (!i18n.services.backendConnector.backend || i18n.options.resources && !i18n.options.partialBundledLanguages) return true;
+  if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+  return false;
+}
+
+function hasLoadedNamespace(ns, i18n) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+
+  if (!i18n.languages || !i18n.languages.length) {
+    warnOnce('i18n.languages were undefined or empty', i18n.languages);
+    return true;
+  }
+
+  var isNewerI18next = i18n.options.ignoreJSONStructure !== undefined;
+
+  if (!isNewerI18next) {
+    return oldI18nextHasLoadedNamespace(ns, i18n, options);
+  }
+
+  return i18n.hasLoadedNamespace(ns, {
+    precheck: function precheck(i18nInstance, loadNotPending) {
+      if (options.bindI18n && options.bindI18n.indexOf('languageChanging') > -1 && i18nInstance.services.backendConnector.backend && i18nInstance.isLanguageChangingTo && !loadNotPending(i18nInstance.isLanguageChangingTo, ns)) return false;
+    }
+  });
+}
+
+function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var usePrevious = function usePrevious(value, ignore) {
+  var ref = React__default["default"].useRef();
+  React__default["default"].useEffect(function () {
+    ref.current = ignore ? ref.current : value;
+  }, [value, ignore]);
+  return ref.current;
+};
+
+function useTranslation(ns) {
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var i18nFromProps = props.i18n;
+
+  var _ref = React__default["default"].useContext(I18nContext) || {},
+      i18nFromContext = _ref.i18n,
+      defaultNSFromContext = _ref.defaultNS;
+
+  var i18n = i18nFromProps || i18nFromContext || getI18n();
+  if (i18n && !i18n.reportNamespaces) i18n.reportNamespaces = new ReportNamespaces();
+
+  if (!i18n) {
+    warnOnce('You will need to pass in an i18next instance by using initReactI18next');
+
+    var notReadyT = function notReadyT(k) {
+      return Array.isArray(k) ? k[k.length - 1] : k;
+    };
+
+    var retNotReady = [notReadyT, {}, false];
+    retNotReady.t = notReadyT;
+    retNotReady.i18n = {};
+    retNotReady.ready = false;
+    return retNotReady;
+  }
+
+  if (i18n.options.react && i18n.options.react.wait !== undefined) warnOnce('It seems you are still using the old wait option, you may migrate to the new useSuspense behaviour.');
+
+  var i18nOptions = _objectSpread$1(_objectSpread$1(_objectSpread$1({}, getDefaults()), i18n.options.react), props);
+
+  var useSuspense = i18nOptions.useSuspense,
+      keyPrefix = i18nOptions.keyPrefix;
+  var namespaces = ns || defaultNSFromContext || i18n.options && i18n.options.defaultNS;
+  namespaces = typeof namespaces === 'string' ? [namespaces] : namespaces || ['translation'];
+  if (i18n.reportNamespaces.addUsedNamespaces) i18n.reportNamespaces.addUsedNamespaces(namespaces);
+  var ready = (i18n.isInitialized || i18n.initializedStoreOnce) && namespaces.every(function (n) {
+    return hasLoadedNamespace(n, i18n, i18nOptions);
+  });
+
+  function getT() {
+    return i18n.getFixedT(null, i18nOptions.nsMode === 'fallback' ? namespaces : namespaces[0], keyPrefix);
+  }
+
+  var _useState = React__default["default"].useState(getT),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      t = _useState2[0],
+      setT = _useState2[1];
+
+  var joinedNS = namespaces.join();
+  var previousJoinedNS = usePrevious(joinedNS);
+  var isMounted = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    var bindI18n = i18nOptions.bindI18n,
+        bindI18nStore = i18nOptions.bindI18nStore;
+    isMounted.current = true;
+
+    if (!ready && !useSuspense) {
+      loadNamespaces(i18n, namespaces, function () {
+        if (isMounted.current) setT(getT);
+      });
+    }
+
+    if (ready && previousJoinedNS && previousJoinedNS !== joinedNS && isMounted.current) {
+      setT(getT);
+    }
+
+    function boundReset() {
+      if (isMounted.current) setT(getT);
+    }
+
+    if (bindI18n && i18n) i18n.on(bindI18n, boundReset);
+    if (bindI18nStore && i18n) i18n.store.on(bindI18nStore, boundReset);
+    return function () {
+      isMounted.current = false;
+      if (bindI18n && i18n) bindI18n.split(' ').forEach(function (e) {
+        return i18n.off(e, boundReset);
+      });
+      if (bindI18nStore && i18n) bindI18nStore.split(' ').forEach(function (e) {
+        return i18n.store.off(e, boundReset);
+      });
+    };
+  }, [i18n, joinedNS]);
+  var isInitial = React__default["default"].useRef(true);
+  React__default["default"].useEffect(function () {
+    if (isMounted.current && !isInitial.current) {
+      setT(getT);
+    }
+
+    isInitial.current = false;
+  }, [i18n, keyPrefix]);
+  var ret = [t, i18n, ready];
+  ret.t = t;
+  ret.i18n = i18n;
+  ret.ready = ready;
+  if (ready) return ret;
+  if (!ready && !useSuspense) return ret;
+  throw new Promise(function (resolve) {
+    loadNamespaces(i18n, namespaces, function () {
+      resolve();
+    });
+  });
+}
+
+var styles$1 = {
+  root: {
+    boxShadow: 'none',
+    '& .react-resizable-handle': {
+      width: '24px',
+      height: '24px',
+      borderRadius: '4px',
+      background: function background(theme) {
+        return theme.palette.primary.main + " url(" + resizeIcon + ")";
+      },
+      backgroundRepeat: 'no-repeat',
+      backgroundSize: '50%',
+      backgroundPosition: '50%',
+      '&:hover': {
+        backgroundColor: function backgroundColor(theme) {
+          return theme.palette.primary.dark;
+        }
+      }
+    },
+    '& .react-resizable-handle:after': {
+      display: 'none'
+    }
+  },
+  header: {
+    height: '40px'
+  },
+  dragIcon: {
+    width: '30px',
+    height: '30px',
+    marginLeft: function marginLeft(theme) {
+      return "-" + theme.spacing(1);
+    },
+    padding: '8px',
+    borderRadius: '4px',
+    background: function background(theme) {
+      return theme.palette.primary.main;
+    },
+    '&:hover': {
+      cursor: 'move',
+      background: function background(theme) {
+        return theme.palette.primary.dark;
+      }
+    }
+  },
+  actionButtons: {
+    height: '30px',
+    marginTop: '-7px'
+  },
+  settingsButton: {
+    color: 'rgba(255, 255, 255, 0.45)',
+    borderRadius: '4px',
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  deleteButton: {
+    color: 'rgba(255, 255, 255, 0.45)',
+    marginLeft: '1px',
+    borderRadius: '4px',
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  content: {
+    height: 'calc(100% - 40px)',
+    padding: 0,
+    background: 'transparent',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderTop: 'none',
+    borderRadius: '4px',
+    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.25)'
+  }
+};
+
+var _excluded$7 = ["children", "title", "Widget", "id", "url", "token", "lang", "data", "settings", "openSettingsModal", "onSettingsModalOpened", "onSettingsModalClosed", "onDelete", "editMode"];
+var WidgetCard = React__default$1.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      title = _ref.title,
+      Widget = _ref.Widget,
+      id = _ref.id,
+      url = _ref.url,
+      token = _ref.token,
+      lang = _ref.lang,
+      data = _ref.data,
+      settings = _ref.settings,
+      openSettingsModal = _ref.openSettingsModal,
+      onSettingsModalOpened = _ref.onSettingsModalOpened,
+      onSettingsModalClosed = _ref.onSettingsModalClosed,
+      onDelete = _ref.onDelete,
+      editMode = _ref.editMode,
+      cardProps = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+
+  var _useState = React__default["default"].useState(false),
+      removeTooltipOpened = _useState[0],
+      setRemoveTooltipOpened = _useState[1];
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  var handleOpenSettingsModal = function handleOpenSettingsModal() {
+    if (onSettingsModalOpened) onSettingsModalOpened();
+  };
+
+  var handleDelete = function handleDelete() {
+    if (onDelete) onDelete();
+    setRemoveTooltipOpened(false);
+  };
+
+  var renderDragHandle = function renderDragHandle() {
+    return React__default$1.createElement(material__default["default"].SvgIcon, {
+      component: dragIcon_svg__default["default"].ReactComponent,
+      className: "draggable-handle",
+      sx: styles$1.dragIcon,
+      inheritViewBox: true
+    });
+  };
+
+  var renderActionButtons = function renderActionButtons() {
+    return React__default$1.createElement(material__default["default"].Stack, {
+      direction: "row",
+      sx: styles$1.actionButtons
+    }, React__default$1.createElement(material__default["default"].Button, {
+      color: "secondary",
+      sx: styles$1.settingsButton,
+      onClick: handleOpenSettingsModal
+    }, React__default$1.createElement(iconsMaterial__default["default"].Settings, null)), React__default$1.createElement(ConfirmTooltip, {
+      open: removeTooltipOpened,
+      confirmMessage: t('Are you sure you want to delete this widget?'),
+      confirmButtonText: t('Delete'),
+      cancelButtonText: t('Cancel'),
+      onCancel: function onCancel() {
+        return setRemoveTooltipOpened(false);
+      },
+      onConfirm: handleDelete
+    }, React__default$1.createElement(material__default["default"].Button, {
+      color: "secondary",
+      sx: styles$1.deleteButton,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        setRemoveTooltipOpened(true);
+      }
+    }, React__default$1.createElement(iconsMaterial__default["default"].Delete, null))));
+  };
+
+  return React__default$1.createElement(material__default["default"].Card, Object.assign({
+    ref: ref,
+    sx: styles$1.root
+  }, cardProps), React__default$1.createElement(material__default["default"].CardHeader, {
+    avatar: editMode && renderDragHandle(),
+    title: title,
+    titleTypographyProps: {
+      variant: 'subtitle1'
+    },
+    action: editMode && renderActionButtons(),
+    sx: styles$1.header
+  }), React__default$1.createElement(material__default["default"].CardContent, {
+    sx: styles$1.content
+  }, React__default$1.createElement(Widget, {
+    id: id,
+    url: url,
+    token: token,
+    lang: lang,
+    data: data,
+    settings: settings,
+    openSettingsModal: openSettingsModal,
+    onSettingsModalOpened: onSettingsModalOpened,
+    onSettingsModalClosed: onSettingsModalClosed,
+    editMode: editMode
+  })), editMode && children);
+});
+
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -10695,17 +11266,17 @@ function leftPad(len, str) {
 
 function _typeof$2(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof$2 = function _typeof(obj) { return typeof obj; }; } else { _typeof$2 = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof$2(obj); }
 
-function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$1(Object(source), true).forEach(function (key) { _defineProperty$2(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty$3(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties$1(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$1(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
+function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$1(Constructor.prototype, protoProps); if (staticProps) _defineProperties$1(Constructor, staticProps); return Constructor; }
 
 function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf$1(subClass, superClass); }
 
@@ -10784,7 +11355,7 @@ var GraphQLError = /*#__PURE__*/function (_Error) {
 
     var _this;
 
-    _classCallCheck$1(this, GraphQLError);
+    _classCallCheck$2(this, GraphQLError);
 
     _this = _super.call(this, message);
     _this.name = 'GraphQLError';
@@ -10819,7 +11390,7 @@ var GraphQLError = /*#__PURE__*/function (_Error) {
     var originalExtensions = originalError === null || originalError === void 0 ? void 0 : originalError.extensions;
 
     if (extensions == null && isObjectLike(originalExtensions)) {
-      _this.extensions = _objectSpread$1({}, originalExtensions);
+      _this.extensions = _objectSpread$2({}, originalExtensions);
     } else {
       _this.extensions = extensions !== null && extensions !== void 0 ? extensions : {};
     } // By being enumerable, JSON.stringify will include bellow properties in the resulting output.
@@ -10879,7 +11450,7 @@ var GraphQLError = /*#__PURE__*/function (_Error) {
     return _this;
   }
 
-  _createClass$1(GraphQLError, [{
+  _createClass$2(GraphQLError, [{
     key: "toString",
     value: function toString() {
       return printError(this);
@@ -11338,7 +11909,7 @@ function instanceOf(value, constructor) {
 
 function _defineProperties$2(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
-function _createClass$2(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
+function _createClass$3(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties$2(Constructor.prototype, protoProps); if (staticProps) _defineProperties$2(Constructor, staticProps); return Constructor; }
 
 /**
  * A representation of source input to GraphQL. The `name` and `locationOffset` parameters are
@@ -11363,7 +11934,7 @@ var Source = /*#__PURE__*/function () {
   } // $FlowFixMe[unsupported-syntax] Flow doesn't support computed properties yet
 
 
-  _createClass$2(Source, [{
+  _createClass$3(Source, [{
     key: SYMBOL_TO_STRING_TAG,
     get: function get() {
       return 'Source';
@@ -17580,6 +18151,284 @@ exports.ClientError = ClientError;
 
 unwrapExports(types);
 
+var graphqlWs = createCommonjsModule(function (module, exports) {
+var __assign = (commonjsGlobal$1 && commonjsGlobal$1.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (commonjsGlobal$1 && commonjsGlobal$1.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (commonjsGlobal$1 && commonjsGlobal$1.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GraphQLWebSocketClient = void 0;
+
+
+var CONNECTION_INIT = 'connection_init';
+var CONNECTION_ACK = 'connection_ack';
+var PING = 'ping';
+var PONG = 'pong';
+var SUBSCRIBE = 'subscribe';
+var NEXT = 'next';
+var ERROR = 'error';
+var COMPLETE = 'complete';
+var GraphQLWebSocketMessage = /** @class */ (function () {
+    function GraphQLWebSocketMessage(type, payload, id) {
+        this._type = type;
+        this._payload = payload;
+        this._id = id;
+    }
+    Object.defineProperty(GraphQLWebSocketMessage.prototype, "type", {
+        get: function () { return this._type; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GraphQLWebSocketMessage.prototype, "id", {
+        get: function () { return this._id; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GraphQLWebSocketMessage.prototype, "payload", {
+        get: function () { return this._payload; },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(GraphQLWebSocketMessage.prototype, "text", {
+        get: function () {
+            var result = { type: this.type };
+            if (this.id != null && this.id != undefined)
+                result.id = this.id;
+            if (this.payload != null && this.payload != undefined)
+                result.payload = this.payload;
+            return JSON.stringify(result);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    GraphQLWebSocketMessage.parse = function (data, f) {
+        var _a = JSON.parse(data), type = _a.type, payload = _a.payload, id = _a.id;
+        return new GraphQLWebSocketMessage(type, f(payload), id);
+    };
+    return GraphQLWebSocketMessage;
+}());
+var GraphQLWebSocketClient = /** @class */ (function () {
+    function GraphQLWebSocketClient(socket, _a) {
+        var _this = this;
+        var onInit = _a.onInit, onAcknowledged = _a.onAcknowledged, onPing = _a.onPing, onPong = _a.onPong;
+        this.socketState = { acknowledged: false, lastRequestId: 0, subscriptions: {} };
+        this.socket = socket;
+        socket.onopen = function (e) { return __awaiter(_this, void 0, void 0, function () {
+            var _a, _b, _c, _d;
+            return __generator(this, function (_e) {
+                switch (_e.label) {
+                    case 0:
+                        this.socketState.acknowledged = false;
+                        this.socketState.subscriptions = {};
+                        _b = (_a = socket).send;
+                        _c = ConnectionInit;
+                        if (!onInit) return [3 /*break*/, 2];
+                        return [4 /*yield*/, onInit()];
+                    case 1:
+                        _d = _e.sent();
+                        return [3 /*break*/, 3];
+                    case 2:
+                        _d = null;
+                        _e.label = 3;
+                    case 3:
+                        _b.apply(_a, [_c.apply(void 0, [_d]).text]);
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        socket.onclose = function (e) {
+            _this.socketState.acknowledged = false;
+            _this.socketState.subscriptions = {};
+        };
+        socket.onerror = function (e) {
+            console.error(e);
+        };
+        socket.onmessage = function (e) {
+            try {
+                var message = parseMessage(e.data);
+                switch (message.type) {
+                    case CONNECTION_ACK: {
+                        if (_this.socketState.acknowledged) {
+                            console.warn("Duplicate CONNECTION_ACK message ignored");
+                        }
+                        else {
+                            _this.socketState.acknowledged = true;
+                            if (onAcknowledged)
+                                onAcknowledged(message.payload);
+                        }
+                        return;
+                    }
+                    case PING: {
+                        if (onPing)
+                            onPing(message.payload).then(function (r) { return socket.send(Pong(r).text); });
+                        else
+                            socket.send(Pong(null).text);
+                        return;
+                    }
+                    case PONG: {
+                        if (onPong)
+                            onPong(message.payload);
+                        return;
+                    }
+                }
+                if (!_this.socketState.acknowledged) {
+                    // Web-socket connection not acknowledged
+                    return;
+                }
+                if (message.id === undefined || message.id === null || !_this.socketState.subscriptions[message.id]) {
+                    // No subscription identifer or subscription indentifier is not found
+                    return;
+                }
+                var _a = _this.socketState.subscriptions[message.id], query = _a.query, variables = _a.variables, subscriber = _a.subscriber;
+                switch (message.type) {
+                    case NEXT: {
+                        if (!message.payload.errors && message.payload.data) {
+                            subscriber.next && subscriber.next(message.payload.data);
+                        }
+                        if (message.payload.errors) {
+                            subscriber.error && subscriber.error(new types.ClientError(__assign(__assign({}, message.payload), { status: 200 }), { query: query, variables: variables }));
+                        }
+                        else {
+                        }
+                        return;
+                    }
+                    case ERROR: {
+                        subscriber.error && subscriber.error(new types.ClientError({ errors: message.payload, status: 200 }, { query: query, variables: variables }));
+                        return;
+                    }
+                    case COMPLETE: {
+                        subscriber.complete && subscriber.complete();
+                        delete _this.socketState.subscriptions[message.id];
+                        return;
+                    }
+                }
+            }
+            catch (e) {
+                // Unexpected errors while handling graphql-ws message
+                console.error(e);
+                socket.close(1006);
+            }
+            socket.close(4400, "Unknown graphql-ws message.");
+        };
+    }
+    GraphQLWebSocketClient.prototype.makeSubscribe = function (query, operationName, variables, subscriber) {
+        var _this = this;
+        var subscriptionId = (this.socketState.lastRequestId++).toString();
+        this.socketState.subscriptions[subscriptionId] = { query: query, variables: variables, subscriber: subscriber };
+        this.socket.send(Subscribe(subscriptionId, { query: query, operationName: operationName, variables: variables }).text);
+        return function () {
+            _this.socket.send(Complete(subscriptionId).text);
+            delete _this.socketState.subscriptions[subscriptionId];
+        };
+    };
+    GraphQLWebSocketClient.prototype.rawRequest = function (query, variables) {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            var result;
+            _this.rawSubscribe(query, {
+                next: function (data, extensions) { return (result = { data: data, extensions: extensions }); },
+                error: reject,
+                complete: function () { return resolve(result); },
+            }, variables);
+        });
+    };
+    GraphQLWebSocketClient.prototype.request = function (document, variables) {
+        var _this = this;
+        return new Promise(function (resolve, reject) {
+            var result;
+            _this.subscribe(document, {
+                next: function (data) { return (result = data); },
+                error: reject,
+                complete: function () { return resolve(result); },
+            }, variables);
+        });
+    };
+    GraphQLWebSocketClient.prototype.subscribe = function (document, subscriber, variables) {
+        var _a = dist.resolveRequestDocument(document), query = _a.query, operationName = _a.operationName;
+        return this.makeSubscribe(query, operationName, variables, subscriber);
+    };
+    GraphQLWebSocketClient.prototype.rawSubscribe = function (query, subscriber, variables) {
+        return this.makeSubscribe(query, undefined, variables, subscriber);
+    };
+    GraphQLWebSocketClient.prototype.ping = function (payload) {
+        this.socket.send(Ping(payload).text);
+    };
+    GraphQLWebSocketClient.prototype.close = function () {
+        this.socket.close(1000);
+    };
+    GraphQLWebSocketClient.PROTOCOL = "graphql-transport-ws";
+    return GraphQLWebSocketClient;
+}());
+exports.GraphQLWebSocketClient = GraphQLWebSocketClient;
+// Helper functions
+function parseMessage(data, f) {
+    if (f === void 0) { f = function (a) { return a; }; }
+    var m = GraphQLWebSocketMessage.parse(data, f);
+    return m;
+}
+function ConnectionInit(payload) {
+    return new GraphQLWebSocketMessage(CONNECTION_INIT, payload);
+}
+function Ping(payload) {
+    return new GraphQLWebSocketMessage(PING, payload, undefined);
+}
+function Pong(payload) {
+    return new GraphQLWebSocketMessage(PONG, payload, undefined);
+}
+function Subscribe(id, payload) {
+    return new GraphQLWebSocketMessage(SUBSCRIBE, payload, id);
+}
+function Complete(id) {
+    return new GraphQLWebSocketMessage(COMPLETE, undefined, id);
+}
+
+});
+
+unwrapExports(graphqlWs);
+
 var parser_1 = getCjsExportFromNamespace(parser);
 
 var printer_1 = getCjsExportFromNamespace(printer);
@@ -17666,7 +18515,7 @@ var __importDefault = (commonjsGlobal$1 && commonjsGlobal$1.__importDefault) ||
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.gql = exports.batchRequests = exports.request = exports.rawRequest = exports.GraphQLClient = exports.ClientError = void 0;
+exports.GraphQLWebSocketClient = exports.gql = exports.resolveRequestDocument = exports.batchRequests = exports.request = exports.rawRequest = exports.GraphQLClient = exports.ClientError = void 0;
 var cross_fetch_1 = __importStar(browserPonyfill), CrossFetch = cross_fetch_1;
 
 
@@ -17800,7 +18649,7 @@ var GraphQLClient = /** @class */ (function () {
                         url: url,
                         query: rawRequestOptions.query,
                         variables: rawRequestOptions.variables,
-                        headers: __assign(__assign({}, resolveHeaders(headers)), resolveHeaders(rawRequestOptions.requestHeaders)),
+                        headers: __assign(__assign({}, resolveHeaders(callOrIdentity(headers))), resolveHeaders(rawRequestOptions.requestHeaders)),
                         operationName: operationName,
                         fetch: fetch,
                         method: method,
@@ -17826,7 +18675,7 @@ var GraphQLClient = /** @class */ (function () {
                                 url: url,
                                 query: query,
                                 variables: requestOptions.variables,
-                                headers: __assign(__assign({}, resolveHeaders(headers)), resolveHeaders(requestOptions.requestHeaders)),
+                                headers: __assign(__assign({}, resolveHeaders(callOrIdentity(headers))), resolveHeaders(requestOptions.requestHeaders)),
                                 operationName: operationName,
                                 fetch: fetch,
                                 method: method,
@@ -17863,7 +18712,7 @@ var GraphQLClient = /** @class */ (function () {
                                 url: url,
                                 query: queries,
                                 variables: variables,
-                                headers: __assign(__assign({}, resolveHeaders(headers)), resolveHeaders(batchRequestOptions.requestHeaders)),
+                                headers: __assign(__assign({}, resolveHeaders(callOrIdentity(headers))), resolveHeaders(batchRequestOptions.requestHeaders)),
                                 operationName: undefined,
                                 fetch: fetch,
                                 method: method,
@@ -17909,7 +18758,7 @@ exports.GraphQLClient = GraphQLClient;
 function makeRequest(_a) {
     var url = _a.url, query = _a.query, variables = _a.variables, headers = _a.headers, operationName = _a.operationName, fetch = _a.fetch, _b = _a.method, method = _b === void 0 ? 'POST' : _b, fetchOptions = _a.fetchOptions;
     return __awaiter(this, void 0, void 0, function () {
-        var fetcher, isBathchingQuery, response, result, successfullyReceivedData, headers_1, status_1, errorResult;
+        var fetcher, isBathchingQuery, response, result, successfullyReceivedData, successfullyPassedErrorPolicy, headers_1, status_1, rest, data, errorResult;
         return __generator(this, function (_c) {
             switch (_c.label) {
                 case 0:
@@ -17933,9 +18782,12 @@ function makeRequest(_a) {
                         var data = _a.data;
                         return !data;
                     }) : !!result.data;
-                    if (response.ok && !result.errors && successfullyReceivedData) {
+                    successfullyPassedErrorPolicy = !result.errors || fetchOptions.errorPolicy === 'all' || fetchOptions.errorPolicy === 'ignore';
+                    if (response.ok && successfullyPassedErrorPolicy && successfullyReceivedData) {
                         headers_1 = response.headers, status_1 = response.status;
-                        return [2 /*return*/, __assign(__assign({}, (isBathchingQuery ? { data: result } : result)), { headers: headers_1, status: status_1 })];
+                        rest = __rest(result, ["errors"]);
+                        data = fetchOptions.errorPolicy === 'ignore' ? rest : result;
+                        return [2 /*return*/, __assign(__assign({}, (isBathchingQuery ? { data: data } : data)), { headers: headers_1, status: status_1 })];
                     }
                     else {
                         errorResult = typeof result === 'string' ? { error: result } : result;
@@ -18030,6 +18882,10 @@ function resolveRequestDocument(document) {
     var operationName = extractOperationName(document);
     return { query: printer_1.print(document), operationName: operationName };
 }
+exports.resolveRequestDocument = resolveRequestDocument;
+function callOrIdentity(value) {
+    return typeof value === 'function' ? value() : value;
+}
 /**
  * Convenience passthrough template tag to get the benefits of tooling for the gql template tag. This does not actually parse the input into a GraphQL DocumentNode like graphql-tag package does. It just returns the string with any variables given interpolated. Can save you a bit of performance and having to install another package.
  *
@@ -18062,13 +18918,15 @@ function HeadersInstanceToPlainObject(headers) {
     return o;
 }
 
+Object.defineProperty(exports, "GraphQLWebSocketClient", { enumerable: true, get: function () { return graphqlWs.GraphQLWebSocketClient; } });
+
 });
 
 unwrapExports(dist);
-var dist_5 = dist.GraphQLClient;
+var dist_7 = dist.GraphQLClient;
 
 var getGraphqlSdk = function getGraphqlSdk(url, token) {
-  var graphqlClient = new dist_5(url);
+  var graphqlClient = new dist_7(url);
   graphqlClient.setHeader('Authorization', "Bearer " + token);
   return getSdk(graphqlClient);
 };
@@ -20521,7 +21379,7 @@ var moment = createCommonjsModule(function (module, exports) {
     function preprocessRFC2822(s) {
         // Remove comments and folding whitespace and replace multiple-spaces with a single space
         return s
-            .replace(/\([^)]*\)|[\n\t]/g, ' ')
+            .replace(/\([^()]*\)|[\n\t]/g, ' ')
             .replace(/(\s\s+)/g, ' ')
             .replace(/^\s\s*/, '')
             .replace(/\s\s*$/, '');
@@ -23702,7 +24560,7 @@ var moment = createCommonjsModule(function (module, exports) {
 
     //! moment.js
 
-    hooks.version = '2.29.3';
+    hooks.version = '2.29.4';
 
     setHookCallback(createLocal);
 
@@ -23805,6 +24663,7 @@ var getRecentShift = function getRecentShift(date, shifts) {
 };
 
 exports.CompanyConfigDocument = CompanyConfigDocument;
+exports.ConfirmTooltip = ConfirmTooltip;
 exports.CounterDirectoriesDocument = CounterDirectoriesDocument;
 exports.CountersDocument = CountersDocument;
 exports.CreateDashboardDocument = CreateDashboardDocument;
@@ -23840,8 +24699,8 @@ exports.UpdateOrderExecutionDocument = UpdateOrderExecutionDocument;
 exports.UpdateWidgetDocument = UpdateWidgetDocument;
 exports.UsersDocument = UsersDocument;
 exports.UsersPresencesDocument = UsersPresencesDocument;
+exports.WidgetCard = WidgetCard;
 exports.WidgetDocument = WidgetDocument;
-exports.WidgetSettingsButton = WidgetSettingsButton;
 exports.WorkplaceEventDocument = WorkplaceEventDocument;
 exports.WorkplacesDocument = WorkplacesDocument;
 exports.getCurrentShift = getCurrentShift;
@@ -25077,6 +25936,7 @@ var GRAPHQL_API_URL = process.env.REACT_APP_WIDGET_GRAPHQL_API_URL;
 var Dashboard = function Dashboard(_ref) {
   var lang = _ref.lang,
       widgetName = _ref.widgetName,
+      widgetDisplayName = _ref.widgetDisplayName,
       widgetWidth = _ref.widgetWidth,
       widgetHeight = _ref.widgetHeight,
       Widget = _ref.Widget,
@@ -25096,18 +25956,14 @@ var Dashboard = function Dashboard(_ref) {
       i: widgetId,
       x: 0,
       y: 0,
-      w: widgetWidth || 2,
-      h: widgetHeight || 3
-    }]
-  }, (authResponse == null ? void 0 : authResponse.accessToken) && React__default["default"].createElement(material.Box, {
-    key: widgetId
-  }, React__default["default"].createElement(dist_1.WidgetSettingsButton, {
-    onClick: function onClick() {
-      return setSettingsModalOpened(function (current) {
-        return !current;
-      });
-    }
-  }), React__default["default"].createElement(Widget, {
+      w: widgetWidth || 3,
+      h: widgetHeight || 4
+    }],
+    draggableHandle: ".draggable-handle"
+  }, (authResponse == null ? void 0 : authResponse.accessToken) && React__default["default"].createElement(dist_1.WidgetCard, {
+    key: widgetId,
+    Widget: Widget,
+    title: widgetDisplayName(lang),
     id: widgetId,
     url: GRAPHQL_API_URL,
     token: authResponse.accessToken,
@@ -25120,7 +25976,7 @@ var Dashboard = function Dashboard(_ref) {
       return setSettingsModalOpened(false);
     },
     editMode: editMode
-  })));
+  }));
 };
 
 var routes = function routes(isLoggedIn, _ref) {
@@ -25199,9 +26055,6 @@ var WidgetPreview = function WidgetPreview(_ref) {
     clientId: 'sample-app-client-id',
     grantType: 'password'
   };
-  var containerStyles = {
-    height: '100vh'
-  };
   var headerProps = {
     position: 'static',
     leadingText: widgetDisplayName(lang),
@@ -25214,8 +26067,7 @@ var WidgetPreview = function WidgetPreview(_ref) {
     baseUrl: OAUTH2_BASE_URL,
     authProps: authProps
   }, React__default["default"].createElement(andoncloudSdk.Container, {
-    headerProps: headerProps,
-    styles: containerStyles
+    headerProps: headerProps
   }, React__default["default"].createElement(Routing, {
     lang: lang,
     widgetName: widgetName,