@iobroker/adapter-react-v5 7.4.19 → 7.4.22

package/build/Components/Image.d.ts

@@ -1,5 +1,4 @@
-import { type JSX } from 'react';
-import { Component } from 'react';
+import { type JSX, Component } from 'react';
 interface ImageProps {
     color?: string;
     src?: string;

package/build/Components/Image.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { IconNoIcon } from '../icons/IconNoIcon';
 function getElementFromSource(src) {
     const svgContainer = document.createElement('div');

package/build/Components/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sourceRoot":"./src/","sources":["Components/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\nimport { Component } from 'react';\n\nimport { IconNoIcon } from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src: string): HTMLElement | null {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg: HTMLElement = svgContainer.firstElementChild as HTMLElement;\n    if (svg?.remove) {\n        svg.remove();\n    } else if (svg) {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map?: NamedNodeMap): Record<string, string> {\n    const ret: Record<string, string> = {};\n    if (!map) {\n        return ret;\n    }\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\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\ninterface ImageProps {\n    /* The color */\n    color?: string;\n    /* The source of the image */\n    src?: string;\n    /* The image prefix (default: './files/') */\n    imagePrefix?: string;\n    /* The CSS class name */\n    className?: string;\n    /* Show image errors (or just show no image)? */\n    showError?: boolean;\n}\n\ninterface ImageState {\n    svg?: boolean;\n    created?: boolean;\n    color?: string;\n    src?: string;\n    imgError?: boolean;\n    showError?: boolean;\n}\n\n/**\n * A component for displaying an image.\n */\nexport class Image extends Component<ImageProps, ImageState> {\n    private svg: JSX.Element | null;\n\n    static REMOTE_SERVER: boolean = window.location.hostname.includes('iobroker.in');\n\n    static REMOTE_PREFIX: string = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);\n\n    constructor(props: ImageProps) {\n        super(props);\n        this.state = {\n            svg: !!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.state.src ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props: ImageProps, state: ImageState): Partial<ImageState> | null {\n        const newState: ImageState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = 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: string): JSX.Element | null {\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: HTMLElement = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes);\n\n            svg.remove();\n\n            return (\n                <svg\n                    className={this.props.className}\n                    style={this.state.color ? { color: this.state.color } : {}}\n                    {...svgProps}\n                    dangerouslySetInnerHTML={{ __html: inner }}\n                />\n            );\n        } catch {\n            // ignore\n        }\n        return null;\n    }\n\n    render(): JSX.Element | null {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.state.src ? this.getSvgFromData(this.state.src) : null;\n                    this.setState({ created: true });\n                }, 50);\n            }\n\n            return this.svg;\n        }\n        if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            }\n            if (\n                Image.REMOTE_SERVER &&\n                !this.state.src.startsWith('http://') &&\n                !this.state.src.startsWith('https://')\n            ) {\n                let src = (this.props.imagePrefix || '') + this.state.src;\n                if (src.startsWith('./')) {\n                    src = Image.REMOTE_PREFIX + src.substring(2);\n                } else if (!src.startsWith('/')) {\n                    src = Image.REMOTE_PREFIX + src;\n                }\n                return (\n                    <img\n                        className={this.props.className}\n                        src={`https://remote-files.iobroker.in${src}`}\n                        alt=\"\"\n                        onError={() =>\n                            this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })\n                        }\n                    />\n                );\n            }\n\n            return (\n                <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() =>\n                        this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })\n                    }\n                />\n            );\n        }\n\n        return null;\n    }\n}\n"]}
+{"version":3,"file":"Image.js","sourceRoot":"./src/","sources":["Components/Image.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX, Component } from 'react';\n\nimport { IconNoIcon } from '../icons/IconNoIcon';\n\nfunction getElementFromSource(src: string): HTMLElement | null {\n    const svgContainer = document.createElement('div');\n    svgContainer.innerHTML = src;\n    const svg: HTMLElement = svgContainer.firstElementChild as HTMLElement;\n    if (svg?.remove) {\n        svg.remove();\n    } else if (svg) {\n        svgContainer.removeChild(svg);\n    }\n\n    svgContainer.remove();\n    return svg;\n}\n\nfunction serializeAttrs(map?: NamedNodeMap): Record<string, string> {\n    const ret: Record<string, string> = {};\n    if (!map) {\n        return ret;\n    }\n    for (let prop, i = 0; i < map.length; i++) {\n        const key = map[i].name;\n        if (key === 'class') {\n            prop = 'className';\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\ninterface ImageProps {\n    /* The color */\n    color?: string;\n    /* The source of the image */\n    src?: string;\n    /* The image prefix (default: './files/') */\n    imagePrefix?: string;\n    /* The CSS class name */\n    className?: string;\n    /* Show image errors (or just show no image)? */\n    showError?: boolean;\n}\n\ninterface ImageState {\n    svg?: boolean;\n    created?: boolean;\n    color?: string;\n    src?: string;\n    imgError?: boolean;\n    showError?: boolean;\n}\n\n/**\n * A component for displaying an image.\n */\nexport class Image extends Component<ImageProps, ImageState> {\n    private svg: JSX.Element | null;\n\n    static REMOTE_SERVER: boolean = window.location.hostname.includes('iobroker.in');\n\n    static REMOTE_PREFIX: string = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);\n\n    constructor(props: ImageProps) {\n        super(props);\n        this.state = {\n            svg: !!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.state.src ? this.getSvgFromData(this.state.src) : null;\n    }\n\n    static getDerivedStateFromProps(props: ImageProps, state: ImageState): Partial<ImageState> | null {\n        const newState: ImageState = {};\n        let changed = false;\n\n        if (props && state && props.src !== state.src) {\n            newState.src = props.src;\n            newState.svg = 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: string): JSX.Element | null {\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: HTMLElement = getElementFromSource(src);\n            const inner = svg.innerHTML;\n            const svgProps = serializeAttrs(svg.attributes);\n\n            svg.remove();\n\n            return (\n                <svg\n                    className={this.props.className}\n                    style={this.state.color ? { color: this.state.color } : {}}\n                    {...svgProps}\n                    dangerouslySetInnerHTML={{ __html: inner }}\n                />\n            );\n        } catch {\n            // ignore\n        }\n        return null;\n    }\n\n    render(): JSX.Element | null {\n        if (this.state.svg) {\n            if (!this.state.created) {\n                setTimeout(() => {\n                    this.svg = this.state.src ? this.getSvgFromData(this.state.src) : null;\n                    this.setState({ created: true });\n                }, 50);\n            }\n\n            return this.svg;\n        }\n        if (this.state.src) {\n            if (this.state.imgError || !this.state.src) {\n                return <IconNoIcon className={this.props.className} />;\n            }\n            if (\n                Image.REMOTE_SERVER &&\n                !this.state.src.startsWith('http://') &&\n                !this.state.src.startsWith('https://')\n            ) {\n                let src = (this.props.imagePrefix || '') + this.state.src;\n                if (src.startsWith('./')) {\n                    src = Image.REMOTE_PREFIX + src.substring(2);\n                } else if (!src.startsWith('/')) {\n                    src = Image.REMOTE_PREFIX + src;\n                }\n                return (\n                    <img\n                        className={this.props.className}\n                        src={`https://remote-files.iobroker.in${src}`}\n                        alt=\"\"\n                        onError={() =>\n                            this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })\n                        }\n                    />\n                );\n            }\n\n            return (\n                <img\n                    className={this.props.className}\n                    src={(this.props.imagePrefix || '') + this.state.src}\n                    alt=\"\"\n                    onError={() =>\n                        this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })\n                    }\n                />\n            );\n        }\n\n        return null;\n    }\n}\n"]}

package/build/Components/InfoBox.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+interface InfoBoxProps {
+    /** Text to display in the info box */
+    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;
+    /** The type determines the color and symbol */
+    type: 'warning' | 'info' | 'error' | 'ok';
+    /** If the Box is closeable */
+    closeable?: boolean;
+    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */
+    storeId?: string;
+    /** Use together with `closeable: true`, listener called if close button clicked */
+    onClose?: (desiredState: boolean) => void;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Icon position */
+    iconPosition?: 'top' | 'middle';
+    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */
+    closed?: boolean;
+}
+interface InfoBoxState {
+    closed: boolean;
+}
+/**
+ * This component can be used to show important information or warnings to the user
+ */
+export default class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {
+    private readonly refTypo;
+    private height;
+    private width;
+    constructor(props: InfoBoxProps);
+    componentDidMount(): void;
+    onClick(): void;
+    detectHeight(): void;
+    componentDidUpdate(): void;
+    render(): React.ReactNode;
+}
+export {};

package/build/Components/InfoBox.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { Info, Warning, Close, Visibility, Check } from '@mui/icons-material';
+/**
+ * This component can be used to show important information or warnings to the user
+ */
+export default class InfoBox extends React.Component {
+    refTypo;
+    height;
+    width;
+    constructor(props) {
+        super(props);
+        this.state = {
+            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,
+        };
+        this.height = 0;
+        this.width = 0;
+        this.refTypo = React.createRef();
+    }
+    componentDidMount() {
+        this.detectHeight();
+    }
+    onClick() {
+        if (this.props.storeId && this.props.closed === undefined) {
+            if (this.state.closed) {
+                window.localStorage.removeItem(this.props.storeId);
+            }
+            else {
+                window.localStorage.setItem(this.props.storeId, 'true');
+            }
+        }
+        if (this.props.closed === undefined) {
+            this.setState({ closed: !this.state.closed }, () => {
+                // Inform about state change
+                if (this.props.onClose) {
+                    this.props.onClose(this.state.closed);
+                }
+            });
+        }
+        else if (this.props.onClose) {
+            this.props.onClose(!this.props.closed);
+        }
+    }
+    detectHeight() {
+        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+        // We must get the height of the element when it is open to make transition
+        if (this.props.closeable && !closed && this.refTypo.current) {
+            window.requestAnimationFrame(() => {
+                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+                if (closed) {
+                    return;
+                }
+                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {
+                    this.height = this.refTypo.current.clientHeight;
+                    this.width = this.refTypo.current.clientWidth;
+                    this.forceUpdate();
+                }
+            });
+        }
+    }
+    componentDidUpdate() {
+        this.detectHeight();
+    }
+    render() {
+        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;
+        const Icon = closed ? Visibility : Close;
+        return (React.createElement(Box, { className: "iom-info-box", style: {
+                whiteSpace: 'preserve',
+                display: 'flex',
+                gap: 8,
+                alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                padding: 4,
+                borderRadius: 5,
+                marginBottom: 8,
+                maxWidth: '100%',
+                transition: 'height 0.5s',
+                height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,
+                overflow: this.props.closeable ? 'hidden' : undefined,
+                position: 'relative',
+                ...this.props.style,
+            }, sx: {
+                borderColor: theme => this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,
+            } },
+            this.props.type === 'ok' ? (React.createElement(Check, { style: { color: '#0F0' } })) : this.props.type === 'info' ? (React.createElement(Info, { color: "primary" })) : (React.createElement(Warning, { color: this.props.type })),
+            React.createElement(Typography, { ref: this.refTypo }, this.props.children),
+            this.props.closeable ? (React.createElement(Icon, { sx: {
+                    color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),
+                    // alignSelf: 'flex-start',
+                    cursor: 'pointer',
+                    position: 'absolute',
+                    top: 4,
+                    right: 4,
+                }, onClick: () => this.onClick() })) : null,
+            this.props.closeable ? React.createElement("div", { style: { width: 22 } }) : null,
+            closed ? (React.createElement(Box
+            // This is a shadow box at the bottom of the InfoBox when it closed
+            , { 
+                // This is a shadow box at the bottom of the InfoBox when it closed
+                component: "div", sx: theme => {
+                    const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;
+                    return {
+                        background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,
+                    };
+                }, style: {
+                    bottom: 0,
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    height: 10,
+                } })) : null));
+    }
+}
+//# sourceMappingURL=InfoBox.js.map

package/build/Components/InfoBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InfoBox.js","sourceRoot":"./src/","sources":["Components/InfoBox.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport { Info, Warning, Close, Visibility, type SvgIconComponent, Check } from '@mui/icons-material';\n\ninterface InfoBoxProps {\n    /** Text to display in the info box */\n    children: string | (string | React.JSX.Element | null)[] | React.JSX.Element;\n    /** The type determines the color and symbol */\n    type: 'warning' | 'info' | 'error' | 'ok';\n    /** If the Box is closeable */\n    closeable?: boolean;\n    /** Use together with `closeable: true`. You can specify in which variable in local storage the state of this info box could be stored */\n    storeId?: string;\n    /** Use together with `closeable: true`, listener called if close button clicked */\n    onClose?: (desiredState: boolean) => void;\n    /** Custom style */\n    style?: React.CSSProperties;\n    /** Icon position */\n    iconPosition?: 'top' | 'middle';\n    /** Use together with `closeable: true`. If the box is closed or not. In this case, it will be controlled from outside */\n    closed?: boolean;\n}\n\ninterface InfoBoxState {\n    closed: boolean;\n}\n/**\n * This component can be used to show important information or warnings to the user\n */\nexport default class InfoBox extends React.Component<InfoBoxProps, InfoBoxState> {\n    private readonly refTypo: React.RefObject<HTMLDivElement>;\n    private height: number;\n    private width: number;\n\n    constructor(props: InfoBoxProps) {\n        super(props);\n        this.state = {\n            closed: this.props.storeId ? window.localStorage.getItem(this.props.storeId) === 'true' : false,\n        };\n        this.height = 0;\n        this.width = 0;\n\n        this.refTypo = React.createRef();\n    }\n\n    componentDidMount(): void {\n        this.detectHeight();\n    }\n\n    onClick(): void {\n        if (this.props.storeId && this.props.closed === undefined) {\n            if (this.state.closed) {\n                window.localStorage.removeItem(this.props.storeId);\n            } else {\n                window.localStorage.setItem(this.props.storeId, 'true');\n            }\n        }\n        if (this.props.closed === undefined) {\n            this.setState({ closed: !this.state.closed }, () => {\n                // Inform about state change\n                if (this.props.onClose) {\n                    this.props.onClose(this.state.closed);\n                }\n            });\n        } else if (this.props.onClose) {\n            this.props.onClose(!this.props.closed);\n        }\n    }\n\n    detectHeight(): void {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n        // We must get the height of the element when it is open to make transition\n        if (this.props.closeable && !closed && this.refTypo.current) {\n            window.requestAnimationFrame(() => {\n                const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n                if (closed) {\n                    return;\n                }\n                if (this.refTypo.current && (!this.height || this.width !== this.refTypo.current.clientWidth)) {\n                    this.height = this.refTypo.current.clientHeight;\n                    this.width = this.refTypo.current.clientWidth;\n                    this.forceUpdate();\n                }\n            });\n        }\n    }\n\n    componentDidUpdate(): void {\n        this.detectHeight();\n    }\n\n    render(): React.ReactNode {\n        const closed = this.props.closed !== undefined ? this.props.closed : this.state.closed;\n\n        const Icon: SvgIconComponent = closed ? Visibility : Close;\n\n        return (\n            <Box\n                className=\"iom-info-box\"\n                style={{\n                    whiteSpace: 'preserve',\n                    display: 'flex',\n                    gap: 8,\n                    alignItems: closed || this.props.iconPosition === 'top' ? 'flex-start' : 'center',\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    padding: 4,\n                    borderRadius: 5,\n                    marginBottom: 8,\n                    maxWidth: '100%',\n                    transition: 'height 0.5s',\n                    height: this.props.closeable ? (closed ? 30 : this.height || undefined) : undefined,\n                    overflow: this.props.closeable ? 'hidden' : undefined,\n                    position: 'relative',\n                    ...this.props.style,\n                }}\n                sx={{\n                    borderColor: theme =>\n                        this.props.type === 'ok' ? theme.palette.info.main : theme.palette[this.props.type].main,\n                }}\n            >\n                {this.props.type === 'ok' ? (\n                    <Check style={{ color: '#0F0' }} />\n                ) : this.props.type === 'info' ? (\n                    <Info color=\"primary\" />\n                ) : (\n                    <Warning color={this.props.type} />\n                )}\n                <Typography ref={this.refTypo}>{this.props.children}</Typography>\n                {this.props.closeable ? (\n                    <Icon\n                        sx={{\n                            color: theme => (theme.palette.mode === 'dark' ? 'lightgray' : 'gray'),\n                            // alignSelf: 'flex-start',\n                            cursor: 'pointer',\n                            position: 'absolute',\n                            top: 4,\n                            right: 4,\n                        }}\n                        onClick={() => this.onClick()}\n                    />\n                ) : null}\n                {/* Reserve place for button so it will not overlap the text */}\n                {this.props.closeable ? <div style={{ width: 22 }} /> : null}\n                {closed ? (\n                    <Box\n                        // This is a shadow box at the bottom of the InfoBox when it closed\n                        component=\"div\"\n                        sx={theme => {\n                            const color = theme.palette[this.props.type === 'ok' ? 'info' : this.props.type].main;\n                            return {\n                                background: `linear-gradient(${color}00 0%, ${color}10 60%, ${color}90 100%)`,\n                            };\n                        }}\n                        style={{\n                            bottom: 0,\n                            position: 'absolute',\n                            left: 0,\n                            right: 0,\n                            height: 10,\n                        }}\n                    />\n                ) : null}\n            </Box>\n        );\n    }\n}\n"]}

package/build/Components/Logo.js

@@ -24,6 +24,7 @@ export class Logo extends React.Component {
         if (f) {
             const reader = new window.FileReader();
             reader.onload = () => {
+                // eslint-disable-next-line @typescript-eslint/no-base-to-string
                 const contents = reader.result?.toString() || '';
                 try {
                     const json = JSON.parse(contents);

package/build/Components/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sourceRoot":"./src/","sources":["Components/Logo.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Fab } from '@mui/material';\n\nimport {\n    Help as IconHelp,\n    VerticalAlignTop as IconUpload,\n    VerticalAlignBottom as IconDownload,\n} from '@mui/icons-material';\n\nimport { I18n } from '../i18n';\nimport { Icon } from './Icon';\n\ninterface LogoProps {\n    /* Adapter common configuration from io-package.json */\n    common: any;\n    /* Adapter native data from io-package.json */\n    native: any;\n    /* Adapter instance number. */\n    instance: number;\n    /* on Load handler */\n    onLoad?: (contents: any) => void;\n    /* on Error handler */\n    onError?: (error: string) => void;\n    className?: string;\n    style?: Record<string, any>;\n}\n\nexport class Logo extends React.Component<LogoProps> {\n    static generateFile(fileName: string, obj: any): void {\n        const el = window.document.createElement('a');\n        el.setAttribute(\n            'href',\n            `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify(obj, null, 2))}`,\n        );\n        el.setAttribute('download', fileName);\n\n        el.style.display = 'none';\n        window.document.body.appendChild(el);\n\n        el.click();\n\n        window.document.body.removeChild(el);\n    }\n\n    handleFileSelect = (evt: Event): void => {\n        const target = evt.target as HTMLInputElement;\n        const files = target?.files;\n        if (!files || !files.length) {\n            console.error('No files found. Please report to developers');\n            return;\n        }\n        const f = files[0];\n\n        if (f) {\n            const reader = new window.FileReader();\n            reader.onload = () => {\n                const contents: string = reader.result?.toString() || '';\n                try {\n                    const json = JSON.parse(contents);\n                    if (json.native && json.common) {\n                        if (json.common.name !== this.props.common.name) {\n                            this.props.onError && this.props.onError(I18n.t('ra_otherConfig', json.common.name));\n                        } else {\n                            this.props.onLoad && this.props.onLoad(json.native);\n                        }\n                    } else {\n                        this.props.onError && this.props.onError(I18n.t('ra_invalidConfig'));\n                    }\n                } catch (err: any) {\n                    this.props.onError && this.props.onError(err?.toString());\n                }\n            };\n            reader.readAsText(f);\n        } else {\n            alert('Failed to open JSON File');\n        }\n    };\n\n    download(): void {\n        const result = {\n            _id: `system.adapter.${this.props.common.name}.${this.props.instance}`,\n            common: JSON.parse(JSON.stringify(this.props.common)),\n            native: this.props.native,\n        };\n        // remove unimportant information\n        if (result.common.news) {\n            delete result.common.news;\n        }\n        if (result.common.titleLang) {\n            delete result.common.titleLang;\n        }\n        if (result.common.desc) {\n            delete result.common.desc;\n        }\n\n        // window.open('data:application/iobroker; content-disposition=attachment; filename=' + result._id + '.json,' + JSON.stringify(result, null, 2));\n        Logo.generateFile(`${result._id}.json`, result);\n    }\n\n    upload(): void {\n        const input = window.document.createElement('input');\n        input.setAttribute('type', 'file');\n        input.setAttribute('id', 'files');\n        input.setAttribute('opacity', '0');\n        input.addEventListener('change', this.handleFileSelect, false);\n        input.click();\n    }\n\n    render(): React.JSX.Element {\n        return (\n            <div\n                className={this.props.className}\n                style={this.props.style}\n            >\n                {this.props.common.icon ? (\n                    <Icon\n                        src={this.props.common.icon}\n                        style={{\n                            padding: 8,\n                            width: 64,\n                        }}\n                        alt=\"logo\"\n                    />\n                ) : null}\n                {this.props.common.readme ? (\n                    <Fab\n                        size=\"small\"\n                        color=\"primary\"\n                        aria-label=\"Help\"\n                        style={{\n                            marginRight: 5,\n                            marginTop: 5,\n                            float: 'right',\n                        }}\n                        onClick={() => {\n                            const win = window.open(this.props.common.readme, '_blank');\n                            win?.focus();\n                        }}\n                    >\n                        <IconHelp />\n                    </Fab>\n                ) : null}\n                <Fab\n                    size=\"small\"\n                    color=\"primary\"\n                    aria-label=\"Load config\"\n                    style={{\n                        marginRight: 5,\n                        marginTop: 5,\n                        float: 'right',\n                    }}\n                    title={I18n.t('ra_Load configuration from file')}\n                    onClick={() => this.upload()}\n                >\n                    <IconUpload />\n                </Fab>\n                <Fab\n                    size=\"small\"\n                    color=\"primary\"\n                    aria-label=\"Save config\"\n                    style={{\n                        marginRight: 5,\n                        marginTop: 5,\n                        float: 'right',\n                    }}\n                    title={I18n.t('ra_Save configuration to file')}\n                    onClick={() => this.download()}\n                >\n                    <IconDownload />\n                </Fab>\n            </div>\n        );\n    }\n}\n"]}
+{"version":3,"file":"Logo.js","sourceRoot":"./src/","sources":["Components/Logo.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Fab } from '@mui/material';\n\nimport {\n    Help as IconHelp,\n    VerticalAlignTop as IconUpload,\n    VerticalAlignBottom as IconDownload,\n} from '@mui/icons-material';\n\nimport { I18n } from '../i18n';\nimport { Icon } from './Icon';\n\ninterface LogoProps {\n    /* Adapter common configuration from io-package.json */\n    common: any;\n    /* Adapter native data from io-package.json */\n    native: any;\n    /* Adapter instance number. */\n    instance: number;\n    /* on Load handler */\n    onLoad?: (contents: any) => void;\n    /* on Error handler */\n    onError?: (error: string) => void;\n    className?: string;\n    style?: Record<string, any>;\n}\n\nexport class Logo extends React.Component<LogoProps> {\n    static generateFile(fileName: string, obj: any): void {\n        const el = window.document.createElement('a');\n        el.setAttribute(\n            'href',\n            `data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify(obj, null, 2))}`,\n        );\n        el.setAttribute('download', fileName);\n\n        el.style.display = 'none';\n        window.document.body.appendChild(el);\n\n        el.click();\n\n        window.document.body.removeChild(el);\n    }\n\n    handleFileSelect = (evt: Event): void => {\n        const target = evt.target as HTMLInputElement;\n        const files = target?.files;\n        if (!files || !files.length) {\n            console.error('No files found. Please report to developers');\n            return;\n        }\n        const f = files[0];\n\n        if (f) {\n            const reader = new window.FileReader();\n            reader.onload = () => {\n                // eslint-disable-next-line @typescript-eslint/no-base-to-string\n                const contents: string = reader.result?.toString() || '';\n                try {\n                    const json = JSON.parse(contents);\n                    if (json.native && json.common) {\n                        if (json.common.name !== this.props.common.name) {\n                            this.props.onError && this.props.onError(I18n.t('ra_otherConfig', json.common.name));\n                        } else {\n                            this.props.onLoad && this.props.onLoad(json.native);\n                        }\n                    } else {\n                        this.props.onError && this.props.onError(I18n.t('ra_invalidConfig'));\n                    }\n                } catch (err: any) {\n                    this.props.onError && this.props.onError(err?.toString());\n                }\n            };\n            reader.readAsText(f);\n        } else {\n            alert('Failed to open JSON File');\n        }\n    };\n\n    download(): void {\n        const result = {\n            _id: `system.adapter.${this.props.common.name}.${this.props.instance}`,\n            common: JSON.parse(JSON.stringify(this.props.common)),\n            native: this.props.native,\n        };\n        // remove unimportant information\n        if (result.common.news) {\n            delete result.common.news;\n        }\n        if (result.common.titleLang) {\n            delete result.common.titleLang;\n        }\n        if (result.common.desc) {\n            delete result.common.desc;\n        }\n\n        // window.open('data:application/iobroker; content-disposition=attachment; filename=' + result._id + '.json,' + JSON.stringify(result, null, 2));\n        Logo.generateFile(`${result._id}.json`, result);\n    }\n\n    upload(): void {\n        const input = window.document.createElement('input');\n        input.setAttribute('type', 'file');\n        input.setAttribute('id', 'files');\n        input.setAttribute('opacity', '0');\n        input.addEventListener('change', this.handleFileSelect, false);\n        input.click();\n    }\n\n    render(): React.JSX.Element {\n        return (\n            <div\n                className={this.props.className}\n                style={this.props.style}\n            >\n                {this.props.common.icon ? (\n                    <Icon\n                        src={this.props.common.icon}\n                        style={{\n                            padding: 8,\n                            width: 64,\n                        }}\n                        alt=\"logo\"\n                    />\n                ) : null}\n                {this.props.common.readme ? (\n                    <Fab\n                        size=\"small\"\n                        color=\"primary\"\n                        aria-label=\"Help\"\n                        style={{\n                            marginRight: 5,\n                            marginTop: 5,\n                            float: 'right',\n                        }}\n                        onClick={() => {\n                            const win = window.open(this.props.common.readme, '_blank');\n                            win?.focus();\n                        }}\n                    >\n                        <IconHelp />\n                    </Fab>\n                ) : null}\n                <Fab\n                    size=\"small\"\n                    color=\"primary\"\n                    aria-label=\"Load config\"\n                    style={{\n                        marginRight: 5,\n                        marginTop: 5,\n                        float: 'right',\n                    }}\n                    title={I18n.t('ra_Load configuration from file')}\n                    onClick={() => this.upload()}\n                >\n                    <IconUpload />\n                </Fab>\n                <Fab\n                    size=\"small\"\n                    color=\"primary\"\n                    aria-label=\"Save config\"\n                    style={{\n                        marginRight: 5,\n                        marginTop: 5,\n                        float: 'right',\n                    }}\n                    title={I18n.t('ra_Save configuration to file')}\n                    onClick={() => this.download()}\n                >\n                    <IconDownload />\n                </Fab>\n            </div>\n        );\n    }\n}\n"]}

package/build/Components/ObjectBrowser.js

@@ -1615,6 +1615,7 @@ function formatValue(options) {
     }
     if (valText.v?.length > 40) {
         valText.v = `${valText.v.substring(0, 40)}...`;
+        valText.c = valText.v;
     }
     if (isCommon?.unit) {
         valText.u = isCommon.unit;
@@ -3948,7 +3949,6 @@ export class ObjectBrowserClass extends Component {
             });
             const valTextRx = [];
             item.data.state = { valTextRx };
-            const copyText = valText.v || '';
             valTextRx.push(React.createElement("span", { className: `newValueBrowser-${this.props.themeType || 'light'}`, key: `${valText.v.toString()}valText`, style: {
                     whiteSpace: 'nowrap',
                     display: 'inline-block',
@@ -3965,6 +3965,7 @@ export class ObjectBrowserClass extends Component {
                     ")"));
             }
             if (!narrowStyleWithDetails) {
+                const copyText = valText.c !== undefined ? valText.c : valText.v || '';
                 valTextRx.push(React.createElement(IconCopy, { className: "copyButton", style: this.styles.iconCopy, onClick: e => this.onCopy(e, copyText), key: "cc" }));
             }
             // <IconEdit className="copyButton" style={{{ ...styles.cellButtonsValueButton, styles.cellButtonsValueButtonEdit)} key="ce" />
@@ -4922,7 +4923,7 @@ export class ObjectBrowserClass extends Component {
                                     ? this.systemConfig.common.isFloatComma
                                     : this.props.isFloatComma,
                             });
-                            this.onCopy(e, valText.v.toString());
+                            this.onCopy(e, valText.c !== undefined ? valText.c : valText.v.toString());
                         }, key: "cc" }))),
                 colButtons && (React.createElement("div", { style: { ...styles.cellDetailsLine, justifyContent: 'right' } }, colButtons))));
             colName = null;