@iobroker/gui-components 8.0.1

package/build/Components/FileViewer.js

@@ -0,0 +1,247 @@
+// File viewer in adapter-react does not support write
+// import { Buffer } from 'buffer';
+import React, { Component } from 'react';
+import { TextField, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';
+// Icons
+import { Close as CloseIcon, Save as SaveIcon, Brightness6 as Brightness5Icon, ContentCopy as CopyIcon, } from '@mui/icons-material';
+import { IconNoIcon } from '../icons/IconNoIcon';
+import { withWidth } from './withWidth';
+import { Utils } from './Utils';
+import { Icon } from './Icon';
+const styles = {
+    dialog: {
+        height: '100%',
+    },
+    paper: {
+        height: 'calc(100% - 64px)',
+    },
+    content: {
+        textAlign: 'center',
+    },
+    textarea: {
+        width: '100%',
+        height: '100%',
+    },
+    img: {
+        width: 'auto',
+        height: 'calc(100% - 5px)',
+        objectFit: 'contain',
+    },
+    dialogTitle: {
+        justifyContent: 'space-between',
+        display: 'flex',
+    },
+};
+export const EXTENSIONS = {
+    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp', 'gif', 'apng', 'avif', 'webp', 'ico'],
+    code: ['js', 'json', 'json5', 'md'],
+    txt: ['log', 'txt', 'html', 'css', 'xml', 'ics', 'csv'],
+    audio: ['mp3', 'wav', 'ogg', 'acc'],
+    video: ['mp4', 'mov', 'avi'],
+};
+function bufferToBase64(buffer, isFull) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer?.data || buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len && (isFull || i < 50); i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+export class FileViewerClass extends Component {
+    timeout = null;
+    constructor(props) {
+        super(props);
+        const ext = Utils.getFileExtension(props.href);
+        this.state = {
+            text: null,
+            code: null,
+            ext,
+            // File viewer in adapter-react does not support write
+            editing: /* !!this.props.formatEditFile || */ false,
+            editingValue: null,
+            copyPossible: !!ext && (EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext)),
+            forceUpdate: Date.now(),
+            changed: false,
+            imgError: false,
+        };
+    }
+    readFile() {
+        if (this.props.href) {
+            const parts = this.props.href.split('/');
+            parts.splice(0, 2);
+            const adapter = parts[0];
+            const name = parts.splice(1).join('/');
+            this.props.socket
+                .readFile(adapter, name)
+                .then((data) => {
+                let fileData = '';
+                if (data.file !== undefined) {
+                    fileData = data.file;
+                }
+                const newState = {
+                    copyPossible: this.state.copyPossible,
+                    ext: this.state.ext,
+                };
+                // try to detect valid extension
+                if (fileData.type === 'Buffer') {
+                    if (name.toLowerCase().endsWith('.json5')) {
+                        newState.ext = 'json5';
+                        newState.copyPossible = true;
+                        try {
+                            fileData = atob(bufferToBase64(fileData, true));
+                        }
+                        catch {
+                            console.error('Cannot convert base64 to string');
+                            fileData = '';
+                        }
+                    }
+                    else {
+                        const ext = Utils.detectMimeType(bufferToBase64(fileData));
+                        if (ext) {
+                            newState.ext = ext;
+                            newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);
+                        }
+                    }
+                }
+                if (newState.copyPossible) {
+                    if (newState.ext && EXTENSIONS.txt.includes(newState.ext)) {
+                        newState.text = fileData;
+                        newState.editingValue = fileData;
+                    }
+                    else if (newState.ext && EXTENSIONS.code.includes(newState.ext)) {
+                        newState.code = fileData;
+                        newState.editingValue = fileData;
+                    }
+                }
+                this.setState(newState);
+            })
+                .catch(e => window.alert(`Cannot read file: ${e}`));
+        }
+    }
+    componentDidMount() {
+        this.readFile();
+        const parts = this.props.href.split('/');
+        parts.splice(0, 2);
+        const adapter = parts[0];
+        const name = parts.splice(1).join('/');
+        if (this.props.supportSubscribes) {
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
+        }
+    }
+    componentWillUnmount() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+            this.timeout = null;
+        }
+        const parts = this.props.href.split('/');
+        parts.splice(0, 2);
+        const adapter = parts[0];
+        const name = parts.splice(1).join('/');
+        if (this.props.supportSubscribes) {
+            this.props.socket
+                .subscribeFiles(adapter, name, this.onFileChanged)
+                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));
+        }
+    }
+    onFileChanged = (_id, _fileName, size) => {
+        if (!this.state.changed) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+            this.timeout = setTimeout(() => {
+                this.timeout = null;
+                if (size === null) {
+                    window.alert('Show file was deleted!');
+                }
+                else if (this.state.text !== null || this.state.code !== null) {
+                    this.readFile();
+                }
+                else {
+                    this.setState({ forceUpdate: Date.now() });
+                }
+            }, 300);
+        }
+    };
+    getEditorOrViewer() {
+        return (React.createElement(TextField, { variant: "standard", style: styles.textarea, multiline: true, value: this.state.editingValue || this.state.code || this.state.text, 
+            // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
+            slotProps: {
+                htmlInput: {
+                    readOnly: !this.state.editing,
+                },
+            } }));
+    }
+    getContent() {
+        if (this.state.ext && EXTENSIONS.images.includes(this.state.ext)) {
+            if (this.state.imgError) {
+                return React.createElement(IconNoIcon, { style: { ...styles.img, ...this.props.getStyleBackgroundImage() } });
+            }
+            return (React.createElement(Icon, { onError: e => {
+                    e.target.onerror = null;
+                    this.setState({ imgError: true });
+                }, style: { ...styles.img, ...this.props.getStyleBackgroundImage() }, src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href }));
+        }
+        if (this.state.ext && EXTENSIONS.audio.includes(this.state.ext)) {
+            return (React.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                React.createElement("audio", { style: { width: '100%' }, src: this.props.href, controls: true })));
+        }
+        if (this.state.ext && EXTENSIONS.video.includes(this.state.ext)) {
+            return (React.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                React.createElement("video", { style: { width: '100%', height: '100%' }, controls: true },
+                    React.createElement("source", { src: this.props.href, type: `video/${this.state.ext}}` }))));
+        }
+        if (this.state.code !== null || this.state.text !== null || this.state.editing) {
+            // File viewer in adapter-react does not support write
+            // return <Editor
+            //     mode={this.getEditFile(this.props.formatEditFile)}
+            //     themeType={this.props.themeType}
+            //     value={this.state.editingValue || this.state.code || this.state.text}
+            //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
+            // />;
+            return this.getEditorOrViewer();
+        }
+        return null;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    onSave() {
+        // Do nothing as the file viewer in adapter-react does not support writing
+    }
+    render() {
+        return (React.createElement(Dialog, { sx: {
+                '&.MuiDialog-scrollPaper': styles.dialog,
+                '& .MuiDialog-paper': styles.paper,
+            }, scroll: "paper", open: !!this.props.href, onClose: () => this.props.onClose(), fullWidth: true, maxWidth: "xl", "aria-labelledby": "ar_dialog_file_view_title" },
+            React.createElement("div", { style: styles.dialogTitle },
+                React.createElement(DialogTitle, { id: "ar_dialog_file_view_title" }, `${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`),
+                this.state.ext && EXTENSIONS.images.includes(this.state.ext) && (React.createElement("div", null,
+                    React.createElement(IconButton, { size: "large", color: "inherit", onClick: this.props.setStateBackgroundImage },
+                        React.createElement(Brightness5Icon, null))))),
+            React.createElement(DialogContent, { style: styles.content }, this.getContent()),
+            React.createElement(DialogActions, null,
+                this.state.copyPossible ? (React.createElement(Button, { color: "grey", onClick: e => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                        Utils.copyToClipboard(this.state.text || this.state.code || '');
+                    }, startIcon: React.createElement(CopyIcon, null) }, this.props.t('Copy content'))) : null,
+                this.state.editing ? (React.createElement(Button, { color: "grey", disabled: this.state.editingValue === this.state.code ||
+                        this.state.editingValue === this.state.text, variant: "contained", onClick: () => this.onSave(), startIcon: React.createElement(SaveIcon, null) }, this.props.t('Save'))) : null,
+                React.createElement(Button, { variant: "contained", onClick: () => this.props.onClose(), color: "primary", startIcon: React.createElement(CloseIcon, null) }, this.props.t('Close')))));
+    }
+}
+export const FileViewer = withWidth()(FileViewerClass);
+//# sourceMappingURL=FileViewer.js.map

package/build/Components/FileViewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileViewer.js","sourceRoot":"./src/","sources":["Components/FileViewer.tsx"],"names":[],"mappings":"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","sourcesContent":["// File viewer in adapter-react does not support write\n// import { Buffer } from 'buffer';\nimport React, { Component, type JSX } from 'react';\n\nimport { TextField, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from '@mui/material';\n\n// Icons\nimport {\n    Close as CloseIcon,\n    Save as SaveIcon,\n    Brightness6 as Brightness5Icon,\n    ContentCopy as CopyIcon,\n} from '@mui/icons-material';\n\nimport type { Connection } from '@iobroker/socket-client';\n\nimport { IconNoIcon } from '../icons/IconNoIcon';\nimport { withWidth } from './withWidth';\nimport { Utils } from './Utils';\nimport type { ThemeType, Translate } from '../types';\nimport { Icon } from './Icon';\n\nconst styles: Record<string, React.CSSProperties> = {\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', 'gif', 'apng', 'avif', 'webp', 'ico'],\n    code: ['js', 'json', 'json5', 'md'],\n    txt: ['log', 'txt', 'html', 'css', 'xml', 'ics', 'csv'],\n    audio: ['mp3', 'wav', 'ogg', 'acc'],\n    video: ['mp4', 'mov', 'avi'],\n};\n\nfunction bufferToBase64(buffer: Buffer, isFull?: boolean): string {\n    let binary = '';\n    const bytes = new Uint8Array((buffer as unknown as { data: number[]; type: 'Buffer' })?.data || buffer);\n    const len = bytes.byteLength;\n    for (let i = 0; i < len && (isFull || i < 50); i++) {\n        binary += String.fromCharCode(bytes[i]);\n    }\n    return window.btoa(binary);\n}\n\nexport interface FileViewerProps {\n    /** Translation function */\n    t: Translate;\n    /** Callback when the viewer is closed. */\n    onClose: () => void;\n    /** The URL (file path) to the file to be displayed. */\n    href: string;\n    formatEditFile?: string;\n    socket: Connection;\n    setStateBackgroundImage: () => void;\n    themeType: ThemeType;\n    getStyleBackgroundImage: () => React.CSSProperties | null;\n    /** Flag is the js-controller support subscribe on file */\n    supportSubscribes?: boolean;\n}\n\nexport interface FileViewerState {\n    text: string | null;\n    code: string | null;\n    ext: string | null;\n    editing: boolean;\n    editingValue: string | null;\n    copyPossible: boolean;\n    forceUpdate: number;\n    changed: boolean;\n    imgError: boolean;\n}\n\nexport class FileViewerClass extends Component<FileViewerProps, FileViewerState> {\n    private timeout: ReturnType<typeof setTimeout> | null = null;\n\n    constructor(props: FileViewerProps) {\n        super(props);\n        const ext = Utils.getFileExtension(props.href);\n\n        this.state = {\n            text: null,\n            code: null,\n            ext,\n            // File viewer in adapter-react does not support write\n            editing: /* !!this.props.formatEditFile || */ false,\n            editingValue: null,\n            copyPossible: !!ext && (EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext)),\n            forceUpdate: Date.now(),\n            changed: false,\n            imgError: false,\n        };\n    }\n\n    readFile(): void {\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\n                .readFile(adapter, name)\n                .then((data: { file: string | Buffer; mimeType: string }) => {\n                    let fileData: string | Buffer = '';\n                    if (data.file !== undefined) {\n                        fileData = (data as { file: string; mimeType: string }).file;\n                    }\n\n                    const newState: Partial<FileViewerState> = {\n                        copyPossible: this.state.copyPossible,\n                        ext: this.state.ext,\n                    };\n                    // try to detect valid extension\n                    if ((fileData as unknown as { data: Buffer; type: string }).type === 'Buffer') {\n                        if (name.toLowerCase().endsWith('.json5')) {\n                            newState.ext = 'json5';\n                            newState.copyPossible = true;\n                            try {\n                                fileData = atob(bufferToBase64(fileData as unknown as Buffer, true));\n                            } catch {\n                                console.error('Cannot convert base64 to string');\n                                fileData = '';\n                            }\n                        } else {\n                            const ext = Utils.detectMimeType(bufferToBase64(fileData as unknown as Buffer));\n                            if (ext) {\n                                newState.ext = ext;\n                                newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);\n                            }\n                        }\n                    }\n\n                    if (newState.copyPossible) {\n                        if (newState.ext && EXTENSIONS.txt.includes(newState.ext)) {\n                            newState.text = fileData;\n                            newState.editingValue = fileData;\n                        } else if (newState.ext && EXTENSIONS.code.includes(newState.ext)) {\n                            newState.code = fileData;\n                            newState.editingValue = fileData;\n                        }\n                    }\n\n                    this.setState(newState as FileViewerState);\n                })\n                .catch(e => window.alert(`Cannot read file: ${e}`));\n        }\n    }\n\n    componentDidMount(): void {\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        if (this.props.supportSubscribes) {\n            this.props.socket\n                .subscribeFiles(adapter, name, this.onFileChanged)\n                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));\n        }\n    }\n\n    componentWillUnmount(): void {\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            this.timeout = null;\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        if (this.props.supportSubscribes) {\n            this.props.socket\n                .subscribeFiles(adapter, name, this.onFileChanged)\n                .catch(e => window.alert(`Cannot subscribe on file: ${e}`));\n        }\n    }\n\n    onFileChanged = (_id: string, _fileName: string, size: number | null): void => {\n        if (!this.state.changed) {\n            if (this.timeout) {\n                clearTimeout(this.timeout);\n            }\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    getEditorOrViewer(): JSX.Element {\n        return (\n            <TextField\n                variant=\"standard\"\n                style={styles.textarea}\n                multiline\n                value={this.state.editingValue || this.state.code || this.state.text}\n                // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}\n                slotProps={{\n                    htmlInput: {\n                        readOnly: !this.state.editing,\n                    },\n                }}\n            />\n        );\n    }\n\n    getContent(): React.JSX.Element | null {\n        if (this.state.ext && EXTENSIONS.images.includes(this.state.ext)) {\n            if (this.state.imgError) {\n                return <IconNoIcon style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }} />;\n            }\n            return (\n                <Icon\n                    onError={e => {\n                        (e.target as HTMLImageElement).onerror = null;\n                        this.setState({ imgError: true });\n                    }}\n                    style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }}\n                    src={`${this.props.href}?ts=${this.state.forceUpdate}`}\n                    alt={this.props.href}\n                />\n            );\n        }\n        if (this.state.ext && EXTENSIONS.audio.includes(this.state.ext)) {\n            return (\n                <div\n                    style={{\n                        width: '100%',\n                        height: '100%',\n                        display: 'flex',\n                        justifyContent: 'center',\n                        alignItems: 'center',\n                    }}\n                >\n                    <audio\n                        style={{ width: '100%' }}\n                        src={this.props.href}\n                        controls\n                    ></audio>\n                </div>\n            );\n        }\n        if (this.state.ext && EXTENSIONS.video.includes(this.state.ext)) {\n            return (\n                <div\n                    style={{\n                        width: '100%',\n                        height: '100%',\n                        display: 'flex',\n                        justifyContent: 'center',\n                        alignItems: 'center',\n                    }}\n                >\n                    <video\n                        style={{ width: '100%', height: '100%' }}\n                        controls\n                    >\n                        <source\n                            src={this.props.href}\n                            type={`video/${this.state.ext}}`}\n                        />\n                    </video>\n                </div>\n            );\n        }\n        if (this.state.code !== null || this.state.text !== null || this.state.editing) {\n            // File viewer in adapter-react does not support write\n            // return <Editor\n            //     mode={this.getEditFile(this.props.formatEditFile)}\n            //     themeType={this.props.themeType}\n            //     value={this.state.editingValue || this.state.code || this.state.text}\n            //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}\n            // />;\n            return this.getEditorOrViewer();\n        }\n        return null;\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    onSave(): void {\n        // Do nothing as the file viewer in adapter-react does not support writing\n    }\n\n    render(): JSX.Element {\n        return (\n            <Dialog\n                sx={{\n                    '&.MuiDialog-scrollPaper': styles.dialog,\n                    '& .MuiDialog-paper': styles.paper,\n                }}\n                scroll=\"paper\"\n                open={!!this.props.href}\n                onClose={() => this.props.onClose()}\n                fullWidth\n                maxWidth=\"xl\"\n                aria-labelledby=\"ar_dialog_file_view_title\"\n            >\n                <div style={styles.dialogTitle}>\n                    <DialogTitle id=\"ar_dialog_file_view_title\">{`${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`}</DialogTitle>\n                    {this.state.ext && EXTENSIONS.images.includes(this.state.ext) && (\n                        <div>\n                            <IconButton\n                                size=\"large\"\n                                color=\"inherit\"\n                                onClick={this.props.setStateBackgroundImage}\n                            >\n                                <Brightness5Icon />\n                            </IconButton>\n                        </div>\n                    )}\n                </div>\n                <DialogContent style={styles.content}>{this.getContent()}</DialogContent>\n                <DialogActions>\n                    {this.state.copyPossible ? (\n                        <Button\n                            color=\"grey\"\n                            onClick={e => {\n                                e.stopPropagation();\n                                e.preventDefault();\n                                Utils.copyToClipboard(this.state.text || this.state.code || '');\n                            }}\n                            startIcon={<CopyIcon />}\n                        >\n                            {this.props.t('Copy content')}\n                        </Button>\n                    ) : null}\n                    {this.state.editing ? (\n                        <Button\n                            color=\"grey\"\n                            disabled={\n                                this.state.editingValue === this.state.code ||\n                                this.state.editingValue === this.state.text\n                            }\n                            variant=\"contained\"\n                            onClick={() => this.onSave()}\n                            startIcon={<SaveIcon />}\n                        >\n                            {this.props.t('Save')}\n                        </Button>\n                    ) : 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}\nexport const FileViewer = withWidth()(FileViewerClass);\n"]}

package/build/Components/Icon.d.ts

@@ -0,0 +1,35 @@
+import React, { type ReactEventHandler } from 'react';
+/**
+ * Get icon by object type (state, channel, device, ...).
+ *
+ * @param obj Object
+ */
+export declare function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null;
+/**
+ * Get icon from the object.
+ *
+ * @param obj Object
+ * @param imagePrefix Prefix for image
+ */
+export declare function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null;
+export interface IconProps {
+    /** URL, UTF-8 character, or svg code (data:image/svg...) */
+    src: string | React.JSX.Element | null | undefined;
+    /** Class name */
+    className?: string;
+    /** Style for image */
+    style?: React.CSSProperties;
+    /** Styles for mui */
+    sx?: Record<string, any>;
+    /** Tooltip */
+    title?: string;
+    /** Styles for utf-8 characters */
+    styleUTF8?: React.CSSProperties;
+    /** On error handler */
+    onError?: ReactEventHandler<HTMLImageElement>;
+    /** Reference to image */
+    ref?: React.RefObject<HTMLImageElement>;
+    /** Alternative text for image */
+    alt?: string;
+}
+export declare function Icon(props: IconProps): React.JSX.Element | null;

package/build/Components/Icon.js

@@ -0,0 +1,140 @@
+import React from 'react';
+import SVG from 'react-inlinesvg';
+import { Box } from '@mui/material';
+import { SettingsApplications as IconSystem, Photo as IconPhoto, SupervisedUserCircle as IconGroup, PersonOutlined as IconUser, Router as IconHost, Wifi as IconConnection, Info as IconInfo, Description as IconMeta, } from '@mui/icons-material';
+import { IconAlias } from '../icons/IconAlias';
+import { Utils } from './Utils';
+/**
+ * Get icon by object type (state, channel, device, ...).
+ *
+ * @param obj Object
+ */
+export function getSystemIcon(obj) {
+    let icon;
+    const id = obj?._id;
+    if (!id) {
+        return null;
+    }
+    // system or design has special icons
+    if (id.startsWith('_design/') || id === 'system') {
+        icon = React.createElement(IconSystem, { className: "iconOwn" });
+    }
+    else if (id === '0_userdata' || id === '0_userdata.0') {
+        icon = React.createElement(IconPhoto, { className: "iconOwn" });
+    }
+    else if (id === 'alias' || id === 'alias.0') {
+        icon = React.createElement(IconAlias, { className: "iconOwn" });
+    }
+    else if (id === 'system.adapter') {
+        icon = React.createElement(IconSystem, { className: "iconOwn" });
+    }
+    else if (id === 'system.group') {
+        icon = React.createElement(IconGroup, { className: "iconOwn" });
+    }
+    else if (id === 'system.user') {
+        icon = React.createElement(IconUser, { className: "iconOwn" });
+    }
+    else if (id === 'system.host') {
+        icon = React.createElement(IconHost, { className: "iconOwn" });
+    }
+    else if (id.endsWith('.connection') || id.endsWith('.connected')) {
+        icon = React.createElement(IconConnection, { className: "iconOwn" });
+    }
+    else if (id.endsWith('.info')) {
+        icon = React.createElement(IconInfo, { className: "iconOwn" });
+    }
+    else if (obj?.type === 'meta') {
+        icon = React.createElement(IconMeta, { className: "iconOwn" });
+    }
+    return icon || null;
+}
+/**
+ * Get icon from the object.
+ *
+ * @param obj Object
+ * @param imagePrefix Prefix for image
+ */
+export function getSelectIdIcon(obj, imagePrefix) {
+    imagePrefix = imagePrefix || '.'; // http://localhost:8081';
+    let src = '';
+    const common = obj?.common;
+    if (common) {
+        const cIcon = common.icon;
+        if (cIcon) {
+            if (!cIcon.startsWith('data:image/')) {
+                if (cIcon.includes('.')) {
+                    let instance;
+                    if (obj.type === 'instance' || obj.type === 'adapter') {
+                        src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
+                    }
+                    else if (obj._id && obj._id.startsWith('system.adapter.')) {
+                        instance = obj._id.split('.', 3);
+                        if (cIcon[0] === '/') {
+                            instance[2] += cIcon;
+                        }
+                        else {
+                            instance[2] += `/${cIcon}`;
+                        }
+                        src = `${imagePrefix}/adapter/${instance[2]}`;
+                    }
+                    else {
+                        instance = obj._id.split('.', 2);
+                        if (cIcon[0] === '/') {
+                            instance[0] += cIcon;
+                        }
+                        else {
+                            instance[0] += `/${cIcon}`;
+                        }
+                        src = `${imagePrefix}/adapter/${instance[0]}`;
+                    }
+                }
+                else {
+                    return null;
+                }
+            }
+            else {
+                // base 64 image
+                src = cIcon;
+            }
+        }
+    }
+    return src || null;
+}
+const REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');
+const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
+export function Icon(props) {
+    if (props.src) {
+        if (typeof props.src === 'string') {
+            if (props.src.length < 3) {
+                // utf-8 char
+                if (props.sx) {
+                    return (React.createElement(Box, { component: "span", sx: props.sx, title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: Utils.clsx(props.className, 'iconOwn') }, props.src));
+                }
+                return (React.createElement("span", { title: props.title || undefined, style: { height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }, className: Utils.clsx(props.className, 'iconOwn') }, props.src));
+            }
+            if (props.src.startsWith('data:image/svg')) {
+                return (React.createElement(SVG, { title: props.title || undefined, src: props.src, className: Utils.clsx(props.className, 'iconOwn'), width: props.style?.width || 28, height: props.style?.height || props.style?.width || 28, style: props.style || undefined }));
+            }
+            if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
+                let src = props.src;
+                if (src.startsWith('./')) {
+                    src = REMOTE_PREFIX + src.substring(2);
+                }
+                else if (!src.startsWith('/')) {
+                    src = REMOTE_PREFIX + src;
+                }
+                if (props.sx) {
+                    return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
+                }
+                return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: `https://remote-files.iobroker.in${src}`, alt: props.alt || undefined, ref: props.ref, onError: e => props.onError && props.onError(e) }));
+            }
+            if (props.sx) {
+                return (React.createElement(Box, { component: "img", sx: props.sx, title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
+            }
+            return (React.createElement("img", { title: props.title || undefined, style: props.style || undefined, className: Utils.clsx(props.className, 'iconOwn'), src: props.src, alt: props.alt || undefined, ref: props.ref, onError: props.onError }));
+        }
+        return props.src;
+    }
+    return null;
+}
+//# sourceMappingURL=Icon.js.map

package/build/Components/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"./src/","sources":["Components/Icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type ReactEventHandler } from 'react';\r\nimport SVG from 'react-inlinesvg';\r\n\r\nimport { Box } from '@mui/material';\r\n\r\nimport {\r\n    SettingsApplications as IconSystem,\r\n    Photo as IconPhoto,\r\n    SupervisedUserCircle as IconGroup,\r\n    PersonOutlined as IconUser,\r\n    Router as IconHost,\r\n    Wifi as IconConnection,\r\n    Info as IconInfo,\r\n    Description as IconMeta,\r\n} from '@mui/icons-material';\r\n\r\nimport { IconAlias } from '../icons/IconAlias';\r\nimport { Utils } from './Utils';\r\n\r\n/**\r\n * Get icon by object type (state, channel, device, ...).\r\n *\r\n * @param obj Object\r\n */\r\nexport function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null {\r\n    let icon;\r\n    const id = obj?._id;\r\n\r\n    if (!id) {\r\n        return null;\r\n    }\r\n\r\n    // system or design has special icons\r\n    if (id.startsWith('_design/') || id === 'system') {\r\n        icon = <IconSystem className=\"iconOwn\" />;\r\n    } else if (id === '0_userdata' || id === '0_userdata.0') {\r\n        icon = <IconPhoto className=\"iconOwn\" />;\r\n    } else if (id === 'alias' || id === 'alias.0') {\r\n        icon = <IconAlias className=\"iconOwn\" />;\r\n    } else if (id === 'system.adapter') {\r\n        icon = <IconSystem className=\"iconOwn\" />;\r\n    } else if (id === 'system.group') {\r\n        icon = <IconGroup className=\"iconOwn\" />;\r\n    } else if (id === 'system.user') {\r\n        icon = <IconUser className=\"iconOwn\" />;\r\n    } else if (id === 'system.host') {\r\n        icon = <IconHost className=\"iconOwn\" />;\r\n    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {\r\n        icon = <IconConnection className=\"iconOwn\" />;\r\n    } else if (id.endsWith('.info')) {\r\n        icon = <IconInfo className=\"iconOwn\" />;\r\n    } else if (obj?.type === 'meta') {\r\n        icon = <IconMeta className=\"iconOwn\" />;\r\n    }\r\n\r\n    return icon || null;\r\n}\r\n\r\n/**\r\n * Get icon from the object.\r\n *\r\n * @param obj Object\r\n * @param imagePrefix Prefix for image\r\n */\r\nexport function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null {\r\n    imagePrefix = imagePrefix || '.'; // http://localhost:8081';\r\n    let src = '';\r\n    const common = obj?.common;\r\n\r\n    if (common) {\r\n        const cIcon = common.icon;\r\n        if (cIcon) {\r\n            if (!cIcon.startsWith('data:image/')) {\r\n                if (cIcon.includes('.')) {\r\n                    let instance;\r\n                    if (obj.type === 'instance' || obj.type === 'adapter') {\r\n                        src = `${imagePrefix}/adapter/${common.name as string}/${cIcon}`;\r\n                    } else if (obj._id && obj._id.startsWith('system.adapter.')) {\r\n                        instance = obj._id.split('.', 3);\r\n                        if (cIcon[0] === '/') {\r\n                            instance[2] += cIcon;\r\n                        } else {\r\n                            instance[2] += `/${cIcon}`;\r\n                        }\r\n                        src = `${imagePrefix}/adapter/${instance[2]}`;\r\n                    } else {\r\n                        instance = obj._id.split('.', 2);\r\n                        if (cIcon[0] === '/') {\r\n                            instance[0] += cIcon;\r\n                        } else {\r\n                            instance[0] += `/${cIcon}`;\r\n                        }\r\n                        src = `${imagePrefix}/adapter/${instance[0]}`;\r\n                    }\r\n                } else {\r\n                    return null;\r\n                }\r\n            } else {\r\n                // base 64 image\r\n                src = cIcon;\r\n            }\r\n        }\r\n    }\r\n\r\n    return src || null;\r\n}\r\n\r\nexport interface IconProps {\r\n    /** URL, UTF-8 character, or svg code (data:image/svg...) */\r\n    src: string | React.JSX.Element | null | undefined;\r\n    /** Class name */\r\n    className?: string;\r\n    /** Style for image */\r\n    style?: React.CSSProperties;\r\n    /** Styles for mui */\r\n    sx?: Record<string, any>;\r\n    /** Tooltip */\r\n    title?: string;\r\n    /** Styles for utf-8 characters */\r\n    styleUTF8?: React.CSSProperties;\r\n    /** On error handler */\r\n    onError?: ReactEventHandler<HTMLImageElement>;\r\n    /** Reference to image */\r\n    ref?: React.RefObject<HTMLImageElement>;\r\n    /** Alternative text for image */\r\n    alt?: string;\r\n}\r\n\r\nconst REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');\r\nconst REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);\r\n\r\nexport function Icon(props: IconProps): React.JSX.Element | null {\r\n    if (props.src) {\r\n        if (typeof props.src === 'string') {\r\n            if (props.src.length < 3) {\r\n                // utf-8 char\r\n                if (props.sx) {\r\n                    return (\r\n                        <Box\r\n                            component=\"span\"\r\n                            sx={props.sx}\r\n                            title={props.title || undefined}\r\n                            style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\r\n                            className={Utils.clsx(props.className, 'iconOwn')}\r\n                        >\r\n                            {props.src}\r\n                        </Box>\r\n                    );\r\n                }\r\n                return (\r\n                    <span\r\n                        title={props.title || undefined}\r\n                        style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}\r\n                        className={Utils.clsx(props.className, 'iconOwn')}\r\n                    >\r\n                        {props.src}\r\n                    </span>\r\n                );\r\n            }\r\n            if (props.src.startsWith('data:image/svg')) {\r\n                return (\r\n                    <SVG\r\n                        title={props.title || undefined}\r\n                        src={props.src}\r\n                        className={Utils.clsx(props.className, 'iconOwn')}\r\n                        width={props.style?.width || 28}\r\n                        height={props.style?.height || props.style?.width || 28}\r\n                        style={props.style || undefined}\r\n                    />\r\n                );\r\n            }\r\n            if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {\r\n                let src = props.src;\r\n                if (src.startsWith('./')) {\r\n                    src = REMOTE_PREFIX + src.substring(2);\r\n                } else if (!src.startsWith('/')) {\r\n                    src = REMOTE_PREFIX + src;\r\n                }\r\n\r\n                if (props.sx) {\r\n                    return (\r\n                        <Box\r\n                            component=\"img\"\r\n                            sx={props.sx}\r\n                            title={props.title || undefined}\r\n                            style={props.style || undefined}\r\n                            className={Utils.clsx(props.className, 'iconOwn')}\r\n                            src={`https://remote-files.iobroker.in${src}`}\r\n                            alt={props.alt || undefined}\r\n                            ref={props.ref}\r\n                            onError={e => props.onError && props.onError(e)}\r\n                        />\r\n                    );\r\n                }\r\n                return (\r\n                    <img\r\n                        title={props.title || undefined}\r\n                        style={props.style || undefined}\r\n                        className={Utils.clsx(props.className, 'iconOwn')}\r\n                        src={`https://remote-files.iobroker.in${src}`}\r\n                        alt={props.alt || undefined}\r\n                        ref={props.ref}\r\n                        onError={e => props.onError && props.onError(e)}\r\n                    />\r\n                );\r\n            }\r\n            if (props.sx) {\r\n                return (\r\n                    <Box\r\n                        component=\"img\"\r\n                        sx={props.sx}\r\n                        title={props.title || undefined}\r\n                        style={props.style || undefined}\r\n                        className={Utils.clsx(props.className, 'iconOwn')}\r\n                        src={props.src}\r\n                        alt={props.alt || undefined}\r\n                        ref={props.ref}\r\n                        onError={props.onError}\r\n                    />\r\n                );\r\n            }\r\n            return (\r\n                <img\r\n                    title={props.title || undefined}\r\n                    style={props.style || undefined}\r\n                    className={Utils.clsx(props.className, 'iconOwn')}\r\n                    src={props.src}\r\n                    alt={props.alt || undefined}\r\n                    ref={props.ref}\r\n                    onError={props.onError}\r\n                />\r\n            );\r\n        }\r\n\r\n        return props.src;\r\n    }\r\n    return null;\r\n}\r\n"]}

package/build/Components/IconPicker.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type IconSelectorIcon } from './IconSelector';
+interface IconPickerProps {
+    previewStyle?: React.CSSProperties;
+    previewClassName?: string;
+    /** Custom icon element. */
+    icon?: React.FC<{
+        style?: React.CSSProperties;
+    }>;
+    customStyles?: Record<string, React.CSSProperties>;
+    customClasses?: Record<string, string>;
+    /** The label. */
+    label?: string;
+    /** The value. */
+    value?: any;
+    /** Set to true to disable the icon picker. */
+    disabled?: boolean;
+    /** The icon change callback. */
+    onChange: (icon: string) => void;
+    icons?: IconSelectorIcon[];
+    onlyRooms?: boolean;
+    onlyDevices?: boolean;
+}
+export declare function IconPicker(props: IconPickerProps): React.JSX.Element;
+export {};

package/build/Components/IconPicker.js

@@ -0,0 +1,72 @@
+import React, { useCallback } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { InputLabel, FormControl, IconButton } from '@mui/material';
+import { Clear as ClearIcon } from '@mui/icons-material';
+import { IconSelector } from './IconSelector';
+import { Icon } from './Icon';
+import { I18n } from '../i18n';
+import { Utils } from './Utils';
+const styles = {
+    formContainer: {
+        display: 'flex',
+        justifyContent: 'left',
+        alignItems: 'center',
+    },
+    formControl: {
+        display: 'flex',
+        padding: 24,
+        flexGrow: 1000,
+    },
+    divContainer: {
+        width: 32 + 32,
+        height: 32,
+        whiteSpace: 'nowrap',
+        lineHeight: '32px',
+        marginRight: 8,
+    },
+    dragField: {
+        textAlign: 'center',
+        display: 'table',
+        minHeight: 90,
+        width: 'calc(100% - 60px)',
+        border: '2px dashed #777',
+        borderRadius: 10,
+        padding: 4,
+    },
+    formIcon: {
+        margin: 10,
+        opacity: 0.6,
+    },
+    text: {
+        display: 'table-cell',
+        verticalAlign: 'middle',
+    },
+};
+export function IconPicker(props) {
+    const IconCustom = props.icon;
+    const onChange = props.onChange;
+    const onDrop = useCallback((acceptedFiles) => {
+        const reader = new FileReader();
+        reader.addEventListener('load', () => onChange(reader.result), false);
+        if (acceptedFiles[0]) {
+            reader.readAsDataURL(acceptedFiles[0]);
+        }
+    }, [onChange]);
+    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
+    return (React.createElement("div", { style: styles.formContainer },
+        IconCustom ? React.createElement(IconCustom, { style: styles.formIcon }) : null,
+        React.createElement(FormControl, { variant: "standard", style: { ...styles.formControl, padding: 3 } },
+            React.createElement(InputLabel, { shrink: true, sx: props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined, classes: { root: props.customClasses?.label } }, props.label),
+            React.createElement("div", { style: styles.formContainer },
+                props.value ? (React.createElement("div", { style: styles.divContainer },
+                    React.createElement(Icon, { style: { ...props.previewStyle, ...(props.customStyles?.icon || undefined) }, src: props.value, className: Utils.clsx(props.previewClassName, props.customClasses?.icon) }),
+                    !props.disabled && (React.createElement(IconButton, { style: { verticalAlign: 'top' }, title: I18n.t('ra_Clear icon'), size: "small", onClick: () => props.onChange('') },
+                        React.createElement(ClearIcon, null))))) : (!props.disabled && (React.createElement(IconSelector, { icons: props.icons, onlyRooms: props.onlyRooms, onlyDevices: props.onlyDevices, onSelect: (base64) => props.onChange(base64), t: I18n.t, lang: I18n.getLanguage() }))),
+                !props.disabled && (React.createElement("div", { ...getRootProps(), style: {
+                        ...styles.dragField,
+                        ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),
+                    } },
+                    React.createElement("input", { ...getInputProps() }),
+                    isDragActive ? (React.createElement("span", { style: styles.text }, I18n.t('ra_Drop the files here...'))) : (React.createElement("span", { style: styles.text }, I18n.t("ra_Drag 'n' drop some files here, or click to select files")))))))));
+}
+//# sourceMappingURL=IconPicker.js.map

package/build/Components/IconPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconPicker.js","sourceRoot":"./src/","sources":["Components/IconPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback } from 'react';\nimport { useDropzone } from 'react-dropzone';\n\nimport { InputLabel, FormControl, IconButton } from '@mui/material';\nimport { Clear as ClearIcon } from '@mui/icons-material';\n\nimport { IconSelector, type IconSelectorIcon } from './IconSelector';\nimport { Icon } from './Icon';\nimport { I18n } from '../i18n';\nimport { Utils } from './Utils';\n\nconst styles: Record<string, React.CSSProperties> = {\n    formContainer: {\n        display: 'flex',\n        justifyContent: 'left',\n        alignItems: 'center',\n    },\n    formControl: {\n        display: 'flex',\n        padding: 24,\n        flexGrow: 1000,\n    },\n    divContainer: {\n        width: 32 + 32,\n        height: 32,\n        whiteSpace: 'nowrap',\n        lineHeight: '32px',\n        marginRight: 8,\n    },\n    dragField: {\n        textAlign: 'center',\n        display: 'table',\n        minHeight: 90,\n        width: 'calc(100% - 60px)',\n        border: '2px dashed #777',\n        borderRadius: 10,\n        padding: 4,\n    },\n    formIcon: {\n        margin: 10,\n        opacity: 0.6,\n    },\n    text: {\n        display: 'table-cell',\n        verticalAlign: 'middle',\n    },\n};\n\ninterface IconPickerProps {\n    previewStyle?: React.CSSProperties;\n    previewClassName?: string;\n    /** Custom icon element. */\n    icon?: React.FC<{ style?: React.CSSProperties }>;\n    customStyles?: Record<string, React.CSSProperties>;\n    customClasses?: Record<string, string>;\n    /** The label. */\n    label?: string;\n    /** The value. */\n    value?: any;\n    /** Set to true to disable the icon picker. */\n    disabled?: boolean;\n    /** The icon change callback. */\n    onChange: (icon: string) => void;\n    icons?: IconSelectorIcon[];\n    onlyRooms?: boolean;\n    onlyDevices?: boolean;\n}\n\nexport function IconPicker(props: IconPickerProps): React.JSX.Element {\n    const IconCustom = props.icon;\n\n    const onChange = props.onChange;\n\n    const onDrop = useCallback(\n        (acceptedFiles: File[]) => {\n            const reader = new FileReader();\n\n            reader.addEventListener('load', () => onChange(reader.result as string), false);\n\n            if (acceptedFiles[0]) {\n                reader.readAsDataURL(acceptedFiles[0]);\n            }\n        },\n        [onChange],\n    );\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });\n\n    return (\n        <div style={styles.formContainer}>\n            {IconCustom ? <IconCustom style={styles.formIcon} /> : null}\n            <FormControl\n                variant=\"standard\"\n                style={{ ...styles.formControl, padding: 3 }}\n            >\n                <InputLabel\n                    shrink\n                    sx={props.customStyles?.label ? { '&.MuiInputLabel-root': props.customStyles.label } : undefined}\n                    classes={{ root: props.customClasses?.label }}\n                >\n                    {props.label}\n                </InputLabel>\n                <div style={styles.formContainer}>\n                    {props.value ? (\n                        <div style={styles.divContainer}>\n                            <Icon\n                                style={{ ...props.previewStyle, ...(props.customStyles?.icon || undefined) }}\n                                src={props.value}\n                                className={Utils.clsx(props.previewClassName, props.customClasses?.icon)}\n                            />\n                            {!props.disabled && (\n                                <IconButton\n                                    style={{ verticalAlign: 'top' }}\n                                    title={I18n.t('ra_Clear icon')}\n                                    size=\"small\"\n                                    onClick={() => props.onChange('')}\n                                >\n                                    <ClearIcon />\n                                </IconButton>\n                            )}\n                        </div>\n                    ) : (\n                        !props.disabled && (\n                            <IconSelector\n                                icons={props.icons}\n                                onlyRooms={props.onlyRooms}\n                                onlyDevices={props.onlyDevices}\n                                onSelect={(base64: string) => props.onChange(base64)}\n                                t={I18n.t}\n                                lang={I18n.getLanguage()}\n                            />\n                        )\n                    )}\n\n                    {!props.disabled && (\n                        <div\n                            {...getRootProps()}\n                            style={{\n                                ...styles.dragField,\n                                ...(isDragActive ? { backgroundColor: 'rgba(0, 255, 0, 0.1)' } : { cursor: 'pointer' }),\n                            }}\n                        >\n                            <input {...getInputProps()} />\n                            {isDragActive ? (\n                                <span style={styles.text}>{I18n.t('ra_Drop the files here...')}</span>\n                            ) : (\n                                <span style={styles.text}>\n                                    {I18n.t(\"ra_Drag 'n' drop some files here, or click to select files\")}\n                                </span>\n                            )}\n                        </div>\n                    )}\n                </div>\n            </FormControl>\n        </div>\n    );\n}\n"]}