@iobroker/adapter-react-v5 0.0.2

package/Components/404.js

@@ -0,0 +1,155 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _i18n = _interopRequireDefault(require("../i18n"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+function _inherits(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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var styles = function styles(theme) {
+  return {
+    content: Object.assign({
+      background: 'black',
+      position: 'absolute',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0
+    }, theme.content),
+    root: {
+      boxSizing: 'border-box',
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#000000',
+      backgroundImage: 'radial-gradient(#104254 , #05181c)',
+      fontFamily: "'Inconsolata', Helvetica, sans-serif",
+      fontSize: '1.5rem',
+      color: 'rgba(128, 175, 255, 0.8)',
+      textShadow: "0 0 1ex rgba(51, 70, 255, 1),\n        0 0 2px rgba(255, 255, 255, 0.8)"
+    },
+    overlay: {
+      pointerEvents: 'none',
+      width: '100%',
+      height: '100%',
+      background: "repeating-linear-gradient(\n                180deg,\n            rgba(0, 0, 0, 0) 0,\n            rgba(0, 0, 0, 0.3) 50%,\n            rgba(0, 0, 0, 0) 100%)",
+      backgroundSize: 'auto 4px',
+      zIndex: 99,
+      '&::before': {
+        content: '""',
+        pointerEvents: 'none',
+        position: 'absolute',
+        display: 'block',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: '100%',
+        height: '100%',
+        backgroundImage: "linear-gradient(\n                0deg,\n                transparent 0%,\n                rgba(32, 50, 128, 0.2) 2%,\n                rgba(32, 50, 128, 0.8) 3%,\n                rgba(32, 50, 128, 0.2) 3%,\n                transparent 100%)",
+        backgroundRepeat: 'no-repeat',
+        animation: 'scan 7.5s linear 0s infinite'
+      }
+    },
+    terminal: {
+      boxSizing: 'inherit',
+      position: 'absolute',
+      height: '100%',
+      width: 'calc(100% - 8rem)',
+      maxWidth: '100%',
+      padding: '4rem',
+      textTransform: 'uppercase'
+    },
+    output: {
+      color: 'rgba(128, 175, 255, 0.8)',
+      textShadow: "\n        0 0 1px rgba(51, 70, 255, 0.4),\n            0 0 2px rgba(255, 255, 255, 0.8)",
+      '&::before': {
+        content: '"> "'
+      }
+    },
+    errorCode: {
+      color: 'white'
+    }
+  };
+};
+
+var Page404 = /*#__PURE__*/function (_Component) {
+  _inherits(Page404, _Component);
+
+  var _super = _createSuper(Page404);
+
+  function Page404() {
+    _classCallCheck(this, Page404);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(Page404, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.content
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.root
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.overlay
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.terminal
+      }, /*#__PURE__*/_react["default"].createElement("h1", null, "Error", /*#__PURE__*/_react["default"].createElement("span", {
+        className: this.props.classes.errorCode
+      }, "404")), /*#__PURE__*/_react["default"].createElement("p", {
+        className: this.props.classes.output
+      }, _i18n["default"].t('The page you are looking for')), /*#__PURE__*/_react["default"].createElement("p", {
+        className: this.props.classes.output
+      }, _i18n["default"].t('Good luck'))))));
+    }
+  }]);
+
+  return Page404;
+}(_react.Component);
+
+Page404.propTypes = {
+  language: _propTypes["default"].string,
+  onNavigate: _propTypes["default"].func,
+  theme: _propTypes["default"].string,
+  mobile: _propTypes["default"].bool
+};
+
+var _default = (0, _withStyles["default"])(styles)(Page404);
+
+exports["default"] = _default;
+//# sourceMappingURL=404.js.map

package/Components/404.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["404.js"],"names":["styles","theme","content","Object","assign","background","position","top","bottom","left","right","root","boxSizing","height","width","backgroundColor","backgroundImage","fontFamily","fontSize","color","textShadow","overlay","pointerEvents","backgroundSize","zIndex","display","backgroundRepeat","animation","terminal","maxWidth","padding","textTransform","output","errorCode","Page404","props","classes","I18n","t","Component","propTypes","language","PropTypes","string","onNavigate","func","mobile","bool"],"mappings":"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","sourcesContent":["import React, {Component} from 'react';\nimport withStyles from '@mui/styles/withStyles';\nimport PropTypes from 'prop-types';\n\n/*\nCopyright 2019 Robin Selmer\nhttps://codepen.io/robinselmer/pen/vJjbOZ\n*/\n\nimport I18n from '../i18n';\n\nconst styles = theme => ({\n    content: Object.assign({background: 'black', position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}, theme.content),\n    root: {\n        boxSizing: 'border-box',\n        height: '100%',\n        width: '100%',\n        backgroundColor: '#000000',\n        backgroundImage: 'radial-gradient(#104254 , #05181c)',\n        fontFamily: \"'Inconsolata', Helvetica, sans-serif\",\n        fontSize: '1.5rem',\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow:\n            `0 0 1ex rgba(51, 70, 255, 1),\n        0 0 2px rgba(255, 255, 255, 0.8)`\n    },\n    overlay: {\n        pointerEvents: 'none',\n        width: '100%',\n        height: '100%',\n        background:\n            `repeating-linear-gradient(\n                180deg,\n            rgba(0, 0, 0, 0) 0,\n            rgba(0, 0, 0, 0.3) 50%,\n            rgba(0, 0, 0, 0) 100%)`,\n        backgroundSize: 'auto 4px',\n        zIndex: 99,\n        '&::before': {\n            content: '\"\"',\n            pointerEvents: 'none',\n            position: 'absolute',\n            display: 'block',\n            top: 0,\n            left: 0,\n            right: 0,\n            bottom: 0,\n            width: '100%',\n            height: '100%',\n            backgroundImage: `linear-gradient(\n                0deg,\n                transparent 0%,\n                rgba(32, 50, 128, 0.2) 2%,\n                rgba(32, 50, 128, 0.8) 3%,\n                rgba(32, 50, 128, 0.2) 3%,\n                transparent 100%)`,\n            backgroundRepeat: 'no-repeat',\n            animation: 'scan 7.5s linear 0s infinite',\n        }\n    },\n\n    terminal: {\n        boxSizing: 'inherit',\n        position: 'absolute',\n        height: '100%',\n        width: 'calc(100% - 8rem)',\n        maxWidth: '100%',\n        padding: '4rem',\n        textTransform: 'uppercase',\n    },\n    output: {\n        color: 'rgba(128, 175, 255, 0.8)',\n        textShadow: `\n        0 0 1px rgba(51, 70, 255, 0.4),\n            0 0 2px rgba(255, 255, 255, 0.8)`,\n        '&::before': {\n            content: '\"> \"'\n        }\n    },\n    errorCode: {\n        color: 'white'\n    }\n});\n\nclass Page404 extends Component {\n    render() {\n        return <div className={this.props.classes.content}>\n            <div className={this.props.classes.root}>\n                <div className={this.props.classes.overlay}>\n                    <div className={this.props.classes.terminal}>\n                        <h1>Error<span className={this.props.classes.errorCode}>404</span></h1>\n                        <p className={this.props.classes.output}>\n                            {I18n.t('The page you are looking for')}</p>\n                        <p className={this.props.classes.output}>{I18n.t('Good luck')}</p>\n                    </div>\n                </div>\n            </div>\n        </div>;\n    }\n}\n\nPage404.propTypes = {\n    language: PropTypes.string,\n    onNavigate: PropTypes.func,\n    theme: PropTypes.string,\n    mobile: PropTypes.bool\n};\n\nexport default withStyles(styles)(Page404);\n"],"file":"404.js"}

package/Components/ColorPicker.js

@@ -0,0 +1,313 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactColor = require("react-color");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+function _inherits(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 } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+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; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(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; }
+
+var styles = function styles(theme) {
+  return {
+    color: {
+      width: 36,
+      height: 14,
+      borderRadius: 2
+    },
+    delButton: {
+      //width: 32,
+      //height: 32,
+      marginTop: 16
+    },
+    swatch: {
+      marginTop: 16,
+      padding: 5,
+      background: '#fff',
+      borderRadius: 1,
+      boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+      display: 'inline-block',
+      cursor: 'pointer',
+      verticalAlign: 'middle'
+    },
+    popover: {
+      position: 'absolute',
+      zIndex: 2
+    },
+    cover: {
+      position: 'fixed',
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    textDense: {
+      marginTop: 0,
+      marginBottom: 0
+    }
+  };
+};
+/**
+ * @typedef {object} Rgb
+ * @property {number} r The red component of the color (0-255).
+ * @property {number} g The green component of the color (0-255).
+ * @property {number} b The blue component of the color (0-255).
+ * @property {number} a The alpha component of the color (0-255).
+ *
+ * @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.
+ *
+ * @typedef {object} ColorPickerProps
+ * @property {boolean} [disabled] Set to true to disable the color picker.
+ * @property {Color} [value] The currently selected color.
+ * @property {(rgba: string) => void} [onChange] The color change callback.
+ * @property {string} [name] The name.
+ * @property {React.CSSProperties} [style] Additional styling for this component.
+ * @property {string} [className] The CSS class name.
+ * @property {boolean} [openAbove] Open the color picker above the field?
+ *
+ * @extends {React.Component<ColorPickerProps>}
+ */
+
+
+var ColorPicker = /*#__PURE__*/function (_React$Component) {
+  _inherits(ColorPicker, _React$Component);
+
+  var _super = _createSuper(ColorPicker);
+
+  /**
+   * @param {Readonly<ColorPickerProps>} props
+   */
+  function ColorPicker(props) {
+    var _this;
+
+    _classCallCheck(this, ColorPicker);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
+      _this.setState({
+        displayColorPicker: !_this.state.displayColorPicker
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleClose", function () {
+      _this.setState({
+        displayColorPicker: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (color) {
+      _this.setState({
+        color: color
+      });
+
+      _this.props.onChange && _this.props.onChange(ColorPicker.getColor(color));
+    });
+
+    _this.state = {
+      displayColorPicker: false,
+      color: _this.props.value || _this.props.color
+    };
+    return _this;
+  }
+  /**
+   * Get the state derived from the given properties and state.
+   * @param {{ color: Color; }} props
+   * @param {{ color: Color; }} state
+   */
+
+
+  _createClass(ColorPicker, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var color = ColorPicker.getColor(this.state.color);
+      var style = {};
+
+      if (this.state.displayColorPicker && this.props.openAbove) {
+        style = {
+          top: -241
+        };
+      }
+
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: Object.assign({}, this.props.style || {}, {
+          position: 'relative'
+        }),
+        className: this.props.className || ''
+      }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+        disabled: this.props.disabled,
+        variant: "standard",
+        id: "name",
+        style: color ? {
+          width: 'calc(100% - 80px)'
+        } : {
+          width: 'calc(100% - 54px)',
+          marginRight: 8
+        },
+        label: this.props.name || 'color',
+        value: color,
+        margin: "dense",
+        classes: {
+          root: this.props.classes.textDense
+        },
+        onChange: function onChange(e) {
+          return _this2.handleChange(e.target.value);
+        }
+      }), color ? /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+        disabled: this.props.disabled,
+        onClick: function onClick() {
+          return _this2.handleChange('');
+        },
+        size: "small",
+        className: this.props.classes.delButton,
+        style: color ? {} : {
+          opacity: 0,
+          cursor: 'default'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_Delete["default"], null)) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.swatch,
+        onClick: function onClick() {
+          return _this2.handleClick();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.color,
+        style: {
+          background: color
+        }
+      })), this.state.displayColorPicker && !this.props.disabled ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.popover,
+        style: style
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: this.props.classes.cover,
+        onClick: function onClick() {
+          return _this2.handleClose();
+        }
+      }), /*#__PURE__*/_react["default"].createElement(_reactColor.ChromePicker, {
+        color: this.state.color,
+        onChangeComplete: function onChangeComplete(color) {
+          return _this2.handleChange(color);
+        }
+      })) : null);
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var pColor = ColorPicker.getColor(props.value || props.color);
+      var sColor = ColorPicker.getColor(state.color);
+
+      if (pColor !== sColor) {
+        return {
+          color: props.value || props.color
+        };
+      } else {
+        return null;
+      }
+    }
+    /**
+     * @private
+     */
+
+  }, {
+    key: "getColor",
+    value:
+    /**
+     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
+     * @param {Color} [color]
+     * @param {boolean} [isHex] The returning string should be in hex format
+     * @returns {string} the hex or rgba representation of the given color.
+     */
+    function getColor(color, isHex) {
+      if (color && _typeof(color) === 'object') {
+        if (color.rgb) {
+          if (isHex) {
+            return '#' + color.rgb.r.toString(16).padStart(2, '0') + color.rgb.g.toString(16).padStart(2, '0') + color.rgb.b.toString(16).padStart(2, '0');
+          } else {
+            return 'rgba(' + color.rgb.r + ',' + color.rgb.g + ',' + color.rgb.b + ',' + color.rgb.a + ')';
+          }
+        } else {
+          if (isHex) {
+            return '#' + color.r.toString(16).padStart(2, '0') + color.g.toString(16).padStart(2, '0') + color.b.toString(16).padStart(2, '0');
+          } else {
+            return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';
+          }
+        }
+      } else {
+        return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
+      }
+    }
+    /**
+     * Convert rgb() or rgba() format to hex format #rrggbb.
+     * @param {string} rgb
+     * @returns {string}
+     */
+
+  }, {
+    key: "rgb2hex",
+    value: function rgb2hex(rgb) {
+      var m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+      return m && m.length === 4 ? '#' + parseInt(m[1], 10).toString(16).padStart(2, '0') + parseInt(m[2], 10).toString(16).padStart(2, '0') + parseInt(m[3], 10).toString(16).padStart(2, '0') : rgb;
+    }
+    /**
+     * @private
+     */
+
+  }]);
+
+  return ColorPicker;
+}(_react["default"].Component);
+
+ColorPicker.propTypes = {
+  disabled: _propTypes["default"].bool,
+  value: _propTypes["default"].string,
+  onChange: _propTypes["default"].func.isRequired,
+  name: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  className: _propTypes["default"].string,
+  openAbove: _propTypes["default"].bool
+};
+/** @type {typeof ColorPicker} */
+
+var _export = (0, _withStyles["default"])(styles)(ColorPicker);
+
+var _default = _export;
+exports["default"] = _default;
+//# sourceMappingURL=ColorPicker.js.map

package/Components/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ColorPicker.js"],"names":["styles","theme","color","width","height","borderRadius","delButton","marginTop","swatch","padding","background","boxShadow","display","cursor","verticalAlign","popover","position","zIndex","cover","top","right","bottom","left","textDense","marginBottom","ColorPicker","props","setState","displayColorPicker","state","onChange","getColor","value","style","openAbove","Object","assign","className","disabled","marginRight","name","root","classes","e","handleChange","target","opacity","handleClick","handleClose","pColor","sColor","isHex","rgb","r","toString","padStart","g","b","a","rgb2hex","m","match","length","parseInt","React","Component","propTypes","PropTypes","bool","string","func","isRequired","object","_export"],"mappings":"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","sourcesContent":["/**\n * Copyright 2018-2021 bluefox <dogafox@gmail.com>\n *\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n **/\nimport React from 'react';\nimport {ChromePicker} from 'react-color';\nimport PropTypes from 'prop-types';\nimport withStyles from '@mui/styles/withStyles';\n\nimport TextField from '@mui/material/TextField';\nimport IconButton from '@mui/material/IconButton';\nimport IconDelete from '@mui/icons-material/Delete';\n\nconst styles = theme => ({\n    color: {\n        width: 36,\n        height: 14,\n        borderRadius: 2,\n    },\n    delButton: {\n        //width: 32,\n        //height: 32,\n        marginTop: 16,\n    },\n    swatch: {\n        marginTop: 16,\n        padding: 5,\n        background: '#fff',\n        borderRadius: 1,\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer',\n        verticalAlign: 'middle'\n    },\n    popover: {\n        position: 'absolute',\n        zIndex: 2,\n    },\n    cover: {\n        position: 'fixed',\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0,\n    },\n    textDense: {\n        marginTop: 0,\n        marginBottom: 0,\n    }\n});\n\n/**\n * @typedef {object} Rgb\n * @property {number} r The red component of the color (0-255).\n * @property {number} g The green component of the color (0-255).\n * @property {number} b The blue component of the color (0-255).\n * @property {number} a The alpha component of the color (0-255).\n *\n * @typedef {string | Rgb | { rgb: Rgb }} Color Definition of a color.\n *\n * @typedef {object} ColorPickerProps\n * @property {boolean} [disabled] Set to true to disable the color picker.\n * @property {Color} [value] The currently selected color.\n * @property {(rgba: string) => void} [onChange] The color change callback.\n * @property {string} [name] The name.\n * @property {React.CSSProperties} [style] Additional styling for this component.\n * @property {string} [className] The CSS class name.\n * @property {boolean} [openAbove] Open the color picker above the field?\n *\n * @extends {React.Component<ColorPickerProps>}\n */\nclass ColorPicker extends React.Component {\n    /**\n     * @param {Readonly<ColorPickerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        this.state = {\n            displayColorPicker: false,\n            color: this.props.value || this.props.color,\n        };\n    }\n\n    /**\n     * Get the state derived from the given properties and state.\n     * @param {{ color: Color; }} props\n     * @param {{ color: Color; }} state\n     */\n    static getDerivedStateFromProps(props, state) {\n        const pColor = ColorPicker.getColor(props.value || props.color);\n        const sColor = ColorPicker.getColor(state.color);\n        if (pColor !== sColor) {\n            return {color: props.value || props.color}\n        } else {\n            return null;\n        }\n    }\n\n    /**\n     * @private\n     */\n    handleClick = () => {\n        this.setState({displayColorPicker: !this.state.displayColorPicker});\n    };\n\n    /**\n     * @private\n     */\n    handleClose = () => {\n        this.setState({displayColorPicker: false});\n    };\n\n    /**\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\n     * @param {Color} [color]\n     * @param {boolean} [isHex] The returning string should be in hex format\n     * @returns {string} the hex or rgba representation of the given color.\n     */\n    static getColor(color, isHex) {\n        if (color && typeof color === 'object') {\n            if (color.rgb) {\n                if (isHex) {\n                    return '#' + color.rgb.r.toString(16).padStart(2, '0') + color.rgb.g.toString(16).padStart(2, '0') + color.rgb.b.toString(16).padStart(2, '0');\n                } else {\n                    return 'rgba(' + color.rgb.r + ',' + color.rgb.g + ',' + color.rgb.b + ',' + color.rgb.a + ')';\n                }\n            } else {\n                if (isHex) {\n                    return '#' + color.r.toString(16).padStart(2, '0') + color.g.toString(16).padStart(2, '0') + color.b.toString(16).padStart(2, '0');\n                } else {\n                    return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a + ')';\n                }\n            }\n        } else {\n            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\n        }\n    }\n\n    /**\n     * Convert rgb() or rgba() format to hex format #rrggbb.\n     * @param {string} rgb\n     * @returns {string}\n     */\n    static rgb2hex(rgb){\n        const m = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\n\n        return m && m.length === 4 ? '#' +\n            parseInt(m[1],10).toString(16).padStart(2, '0') +\n            parseInt(m[2],10).toString(16).padStart(2, '0') +\n            parseInt(m[3],10).toString(16).padStart(2, '0') : rgb;\n    }\n\n    /**\n     * @private\n     */\n    handleChange = color => {\n        this.setState({color});\n        this.props.onChange && this.props.onChange(ColorPicker.getColor(color));\n    };\n\n    render() {\n        const color = ColorPicker.getColor(this.state.color);\n        let style = {};\n\n        if (this.state.displayColorPicker && this.props.openAbove) {\n            style = {\n                top: -241,\n            };\n        }\n\n        return <div\n            style={Object.assign({}, this.props.style || {}, {position: 'relative'})}\n            className={ this.props.className || ''}\n        >\n            <TextField\n                disabled={this.props.disabled}\n                variant=\"standard\"\n                id=\"name\"\n                style={color ? {width: 'calc(100% - 80px)'} : {width: 'calc(100% - 54px)', marginRight: 8}}\n                label={this.props.name || 'color'}\n                value={color}\n                margin=\"dense\"\n                classes={{root: this.props.classes.textDense}}\n                onChange={e => this.handleChange(e.target.value)}\n            />\n            {color ? <IconButton\n                disabled={this.props.disabled}\n                onClick={() => this.handleChange('')}\n                size=\"small\"\n                className={this.props.classes.delButton}\n                style={color ? {} : {opacity: 0, cursor: 'default'}}\n            ><IconDelete/></IconButton> : null}\n            <div className={this.props.classes.swatch} onClick={() => this.handleClick()}>\n                <div className={this.props.classes.color} style={{background: color}} />\n            </div>\n            { this.state.displayColorPicker && !this.props.disabled ? <div className={this.props.classes.popover} style={style}>\n                <div className={this.props.classes.cover} onClick={() => this.handleClose()}/>\n                <ChromePicker color={ this.state.color } onChangeComplete={color => this.handleChange(color)} />\n            </div> : null }\n        </div>\n    }\n}\n\nColorPicker.propTypes = {\n    disabled: PropTypes.bool,\n    value: PropTypes.string,\n    onChange: PropTypes.func.isRequired,\n    name: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    openAbove: PropTypes.bool,\n};\n\n/** @type {typeof ColorPicker} */\nconst _export = withStyles(styles)(ColorPicker);\nexport default _export;"],"file":"ColorPicker.js"}