@iobroker/adapter-react-v5 3.1.16 → 3.1.19

package/Components/FileViewer.js

@@ -114,7 +114,6 @@ function bufferToBase64(buffer) {
 }
 /**
  * @typedef {object} FileViewerProps
- * @property {string} [key] The key to identify this component.
  * @property {import('../types').Translator} t Translation function
  * @property {ioBroker.Languages} [lang] The selected language.
  * @property {boolean} [expertMode] Is expert mode enabled? (default: false)

package/Components/FileViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileViewer.js","names":["styles","theme","dialog","height","paper","content","textAlign","textarea","width","img","objectFit","dialogTitle","justifyContent","display","EXTENSIONS","images","code","txt","audio","video","bufferToBase64","buffer","binary","bytes","Uint8Array","len","byteLength","i","String","fromCharCode","window","btoa","FileViewer","props","id","fileName","size","state","changed","timeout","clearTimeout","setTimeout","alert","text","readFile","setState","forceUpdate","Date","now","parts","href","split","data","editingValue","splice","adapter","name","join","socket","writeFile64","Buffer","from","toString","then","_","onClose","e","ext","Utils","getFileExtension","editing","formatEditFile","copyPossible","includes","imgError","file","undefined","newState","type","detectMimeType","supportSubscribes","subscribeFiles","onFileChanged","clsx","classes","getClassBackgroundImage","target","onerror","newValue","readOnly","scrollPaper","t","setStateBackgroundImage","getContent","copyToClipboard","Component","propTypes","PropTypes","func","lang","string","expertMode","bool","isRequired","_export","withWidth","withStyles"],"sources":["FileViewer.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { withStyles } from '@mui/styles';\nimport PropTypes from 'prop-types';\n\nimport TextField from '@mui/material/TextField';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport { IconButton } from '@mui/material';\n\nimport IconNoIcon from '../icons/IconNoIcon';\nimport withWidth from './withWidth';\nimport Utils from './Utils';\n\n// Icons\nimport { FaCopy as CopyIcon } from 'react-icons/fa';\nimport Brightness5Icon from '@mui/icons-material/Brightness6';\nimport CloseIcon from '@mui/icons-material/Close';\nimport SaveIcon from '@mui/icons-material/Save';\n\nconst styles = theme => ({\n    dialog: {\n        height: '100%',\n    },\n    paper: {\n        height: 'calc(100% - 64px)',\n    },\n    content: {\n        textAlign: 'center',\n    },\n    textarea: {\n        width: '100%',\n        height: '100%',\n    },\n    img: {\n        width: 'auto',\n        height: 'calc(100% - 5px)',\n        objectFit: 'contain',\n    },\n    dialogTitle: {\n        justifyContent: 'space-between',\n        display: 'flex'\n    }\n});\n\nexport const EXTENSIONS = {\n    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp'],\n    code:   ['js', 'json', 'md'],\n    txt:    ['log', 'txt', 'html', 'css', 'xml'],\n    audio:  ['mp3', 'wav', 'ogg', 'acc'],\n    video:  ['mp4', 'mov', 'avi'],\n};\n\nfunction bufferToBase64(buffer) {\n    let binary = '';\n    let bytes = new Uint8Array(buffer);\n    let len = bytes.byteLength;\n    for (let i = 0; i < len && i < 50; i++) {\n        binary += String.fromCharCode(bytes[i]);\n    }\n    return window.btoa(binary);\n}\n\n/**\n * @typedef {object} FileViewerProps\n * @property {string} [key] The key to identify this component.\n * @property {import('../types').Translator} t Translation function\n * @property {ioBroker.Languages} [lang] The selected language.\n * @property {boolean} [expertMode] Is expert mode enabled? (default: false)\n * @property {() => void} onClose Callback when the viewer is closed.\n * @property {string} href The URL to the file to be displayed.\n *\n * @extends {React.Component<FileViewerProps>}\n */\nclass FileViewer extends Component {\n    /**\n     * @param {Readonly<FileViewerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        const ext = Utils.getFileExtension(this.props.href);\n\n        this.state = {\n            text: null,\n            code: null,\n            ext,\n            editing: !!this.props.formatEditFile || false,\n            editingValue: null,\n            copyPossible: EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext),\n            forceUpdate: Date.now(),\n            changed: false,\n            imgError: false,\n        };\n    }\n\n    readFile() {\n        if (this.props.href) {\n            const parts = this.props.href.split('/');\n            parts.splice(0, 2);\n            const adapter = parts[0];\n            const name = parts.splice(1).join('/');\n\n            this.props.socket.readFile(adapter, name)\n                .then(data => {\n                    if (data.file !== undefined) {\n                        data = data.file;\n                    }\n\n                    const newState = {copyPossible: this.state.copyPossible};\n                    // try to detect valid extension\n                    if (data.type === 'Buffer') {\n                        const ext = Utils.detectMimeType(bufferToBase64(data.data));\n                        if (ext) {\n                            newState.ext = ext;\n                            newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);\n                        }\n                    }\n\n                    if (newState.copyPossible) {\n                        if (EXTENSIONS.txt.includes(this.state.ext)) {\n                            newState.text = data;\n                            newState.editingValue = data;\n                        } else if (EXTENSIONS.code.includes(this.state.ext)) {\n                            newState.code = data;\n                            newState.editingValue = data;\n                        }\n                    }\n\n                    this.setState(newState);\n                })\n                .catch(e => window.alert('Cannot read file: ' + e));\n        }\n    }\n\n    componentDidMount() {\n        this.readFile();\n\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    componentWillUnmount() {\n        this.timeout && clearTimeout(this.timeout);\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    onFileChanged = (id, fileName, size) => {\n        if (!this.state.changed) {\n            this.timeout && clearTimeout(this.timeout);\n            this.timeout = setTimeout(() => {\n                this.timeout = null;\n                if (size === null) {\n                    window.alert('Show file was deleted!');\n                } else if (this.state.text !== null || this.state.code !== null) {\n                    this.readFile();\n                } else {\n                    this.setState({ forceUpdate: Date.now() });\n                }\n            }, 300);\n        }\n    };\n\n    writeFile64 = () => {\n        const parts = this.props.href.split('/');\n        const data = this.state.editingValue;\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))\n            .then(_ => this.props.onClose())\n            .catch(e => window.alert('Cannot write file: ' + e));\n    }\n\n    getEditFile(ext) {\n        switch (ext) {\n            case 'json':\n                return 'json';\n            case 'js':\n                return 'javascript';\n            case 'html':\n                return 'html';\n            case 'txt':\n                return 'html';\n            default:\n                return 'json';\n        }\n    }\n\n    getContent() {\n        if (EXTENSIONS.images.includes(this.state.ext)) {\n            if (this.state.imgError) {\n                return <IconNoIcon className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())} />;\n            } else {\n                return <img\n                    onError={e => {\n                        e.target.onerror = null;\n                        this.setState({ imgError: true });\n                    }}\n                    className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())}\n                    src={this.props.href + '?ts=' + this.state.forceUpdate}\n                    alt={this.props.href}\n                />;\n            }\n        } else if (this.state.code !== null || this.state.text !== null || this.state.editing) {\n            return <TextField\n                variant=\"standard\"\n                className={ this.props.classes.textarea }\n                multiline\n                value={ this.state.editingValue || this.state.code || this.state.text }\n                onChange={newValue => this.setState({ editingValue: newValue, changed: true })}\n                InputProps={{ readOnly: !this.state.editing,}}\n            />;\n        }\n    }\n\n    render() {\n        return <Dialog\n            classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}\n            scroll=\"paper\"\n            open={!!this.props.href}\n            onClose={() => this.props.onClose()}\n            fullWidth={true}\n            maxWidth=\"xl\"\n            aria-labelledby=\"form-dialog-title\"\n        >\n            <div className={this.props.classes.dialogTitle}>\n                <DialogTitle id=\"form-dialog-title\">{this.props.t(this.state.editing ? 'Edit' : 'View') + ': ' + this.props.href}</DialogTitle>\n                {EXTENSIONS.images.includes(this.state.ext) && <div>\n                    <IconButton size=\"large\"\n                        color={'inherit'}\n                        onClick={this.props.setStateBackgroundImage}\n                    >\n                        <Brightness5Icon />\n                    </IconButton>\n                </div>\n                }\n            </div>\n            <DialogContent className={this.props.classes.content}>\n                {this.getContent()}\n            </DialogContent>\n            <DialogActions>\n                {this.state.copyPossible ?\n                    <Button\n                        color=\"grey\"\n                        onClick={e => Utils.copyToClipboard(this.state.text || this.state.code, e)}\n                        startIcon={<CopyIcon />}\n                    >\n                        {this.props.t('Copy content')}\n                    </Button> : null}\n                {this.state.editing ?\n                    <Button\n                        color=\"grey\"\n                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}\n                        variant=\"contained\"\n                        onClick={this.writeFile64}\n                        startIcon={<SaveIcon />}\n                    >\n                        {this.props.t('Save')}\n                    </Button> : null}\n                <Button\n                    variant=\"contained\"\n                    onClick={() => this.props.onClose()}\n                    color=\"primary\"\n                    startIcon={<CloseIcon />}\n                >\n                    {this.props.t('Close')}\n                </Button>\n            </DialogActions>\n        </Dialog>;\n    }\n}\n\nFileViewer.propTypes = {\n    t: PropTypes.func,\n    lang: PropTypes.string,\n    expertMode: PropTypes.bool,\n    onClose: PropTypes.func,\n    href: PropTypes.string.isRequired,\n    supportSubscribes: PropTypes.bool,\n};\n\n/** @type {typeof FileViewer} */\nconst _export = withWidth()(withStyles(styles)(FileViewer));\nexport default _export;\n"],"mappings":"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"}
+{"version":3,"file":"FileViewer.js","names":["styles","theme","dialog","height","paper","content","textAlign","textarea","width","img","objectFit","dialogTitle","justifyContent","display","EXTENSIONS","images","code","txt","audio","video","bufferToBase64","buffer","binary","bytes","Uint8Array","len","byteLength","i","String","fromCharCode","window","btoa","FileViewer","props","id","fileName","size","state","changed","timeout","clearTimeout","setTimeout","alert","text","readFile","setState","forceUpdate","Date","now","parts","href","split","data","editingValue","splice","adapter","name","join","socket","writeFile64","Buffer","from","toString","then","_","onClose","e","ext","Utils","getFileExtension","editing","formatEditFile","copyPossible","includes","imgError","file","undefined","newState","type","detectMimeType","supportSubscribes","subscribeFiles","onFileChanged","clsx","classes","getClassBackgroundImage","target","onerror","newValue","readOnly","scrollPaper","t","setStateBackgroundImage","getContent","copyToClipboard","Component","propTypes","PropTypes","func","lang","string","expertMode","bool","isRequired","_export","withWidth","withStyles"],"sources":["FileViewer.js"],"sourcesContent":["import React, { Component } from 'react';\nimport { withStyles } from '@mui/styles';\nimport PropTypes from 'prop-types';\n\nimport TextField from '@mui/material/TextField';\nimport Button from '@mui/material/Button';\nimport Dialog from '@mui/material/Dialog';\nimport DialogActions from '@mui/material/DialogActions';\nimport DialogContent from '@mui/material/DialogContent';\nimport DialogTitle from '@mui/material/DialogTitle';\nimport { IconButton } from '@mui/material';\n\nimport IconNoIcon from '../icons/IconNoIcon';\nimport withWidth from './withWidth';\nimport Utils from './Utils';\n\n// Icons\nimport { FaCopy as CopyIcon } from 'react-icons/fa';\nimport Brightness5Icon from '@mui/icons-material/Brightness6';\nimport CloseIcon from '@mui/icons-material/Close';\nimport SaveIcon from '@mui/icons-material/Save';\n\nconst styles = theme => ({\n    dialog: {\n        height: '100%',\n    },\n    paper: {\n        height: 'calc(100% - 64px)',\n    },\n    content: {\n        textAlign: 'center',\n    },\n    textarea: {\n        width: '100%',\n        height: '100%',\n    },\n    img: {\n        width: 'auto',\n        height: 'calc(100% - 5px)',\n        objectFit: 'contain',\n    },\n    dialogTitle: {\n        justifyContent: 'space-between',\n        display: 'flex'\n    }\n});\n\nexport const EXTENSIONS = {\n    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp'],\n    code:   ['js', 'json', 'md'],\n    txt:    ['log', 'txt', 'html', 'css', 'xml'],\n    audio:  ['mp3', 'wav', 'ogg', 'acc'],\n    video:  ['mp4', 'mov', 'avi'],\n};\n\nfunction bufferToBase64(buffer) {\n    let binary = '';\n    let bytes = new Uint8Array(buffer);\n    let len = bytes.byteLength;\n    for (let i = 0; i < len && i < 50; i++) {\n        binary += String.fromCharCode(bytes[i]);\n    }\n    return window.btoa(binary);\n}\n\n/**\n * @typedef {object} FileViewerProps\n * @property {import('../types').Translator} t Translation function\n * @property {ioBroker.Languages} [lang] The selected language.\n * @property {boolean} [expertMode] Is expert mode enabled? (default: false)\n * @property {() => void} onClose Callback when the viewer is closed.\n * @property {string} href The URL to the file to be displayed.\n *\n * @extends {React.Component<FileViewerProps>}\n */\nclass FileViewer extends Component {\n    /**\n     * @param {Readonly<FileViewerProps>} props\n     */\n    constructor(props) {\n        super(props);\n        const ext = Utils.getFileExtension(this.props.href);\n\n        this.state = {\n            text: null,\n            code: null,\n            ext,\n            editing: !!this.props.formatEditFile || false,\n            editingValue: null,\n            copyPossible: EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext),\n            forceUpdate: Date.now(),\n            changed: false,\n            imgError: false,\n        };\n    }\n\n    readFile() {\n        if (this.props.href) {\n            const parts = this.props.href.split('/');\n            parts.splice(0, 2);\n            const adapter = parts[0];\n            const name = parts.splice(1).join('/');\n\n            this.props.socket.readFile(adapter, name)\n                .then(data => {\n                    if (data.file !== undefined) {\n                        data = data.file;\n                    }\n\n                    const newState = {copyPossible: this.state.copyPossible};\n                    // try to detect valid extension\n                    if (data.type === 'Buffer') {\n                        const ext = Utils.detectMimeType(bufferToBase64(data.data));\n                        if (ext) {\n                            newState.ext = ext;\n                            newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);\n                        }\n                    }\n\n                    if (newState.copyPossible) {\n                        if (EXTENSIONS.txt.includes(this.state.ext)) {\n                            newState.text = data;\n                            newState.editingValue = data;\n                        } else if (EXTENSIONS.code.includes(this.state.ext)) {\n                            newState.code = data;\n                            newState.editingValue = data;\n                        }\n                    }\n\n                    this.setState(newState);\n                })\n                .catch(e => window.alert('Cannot read file: ' + e));\n        }\n    }\n\n    componentDidMount() {\n        this.readFile();\n\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    componentWillUnmount() {\n        this.timeout && clearTimeout(this.timeout);\n        const parts = this.props.href.split('/');\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);\n    }\n\n    onFileChanged = (id, fileName, size) => {\n        if (!this.state.changed) {\n            this.timeout && clearTimeout(this.timeout);\n            this.timeout = setTimeout(() => {\n                this.timeout = null;\n                if (size === null) {\n                    window.alert('Show file was deleted!');\n                } else if (this.state.text !== null || this.state.code !== null) {\n                    this.readFile();\n                } else {\n                    this.setState({ forceUpdate: Date.now() });\n                }\n            }, 300);\n        }\n    };\n\n    writeFile64 = () => {\n        const parts = this.props.href.split('/');\n        const data = this.state.editingValue;\n        parts.splice(0, 2);\n        const adapter = parts[0];\n        const name = parts.splice(1).join('/');\n        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))\n            .then(_ => this.props.onClose())\n            .catch(e => window.alert('Cannot write file: ' + e));\n    }\n\n    getEditFile(ext) {\n        switch (ext) {\n            case 'json':\n                return 'json';\n            case 'js':\n                return 'javascript';\n            case 'html':\n                return 'html';\n            case 'txt':\n                return 'html';\n            default:\n                return 'json';\n        }\n    }\n\n    getContent() {\n        if (EXTENSIONS.images.includes(this.state.ext)) {\n            if (this.state.imgError) {\n                return <IconNoIcon className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())} />;\n            } else {\n                return <img\n                    onError={e => {\n                        e.target.onerror = null;\n                        this.setState({ imgError: true });\n                    }}\n                    className={Utils.clsx(this.props.classes.img, this.props.getClassBackgroundImage())}\n                    src={this.props.href + '?ts=' + this.state.forceUpdate}\n                    alt={this.props.href}\n                />;\n            }\n        } else if (this.state.code !== null || this.state.text !== null || this.state.editing) {\n            return <TextField\n                variant=\"standard\"\n                className={ this.props.classes.textarea }\n                multiline\n                value={ this.state.editingValue || this.state.code || this.state.text }\n                onChange={newValue => this.setState({ editingValue: newValue, changed: true })}\n                InputProps={{ readOnly: !this.state.editing,}}\n            />;\n        }\n    }\n\n    render() {\n        return <Dialog\n            classes={{ scrollPaper: this.props.classes.dialog, paper: this.props.classes.paper }}\n            scroll=\"paper\"\n            open={!!this.props.href}\n            onClose={() => this.props.onClose()}\n            fullWidth={true}\n            maxWidth=\"xl\"\n            aria-labelledby=\"form-dialog-title\"\n        >\n            <div className={this.props.classes.dialogTitle}>\n                <DialogTitle id=\"form-dialog-title\">{this.props.t(this.state.editing ? 'Edit' : 'View') + ': ' + this.props.href}</DialogTitle>\n                {EXTENSIONS.images.includes(this.state.ext) && <div>\n                    <IconButton size=\"large\"\n                        color={'inherit'}\n                        onClick={this.props.setStateBackgroundImage}\n                    >\n                        <Brightness5Icon />\n                    </IconButton>\n                </div>\n                }\n            </div>\n            <DialogContent className={this.props.classes.content}>\n                {this.getContent()}\n            </DialogContent>\n            <DialogActions>\n                {this.state.copyPossible ?\n                    <Button\n                        color=\"grey\"\n                        onClick={e => Utils.copyToClipboard(this.state.text || this.state.code, e)}\n                        startIcon={<CopyIcon />}\n                    >\n                        {this.props.t('Copy content')}\n                    </Button> : null}\n                {this.state.editing ?\n                    <Button\n                        color=\"grey\"\n                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}\n                        variant=\"contained\"\n                        onClick={this.writeFile64}\n                        startIcon={<SaveIcon />}\n                    >\n                        {this.props.t('Save')}\n                    </Button> : null}\n                <Button\n                    variant=\"contained\"\n                    onClick={() => this.props.onClose()}\n                    color=\"primary\"\n                    startIcon={<CloseIcon />}\n                >\n                    {this.props.t('Close')}\n                </Button>\n            </DialogActions>\n        </Dialog>;\n    }\n}\n\nFileViewer.propTypes = {\n    t: PropTypes.func,\n    lang: PropTypes.string,\n    expertMode: PropTypes.bool,\n    onClose: PropTypes.func,\n    href: PropTypes.string.isRequired,\n    supportSubscribes: PropTypes.bool,\n};\n\n/** @type {typeof FileViewer} */\nconst _export = withWidth()(withStyles(styles)(FileViewer));\nexport default _export;\n"],"mappings":"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"}

package/Components/Image.js

@@ -67,7 +67,6 @@ function serializeAttrs(map) {
 }
 /**
  * @typedef {object} ImageProps
- * @property {string} [key] The key to identify this component.
  * @property {string} [color] The color.
  * @property {string} [src] The source of the image.
  * @property {string} [imagePrefix] The image prefix (default: './files/')

package/Components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","names":["getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","props","state","created","color","imgError","showError","getSvgFromData","len","substring","atob","inner","svgProps","attributes","className","__html","e","setTimeout","setState","imagePrefix","newState","changed","React","Component","propTypes","PropTypes","string","isRequired"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        }\n        else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [key] The key to identify this component.\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? {color: this.state.color} : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({created: true});\n                }, 50);\n            }\n\n            return this.svg;\n        } else if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            } else {\n                return <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() => this.props.showError ? this.setState({imgError: true}) : this.setState({src: ''})}\n                />;\n            }\n        } else {\n            return null;\n        }\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"mappings":"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"}
+{"version":3,"file":"Image.js","names":["getElementFromSource","src","svgContainer","document","createElement","innerHTML","svg","firstElementChild","remove","removeChild","serializeAttrs","map","ret","prop","i","length","key","name","startsWith","replace","g","toUpperCase","value","Image","props","state","created","color","imgError","showError","getSvgFromData","len","substring","atob","inner","svgProps","attributes","className","__html","e","setTimeout","setState","imagePrefix","newState","changed","React","Component","propTypes","PropTypes","string","isRequired"],"sources":["Image.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport IconNoIcon from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src) {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg = svgContainer.firstElementChild;\n    if (svg.remove) {\n        svg.remove();\n    } else {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map) {\n    const ret = {};\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\n        }\n        else if (!key.startsWith('data-')) {\n            prop = key.replace(/[-|:]([a-z])/g, g => g[1].toUpperCase());\n        } else {\n            prop = key;\n        }\n\n        ret[prop] = map[i].value;\n    }\n    return ret;\n}\n\n/**\n * @typedef {object} ImageProps\n * @property {string} [color] The color.\n * @property {string} [src] The source of the image.\n * @property {string} [imagePrefix] The image prefix (default: './files/')\n * @property {string} [className] The CSS class name.\n * @property {boolean} [showError] Show image errors (or just show no image)?\n *\n * @extends {React.Component<ImageProps>}\n */\nclass Image extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            svg: !!(this.props.src && this.props.src.startsWith('data:')),\n            created: true,\n            color: this.props.color || '',\n            src: this.props.src || '',\n            imgError: false,\n            showError: this.props.showError,\n        };\n\n        this.svg = this.state.svg ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props, state) {\n        const newState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = props.src && props.src.startsWith('data:');\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.color !== state.color) {\n            newState.color = props.color;\n            newState.created = false;\n            changed = true;\n        }\n\n        if (props && state && props.showError !== state.showError) {\n            newState.showError = props.showError;\n            changed = true;\n        }\n\n        return changed ? newState : null;\n    }\n\n    getSvgFromData(src) {\n        const len = 'data:image/svg+xml;base64,';\n        if (!src.startsWith(len)) {\n            return null;\n        }\n        src = src.substring(len.length);\n        try {\n            src = atob(src);\n            const svg = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes || []);\n\n            svg.remove();\n\n            return <svg\n                className={this.props.className}\n                style={this.state.color ? {color: this.state.color} : {}}\n                {...svgProps}\n                dangerouslySetInnerHTML={{ __html: inner }}\n            />;\n        } catch (e) {\n\n        }\n        return null;\n    }\n\n    render() {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.getSvgFromData(this.state.src);\n                    this.setState({created: true});\n                }, 50);\n            }\n\n            return this.svg;\n        } else if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            } else {\n                return <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() => this.props.showError ? this.setState({imgError: true}) : this.setState({src: ''})}\n                />;\n            }\n        } else {\n            return null;\n        }\n    }\n}\n\nImage.propTypes = {\n    color: PropTypes.string,\n    src: PropTypes.string.isRequired,\n    className: PropTypes.string,\n    imagePrefix: PropTypes.string,\n};\n\nexport default Image;"],"mappings":"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"}

package/Components/JsonConfigComponent/ConfigJsonEditor.js

@@ -41,20 +41,16 @@ var _i18n = _interopRequireDefault(require("../../i18n"));
 
 var _CustomModal = _interopRequireDefault(require("../CustomModal"));
 
-var _reactAce = _interopRequireDefault(require("react-ace"));
-
-require("ace-builds/src-noconflict/mode-json");
-
-require("ace-builds/src-noconflict/theme-clouds_midnight");
-
-require("ace-builds/src-noconflict/theme-chrome");
-
-require("ace-builds/src-noconflict/ext-language_tools");
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+// import AceEditor from 'react-ace';
+// import 'ace-builds/webpack-resolver';
+// import 'ace-builds/src-noconflict/mode-json';
+// import 'ace-builds/src-noconflict/theme-clouds_midnight';
+// import 'ace-builds/src-noconflict/theme-chrome';
+// import 'ace-builds/src-noconflict/ext-language_tools';
 var styles = function styles(theme) {
   return {
     fullWidth: {
@@ -168,28 +164,7 @@ var ConfigJsonEditor = /*#__PURE__*/function (_ConfigGeneric) {
         }
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.wrapper
-      }, /*#__PURE__*/_react["default"].createElement(_reactAce["default"], {
-        mode: "json",
-        theme: this.props.themeName === 'dark' ? 'clouds_midnight' : 'chrome',
-        value: value,
-        width: "100%",
-        height: "100%",
-        onChange: function onChange(newValue) {
-          return _this.setState({
-            value: newValue
-          });
-        },
-        name: "ConfigJsonEditor",
-        fontSize: 14,
-        setOptions: {
-          enableBasicAutocompletion: true,
-          enableLiveAutocompletion: true,
-          enableSnippets: true
-        },
-        editorProps: {
-          $blockScrolling: true
-        }
-      }))) : null, schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null);
+      }, /*#__PURE__*/_react["default"].createElement("div", null, "NOT SUPPORTED"))) : null, schema.help ? /*#__PURE__*/_react["default"].createElement(_FormHelperText["default"], null, this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)) : null);
     }
   }]);
   return ConfigJsonEditor;

package/Components/JsonConfigComponent/ConfigJsonEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigJsonEditor.js","names":["styles","theme","fullWidth","width","flex","display","button","height","minWidth","wrapper","ConfigJsonEditor","props","data","attr","value","ConfigGeneric","getValue","setState","initialized","error","disabled","defaultValue","state","classes","schema","showSelectId","I18n","t","getText","label","onChange","themeName","newValue","enableBasicAutocompletion","enableLiveAutocompletion","enableSnippets","$blockScrolling","help","renderHelp","helpLink","noTranslation","propTypes","socket","PropTypes","object","isRequired","themeType","string","style","className","onError","func","withStyles"],"sources":["JsonConfigComponent/ConfigJsonEditor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@mui/styles';\n\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormControl from '@mui/material/FormControl';\nimport { Button } from '@mui/material';\n\nimport ConfigGeneric from './ConfigGeneric';\nimport I18n from '../../i18n';\nimport CustomModal from '../CustomModal';\n\nimport AceEditor from 'react-ace';\n// import 'ace-builds/webpack-resolver';\nimport 'ace-builds/src-noconflict/mode-json';\nimport 'ace-builds/src-noconflict/theme-clouds_midnight';\nimport 'ace-builds/src-noconflict/theme-chrome';\nimport 'ace-builds/src-noconflict/ext-language_tools';\n\nconst styles = theme => ({\n    fullWidth: {\n        width: '100%'\n    },\n    flex: {\n        display: 'flex'\n    },\n    button: {\n        height: 48,\n        // marginLeft: 4,\n        minWidth: 48,\n    },\n    wrapper: {\n        width: 'calc(100vw - 40px)',\n        height: 'calc(100vh - 188px)',\n    }\n});\n\nclass ConfigJsonEditor extends ConfigGeneric {\n    async componentDidMount() {\n        super.componentDidMount();\n        const { data, attr } = this.props;\n        const value = ConfigGeneric.getValue(data, attr) || {};\n        this.setState({ value, initialized: true });\n    }\n\n    renderItem(error, disabled, defaultValue) {\n        if (!this.state.initialized) {\n            return null;\n        }\n        const { classes, schema, data, attr } = this.props;\n        const { value, showSelectId } = this.state;\n        return <FormControl className={classes.fullWidth} variant=\"standard\">\n            <div className={classes.flex}>\n                <Button\n                    color=\"grey\"\n                    className={classes.button}\n                    size=\"small\"\n                    variant=\"outlined\"\n                    onClick={() => this.setState({ showSelectId: true })}\n                >{I18n.t('ra_JSON editor')}</Button>\n            </div>\n            {showSelectId ? <CustomModal\n                title={this.getText(schema.label)}\n                open={showSelectId}\n                overflowHidden\n                onClose={() => this.setState({ showSelectId: false, value: ConfigGeneric.getValue(data, attr) || {} })}\n                onApply={() => this.setState({ showSelectId: false }, () => this.onChange(attr, value))}\n            >\n                <div className={classes.wrapper}>\n                    <AceEditor\n                        mode=\"json\"\n                        theme={this.props.themeName === 'dark' ? 'clouds_midnight' : 'chrome'}\n                        value={value}\n                        width=\"100%\"\n                        height=\"100%\"\n                        onChange={newValue => this.setState({ value: newValue })}\n                        name=\"ConfigJsonEditor\"\n                        fontSize={14}\n                        setOptions={{\n                            enableBasicAutocompletion: true,\n                            enableLiveAutocompletion: true,\n                            enableSnippets: true\n                        }}\n                        editorProps={{ $blockScrolling: true }}\n                    />\n                </div>\n            </CustomModal> : null}\n            {schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}\n        </FormControl>;\n    }\n}\n\nConfigJsonEditor.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)(ConfigJsonEditor);"],"mappings":"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"}
+{"version":3,"file":"ConfigJsonEditor.js","names":["styles","theme","fullWidth","width","flex","display","button","height","minWidth","wrapper","ConfigJsonEditor","props","data","attr","value","ConfigGeneric","getValue","setState","initialized","error","disabled","defaultValue","state","classes","schema","showSelectId","I18n","t","getText","label","onChange","help","renderHelp","helpLink","noTranslation","propTypes","socket","PropTypes","object","isRequired","themeType","string","themeName","style","className","onError","func","withStyles"],"sources":["JsonConfigComponent/ConfigJsonEditor.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@mui/styles';\n\nimport FormHelperText from '@mui/material/FormHelperText';\nimport FormControl from '@mui/material/FormControl';\nimport { Button } from '@mui/material';\n\nimport ConfigGeneric from './ConfigGeneric';\nimport I18n from '../../i18n';\nimport CustomModal from '../CustomModal';\n\n// import AceEditor from 'react-ace';\n// import 'ace-builds/webpack-resolver';\n// import 'ace-builds/src-noconflict/mode-json';\n// import 'ace-builds/src-noconflict/theme-clouds_midnight';\n// import 'ace-builds/src-noconflict/theme-chrome';\n// import 'ace-builds/src-noconflict/ext-language_tools';\n\nconst styles = theme => ({\n    fullWidth: {\n        width: '100%'\n    },\n    flex: {\n        display: 'flex'\n    },\n    button: {\n        height: 48,\n        // marginLeft: 4,\n        minWidth: 48,\n    },\n    wrapper: {\n        width: 'calc(100vw - 40px)',\n        height: 'calc(100vh - 188px)',\n    }\n});\n\nclass ConfigJsonEditor extends ConfigGeneric {\n    async componentDidMount() {\n        super.componentDidMount();\n        const { data, attr } = this.props;\n        const value = ConfigGeneric.getValue(data, attr) || {};\n        this.setState({ value, initialized: true });\n    }\n\n    renderItem(error, disabled, defaultValue) {\n        if (!this.state.initialized) {\n            return null;\n        }\n        const { classes, schema, data, attr } = this.props;\n        const { value, showSelectId } = this.state;\n        return <FormControl className={classes.fullWidth} variant=\"standard\">\n            <div className={classes.flex}>\n                <Button\n                    color=\"grey\"\n                    className={classes.button}\n                    size=\"small\"\n                    variant=\"outlined\"\n                    onClick={() => this.setState({ showSelectId: true })}\n                >{I18n.t('ra_JSON editor')}</Button>\n            </div>\n            {showSelectId ? <CustomModal\n                title={this.getText(schema.label)}\n                open={showSelectId}\n                overflowHidden\n                onClose={() => this.setState({ showSelectId: false, value: ConfigGeneric.getValue(data, attr) || {} })}\n                onApply={() => this.setState({ showSelectId: false }, () => this.onChange(attr, value))}\n            >\n                <div className={classes.wrapper}>\n                    {/*<AceEditor\n                        mode=\"json\"\n                        theme={this.props.themeName === 'dark' ? 'clouds_midnight' : 'chrome'}\n                        value={value}\n                        width=\"100%\"\n                        height=\"100%\"\n                        onChange={newValue => this.setState({ value: newValue })}\n                        name=\"ConfigJsonEditor\"\n                        fontSize={14}\n                        setOptions={{\n                            enableBasicAutocompletion: true,\n                            enableLiveAutocompletion: true,\n                            enableSnippets: true\n                        }}\n                        editorProps={{ $blockScrolling: true }}\n                    />*/}\n                    <div>NOT SUPPORTED</div>\n                </div>\n            </CustomModal> : null}\n            {schema.help ? <FormHelperText>{this.renderHelp(this.props.schema.help, this.props.schema.helpLink, this.props.schema.noTranslation)}</FormHelperText> : null}\n        </FormControl>;\n    }\n}\n\nConfigJsonEditor.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)(ConfigJsonEditor);"],"mappings":"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"}

package/Components/Loader.js

@@ -29,7 +29,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var 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";
 /**
  * @typedef {object} LoaderProps
- * @property {string} [key] The key to identify this component.
  * @property {number} [size] The size in pixels of this loader.
  * @property {string} [themeType] The chosen theme type.
  * @property {string} [theme] The chosen theme.

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@@' ? '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"}
+{"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 {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;;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/Components/Loaders/PT.js

@@ -29,7 +29,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var ptStyles = "\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.pt-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    z-index: 2;\n}\n.pt-logo-border {\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.pt-loader-block {\n    height: 65px;\n    width: 74px;\n    border-radius: 15px;\n    position: absolute;\n    box-sizing: content-box;\n}\n.pt-loader-blue {\n    border: 9px solid #0F99DE;\n    transform: rotate(5grad);\n    left: 93px;\n    top: 0;\n    animation: spin-blue 5s ease-in-out infinite;\n}\n.pt-loader-green {\n    border: 9px solid #88A536;\n    transform: rotate(-6grad);\n    left: 70px;\n    top: 58px;\n    animation: spin-green 5s ease-in-out infinite;\n}\n.pt-loader-red {\n    border: 9px solid #BD1B24;\n    transform: rotate(-15grad);\n    left: 24px;\n    top: 100px;\n    animation: spin-red 5s ease-in-out infinite;\n}\n\n@keyframes spin-blue {\n    0% {\n        transform: rotate(5deg);\n    }\n    25% {\n        transform: rotate(185deg);\n    }\n    50% {\n        transform: rotate(185deg);\n    }\n    75% {\n        transform: rotate(185deg);\n    }\n    100% {\n        transform: rotate(185deg);\n    }\n}\n@keyframes spin-green {\n    0% {\n        transform: rotate(-6deg);\n    }\n    25% {\n        transform: rotate(-6deg);\n    }\n    50% {\n        transform: rotate(174deg);\n    }\n    75% {\n        transform: rotate(174deg);\n    }\n    100% {\n        transform: rotate(-6deg);\n    }\n}\n@keyframes spin-red {\n    0% {\n        transform: rotate(-15deg);\n    }\n    25% {\n        transform: rotate(-15deg);\n    }\n    50% {\n        transform: rotate(-15deg);\n    }\n    75% {\n        transform: rotate(165deg);\n    }\n    100% {\n        transform: rotate(165deg);\n    }\n}\n";
 /**
  * @typedef {object} LoaderPTProps
- * @property {string} [key] The key to identify this component.
  * @property {number} [size] The size in pixels of this loader.
  * @property {string} [themeType] The chosen theme type.
  * @property {string} [theme] The chosen theme.

package/Components/Loaders/PT.js.map

@@ -1 +1 @@
-{"version":3,"file":"PT.js","names":["ptStyles","LoaderPT","props","size","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","theme","themeType","width","height","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/PT.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n// import './PT.css'\nconst ptStyles = `\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.pt-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    z-index: 2;\n}\n.pt-logo-border {\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.pt-loader-block {\n    height: 65px;\n    width: 74px;\n    border-radius: 15px;\n    position: absolute;\n    box-sizing: content-box;\n}\n.pt-loader-blue {\n    border: 9px solid #0F99DE;\n    transform: rotate(5grad);\n    left: 93px;\n    top: 0;\n    animation: spin-blue 5s ease-in-out infinite;\n}\n.pt-loader-green {\n    border: 9px solid #88A536;\n    transform: rotate(-6grad);\n    left: 70px;\n    top: 58px;\n    animation: spin-green 5s ease-in-out infinite;\n}\n.pt-loader-red {\n    border: 9px solid #BD1B24;\n    transform: rotate(-15grad);\n    left: 24px;\n    top: 100px;\n    animation: spin-red 5s ease-in-out infinite;\n}\n\n@keyframes spin-blue {\n    0% {\n        transform: rotate(5deg);\n    }\n    25% {\n        transform: rotate(185deg);\n    }\n    50% {\n        transform: rotate(185deg);\n    }\n    75% {\n        transform: rotate(185deg);\n    }\n    100% {\n        transform: rotate(185deg);\n    }\n}\n@keyframes spin-green {\n    0% {\n        transform: rotate(-6deg);\n    }\n    25% {\n        transform: rotate(-6deg);\n    }\n    50% {\n        transform: rotate(174deg);\n    }\n    75% {\n        transform: rotate(174deg);\n    }\n    100% {\n        transform: rotate(-6deg);\n    }\n}\n@keyframes spin-red {\n    0% {\n        transform: rotate(-15deg);\n    }\n    25% {\n        transform: rotate(-15deg);\n    }\n    50% {\n        transform: rotate(-15deg);\n    }\n    75% {\n        transform: rotate(165deg);\n    }\n    100% {\n        transform: rotate(165deg);\n    }\n}\n`;\n\n/**\n * @typedef {object} LoaderPTProps\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<LoaderPTProps>}\n */\nclass LoaderPT extends React.Component {\n    /**\n     * @param {LoaderPTProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n\n        if (!window.document.getElementById('pt-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'pt-iobroker-component');\n            style.innerHTML = ptStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'pt-logo-back logo-background-' + theme}>\n            <div className=\"pt-logo-div\" style={{width: this.size, height: this.size}}>\n                <div style={{width: 200, height: 200}}>\n                    <div className=\"pt-loader-blue pt-loader-block\"/>\n                    <div className=\"pt-loader-green pt-loader-block\"/>\n                    <div className=\"pt-loader-red pt-loader-block\"/>\n                </div>\n            </div>\n        </div>;\n    }\n}\n\nLoaderPT.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderPT} */\nconst _export = LoaderPT;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;;;;;AACA;AACA,IAAMA,QAAQ,ohEAAd;AAyGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,Q;;;;;EACF;AACJ;AACA;EACI,kBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;;IAEA,IAAI,CAACC,MAAM,CAACC,QAAP,CAAgBC,cAAhB,CAA+B,uBAA/B,CAAL,EAA8D;MAC1D,IAAMC,KAAK,GAAGH,MAAM,CAACC,QAAP,CAAgBG,aAAhB,CAA8B,OAA9B,CAAd;MACAD,KAAK,CAACE,YAAN,CAAmB,IAAnB,EAAyB,uBAAzB;MACAF,KAAK,CAACG,SAAN,GAAkBV,QAAlB;MACAI,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IATc;EAUlB;;;;WAED,kBAAS;MACL,IAAMM,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,kCAAkCA;MAAlD,gBACH;QAAK,SAAS,EAAC,aAAf;QAA6B,KAAK,EAAE;UAACE,KAAK,EAAE,KAAKZ,IAAb;UAAmBa,MAAM,EAAE,KAAKb;QAAhC;MAApC,gBACI;QAAK,KAAK,EAAE;UAACY,KAAK,EAAE,GAAR;UAAaC,MAAM,EAAE;QAArB;MAAZ,gBACI;QAAK,SAAS,EAAC;MAAf,EADJ,eAEI;QAAK,SAAS,EAAC;MAAf,EAFJ,eAGI;QAAK,SAAS,EAAC;MAAf,EAHJ,CADJ,CADG,CAAP;IASH;;;EA3BkBC,iBAAA,CAAMC,S;;AA8B7BjB,QAAQ,CAACkB,SAAT,GAAqB;EACjBhB,IAAI,EAAEiB,qBAAA,CAAUC,MADC;EAEjBP,SAAS,EAAEM,qBAAA,CAAUE;AAFJ,CAArB;AAKA;;AACA,IAAMC,OAAO,GAAGtB,QAAhB;eACesB,O"}
+{"version":3,"file":"PT.js","names":["ptStyles","LoaderPT","props","size","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","theme","themeType","width","height","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/PT.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\n// import './PT.css'\nconst ptStyles = `\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.pt-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    z-index: 2;\n}\n.pt-logo-border {\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.pt-loader-block {\n    height: 65px;\n    width: 74px;\n    border-radius: 15px;\n    position: absolute;\n    box-sizing: content-box;\n}\n.pt-loader-blue {\n    border: 9px solid #0F99DE;\n    transform: rotate(5grad);\n    left: 93px;\n    top: 0;\n    animation: spin-blue 5s ease-in-out infinite;\n}\n.pt-loader-green {\n    border: 9px solid #88A536;\n    transform: rotate(-6grad);\n    left: 70px;\n    top: 58px;\n    animation: spin-green 5s ease-in-out infinite;\n}\n.pt-loader-red {\n    border: 9px solid #BD1B24;\n    transform: rotate(-15grad);\n    left: 24px;\n    top: 100px;\n    animation: spin-red 5s ease-in-out infinite;\n}\n\n@keyframes spin-blue {\n    0% {\n        transform: rotate(5deg);\n    }\n    25% {\n        transform: rotate(185deg);\n    }\n    50% {\n        transform: rotate(185deg);\n    }\n    75% {\n        transform: rotate(185deg);\n    }\n    100% {\n        transform: rotate(185deg);\n    }\n}\n@keyframes spin-green {\n    0% {\n        transform: rotate(-6deg);\n    }\n    25% {\n        transform: rotate(-6deg);\n    }\n    50% {\n        transform: rotate(174deg);\n    }\n    75% {\n        transform: rotate(174deg);\n    }\n    100% {\n        transform: rotate(-6deg);\n    }\n}\n@keyframes spin-red {\n    0% {\n        transform: rotate(-15deg);\n    }\n    25% {\n        transform: rotate(-15deg);\n    }\n    50% {\n        transform: rotate(-15deg);\n    }\n    75% {\n        transform: rotate(165deg);\n    }\n    100% {\n        transform: rotate(165deg);\n    }\n}\n`;\n\n/**\n * @typedef {object} LoaderPTProps\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<LoaderPTProps>}\n */\nclass LoaderPT extends React.Component {\n    /**\n     * @param {LoaderPTProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n\n        if (!window.document.getElementById('pt-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'pt-iobroker-component');\n            style.innerHTML = ptStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'pt-logo-back logo-background-' + theme}>\n            <div className=\"pt-logo-div\" style={{width: this.size, height: this.size}}>\n                <div style={{width: 200, height: 200}}>\n                    <div className=\"pt-loader-blue pt-loader-block\"/>\n                    <div className=\"pt-loader-green pt-loader-block\"/>\n                    <div className=\"pt-loader-red pt-loader-block\"/>\n                </div>\n            </div>\n        </div>;\n    }\n}\n\nLoaderPT.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderPT} */\nconst _export = LoaderPT;\nexport default _export;"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;;;;;AACA;AACA,IAAMA,QAAQ,ohEAAd;AAyGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,Q;;;;;EACF;AACJ;AACA;EACI,kBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;;IAEA,IAAI,CAACC,MAAM,CAACC,QAAP,CAAgBC,cAAhB,CAA+B,uBAA/B,CAAL,EAA8D;MAC1D,IAAMC,KAAK,GAAGH,MAAM,CAACC,QAAP,CAAgBG,aAAhB,CAA8B,OAA9B,CAAd;MACAD,KAAK,CAACE,YAAN,CAAmB,IAAnB,EAAyB,uBAAzB;MACAF,KAAK,CAACG,SAAN,GAAkBV,QAAlB;MACAI,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IATc;EAUlB;;;;WAED,kBAAS;MACL,IAAMM,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,kCAAkCA;MAAlD,gBACH;QAAK,SAAS,EAAC,aAAf;QAA6B,KAAK,EAAE;UAACE,KAAK,EAAE,KAAKZ,IAAb;UAAmBa,MAAM,EAAE,KAAKb;QAAhC;MAApC,gBACI;QAAK,KAAK,EAAE;UAACY,KAAK,EAAE,GAAR;UAAaC,MAAM,EAAE;QAArB;MAAZ,gBACI;QAAK,SAAS,EAAC;MAAf,EADJ,eAEI;QAAK,SAAS,EAAC;MAAf,EAFJ,eAGI;QAAK,SAAS,EAAC;MAAf,EAHJ,CADJ,CADG,CAAP;IASH;;;EA3BkBC,iBAAA,CAAMC,S;;AA8B7BjB,QAAQ,CAACkB,SAAT,GAAqB;EACjBhB,IAAI,EAAEiB,qBAAA,CAAUC,MADC;EAEjBP,SAAS,EAAEM,qBAAA,CAAUE;AAFJ,CAArB;AAKA;;AACA,IAAMC,OAAO,GAAGtB,QAAhB;eACesB,O"}

package/Components/Loaders/Vendor.js

@@ -31,7 +31,6 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var vendorStyles = "\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n";
 /**
  * @typedef {object} LoaderVendorProps
- * @property {string} [key] The key to identify this component.
  * @property {number} [size] The size in pixels of this loader.
  * @property {string} [themeType] The chosen theme type.
  * @property {string} [theme] The chosen theme.

package/Components/Loaders/Vendor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Vendor.js","names":["vendorStyles","LoaderVendor","props","size","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","theme","themeType","display","flexDirection","height","width","margin","flexGrow","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/Vendor.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport CircularProgress from '@mui/material/CircularProgress';\n// import './Vendor.css'\nconst vendorStyles = `\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n`;\n\n/**\n * @typedef {object} LoaderVendorProps\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<LoaderVendorProps>}\n */\nclass LoaderVendor extends React.Component {\n    /**\n     * @param {LoaderVendorProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n\n        if (!window.document.getElementById('vendor-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'vendor-iobroker-component');\n            style.innerHTML = vendorStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'vendor-logo-back logo-background-' + theme} style={{\n            display: 'flex',\n            flexDirection: 'column',\n            height: '100%',\n            width: '10%',\n            margin: 'auto'\n        }}>\n            <div style={{flexGrow: 1}}/>\n            <CircularProgress color=\"secondary\" size={200} thickness={5}/>\n            <div style={{flexGrow: 1}}/>\n        </div>;\n    }\n}\n\nLoaderVendor.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderVendor} */\nconst _export = LoaderVendor;\nexport default _export;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;AACA;;;;;;AACA;AACA,IAAMA,YAAY,iKAAlB;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,Y;;;;;EACF;AACJ;AACA;EACI,sBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;;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,GAAkBV,YAAlB;MACAI,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IATc;EAUlB;;;;WAED,kBAAS;MACL,IAAMM,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,sCAAsCA,KAAtD;QAA6D,KAAK,EAAE;UACvEE,OAAO,EAAE,MAD8D;UAEvEC,aAAa,EAAE,QAFwD;UAGvEC,MAAM,EAAE,MAH+D;UAIvEC,KAAK,EAAE,KAJgE;UAKvEC,MAAM,EAAE;QAL+D;MAApE,gBAOH;QAAK,KAAK,EAAE;UAACC,QAAQ,EAAE;QAAX;MAAZ,EAPG,eAQH,gCAAC,4BAAD;QAAkB,KAAK,EAAC,WAAxB;QAAoC,IAAI,EAAE,GAA1C;QAA+C,SAAS,EAAE;MAA1D,EARG,eASH;QAAK,KAAK,EAAE;UAACA,QAAQ,EAAE;QAAX;MAAZ,EATG,CAAP;IAWH;;;EA7BsBC,iBAAA,CAAMC,S;;AAgCjCrB,YAAY,CAACsB,SAAb,GAAyB;EACrBpB,IAAI,EAAEqB,qBAAA,CAAUC,MADK;EAErBX,SAAS,EAAEU,qBAAA,CAAUE;AAFA,CAAzB;AAKA;;AACA,IAAMC,OAAO,GAAG1B,YAAhB;eACe0B,O"}
+{"version":3,"file":"Vendor.js","names":["vendorStyles","LoaderVendor","props","size","window","document","getElementById","style","createElement","setAttribute","innerHTML","head","appendChild","theme","themeType","display","flexDirection","height","width","margin","flexGrow","React","Component","propTypes","PropTypes","number","string","_export"],"sources":["Loaders/Vendor.js"],"sourcesContent":["/**\n * Copyright 2021-2022 ioBroker GmbH\n *\n * MIT License\n *\n **/\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport CircularProgress from '@mui/material/CircularProgress';\n// import './Vendor.css'\nconst vendorStyles = `\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n`;\n\n/**\n * @typedef {object} LoaderVendorProps\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<LoaderVendorProps>}\n */\nclass LoaderVendor extends React.Component {\n    /**\n     * @param {LoaderVendorProps} props\n     */\n    constructor(props) {\n        super(props);\n        this.size = this.props.size || 200;\n\n        if (!window.document.getElementById('vendor-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'vendor-iobroker-component');\n            style.innerHTML = vendorStyles;\n            window.document.head.appendChild(style);\n        }\n    }\n\n    render() {\n        const theme = this.props.themeType || this.props.theme || 'light';\n        return <div className={'vendor-logo-back logo-background-' + theme} style={{\n            display: 'flex',\n            flexDirection: 'column',\n            height: '100%',\n            width: '10%',\n            margin: 'auto'\n        }}>\n            <div style={{flexGrow: 1}}/>\n            <CircularProgress color=\"secondary\" size={200} thickness={5}/>\n            <div style={{flexGrow: 1}}/>\n        </div>;\n    }\n}\n\nLoaderVendor.propTypes = {\n    size: PropTypes.number,\n    themeType: PropTypes.string\n};\n\n/** @type {typeof LoaderVendor} */\nconst _export = LoaderVendor;\nexport default _export;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAMA;;AACA;;AACA;;;;;;AACA;AACA,IAAMA,YAAY,iKAAlB;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;IACMC,Y;;;;;EACF;AACJ;AACA;EACI,sBAAYC,KAAZ,EAAmB;IAAA;;IAAA;IACf,0BAAMA,KAAN;IACA,MAAKC,IAAL,GAAY,MAAKD,KAAL,CAAWC,IAAX,IAAmB,GAA/B;;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,GAAkBV,YAAlB;MACAI,MAAM,CAACC,QAAP,CAAgBM,IAAhB,CAAqBC,WAArB,CAAiCL,KAAjC;IACH;;IATc;EAUlB;;;;WAED,kBAAS;MACL,IAAMM,KAAK,GAAG,KAAKX,KAAL,CAAWY,SAAX,IAAwB,KAAKZ,KAAL,CAAWW,KAAnC,IAA4C,OAA1D;MACA,oBAAO;QAAK,SAAS,EAAE,sCAAsCA,KAAtD;QAA6D,KAAK,EAAE;UACvEE,OAAO,EAAE,MAD8D;UAEvEC,aAAa,EAAE,QAFwD;UAGvEC,MAAM,EAAE,MAH+D;UAIvEC,KAAK,EAAE,KAJgE;UAKvEC,MAAM,EAAE;QAL+D;MAApE,gBAOH;QAAK,KAAK,EAAE;UAACC,QAAQ,EAAE;QAAX;MAAZ,EAPG,eAQH,gCAAC,4BAAD;QAAkB,KAAK,EAAC,WAAxB;QAAoC,IAAI,EAAE,GAA1C;QAA+C,SAAS,EAAE;MAA1D,EARG,eASH;QAAK,KAAK,EAAE;UAACA,QAAQ,EAAE;QAAX;MAAZ,EATG,CAAP;IAWH;;;EA7BsBC,iBAAA,CAAMC,S;;AAgCjCrB,YAAY,CAACsB,SAAb,GAAyB;EACrBpB,IAAI,EAAEqB,qBAAA,CAAUC,MADK;EAErBX,SAAS,EAAEU,qBAAA,CAAUE;AAFA,CAAzB;AAKA;;AACA,IAAMC,OAAO,GAAG1B,YAAhB;eACe0B,O"}

package/Components/ObjectBrowser.js

@@ -67,6 +67,8 @@ var _List = _interopRequireDefault(require("@mui/material/List"));
 
 var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 
+var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
+
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
 
 var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
@@ -1534,7 +1536,7 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
     }
 
     if (state.from) {
-      var from = state.from || '';
+      var from = state.from.toString();
 
       if (from.startsWith('system.adapter.')) {
         from = from.substring(15);
@@ -1547,7 +1549,7 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
     }
 
     if (state.user) {
-      var user = state.user || '';
+      var user = state.user.toString();
 
       if (user.startsWith('system.user.')) {
         user = user.substring(12);
@@ -1559,6 +1561,13 @@ function formatValue(id, state, obj, texts, dateFormat, isFloatComma) {
       });
     }
 
+    if (state.c) {
+      valFull.push({
+        t: texts.c,
+        v: state.c
+      });
+    }
+
     valFull.push({
       t: texts.quality,
       v: _Utils["default"].quality2text(state.q || 0).join(', '),
@@ -2730,6 +2739,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       lc: props.t('ra_tooltip_lc'),
       from: props.t('ra_tooltip_from'),
       user: props.t('ra_tooltip_user'),
+      c: props.t('ra_tooltip_comment'),
       quality: props.t('ra_tooltip_quality'),
       editObject: props.t('ra_tooltip_editObject'),
       deleteObject: props.t('ra_tooltip_deleteObject'),
@@ -3178,7 +3188,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
       return cols.filter(function (id) {
         return isLast && (id === 'val' || id === 'buttons') || !isLast && id !== 'val' && id !== 'buttons';
       }).map(function (id) {
-        return /*#__PURE__*/_react["default"].createElement(ListItemButton, {
+        return /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
           onClick: function onClick() {
             if (!_this9.state.columnsAuto && id !== 'id') {
               var columns = (0, _toConsumableArray2["default"])(_this9.state.columns || []);
@@ -3342,7 +3352,7 @@ var ObjectBrowser = /*#__PURE__*/function (_Component) {
           }
         }), /*#__PURE__*/_react["default"].createElement(_List["default"], null, this._renderDefinedList(false), this.state.columnsForAdmin && Object.keys(this.state.columnsForAdmin).sort().map(function (adapter) {
           return _this10.state.columnsForAdmin[adapter].map(function (column) {
-            return /*#__PURE__*/_react["default"].createElement(ListItemButton, {
+            return /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
               onClick: function onClick() {
                 if (!_this10.state.columnsAuto) {
                   var columns = (0, _toConsumableArray2["default"])(_this10.state.columns || []);