@iobroker/adapter-react-v5 3.1.13 → 3.1.14

package/Components/JsonConfigComponent/ConfigImageUpload.js

@@ -37,6 +37,8 @@ var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
 
 var _UploadImage = _interopRequireDefault(require("../UploadImage"));
 
+var _i18n = _interopRequireDefault(require("../../i18n"));
+
 var _ConfigGeneric2 = _interopRequireDefault(require("./ConfigGeneric"));
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
@@ -54,22 +56,22 @@ var styles = function styles(theme) {
   };
 };
 
-var ConfigCertificateSelect = /*#__PURE__*/function (_ConfigGeneric) {
-  (0, _inherits2["default"])(ConfigCertificateSelect, _ConfigGeneric);
+var ConfigImageUpload = /*#__PURE__*/function (_ConfigGeneric) {
+  (0, _inherits2["default"])(ConfigImageUpload, _ConfigGeneric);
 
-  var _super = _createSuper(ConfigCertificateSelect);
+  var _super = _createSuper(ConfigImageUpload);
 
-  function ConfigCertificateSelect(props) {
+  function ConfigImageUpload(props) {
     var _this;
 
-    (0, _classCallCheck2["default"])(this, ConfigCertificateSelect);
+    (0, _classCallCheck2["default"])(this, ConfigImageUpload);
     _this = _super.call(this, props);
     _this.imageRef = /*#__PURE__*/_react["default"].createRef();
     _this.index = Date.now();
     return _this;
   }
 
-  (0, _createClass2["default"])(ConfigCertificateSelect, [{
+  (0, _createClass2["default"])(ConfigImageUpload, [{
     key: "componentDidMount",
     value: function () {
       var _componentDidMount = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -80,7 +82,7 @@ var ConfigCertificateSelect = /*#__PURE__*/function (_ConfigGeneric) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                (0, _get2["default"])((0, _getPrototypeOf2["default"])(ConfigCertificateSelect.prototype), "componentDidMount", this).call(this);
+                (0, _get2["default"])((0, _getPrototypeOf2["default"])(ConfigImageUpload.prototype), "componentDidMount", this).call(this);
 
                 if (this.props.schema.base64) {
                   value = _ConfigGeneric2["default"].getValue(this.props.data, this.props.attr);
@@ -182,7 +184,7 @@ var ConfigCertificateSelect = /*#__PURE__*/function (_ConfigGeneric) {
             });
           }
         },
-        t: this.props.t
+        t: _i18n["default"].t
       }), this.props.schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null, this.props.schema.base64 ? null : /*#__PURE__*/_react["default"].createElement("img", {
         src: this._getUrl(),
         ref: this.imageRef,
@@ -194,10 +196,10 @@ var ConfigCertificateSelect = /*#__PURE__*/function (_ConfigGeneric) {
       }));
     }
   }]);
-  return ConfigCertificateSelect;
+  return ConfigImageUpload;
 }(_ConfigGeneric2["default"]);
 
-ConfigCertificateSelect.propTypes = {
+ConfigImageUpload.propTypes = {
   socket: _propTypes["default"].object.isRequired,
   themeType: _propTypes["default"].string,
   themeName: _propTypes["default"].string,
@@ -209,7 +211,7 @@ ConfigCertificateSelect.propTypes = {
   onChange: _propTypes["default"].func
 };
 
-var _default = (0, _styles.withStyles)(styles)(ConfigCertificateSelect);
+var _default = (0, _styles.withStyles)(styles)(ConfigImageUpload);
 
 exports["default"] = _default;
 //# sourceMappingURL=ConfigImageUpload.js.map

package/Components/JsonConfigComponent/ConfigImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigImageUpload.js","names":["styles","theme","fullWidth","width","image","ConfigCertificateSelect","props","imageRef","React","createRef","index","Date","now","schema","base64","value","ConfigGeneric","getValue","data","attr","setState","socket","fileExists","adapterName","instance","then","exist","current","src","_getUrl","style","display","update","url","window","location","port","protocol","hostname","error","disabled","defaultValue","classes","getText","label","accept","crop","maxSize","state","undefined","onChange","deleteFile","startsWith","split","writeFile64","t","help","renderHelp","helpLink","noTranslation","propTypes","PropTypes","object","isRequired","themeType","string","themeName","className","onError","func","withStyles"],"sources":["JsonConfigComponent/ConfigImageUpload.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@mui/styles';\n\nimport InputLabel from '@mui/material/InputLabel';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormControl from '@mui/material/FormControl';\n\nimport UploadImage from '../UploadImage';\n\nimport ConfigGeneric from './ConfigGeneric';\n\nconst styles = theme => ({\n    fullWidth: {\n        width: '100%'\n    },\n    image: {\n        width: 100\n    }\n});\n\nclass ConfigCertificateSelect extends ConfigGeneric {\n    constructor(props) {\n        super(props);\n        this.imageRef = React.createRef();\n        this.index = Date.now();\n    }\n    async componentDidMount() {\n        super.componentDidMount();\n\n        if (this.props.schema.base64) {\n            const value = ConfigGeneric.getValue(this.props.data, this.props.attr);\n            this.setState({ value });\n        } else {\n            this.props.socket.fileExists(this.props.adapterName + '.' + this.props.instance, this.props.attr)\n                .then(exist => {\n                    if (exist && this.imageRef.current) {\n                        this.imageRef.current.src = this._getUrl();\n                        this.imageRef.current.style.display = 'block';\n                    }\n                });\n        }\n    }\n\n    _getUrl(update) {\n        if (update) {\n            this.index = Date.now();\n        }\n        let url = `files/${this.props.adapterName}.${this.props.instance}/${this.props.attr}?t=${this.index}`;\n        if (window.location.port === '3000') {\n            url = `${window.location.protocol}//${window.location.hostname}:8081/${url}`;\n        }\n\n        return url;\n    }\n\n    renderItem(error, disabled, defaultValue) {\n        // eslint-disable-next-line\n        return <FormControl className={this.props.classes.fullWidth} variant=\"standard\">\n            <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel>\n            <UploadImage\n                error={!!error}\n                disabled={disabled}\n                accept={this.props.schema.accept}\n                crop={this.props.schema.crop}\n                maxSize={this.props.schema.maxSize || 256 * 1024}\n                icon={this.state.value || undefined}\n                removeIconFunc={() => {\n                    if (this.props.schema.base64) {\n                        this.setState({ value: null }, () =>\n                            this.onChange(this.props.attr, this.state.value));\n                    } else {\n                        // delete file to /instance/attr\n                        this.props.socket.deleteFile(this.props.adapterName + '.' + this.props.instance, this.props.attr);\n                        // update image\n                        if (this.imageRef.current) {\n                            this.imageRef.current.style.display = 'none';\n                            this.imageRef.current.src = '';\n                        }\n                    }\n                }}\n                onChange={base64 => {\n                    if (this.props.schema.base64) {\n                        this.setState({ value: base64 }, () =>\n                            this.onChange(this.props.attr, this.state.value));\n                    } else {\n                        if (base64.startsWith('data')) {\n                            base64 = base64.split(',')[1];\n                        }\n                        // upload file to /instance/attr\n                        this.props.socket.writeFile64(this.props.adapterName + '.' + this.props.instance, this.props.attr, base64)\n                            .then(() => {\n                                if (this.imageRef.current) {\n                                    this.imageRef.current.style.display = 'block';\n                                    this.imageRef.current.src = this._getUrl(true);\n                                }\n                            });\n                    }\n                }}\n                t={this.props.t}\n            />\n            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}\n            {this.props.schema.base64 ?  null : <img\n                src={this._getUrl()}\n                ref={this.imageRef}\n                className={this.props.classes.image}\n                style={{display: 'none'}}\n                alt=\"Background\"\n            />}\n        </FormControl>;\n    }\n}\n\nConfigCertificateSelect.propTypes = {\n    socket: PropTypes.object.isRequired,\n    themeType: PropTypes.string,\n    themeName: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    data: PropTypes.object.isRequired,\n    schema: PropTypes.object,\n    onError: PropTypes.func,\n    onChange: PropTypes.func,\n};\n\nexport default withStyles(styles)(ConfigCertificateSelect);"],"mappings":"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"}
+{"version":3,"file":"ConfigImageUpload.js","names":["styles","theme","fullWidth","width","image","ConfigImageUpload","props","imageRef","React","createRef","index","Date","now","schema","base64","value","ConfigGeneric","getValue","data","attr","setState","socket","fileExists","adapterName","instance","then","exist","current","src","_getUrl","style","display","update","url","window","location","port","protocol","hostname","error","disabled","defaultValue","classes","getText","label","accept","crop","maxSize","state","undefined","onChange","deleteFile","startsWith","split","writeFile64","I18n","t","help","renderHelp","helpLink","noTranslation","propTypes","PropTypes","object","isRequired","themeType","string","themeName","className","onError","func","withStyles"],"sources":["JsonConfigComponent/ConfigImageUpload.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@mui/styles';\n\nimport InputLabel from '@mui/material/InputLabel';\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormControl from '@mui/material/FormControl';\n\nimport UploadImage from '../UploadImage';\nimport I18n from '../../i18n';\n\nimport ConfigGeneric from './ConfigGeneric';\n\nconst styles = theme => ({\n    fullWidth: {\n        width: '100%'\n    },\n    image: {\n        width: 100\n    }\n});\n\nclass ConfigImageUpload extends ConfigGeneric {\n    constructor(props) {\n        super(props);\n        this.imageRef = React.createRef();\n        this.index = Date.now();\n    }\n    async componentDidMount() {\n        super.componentDidMount();\n\n        if (this.props.schema.base64) {\n            const value = ConfigGeneric.getValue(this.props.data, this.props.attr);\n            this.setState({ value });\n        } else {\n            this.props.socket.fileExists(this.props.adapterName + '.' + this.props.instance, this.props.attr)\n                .then(exist => {\n                    if (exist && this.imageRef.current) {\n                        this.imageRef.current.src = this._getUrl();\n                        this.imageRef.current.style.display = 'block';\n                    }\n                });\n        }\n    }\n\n    _getUrl(update) {\n        if (update) {\n            this.index = Date.now();\n        }\n        let url = `files/${this.props.adapterName}.${this.props.instance}/${this.props.attr}?t=${this.index}`;\n        if (window.location.port === '3000') {\n            url = `${window.location.protocol}//${window.location.hostname}:8081/${url}`;\n        }\n\n        return url;\n    }\n\n    renderItem(error, disabled, defaultValue) {\n        // eslint-disable-next-line\n        return <FormControl className={this.props.classes.fullWidth} variant=\"standard\">\n            <InputLabel shrink>{this.getText(this.props.schema.label)}</InputLabel>\n            <UploadImage\n                error={!!error}\n                disabled={disabled}\n                accept={this.props.schema.accept}\n                crop={this.props.schema.crop}\n                maxSize={this.props.schema.maxSize || 256 * 1024}\n                icon={this.state.value || undefined}\n                removeIconFunc={() => {\n                    if (this.props.schema.base64) {\n                        this.setState({ value: null }, () =>\n                            this.onChange(this.props.attr, this.state.value));\n                    } else {\n                        // delete file to /instance/attr\n                        this.props.socket.deleteFile(this.props.adapterName + '.' + this.props.instance, this.props.attr);\n                        // update image\n                        if (this.imageRef.current) {\n                            this.imageRef.current.style.display = 'none';\n                            this.imageRef.current.src = '';\n                        }\n                    }\n                }}\n                onChange={base64 => {\n                    if (this.props.schema.base64) {\n                        this.setState({ value: base64 }, () =>\n                            this.onChange(this.props.attr, this.state.value));\n                    } else {\n                        if (base64.startsWith('data')) {\n                            base64 = base64.split(',')[1];\n                        }\n                        // upload file to /instance/attr\n                        this.props.socket.writeFile64(this.props.adapterName + '.' + this.props.instance, this.props.attr, base64)\n                            .then(() => {\n                                if (this.imageRef.current) {\n                                    this.imageRef.current.style.display = 'block';\n                                    this.imageRef.current.src = this._getUrl(true);\n                                }\n                            });\n                    }\n                }}\n                t={I18n.t}\n            />\n            {this.props.schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}\n            {this.props.schema.base64 ?  null : <img\n                src={this._getUrl()}\n                ref={this.imageRef}\n                className={this.props.classes.image}\n                style={{display: 'none'}}\n                alt=\"Background\"\n            />}\n        </FormControl>;\n    }\n}\n\nConfigImageUpload.propTypes = {\n    socket: PropTypes.object.isRequired,\n    themeType: PropTypes.string,\n    themeName: PropTypes.string,\n    style: PropTypes.object,\n    className: PropTypes.string,\n    data: PropTypes.object.isRequired,\n    schema: PropTypes.object,\n    onError: PropTypes.func,\n    onChange: PropTypes.func,\n};\n\nexport default withStyles(styles)(ConfigImageUpload);"],"mappings":"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"}

package/Components/Loader.js

@@ -66,7 +66,7 @@ var Loader = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: 'logo-back logo-background-' + theme,
         style: {
-          backgroundImage: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? window.loadingBackgroundImage : undefined,
+          backgroundImage: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? 'url(' + window.loadingBackgroundImage + ')' : undefined,
           backgroundColor: window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined,
           backgroundSize: 'cover'
         }

package/Components/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","names":["loaderStyles","Loader","props","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","size","theme","themeType","backgroundImage","loadingBackgroundImage","undefined","backgroundColor","loadingBackgroundColor","backgroundSize","loadingHideLogo","width","height","left","borderWidth","top","bottom","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loader.js"],"sourcesContent":["/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n// import './loader.css'\nconst loaderStyles = `\n/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\n\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.logo-div {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    overflow: hidden;\n    border-radius: 50%;\n    z-index: 2;\n}\n.logo-border {\n    /*border-color: #164477;*/\n    border-top-color: #3399CC;\n    border-left-color: #164477;\n    border-bottom-color: #164477;\n    border-right-color: #164477;\n    border-radius: 50%;\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.logo-top {\n    position: absolute;\n    width: 4.5%;\n    height: 16%;\n    top: 0;\n    z-index: 2;\n}\n.logo-i {\n    position: absolute;\n    width: 14.5%;\n    height: 60%;\n    top: 20%;\n    left: 42%;\n    background: #3399CC;\n}\n.logo-i-top {\n    position: absolute;\n    width: 14.5%;\n    height: 4%;\n    left: 42%;\n    background: #3399CC;\n    border-radius: 100%;\n}\n.logo-back {\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n}\n@keyframes logo-grow {\n    0% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(1);\n        opacity: 1\n    }\n    99% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(10);\n        opacity: 0;\n    }\n    100% {\n        width: 0;\n        height: 0;\n        opacity: 0;\n    }\n}\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\n@keyframes logo-color-inside-light {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-dark {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-colored {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-blue {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n\n@keyframes logo-color-outside-light {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-dark  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-colored {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-blue  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n\n.logo-animate-wait {\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\n}\n\n.logo-animate-grow-light {\n    background: #DDD;\n}\n.logo-animate-grow-dark {\n    background: #1d1d1d;\n}\n.logo-animate-grow-colored {\n    background: #DDD;\n}\n.logo-animate-grow-blue {\n    background: #1d1d1d;\n}\n\n.logo-animate-grow {\n    display: inline-block;\n    text-align: center;\n    z-index: 1;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    width: 245px;\n    height: 245px;\n    border-radius: 50%;\n    position: absolute;\n    animation: logo-grow 1s 1 ease forwards;\n}\n\n.logo-animate-color-inside-light {\n    animation: logo-color-inside-light 2.5s;\n}\n.logo-animate-color-inside-dark {\n    animation: logo-color-inside-dark 2.5s;\n}\n.logo-animate-color-inside-colored {\n    animation: logo-color-inside-colored 2.5s;\n}\n.logo-animate-color-inside-blue {\n    animation: logo-color-inside-blue 2.5s;\n}\n\n.logo-animate-color-outside-light {\n    animation: logo-color-outside-light 1.5s;\n}\n.logo-animate-color-outside-dark {\n    animation: logo-color-outside-dark 1.5s;\n}\n.logo-animate-color-outside-colored {\n    animation: logo-color-outside-colored 1.5s;\n}\n.logo-animate-color-outside-blue {\n    animation: logo-color-outside-blue 1.5s;\n}\n`;\n\n/**\n * @typedef {object} LoaderProps\n * @property {string} [key] The key to identify this component.\n * @property {number} [size] The size in pixels of this loader.\n * @property {string} [themeType] The chosen theme type.\n * @property {string} [theme] The chosen theme.\n *\n * @extends {React.Component<LoaderProps>}\n */\nclass Loader extends React.Component {\n    constructor(props) {\n        super(props);\n\n        if (!window.document.getElementById('loader-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'loader-iobroker-component');\n            style.innerHTML = loaderStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const size = this.props.size || 234;\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'logo-back logo-background-' + theme}\n            style={{\n                backgroundImage: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? window.loadingBackgroundImage : undefined,\n                backgroundColor: window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined,\n                backgroundSize: 'cover',\n            }}\n        >\n            {window.loadingHideLogo === 'true' ?\n                null\n                :\n                <>\n                    <div className=\"logo-div\" style={{ width: size, height: size }}>\n                        <div className={'logo-top logo-background-' + theme} style={{ left: '37%' }}/>\n                        <div className={'logo-top logo-background-' + theme} style={{ left: '57%' }}/>\n                        <div\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\n                            style={{ borderWidth: size * 0.132 }}\n                        />\n                        <div className={'logo-i logo-animate-color-inside-' + theme}/>\n                        <div className={'logo-i-top logo-animate-color-inside-' + theme} style={{ top: '18%' }}/>\n                        <div className={'logo-i-top logo-animate-color-inside-' + theme} style={{ bottom: '18%' }}/>\n                    </div>\n                    <div className={'logo-animate-grow logo-animate-grow-' + theme}\n                    style={{ width: size + 11, height: size + 11 }}\n                    />\n                </>\n            }\n        </div>;\n    }\n}\n\nLoader.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof Loader} */\nconst _export = Loader;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;;;;;AACA;AACA,IAAMA,YAAY,otJAAlB;AAiOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,M;;;;;EACF,gBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;;IAEA,IAAI,CAACC,MAAM,CAACC,QAAP,CAAgBC,cAAhB,CAA+B,2BAA/B,CAAL,EAAkE;MAC9D,IAAMC,KAAK,GAAGH,MAAM,CAACC,QAAP,CAAgBG,aAAhB,CAA8B,OAA9B,CAAd;MACAD,KAAK,CAACE,YAAN,CAAmB,IAAnB,EAAyB,2BAAzB;MACAF,KAAK,CAACG,SAAN,GAAkBT,YAAlB;MACAG,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IARc;EASlB;;;;WAED,kBAAS;MACL,IAAMM,IAAI,GAAG,KAAKV,KAAL,CAAWU,IAAX,IAAmB,GAAhC;MACA,IAAMC,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,+BAA+BA,KAA/C;QACH,KAAK,EAAE;UACHE,eAAe,EAAEZ,MAAM,CAACa,sBAAP,IAAiCb,MAAM,CAACa,sBAAP,KAAkC,0BAAnE,GAAgGb,MAAM,CAACa,sBAAvG,GAAgIC,SAD9I;UAEHC,eAAe,EAAEf,MAAM,CAACgB,sBAAP,IAAiChB,MAAM,CAACgB,sBAAP,KAAkC,0BAAnE,GAAgGhB,MAAM,CAACgB,sBAAvG,GAAgIF,SAF9I;UAGHG,cAAc,EAAE;QAHb;MADJ,GAOFjB,MAAM,CAACkB,eAAP,KAA2B,MAA3B,GACG,IADH,gBAGG,+EACI;QAAK,SAAS,EAAC,UAAf;QAA0B,KAAK,EAAE;UAAEC,KAAK,EAAEV,IAAT;UAAeW,MAAM,EAAEX;QAAvB;MAAjC,gBACI;QAAK,SAAS,EAAE,8BAA8BC,KAA9C;QAAqD,KAAK,EAAE;UAAEW,IAAI,EAAE;QAAR;MAA5D,EADJ,eAEI;QAAK,SAAS,EAAE,8BAA8BX,KAA9C;QAAqD,KAAK,EAAE;UAAEW,IAAI,EAAE;QAAR;MAA5D,EAFJ,eAGI;QACI,SAAS,wCAAiCX,KAAjC,uBADb;QAEI,KAAK,EAAE;UAAEY,WAAW,EAAEb,IAAI,GAAG;QAAtB;MAFX,EAHJ,eAOI;QAAK,SAAS,EAAE,sCAAsCC;MAAtD,EAPJ,eAQI;QAAK,SAAS,EAAE,0CAA0CA,KAA1D;QAAiE,KAAK,EAAE;UAAEa,GAAG,EAAE;QAAP;MAAxE,EARJ,eASI;QAAK,SAAS,EAAE,0CAA0Cb,KAA1D;QAAiE,KAAK,EAAE;UAAEc,MAAM,EAAE;QAAV;MAAxE,EATJ,CADJ,eAYI;QAAK,SAAS,EAAE,yCAAyCd,KAAzD;QACA,KAAK,EAAE;UAAES,KAAK,EAAEV,IAAI,GAAG,EAAhB;UAAoBW,MAAM,EAAEX,IAAI,GAAG;QAAnC;MADP,EAZJ,CAVD,CAAP;IA4BH;;;EA3CgBgB,iBAAA,CAAMC,S;;AA8C3B5B,MAAM,CAAC6B,SAAP,GAAmB;EACflB,IAAI,EAAEmB,qBAAA,CAAUC,MADD;EAEflB,SAAS,EAAEiB,qBAAA,CAAUE;AAFN,CAAnB;AAKA;;AACA,IAAMC,OAAO,GAAGjC,MAAhB;eACeiC,O"}
+{"version":3,"file":"Loader.js","names":["loaderStyles","Loader","props","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","size","theme","themeType","backgroundImage","loadingBackgroundImage","undefined","backgroundColor","loadingBackgroundColor","backgroundSize","loadingHideLogo","width","height","left","borderWidth","top","bottom","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loader.js"],"sourcesContent":["/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n// import './loader.css'\nconst loaderStyles = `\n/**\n * Copyright 2018-2022 bluefox <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\n\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.logo-div {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    overflow: hidden;\n    border-radius: 50%;\n    z-index: 2;\n}\n.logo-border {\n    /*border-color: #164477;*/\n    border-top-color: #3399CC;\n    border-left-color: #164477;\n    border-bottom-color: #164477;\n    border-right-color: #164477;\n    border-radius: 50%;\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.logo-top {\n    position: absolute;\n    width: 4.5%;\n    height: 16%;\n    top: 0;\n    z-index: 2;\n}\n.logo-i {\n    position: absolute;\n    width: 14.5%;\n    height: 60%;\n    top: 20%;\n    left: 42%;\n    background: #3399CC;\n}\n.logo-i-top {\n    position: absolute;\n    width: 14.5%;\n    height: 4%;\n    left: 42%;\n    background: #3399CC;\n    border-radius: 100%;\n}\n.logo-back {\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n}\n@keyframes logo-grow {\n    0% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(1);\n        opacity: 1\n    }\n    99% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(10);\n        opacity: 0;\n    }\n    100% {\n        width: 0;\n        height: 0;\n        opacity: 0;\n    }\n}\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\n@keyframes logo-color-inside-light {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-dark {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-colored {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-blue {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n\n@keyframes logo-color-outside-light {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-dark  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-colored {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-blue  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n\n.logo-animate-wait {\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\n}\n\n.logo-animate-grow-light {\n    background: #DDD;\n}\n.logo-animate-grow-dark {\n    background: #1d1d1d;\n}\n.logo-animate-grow-colored {\n    background: #DDD;\n}\n.logo-animate-grow-blue {\n    background: #1d1d1d;\n}\n\n.logo-animate-grow {\n    display: inline-block;\n    text-align: center;\n    z-index: 1;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    width: 245px;\n    height: 245px;\n    border-radius: 50%;\n    position: absolute;\n    animation: logo-grow 1s 1 ease forwards;\n}\n\n.logo-animate-color-inside-light {\n    animation: logo-color-inside-light 2.5s;\n}\n.logo-animate-color-inside-dark {\n    animation: logo-color-inside-dark 2.5s;\n}\n.logo-animate-color-inside-colored {\n    animation: logo-color-inside-colored 2.5s;\n}\n.logo-animate-color-inside-blue {\n    animation: logo-color-inside-blue 2.5s;\n}\n\n.logo-animate-color-outside-light {\n    animation: logo-color-outside-light 1.5s;\n}\n.logo-animate-color-outside-dark {\n    animation: logo-color-outside-dark 1.5s;\n}\n.logo-animate-color-outside-colored {\n    animation: logo-color-outside-colored 1.5s;\n}\n.logo-animate-color-outside-blue {\n    animation: logo-color-outside-blue 1.5s;\n}\n`;\n\n/**\n * @typedef {object} LoaderProps\n * @property {string} [key] The key to identify this component.\n * @property {number} [size] The size in pixels of this loader.\n * @property {string} [themeType] The chosen theme type.\n * @property {string} [theme] The chosen theme.\n *\n * @extends {React.Component<LoaderProps>}\n */\nclass Loader extends React.Component {\n    constructor(props) {\n        super(props);\n\n        if (!window.document.getElementById('loader-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'loader-iobroker-component');\n            style.innerHTML = loaderStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const size = this.props.size || 234;\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'logo-back logo-background-' + theme}\n            style={{\n                backgroundImage: window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@' ? 'url(' + window.loadingBackgroundImage + ')' : undefined,\n                backgroundColor: window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@' ? window.loadingBackgroundColor : undefined,\n                backgroundSize: 'cover',\n            }}\n        >\n            {window.loadingHideLogo === 'true' ?\n                null\n                :\n                <>\n                    <div className=\"logo-div\" style={{ width: size, height: size }}>\n                        <div className={'logo-top logo-background-' + theme} style={{ left: '37%' }}/>\n                        <div className={'logo-top logo-background-' + theme} style={{ left: '57%' }}/>\n                        <div\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\n                            style={{ borderWidth: size * 0.132 }}\n                        />\n                        <div className={'logo-i logo-animate-color-inside-' + theme}/>\n                        <div className={'logo-i-top logo-animate-color-inside-' + theme} style={{ top: '18%' }}/>\n                        <div className={'logo-i-top logo-animate-color-inside-' + theme} style={{ bottom: '18%' }}/>\n                    </div>\n                    <div className={'logo-animate-grow logo-animate-grow-' + theme}\n                    style={{ width: size + 11, height: size + 11 }}\n                    />\n                </>\n            }\n        </div>;\n    }\n}\n\nLoader.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof Loader} */\nconst _export = Loader;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;;;;;AACA;AACA,IAAMA,YAAY,otJAAlB;AAiOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,M;;;;;EACF,gBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;;IAEA,IAAI,CAACC,MAAM,CAACC,QAAP,CAAgBC,cAAhB,CAA+B,2BAA/B,CAAL,EAAkE;MAC9D,IAAMC,KAAK,GAAGH,MAAM,CAACC,QAAP,CAAgBG,aAAhB,CAA8B,OAA9B,CAAd;MACAD,KAAK,CAACE,YAAN,CAAmB,IAAnB,EAAyB,2BAAzB;MACAF,KAAK,CAACG,SAAN,GAAkBT,YAAlB;MACAG,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IARc;EASlB;;;;WAED,kBAAS;MACL,IAAMM,IAAI,GAAG,KAAKV,KAAL,CAAWU,IAAX,IAAmB,GAAhC;MACA,IAAMC,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,+BAA+BA,KAA/C;QACH,KAAK,EAAE;UACHE,eAAe,EAAEZ,MAAM,CAACa,sBAAP,IAAiCb,MAAM,CAACa,sBAAP,KAAkC,0BAAnE,GAAgG,SAASb,MAAM,CAACa,sBAAhB,GAAyC,GAAzI,GAA+IC,SAD7J;UAEHC,eAAe,EAAEf,MAAM,CAACgB,sBAAP,IAAiChB,MAAM,CAACgB,sBAAP,KAAkC,0BAAnE,GAAgGhB,MAAM,CAACgB,sBAAvG,GAAgIF,SAF9I;UAGHG,cAAc,EAAE;QAHb;MADJ,GAOFjB,MAAM,CAACkB,eAAP,KAA2B,MAA3B,GACG,IADH,gBAGG,+EACI;QAAK,SAAS,EAAC,UAAf;QAA0B,KAAK,EAAE;UAAEC,KAAK,EAAEV,IAAT;UAAeW,MAAM,EAAEX;QAAvB;MAAjC,gBACI;QAAK,SAAS,EAAE,8BAA8BC,KAA9C;QAAqD,KAAK,EAAE;UAAEW,IAAI,EAAE;QAAR;MAA5D,EADJ,eAEI;QAAK,SAAS,EAAE,8BAA8BX,KAA9C;QAAqD,KAAK,EAAE;UAAEW,IAAI,EAAE;QAAR;MAA5D,EAFJ,eAGI;QACI,SAAS,wCAAiCX,KAAjC,uBADb;QAEI,KAAK,EAAE;UAAEY,WAAW,EAAEb,IAAI,GAAG;QAAtB;MAFX,EAHJ,eAOI;QAAK,SAAS,EAAE,sCAAsCC;MAAtD,EAPJ,eAQI;QAAK,SAAS,EAAE,0CAA0CA,KAA1D;QAAiE,KAAK,EAAE;UAAEa,GAAG,EAAE;QAAP;MAAxE,EARJ,eASI;QAAK,SAAS,EAAE,0CAA0Cb,KAA1D;QAAiE,KAAK,EAAE;UAAEc,MAAM,EAAE;QAAV;MAAxE,EATJ,CADJ,eAYI;QAAK,SAAS,EAAE,yCAAyCd,KAAzD;QACA,KAAK,EAAE;UAAES,KAAK,EAAEV,IAAI,GAAG,EAAhB;UAAoBW,MAAM,EAAEX,IAAI,GAAG;QAAnC;MADP,EAZJ,CAVD,CAAP;IA4BH;;;EA3CgBgB,iBAAA,CAAMC,S;;AA8C3B5B,MAAM,CAAC6B,SAAP,GAAmB;EACflB,IAAI,EAAEmB,qBAAA,CAAUC,MADD;EAEflB,SAAS,EAAEiB,qBAAA,CAAUE;AAFN,CAAnB;AAKA;;AACA,IAAMC,OAAO,GAAGjC,MAAhB;eACeiC,O"}

package/README.md

@@ -641,7 +641,7 @@ If you still have questions, try to find an answer [here](https://mui.com/guides
 -->
 
 ## Changelog
-### 3.1.13 (2022-06-23)
+### 3.1.14 (2022-06-23)
 * (bluefox) Added translations
 
 ### 3.1.11 (2022-06-22)

package/i18n/de.json

@@ -65,7 +65,7 @@
   "ra_Toggle view mode": "Ansichtsmodus umschalten",
   "ra_Root": "Anfang",
   "ra_Back to %s": "Zurück zu %s",
-  "ra_Place your files here or click here to open the browse dialog": "Platzieren Sie Ihre Dateien hier oder klicken Sie hier, um den Suchdialog zu öffnen",
+  "ra_Place your files here or click here to open the browse dialog": "Die Dateien hier platzieren oder hier klicken, um den Suchdialog zu öffnen",
   "ra_If no file will be created in the folder, it will disappear after the browser closed": "Wenn im Ordner keine Datei erstellt wird, verschwindet dieser nach dem Schließen des Browsers",
   "ra_Folder name": "Ordnernamen",
   "ra_Create new folder in %s": "Neuen Ordner in \"%s\" erstellen",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "3.1.13",
+  "version": "3.1.14",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "bluefox",