@iobroker/dm-gui-components 9.0.7 → 9.0.9

package/README.md

@@ -86,6 +86,9 @@ Font Awesome names can be prefixed with `fa-solid` (it is stripped automatically
 -->
 
 ## Changelog
+### 9.0.9 (2026-03-27)
+- (@GermanBluefox) Layout improved
+
 ### 9.0.7 (2026-03-27)
 - (@GermanBluefox) Added possibility to show custom information on Card
 

package/build/DeviceCard.js

@@ -26,7 +26,8 @@ const styles = {
         minHeight: 280,
         margin: 10,
         overflow: 'hidden',
-        display: 'inline-block',
+        display: 'inline-flex',
+        flexDirection: 'column',
     },
     headerStyle: {
         display: 'flex',
@@ -64,11 +65,12 @@ const styles = {
         position: 'absolute',
     },
     bodyStyle: {
-        height: 'calc(100% - 116px)',
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
     },
     deviceInfoStyle: {
         padding: '20px 16px 0 16px',
-        height: 133,
     },
     statusStyle: {
         padding: '15px 25px 0 15px',
@@ -248,7 +250,7 @@ export default class DeviceCard extends Component {
                 : [this.props.device.status];
         const icon = this.state.icon ? React.createElement(DeviceTypeIcon, { src: this.state.icon }) : React.createElement(NoImageIcon, null);
         const headerStyle = this.getCardHeaderStyle(this.props.theme, 345);
-        return (React.createElement(Card, { sx: smallCardStyle },
+        return (React.createElement(Card, { sx: { ...smallCardStyle, display: 'flex', flexDirection: 'column' } },
             React.createElement(CardHeader, { style: headerStyle, avatar: React.createElement("div", null,
                     this.props.uploadImagesToInstance ? (React.createElement(DeviceImageUpload, { uploadImagesToInstance: this.props.uploadImagesToInstance, deviceId: this.props.device.id, manufacturer: this.state.manufacturer, model: this.state.model, onImageSelect: (imageData) => {
                             if (imageData) {
@@ -266,7 +268,7 @@ export default class DeviceCard extends Component {
                         getTranslation('manufacturer'),
                         ":"),
                     this.state.manufacturer)) : null }),
-            React.createElement(CardContent, { style: { position: 'relative' } },
+            React.createElement(CardContent, { style: { position: 'relative', flex: 1, display: 'flex', flexDirection: 'column' } },
                 status?.length ? (React.createElement("div", { style: {
                         display: 'flex',
                         position: 'absolute',
@@ -292,7 +294,11 @@ export default class DeviceCard extends Component {
                             React.createElement("b", { style: { marginRight: 4 } },
                                 getTranslation('model'),
                                 ":"),
-                            this.state.model)) : null))),
+                            this.state.model)) : null)),
+                this.props.device.customInfo ? (React.createElement("div", { style: { padding: '0 16px' } },
+                    React.createElement(JsonConfig, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.props.device.customInfo.schema, data: this.props.device.customInfo.data || {}, onChange: (_data) => {
+                            /* ignore */
+                        }, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, isFloatComma: this.props.isFloatComma, dateFormat: this.props.dateFormat }))) : null),
             React.createElement(CardActions, { disableSpacing: true },
                 this.renderActions(),
                 React.createElement("div", { style: { flexGrow: 1 } }),
@@ -379,16 +385,16 @@ export default class DeviceCard extends Component {
                             getTranslation('model'),
                             ":"),
                         this.state.model)) : null),
-                this.props.device.customInfo ? (React.createElement(JsonConfig, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.props.device.customInfo.schema, data: this.props.device.customInfo.data || {}, onChange: (_data) => {
-                        /* ignore */
-                    }, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, isFloatComma: this.props.isFloatComma, dateFormat: this.props.dateFormat })) : null,
+                this.props.device.customInfo ? (React.createElement("div", { style: { padding: '0 16px' } },
+                    React.createElement(JsonConfig, { instanceId: this.props.instanceId, socket: this.props.socket, schema: this.props.device.customInfo.schema, data: this.props.device.customInfo.data || {}, onChange: (_data) => {
+                            /* ignore */
+                        }, themeName: this.props.themeName, themeType: this.props.themeType, theme: this.props.theme, isFloatComma: this.props.isFloatComma, dateFormat: this.props.dateFormat }))) : null,
                 !!(this.props.device.actions?.length || this.props.device.controls?.length) && (React.createElement("div", { style: {
-                        flex: 1,
-                        position: 'relative',
+                        marginTop: 'auto',
                         display: 'flex',
                         gap: 8,
                         paddingBottom: 5,
-                        height: 34,
+                        minHeight: 34,
                         paddingLeft: 10,
                         paddingRight: 10,
                     } },

package/build/DeviceCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceCard.js","sourceRoot":"./src/","sources":["DeviceCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    DeviceTypeIcon,\n    I18n,\n    Utils,\n    type Connection,\n    type IobTheme,\n    type ThemeName,\n    type ThemeType,\n} from '@iobroker/adapter-react-v5';\nimport type { ConfigItemPanel, ConfigItemTabs } from '@iobroker/json-config';\nimport { Close as CloseIcon, VideogameAsset as ControlIcon, MoreVert as MoreVertIcon } from '@mui/icons-material';\nimport {\n    Box,\n    Button,\n    Card,\n    CardActions,\n    CardContent,\n    CardHeader,\n    Dialog,\n    DialogActions,\n    DialogContent,\n    DialogTitle,\n    Fab,\n    IconButton,\n    Paper,\n    Skeleton,\n    Typography,\n} from '@mui/material';\nimport React, { Component, type JSX } from 'react';\nimport DeviceActionButton from './DeviceActionButton';\nimport DeviceControlComponent from './DeviceControl';\nimport DeviceImageUpload from './DeviceImageUpload';\nimport DeviceStatusComponent from './DeviceStatus';\nimport JsonConfig from './JsonConfig';\nimport type {\n    ActionBase,\n    ControlBase,\n    ControlState,\n    DeviceDetails,\n    DeviceInfo,\n    DeviceId,\n    ConfigConnectionType,\n} from './protocol/api';\nimport { getTranslation } from './Utils';\nimport { StateOrObjectHandler, type StateOrObjectSubscription } from './StateOrObjectHandler';\n\nconst smallCardStyle = {\n    maxWidth: 345,\n    minWidth: 200,\n} as const;\n\n/** Reserved action names (this is copied from https://github.com/ioBroker/dm-utils/blob/main/src/types/base.ts as we can only have type references to dm-utils) */\nconst ACTIONS = {\n    /** This action will be called when the user clicks on the connection icon */\n    STATUS: 'status',\n    /** This action will be called when the user clicks on the enabled / disabled icon. The enabled/disabled icon will be shown only if the node status has the \"enabled\" flag set to false or true */\n    ENABLE_DISABLE: 'enable/disable',\n};\n\nconst styles: Record<string, React.CSSProperties> = {\n    cardStyle: {\n        width: 300,\n        minHeight: 280,\n        margin: 10,\n        overflow: 'hidden',\n        display: 'inline-block',\n    },\n    headerStyle: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        paddingLeft: 8,\n        paddingRight: 8,\n        position: 'relative',\n        minHeight: 60,\n        color: '#000',\n    },\n    imgAreaStyle: {\n        height: 45,\n        width: 45,\n        justifyContent: 'center',\n        display: 'flex',\n        alignItems: 'center',\n    },\n    imgStyle: {\n        zIndex: 2,\n        maxWidth: '100%',\n        maxHeight: '100%',\n        color: '#FFF',\n    },\n    titleStyle: {\n        fontSize: 16,\n        fontWeight: 'bold',\n        // whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n    },\n    detailsButtonStyle: {\n        right: 20,\n        bottom: -20,\n        position: 'absolute',\n    },\n    bodyStyle: {\n        height: 'calc(100% - 116px)',\n    },\n    deviceInfoStyle: {\n        padding: '20px 16px 0 16px',\n        height: 133,\n    },\n    statusStyle: {\n        padding: '15px 25px 0 15px',\n        height: 41,\n    },\n};\n\nfunction NoImageIcon(props: { style?: React.CSSProperties; className?: string }): JSX.Element {\n    return (\n        <svg\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            style={props.style}\n            className={props.className}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z\"\n            />\n        </svg>\n    );\n}\n\ninterface DeviceCardProps {\n    filter?: string;\n    /* Device ID */\n    id: DeviceId;\n    identifierLabel: ioBroker.StringOrTranslated;\n    device: DeviceInfo;\n    instanceId: string;\n    socket: Connection;\n    /* Instance, where the images should be uploaded to */\n    uploadImagesToInstance?: string;\n    deviceHandler: (deviceId: DeviceId, action: ActionBase) => () => void;\n    controlHandler: (\n        deviceId: DeviceId,\n        control: ControlBase,\n        state: ControlState,\n    ) => () => Promise<ioBroker.State | null>;\n    controlStateHandler: (deviceId: DeviceId, control: ControlBase) => () => Promise<ioBroker.State | null>;\n    smallCards?: boolean;\n    alive: boolean;\n    themeName: ThemeName;\n    themeType: ThemeType;\n    theme: IobTheme;\n    isFloatComma: boolean;\n    dateFormat: string;\n}\n\nfunction getText(text: ioBroker.StringOrTranslated | undefined): string | undefined {\n    if (typeof text === 'object') {\n        return text[I18n.getLanguage()] || text.en;\n    }\n\n    return text;\n}\n\ninterface DeviceCardState {\n    open: boolean;\n    details: DeviceDetails | null;\n    data: Record<string, any>;\n    showControlDialog: boolean;\n\n    // values possibly loaded from states/objects\n    name?: string;\n    identifier?: string;\n    hasDetails?: boolean;\n    icon?: string;\n    backgroundColor?: string;\n    color?: string;\n    manufacturer?: string;\n    model?: string;\n    connectionType?: ConfigConnectionType;\n    enabled?: boolean;\n}\n\n/**\n * Device Card Component\n */\nexport default class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {\n    private readonly stateOrObjectHandler: StateOrObjectHandler;\n    private readonly subscriptions: Map<\n        keyof DeviceInfo & keyof DeviceCardState,\n        { subscription: StateOrObjectSubscription; transform?: (value: any) => any }\n    > = new Map();\n\n    constructor(props: DeviceCardProps) {\n        super(props);\n\n        this.state = {\n            open: false,\n            details: null,\n            data: {},\n            showControlDialog: false,\n        };\n\n        this.stateOrObjectHandler = new StateOrObjectHandler(this.props.socket);\n    }\n\n    async fetchIcon(): Promise<void> {\n        if (!this.props.device.icon) {\n            const manufacturer = this.state.manufacturer;\n            const model = this.state.model;\n\n            // try to load the icon from file storage\n            const fileName = `${manufacturer ? `${manufacturer}_` : ''}${model || JSON.stringify(this.props.device.id)}`;\n\n            try {\n                const file = await this.props.socket.readFile(\n                    this.props.instanceId.replace('system.adapter.', ''),\n                    `${fileName}.webp`,\n                    true,\n                );\n                if (file) {\n                    this.setState({ icon: `data:${file.mimeType};base64,${file.file}` });\n                } else {\n                    this.setState({ icon: '' });\n                }\n                // const response = await fetch(url);\n                // if (response.ok) {\n                //     const blob = await response.blob();\n                //     const reader = new FileReader();\n                //     reader.onloadend = () => {\n                //         setIcon(reader.result);\n                //     };\n                //     reader.readAsDataURL(blob);\n                // } else {\n                //     throw new Error('Response not ok');\n                // }\n            } catch {\n                if (this.state.icon) {\n                    this.setState({ icon: '' });\n                }\n            }\n        }\n    }\n\n    async componentDidMount(): Promise<void> {\n        await this.addStateOrObjectListener('name', getText);\n        await this.addStateOrObjectListener('identifier');\n        await this.addStateOrObjectListener('hasDetails');\n        await this.addStateOrObjectListener('icon');\n        await this.addStateOrObjectListener('backgroundColor');\n        await this.addStateOrObjectListener('color');\n        await this.addStateOrObjectListener('manufacturer', getText);\n        await this.addStateOrObjectListener('model', getText);\n        await this.addStateOrObjectListener('connectionType');\n        await this.addStateOrObjectListener('enabled');\n\n        await this.fetchIcon().catch(e => console.error(e));\n    }\n\n    private async addStateOrObjectListener(\n        key: keyof DeviceInfo & keyof DeviceCardState,\n        transform?: (value: any) => any,\n    ): Promise<void> {\n        const sub = await this.stateOrObjectHandler.addListener(this.props.device[key], value =>\n            this.setState<typeof key>({ [key]: transform ? transform(value) : value }),\n        );\n        this.subscriptions.set(key, { subscription: sub, transform });\n    }\n\n    async componentDidUpdate(prevProps: DeviceCardProps): Promise<void> {\n        for (const [key, { subscription, transform }] of [...this.subscriptions]) {\n            const newItem = this.props.device[key];\n            const prevItem = prevProps.device[key];\n\n            if (newItem !== prevItem) {\n                console.log(`${key} of device ${JSON.stringify(this.props.device.id)} updated`, prevItem, newItem);\n                this.subscriptions.delete(key);\n                await this.addStateOrObjectListener(key, transform);\n                await subscription.unsubscribe();\n            }\n        }\n    }\n\n    async componentWillUnmount(): Promise<void> {\n        for (const [, { subscription }] of this.subscriptions) {\n            await subscription.unsubscribe();\n        }\n        this.subscriptions.clear();\n    }\n\n    /**\n     * Load the device details\n     */\n    async loadDetails(): Promise<void> {\n        console.log(`Loading device details for`, this.props.device.id, `... from ${this.props.instanceId}`);\n        const details: DeviceDetails | null = await this.props.socket.sendTo(\n            this.props.instanceId,\n            'dm:deviceDetails',\n            this.props.device.id,\n        );\n        console.log(`Got device details for`, this.props.device.id, details);\n        this.setState({ details, data: details?.data || {} });\n    }\n\n    /**\n     * Copy the device ID to the clipboard\n     */\n    copyToClipboard = (): void => {\n        const textToCopy = this.state.identifier;\n        if (!textToCopy) {\n            return;\n        }\n        Utils.copyToClipboard(textToCopy);\n        alert(`${getTranslation('copied')} ${textToCopy} ${getTranslation('toClipboard')}!`);\n    };\n\n    renderDialog(): JSX.Element | null {\n        if (!this.state.open || !this.state.details) {\n            return null;\n        }\n\n        return (\n            <Dialog\n                open={!0}\n                maxWidth=\"md\"\n                onClose={() => this.setState({ open: false })}\n            >\n                <DialogContent>\n                    <JsonConfig\n                        instanceId={this.props.instanceId}\n                        socket={this.props.socket}\n                        schema={this.state.details.schema as ConfigItemPanel | ConfigItemTabs}\n                        data={this.state.data}\n                        onChange={(data: Record<string, any>) => this.setState({ data })}\n                        themeName={this.props.themeName}\n                        themeType={this.props.themeType}\n                        theme={this.props.theme}\n                        isFloatComma={this.props.isFloatComma}\n                        dateFormat={this.props.dateFormat}\n                    />\n                </DialogContent>\n                <DialogActions>\n                    <Button\n                        disabled={!this.props.alive}\n                        variant=\"contained\"\n                        color=\"primary\"\n                        onClick={() => this.setState({ open: false })}\n                        autoFocus\n                    >\n                        {getTranslation('closeButtonText')}\n                    </Button>\n                </DialogActions>\n            </Dialog>\n        );\n    }\n\n    renderControlDialog(): JSX.Element | null {\n        if (!this.state.showControlDialog || !this.props.alive) {\n            return null;\n        }\n        const colors = { primary: '#111', secondary: '#888' };\n        return (\n            <Dialog\n                open={!0}\n                onClose={() => this.setState({ showControlDialog: false })}\n            >\n                <DialogTitle>\n                    {this.state.name}\n                    <IconButton\n                        style={{\n                            position: 'absolute',\n                            top: 5,\n                            right: 5,\n                            zIndex: 10,\n                        }}\n                        onClick={() => this.setState({ showControlDialog: false })}\n                    >\n                        <CloseIcon />\n                    </IconButton>\n                </DialogTitle>\n                <DialogContent style={{ display: 'flex', flexDirection: 'column', overflow: 'visible' }}>\n                    {this.props.device.controls?.map(control => (\n                        <DeviceControlComponent\n                            disabled={false}\n                            key={control.id}\n                            control={control}\n                            socket={this.props.socket}\n                            colors={colors}\n                            deviceId={this.props.device.id}\n                            controlHandler={this.props.controlHandler}\n                            controlStateHandler={this.props.controlStateHandler}\n                        />\n                    ))}\n                </DialogContent>\n            </Dialog>\n        );\n    }\n\n    renderControls(): JSX.Element | null {\n        const colors = { primary: '#111', secondary: '#888' };\n        const firstControl = this.props.device.controls?.[0];\n        if (\n            this.props.device.controls?.length === 1 &&\n            firstControl &&\n            (firstControl.type === 'icon' || firstControl.type === 'switch') &&\n            !firstControl.label\n        ) {\n            // control can be placed in the button icon\n            return (\n                <DeviceControlComponent\n                    disabled={!this.props.alive}\n                    control={firstControl}\n                    colors={colors}\n                    socket={this.props.socket}\n                    deviceId={this.props.device.id}\n                    controlHandler={this.props.controlHandler}\n                    controlStateHandler={this.props.controlStateHandler}\n                />\n            );\n        }\n\n        if (this.props.device.controls?.length) {\n            // place a button and show a controls dialog\n            return (\n                <Fab\n                    size=\"small\"\n                    style={{ width: 32, height: 32, minHeight: 32 }}\n                    disabled={!this.props.alive}\n                    onClick={() => this.setState({ showControlDialog: true })}\n                >\n                    <ControlIcon />\n                </Fab>\n            );\n        }\n        return null;\n    }\n\n    renderActions(): JSX.Element[] | null {\n        const actions = this.props.device.actions?.filter(\n            a => a.id !== ACTIONS.STATUS && a.id !== ACTIONS.ENABLE_DISABLE,\n        );\n\n        return actions?.length\n            ? actions.map(a => (\n                  <DeviceActionButton\n                      disabled={!this.props.alive}\n                      key={a.id}\n                      deviceId={this.props.device.id}\n                      action={a}\n                      deviceHandler={this.props.deviceHandler}\n                  />\n              ))\n            : null;\n    }\n\n    renderSmall(): JSX.Element {\n        const hasDetails = this.state.hasDetails;\n        const status = !this.props.device.status\n            ? []\n            : Array.isArray(this.props.device.status)\n              ? this.props.device.status\n              : [this.props.device.status];\n\n        const icon = this.state.icon ? <DeviceTypeIcon src={this.state.icon} /> : <NoImageIcon />;\n\n        const headerStyle = this.getCardHeaderStyle(this.props.theme, 345);\n\n        return (\n            <Card sx={smallCardStyle}>\n                <CardHeader\n                    style={headerStyle}\n                    avatar={\n                        <div>\n                            {this.props.uploadImagesToInstance ? (\n                                <DeviceImageUpload\n                                    uploadImagesToInstance={this.props.uploadImagesToInstance}\n                                    deviceId={this.props.device.id}\n                                    manufacturer={this.state.manufacturer}\n                                    model={this.state.model}\n                                    onImageSelect={(imageData: string): void => {\n                                        if (imageData) {\n                                            this.setState({ icon: imageData });\n                                        }\n                                    }}\n                                    socket={this.props.socket}\n                                />\n                            ) : null}\n                            {icon}\n                        </div>\n                    }\n                    action={\n                        hasDetails ? (\n                            <IconButton\n                                aria-label=\"settings\"\n                                onClick={() => {\n                                    if (!this.state.open) {\n                                        this.loadDetails().catch(console.error);\n                                        this.setState({ open: true });\n                                    }\n                                }}\n                            >\n                                <MoreVertIcon />\n                            </IconButton>\n                        ) : null\n                    }\n                    title={this.state.name}\n                    subheader={\n                        this.state.manufacturer ? (\n                            <span>\n                                <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                {this.state.manufacturer}\n                            </span>\n                        ) : null\n                    }\n                />\n                <CardContent style={{ position: 'relative' }}>\n                    {status?.length ? (\n                        <div\n                            style={{\n                                display: 'flex',\n                                position: 'absolute',\n                                top: -11,\n                                background: '#88888880',\n                                padding: '0 8px',\n                                borderRadius: 5,\n                                width: 'calc(100% - 46px)',\n                            }}\n                        >\n                            {status.map((s, i) => (\n                                <DeviceStatusComponent\n                                    key={i}\n                                    socket={this.props.socket}\n                                    status={s}\n                                    connectionType={this.state.connectionType}\n                                    enabled={this.state.enabled}\n                                    deviceId={this.props.device.id}\n                                    statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}\n                                    disableEnableAction={this.props.device.actions?.find(\n                                        a => a.id === ACTIONS.ENABLE_DISABLE,\n                                    )}\n                                    deviceHandler={this.props.deviceHandler}\n                                    theme={this.props.theme}\n                                    stateOrObjectHandler={this.stateOrObjectHandler}\n                                />\n                            ))}\n                        </div>\n                    ) : null}\n                    <div>\n                        <Typography variant=\"body1\">\n                            {this.state.identifier ? (\n                                <div\n                                    onClick={this.copyToClipboard}\n                                    style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}\n                                >\n                                    <b>{getText(this.props.identifierLabel)}:</b>\n                                    <span style={{ marginLeft: 4 }}>{this.state.identifier}</span>\n                                </div>\n                            ) : null}\n                            {this.state.manufacturer ? (\n                                <div>\n                                    <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                    {this.state.manufacturer}\n                                </div>\n                            ) : null}\n                            {this.state.model ? (\n                                <div>\n                                    <b style={{ marginRight: 4 }}>{getTranslation('model')}:</b>\n                                    {this.state.model}\n                                </div>\n                            ) : null}\n                        </Typography>\n                    </div>\n                </CardContent>\n                <CardActions disableSpacing>\n                    {this.renderActions()}\n                    <div style={{ flexGrow: 1 }} />\n                    {this.renderControls()}\n                </CardActions>\n                {this.renderDialog()}\n                {this.renderControlDialog()}\n            </Card>\n        );\n    }\n\n    getCardHeaderStyle(theme: IobTheme, maxWidth?: number): React.CSSProperties {\n        const backgroundColor =\n            this.state.backgroundColor === 'primary'\n                ? theme.palette.primary.main\n                : this.state.backgroundColor === 'secondary'\n                  ? theme.palette.secondary.main\n                  : this.state.backgroundColor || theme.palette.secondary.main;\n\n        let color;\n        if (this.state.color && this.state.color !== 'primary' && this.state.color !== 'secondary') {\n            // Color was directly defined\n            color = this.state.color;\n        } else if (this.state.color === 'primary') {\n            color = theme.palette.primary.main;\n        } else if (this.state.color === 'secondary') {\n            color = theme.palette.secondary.main;\n        } else {\n            // Color was not defined\n            if (this.state.backgroundColor === 'primary') {\n                color = theme.palette.primary.contrastText;\n            } else if (this.state.backgroundColor === 'secondary' || !this.state.backgroundColor) {\n                color = theme.palette.secondary.contrastText;\n            } else {\n                color = Utils.invertColor(backgroundColor, true);\n            }\n        }\n\n        return {\n            backgroundColor,\n            color,\n            maxWidth,\n        };\n    }\n\n    renderBig(): JSX.Element {\n        const status = !this.props.device.status\n            ? []\n            : Array.isArray(this.props.device.status)\n              ? this.props.device.status\n              : [this.props.device.status];\n\n        const icon = this.state.icon ? (\n            <DeviceTypeIcon\n                src={this.state.icon}\n                style={styles.imgStyle}\n            />\n        ) : (\n            <NoImageIcon style={styles.imgStyle} />\n        );\n        const headerStyle = this.getCardHeaderStyle(this.props.theme);\n\n        const title: string = this.state.details?.data?.name || this.props.device.name || '';\n\n        return (\n            <Paper\n                style={styles.cardStyle}\n                key={JSON.stringify(this.props.id)}\n            >\n                {/* Header */}\n                <Box\n                    sx={headerStyle}\n                    style={styles.headerStyle}\n                >\n                    <div style={styles.imgAreaStyle}>\n                        {this.props.uploadImagesToInstance ? (\n                            <DeviceImageUpload\n                                uploadImagesToInstance={this.props.uploadImagesToInstance}\n                                deviceId={this.props.device.id}\n                                manufacturer={this.state.manufacturer}\n                                model={this.state.model}\n                                onImageSelect={(imageData: string): void => {\n                                    if (imageData) {\n                                        this.setState({ icon: imageData });\n                                    }\n                                }}\n                                socket={this.props.socket}\n                            />\n                        ) : null}\n                        {icon}\n                    </div>\n                    <Box\n                        style={styles.titleStyle}\n                        title={title.length > 20 ? title : undefined}\n                        sx={theme => ({ color: headerStyle.color || theme.palette.secondary.contrastText })}\n                    >\n                        {this.state.details?.data?.name || this.state.name}\n                    </Box>\n                    {this.state.hasDetails ? (\n                        <Fab\n                            disabled={!this.props.alive}\n                            size=\"small\"\n                            style={styles.detailsButtonStyle}\n                            onClick={() => {\n                                if (!this.state.open) {\n                                    this.loadDetails().catch(console.error);\n                                    this.setState({ open: true });\n                                }\n                            }}\n                            color=\"primary\"\n                        >\n                            <MoreVertIcon />\n                        </Fab>\n                    ) : null}\n                </Box>\n                {/* Body */}\n                <div style={styles.statusStyle}>\n                    {status.map((s, i) => (\n                        <DeviceStatusComponent\n                            key={i}\n                            socket={this.props.socket}\n                            deviceId={this.props.device.id}\n                            connectionType={this.state.connectionType}\n                            status={s}\n                            enabled={this.state.enabled}\n                            statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}\n                            disableEnableAction={this.props.device.actions?.find(a => a.id === ACTIONS.ENABLE_DISABLE)}\n                            deviceHandler={this.props.deviceHandler}\n                            theme={this.props.theme}\n                            stateOrObjectHandler={this.stateOrObjectHandler}\n                        />\n                    ))}\n                </div>\n                <div style={styles.bodyStyle}>\n                    <Typography\n                        variant=\"body1\"\n                        style={styles.deviceInfoStyle}\n                    >\n                        {this.state.identifier ? (\n                            <div onClick={this.copyToClipboard}>\n                                <b style={{ marginRight: 4 }}>{getText(this.props.identifierLabel)}:</b>\n                                {this.state.identifier}\n                            </div>\n                        ) : null}\n                        {this.state.manufacturer ? (\n                            <div>\n                                <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                {this.state.manufacturer}\n                            </div>\n                        ) : null}\n                        {this.state.model ? (\n                            <div>\n                                <b style={{ marginRight: 4 }}>{getTranslation('model')}:</b>\n                                {this.state.model}\n                            </div>\n                        ) : null}\n                    </Typography>\n                    {this.props.device.customInfo ? (\n                        <JsonConfig\n                            instanceId={this.props.instanceId}\n                            socket={this.props.socket}\n                            schema={this.props.device.customInfo.schema as ConfigItemPanel | ConfigItemTabs}\n                            data={this.props.device.customInfo.data || {}}\n                            onChange={(_data: Record<string, any>) => {\n                                /* ignore */\n                            }}\n                            themeName={this.props.themeName}\n                            themeType={this.props.themeType}\n                            theme={this.props.theme}\n                            isFloatComma={this.props.isFloatComma}\n                            dateFormat={this.props.dateFormat}\n                        />\n                    ) : null}\n                    {/* Footer */}\n                    {!!(this.props.device.actions?.length || this.props.device.controls?.length) && (\n                        <div\n                            style={{\n                                flex: 1,\n                                position: 'relative',\n                                display: 'flex',\n                                gap: 8,\n                                paddingBottom: 5,\n                                height: 34,\n                                paddingLeft: 10,\n                                paddingRight: 10,\n                            }}\n                        >\n                            {this.renderActions()}\n                            <div style={{ flexGrow: 1 }} />\n                            {this.renderControls()}\n                        </div>\n                    )}\n                </div>\n                {this.renderDialog()}\n                {this.renderControlDialog()}\n            </Paper>\n        );\n    }\n\n    render(): JSX.Element {\n        const name = this.state.name?.toLowerCase() ?? '';\n        if (this.props.filter && !name.includes(this.props.filter.toLowerCase())) {\n            return <></>;\n        }\n\n        if (this.props.smallCards) {\n            return this.renderSmall();\n        }\n\n        return this.renderBig();\n    }\n}\n\ntype DeviceCardSkeletonProps = Pick<DeviceCardProps, 'smallCards' | 'theme'>;\n\nexport class DeviceCardSkeleton extends Component<DeviceCardSkeletonProps> {\n    render(): JSX.Element {\n        if (this.props.smallCards) {\n            return this.renderSmall();\n        }\n\n        return this.renderBig();\n    }\n\n    renderSmall(): JSX.Element {\n        const headerStyle = this.getCardHeaderStyle(this.props.theme, 345);\n\n        return (\n            <Card sx={smallCardStyle}>\n                <CardHeader\n                    style={headerStyle}\n                    avatar={\n                        <div>\n                            <Skeleton\n                                variant=\"rounded\"\n                                width={24}\n                                height={24}\n                            />\n                        </div>\n                    }\n                    title={<Skeleton />}\n                    subheader={<Skeleton />}\n                />\n                <CardContent style={{ position: 'relative' }}>\n                    <div>\n                        <Typography variant=\"body1\">\n                            <div>\n                                <Skeleton />\n                            </div>\n                            <div>\n                                <Skeleton />\n                            </div>\n                            <div>\n                                <Skeleton />\n                            </div>\n                        </Typography>\n                    </div>\n                </CardContent>\n            </Card>\n        );\n    }\n\n    renderBig(): JSX.Element {\n        const headerStyle = this.getCardHeaderStyle(this.props.theme);\n\n        return (\n            <Paper style={styles.cardStyle}>\n                <Box\n                    sx={headerStyle}\n                    style={styles.headerStyle}\n                >\n                    <div style={styles.imgAreaStyle}>\n                        <Skeleton\n                            variant=\"rounded\"\n                            width={24}\n                            height={24}\n                        />\n                    </div>\n                    <Box\n                        style={styles.titleStyle}\n                        sx={theme => ({\n                            color: headerStyle.color || theme.palette.secondary.contrastText,\n                            minWidth: '50%',\n                        })}\n                    >\n                        <Skeleton />\n                    </Box>\n                </Box>\n                <div style={styles.statusStyle}></div>\n                <div style={styles.bodyStyle}>\n                    <Typography\n                        variant=\"body1\"\n                        style={styles.deviceInfoStyle}\n                    >\n                        <div>\n                            <Skeleton />\n                        </div>\n                        <div>\n                            <Skeleton />\n                        </div>\n                        <div>\n                            <Skeleton />\n                        </div>\n                    </Typography>\n                </div>\n            </Paper>\n        );\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    getCardHeaderStyle(theme: IobTheme, maxWidth?: number): React.CSSProperties {\n        const backgroundColor = theme.palette.secondary.main;\n        const color = theme.palette.secondary.contrastText;\n\n        return {\n            backgroundColor,\n            color,\n            maxWidth,\n        };\n    }\n}\n"]}
+{"version":3,"file":"DeviceCard.js","sourceRoot":"./src/","sources":["DeviceCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    DeviceTypeIcon,\n    I18n,\n    Utils,\n    type Connection,\n    type IobTheme,\n    type ThemeName,\n    type ThemeType,\n} from '@iobroker/adapter-react-v5';\nimport type { ConfigItemPanel, ConfigItemTabs } from '@iobroker/json-config';\nimport { Close as CloseIcon, VideogameAsset as ControlIcon, MoreVert as MoreVertIcon } from '@mui/icons-material';\nimport {\n    Box,\n    Button,\n    Card,\n    CardActions,\n    CardContent,\n    CardHeader,\n    Dialog,\n    DialogActions,\n    DialogContent,\n    DialogTitle,\n    Fab,\n    IconButton,\n    Paper,\n    Skeleton,\n    Typography,\n} from '@mui/material';\nimport React, { Component, type JSX } from 'react';\nimport DeviceActionButton from './DeviceActionButton';\nimport DeviceControlComponent from './DeviceControl';\nimport DeviceImageUpload from './DeviceImageUpload';\nimport DeviceStatusComponent from './DeviceStatus';\nimport JsonConfig from './JsonConfig';\nimport type {\n    ActionBase,\n    ControlBase,\n    ControlState,\n    DeviceDetails,\n    DeviceInfo,\n    DeviceId,\n    ConfigConnectionType,\n} from './protocol/api';\nimport { getTranslation } from './Utils';\nimport { StateOrObjectHandler, type StateOrObjectSubscription } from './StateOrObjectHandler';\n\nconst smallCardStyle = {\n    maxWidth: 345,\n    minWidth: 200,\n} as const;\n\n/** Reserved action names (this is copied from https://github.com/ioBroker/dm-utils/blob/main/src/types/base.ts as we can only have type references to dm-utils) */\nconst ACTIONS = {\n    /** This action will be called when the user clicks on the connection icon */\n    STATUS: 'status',\n    /** This action will be called when the user clicks on the enabled / disabled icon. The enabled/disabled icon will be shown only if the node status has the \"enabled\" flag set to false or true */\n    ENABLE_DISABLE: 'enable/disable',\n};\n\nconst styles: Record<string, React.CSSProperties> = {\n    cardStyle: {\n        width: 300,\n        minHeight: 280,\n        margin: 10,\n        overflow: 'hidden',\n        display: 'inline-flex',\n        flexDirection: 'column',\n    },\n    headerStyle: {\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        paddingLeft: 8,\n        paddingRight: 8,\n        position: 'relative',\n        minHeight: 60,\n        color: '#000',\n    },\n    imgAreaStyle: {\n        height: 45,\n        width: 45,\n        justifyContent: 'center',\n        display: 'flex',\n        alignItems: 'center',\n    },\n    imgStyle: {\n        zIndex: 2,\n        maxWidth: '100%',\n        maxHeight: '100%',\n        color: '#FFF',\n    },\n    titleStyle: {\n        fontSize: 16,\n        fontWeight: 'bold',\n        // whiteSpace: 'nowrap',\n        overflow: 'hidden',\n        textOverflow: 'ellipsis',\n    },\n    detailsButtonStyle: {\n        right: 20,\n        bottom: -20,\n        position: 'absolute',\n    },\n    bodyStyle: {\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    deviceInfoStyle: {\n        padding: '20px 16px 0 16px',\n    },\n    statusStyle: {\n        padding: '15px 25px 0 15px',\n        height: 41,\n    },\n};\n\nfunction NoImageIcon(props: { style?: React.CSSProperties; className?: string }): JSX.Element {\n    return (\n        <svg\n            viewBox=\"0 0 24 24\"\n            width=\"24\"\n            height=\"24\"\n            style={props.style}\n            className={props.className}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M21.9,21.9l-8.49-8.49l0,0L3.59,3.59l0,0L2.1,2.1L0.69,3.51L3,5.83V19c0,1.1,0.9,2,2,2h13.17l2.31,2.31L21.9,21.9z M5,18 l3.5-4.5l2.5,3.01L12.17,15l3,3H5z M21,18.17L5.83,3H19c1.1,0,2,0.9,2,2V18.17z\"\n            />\n        </svg>\n    );\n}\n\ninterface DeviceCardProps {\n    filter?: string;\n    /* Device ID */\n    id: DeviceId;\n    identifierLabel: ioBroker.StringOrTranslated;\n    device: DeviceInfo;\n    instanceId: string;\n    socket: Connection;\n    /* Instance, where the images should be uploaded to */\n    uploadImagesToInstance?: string;\n    deviceHandler: (deviceId: DeviceId, action: ActionBase) => () => void;\n    controlHandler: (\n        deviceId: DeviceId,\n        control: ControlBase,\n        state: ControlState,\n    ) => () => Promise<ioBroker.State | null>;\n    controlStateHandler: (deviceId: DeviceId, control: ControlBase) => () => Promise<ioBroker.State | null>;\n    smallCards?: boolean;\n    alive: boolean;\n    themeName: ThemeName;\n    themeType: ThemeType;\n    theme: IobTheme;\n    isFloatComma: boolean;\n    dateFormat: string;\n}\n\nfunction getText(text: ioBroker.StringOrTranslated | undefined): string | undefined {\n    if (typeof text === 'object') {\n        return text[I18n.getLanguage()] || text.en;\n    }\n\n    return text;\n}\n\ninterface DeviceCardState {\n    open: boolean;\n    details: DeviceDetails | null;\n    data: Record<string, any>;\n    showControlDialog: boolean;\n\n    // values possibly loaded from states/objects\n    name?: string;\n    identifier?: string;\n    hasDetails?: boolean;\n    icon?: string;\n    backgroundColor?: string;\n    color?: string;\n    manufacturer?: string;\n    model?: string;\n    connectionType?: ConfigConnectionType;\n    enabled?: boolean;\n}\n\n/**\n * Device Card Component\n */\nexport default class DeviceCard extends Component<DeviceCardProps, DeviceCardState> {\n    private readonly stateOrObjectHandler: StateOrObjectHandler;\n    private readonly subscriptions: Map<\n        keyof DeviceInfo & keyof DeviceCardState,\n        { subscription: StateOrObjectSubscription; transform?: (value: any) => any }\n    > = new Map();\n\n    constructor(props: DeviceCardProps) {\n        super(props);\n\n        this.state = {\n            open: false,\n            details: null,\n            data: {},\n            showControlDialog: false,\n        };\n\n        this.stateOrObjectHandler = new StateOrObjectHandler(this.props.socket);\n    }\n\n    async fetchIcon(): Promise<void> {\n        if (!this.props.device.icon) {\n            const manufacturer = this.state.manufacturer;\n            const model = this.state.model;\n\n            // try to load the icon from file storage\n            const fileName = `${manufacturer ? `${manufacturer}_` : ''}${model || JSON.stringify(this.props.device.id)}`;\n\n            try {\n                const file = await this.props.socket.readFile(\n                    this.props.instanceId.replace('system.adapter.', ''),\n                    `${fileName}.webp`,\n                    true,\n                );\n                if (file) {\n                    this.setState({ icon: `data:${file.mimeType};base64,${file.file}` });\n                } else {\n                    this.setState({ icon: '' });\n                }\n                // const response = await fetch(url);\n                // if (response.ok) {\n                //     const blob = await response.blob();\n                //     const reader = new FileReader();\n                //     reader.onloadend = () => {\n                //         setIcon(reader.result);\n                //     };\n                //     reader.readAsDataURL(blob);\n                // } else {\n                //     throw new Error('Response not ok');\n                // }\n            } catch {\n                if (this.state.icon) {\n                    this.setState({ icon: '' });\n                }\n            }\n        }\n    }\n\n    async componentDidMount(): Promise<void> {\n        await this.addStateOrObjectListener('name', getText);\n        await this.addStateOrObjectListener('identifier');\n        await this.addStateOrObjectListener('hasDetails');\n        await this.addStateOrObjectListener('icon');\n        await this.addStateOrObjectListener('backgroundColor');\n        await this.addStateOrObjectListener('color');\n        await this.addStateOrObjectListener('manufacturer', getText);\n        await this.addStateOrObjectListener('model', getText);\n        await this.addStateOrObjectListener('connectionType');\n        await this.addStateOrObjectListener('enabled');\n\n        await this.fetchIcon().catch(e => console.error(e));\n    }\n\n    private async addStateOrObjectListener(\n        key: keyof DeviceInfo & keyof DeviceCardState,\n        transform?: (value: any) => any,\n    ): Promise<void> {\n        const sub = await this.stateOrObjectHandler.addListener(this.props.device[key], value =>\n            this.setState<typeof key>({ [key]: transform ? transform(value) : value }),\n        );\n        this.subscriptions.set(key, { subscription: sub, transform });\n    }\n\n    async componentDidUpdate(prevProps: DeviceCardProps): Promise<void> {\n        for (const [key, { subscription, transform }] of [...this.subscriptions]) {\n            const newItem = this.props.device[key];\n            const prevItem = prevProps.device[key];\n\n            if (newItem !== prevItem) {\n                console.log(`${key} of device ${JSON.stringify(this.props.device.id)} updated`, prevItem, newItem);\n                this.subscriptions.delete(key);\n                await this.addStateOrObjectListener(key, transform);\n                await subscription.unsubscribe();\n            }\n        }\n    }\n\n    async componentWillUnmount(): Promise<void> {\n        for (const [, { subscription }] of this.subscriptions) {\n            await subscription.unsubscribe();\n        }\n        this.subscriptions.clear();\n    }\n\n    /**\n     * Load the device details\n     */\n    async loadDetails(): Promise<void> {\n        console.log(`Loading device details for`, this.props.device.id, `... from ${this.props.instanceId}`);\n        const details: DeviceDetails | null = await this.props.socket.sendTo(\n            this.props.instanceId,\n            'dm:deviceDetails',\n            this.props.device.id,\n        );\n        console.log(`Got device details for`, this.props.device.id, details);\n        this.setState({ details, data: details?.data || {} });\n    }\n\n    /**\n     * Copy the device ID to the clipboard\n     */\n    copyToClipboard = (): void => {\n        const textToCopy = this.state.identifier;\n        if (!textToCopy) {\n            return;\n        }\n        Utils.copyToClipboard(textToCopy);\n        alert(`${getTranslation('copied')} ${textToCopy} ${getTranslation('toClipboard')}!`);\n    };\n\n    renderDialog(): JSX.Element | null {\n        if (!this.state.open || !this.state.details) {\n            return null;\n        }\n\n        return (\n            <Dialog\n                open={!0}\n                maxWidth=\"md\"\n                onClose={() => this.setState({ open: false })}\n            >\n                <DialogContent>\n                    <JsonConfig\n                        instanceId={this.props.instanceId}\n                        socket={this.props.socket}\n                        schema={this.state.details.schema as ConfigItemPanel | ConfigItemTabs}\n                        data={this.state.data}\n                        onChange={(data: Record<string, any>) => this.setState({ data })}\n                        themeName={this.props.themeName}\n                        themeType={this.props.themeType}\n                        theme={this.props.theme}\n                        isFloatComma={this.props.isFloatComma}\n                        dateFormat={this.props.dateFormat}\n                    />\n                </DialogContent>\n                <DialogActions>\n                    <Button\n                        disabled={!this.props.alive}\n                        variant=\"contained\"\n                        color=\"primary\"\n                        onClick={() => this.setState({ open: false })}\n                        autoFocus\n                    >\n                        {getTranslation('closeButtonText')}\n                    </Button>\n                </DialogActions>\n            </Dialog>\n        );\n    }\n\n    renderControlDialog(): JSX.Element | null {\n        if (!this.state.showControlDialog || !this.props.alive) {\n            return null;\n        }\n        const colors = { primary: '#111', secondary: '#888' };\n        return (\n            <Dialog\n                open={!0}\n                onClose={() => this.setState({ showControlDialog: false })}\n            >\n                <DialogTitle>\n                    {this.state.name}\n                    <IconButton\n                        style={{\n                            position: 'absolute',\n                            top: 5,\n                            right: 5,\n                            zIndex: 10,\n                        }}\n                        onClick={() => this.setState({ showControlDialog: false })}\n                    >\n                        <CloseIcon />\n                    </IconButton>\n                </DialogTitle>\n                <DialogContent style={{ display: 'flex', flexDirection: 'column', overflow: 'visible' }}>\n                    {this.props.device.controls?.map(control => (\n                        <DeviceControlComponent\n                            disabled={false}\n                            key={control.id}\n                            control={control}\n                            socket={this.props.socket}\n                            colors={colors}\n                            deviceId={this.props.device.id}\n                            controlHandler={this.props.controlHandler}\n                            controlStateHandler={this.props.controlStateHandler}\n                        />\n                    ))}\n                </DialogContent>\n            </Dialog>\n        );\n    }\n\n    renderControls(): JSX.Element | null {\n        const colors = { primary: '#111', secondary: '#888' };\n        const firstControl = this.props.device.controls?.[0];\n        if (\n            this.props.device.controls?.length === 1 &&\n            firstControl &&\n            (firstControl.type === 'icon' || firstControl.type === 'switch') &&\n            !firstControl.label\n        ) {\n            // control can be placed in the button icon\n            return (\n                <DeviceControlComponent\n                    disabled={!this.props.alive}\n                    control={firstControl}\n                    colors={colors}\n                    socket={this.props.socket}\n                    deviceId={this.props.device.id}\n                    controlHandler={this.props.controlHandler}\n                    controlStateHandler={this.props.controlStateHandler}\n                />\n            );\n        }\n\n        if (this.props.device.controls?.length) {\n            // place a button and show a controls dialog\n            return (\n                <Fab\n                    size=\"small\"\n                    style={{ width: 32, height: 32, minHeight: 32 }}\n                    disabled={!this.props.alive}\n                    onClick={() => this.setState({ showControlDialog: true })}\n                >\n                    <ControlIcon />\n                </Fab>\n            );\n        }\n        return null;\n    }\n\n    renderActions(): JSX.Element[] | null {\n        const actions = this.props.device.actions?.filter(\n            a => a.id !== ACTIONS.STATUS && a.id !== ACTIONS.ENABLE_DISABLE,\n        );\n\n        return actions?.length\n            ? actions.map(a => (\n                  <DeviceActionButton\n                      disabled={!this.props.alive}\n                      key={a.id}\n                      deviceId={this.props.device.id}\n                      action={a}\n                      deviceHandler={this.props.deviceHandler}\n                  />\n              ))\n            : null;\n    }\n\n    renderSmall(): JSX.Element {\n        const hasDetails = this.state.hasDetails;\n        const status = !this.props.device.status\n            ? []\n            : Array.isArray(this.props.device.status)\n              ? this.props.device.status\n              : [this.props.device.status];\n\n        const icon = this.state.icon ? <DeviceTypeIcon src={this.state.icon} /> : <NoImageIcon />;\n\n        const headerStyle = this.getCardHeaderStyle(this.props.theme, 345);\n\n        return (\n            <Card sx={{ ...smallCardStyle, display: 'flex', flexDirection: 'column' }}>\n                <CardHeader\n                    style={headerStyle}\n                    avatar={\n                        <div>\n                            {this.props.uploadImagesToInstance ? (\n                                <DeviceImageUpload\n                                    uploadImagesToInstance={this.props.uploadImagesToInstance}\n                                    deviceId={this.props.device.id}\n                                    manufacturer={this.state.manufacturer}\n                                    model={this.state.model}\n                                    onImageSelect={(imageData: string): void => {\n                                        if (imageData) {\n                                            this.setState({ icon: imageData });\n                                        }\n                                    }}\n                                    socket={this.props.socket}\n                                />\n                            ) : null}\n                            {icon}\n                        </div>\n                    }\n                    action={\n                        hasDetails ? (\n                            <IconButton\n                                aria-label=\"settings\"\n                                onClick={() => {\n                                    if (!this.state.open) {\n                                        this.loadDetails().catch(console.error);\n                                        this.setState({ open: true });\n                                    }\n                                }}\n                            >\n                                <MoreVertIcon />\n                            </IconButton>\n                        ) : null\n                    }\n                    title={this.state.name}\n                    subheader={\n                        this.state.manufacturer ? (\n                            <span>\n                                <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                {this.state.manufacturer}\n                            </span>\n                        ) : null\n                    }\n                />\n                <CardContent style={{ position: 'relative', flex: 1, display: 'flex', flexDirection: 'column' }}>\n                    {status?.length ? (\n                        <div\n                            style={{\n                                display: 'flex',\n                                position: 'absolute',\n                                top: -11,\n                                background: '#88888880',\n                                padding: '0 8px',\n                                borderRadius: 5,\n                                width: 'calc(100% - 46px)',\n                            }}\n                        >\n                            {status.map((s, i) => (\n                                <DeviceStatusComponent\n                                    key={i}\n                                    socket={this.props.socket}\n                                    status={s}\n                                    connectionType={this.state.connectionType}\n                                    enabled={this.state.enabled}\n                                    deviceId={this.props.device.id}\n                                    statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}\n                                    disableEnableAction={this.props.device.actions?.find(\n                                        a => a.id === ACTIONS.ENABLE_DISABLE,\n                                    )}\n                                    deviceHandler={this.props.deviceHandler}\n                                    theme={this.props.theme}\n                                    stateOrObjectHandler={this.stateOrObjectHandler}\n                                />\n                            ))}\n                        </div>\n                    ) : null}\n                    <div>\n                        <Typography variant=\"body1\">\n                            {this.state.identifier ? (\n                                <div\n                                    onClick={this.copyToClipboard}\n                                    style={{ textOverflow: 'ellipsis', overflow: 'hidden' }}\n                                >\n                                    <b>{getText(this.props.identifierLabel)}:</b>\n                                    <span style={{ marginLeft: 4 }}>{this.state.identifier}</span>\n                                </div>\n                            ) : null}\n                            {this.state.manufacturer ? (\n                                <div>\n                                    <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                    {this.state.manufacturer}\n                                </div>\n                            ) : null}\n                            {this.state.model ? (\n                                <div>\n                                    <b style={{ marginRight: 4 }}>{getTranslation('model')}:</b>\n                                    {this.state.model}\n                                </div>\n                            ) : null}\n                        </Typography>\n                    </div>\n                    {this.props.device.customInfo ? (\n                        <div style={{ padding: '0 16px' }}>\n                            <JsonConfig\n                                instanceId={this.props.instanceId}\n                                socket={this.props.socket}\n                                schema={this.props.device.customInfo.schema as ConfigItemPanel | ConfigItemTabs}\n                                data={this.props.device.customInfo.data || {}}\n                                onChange={(_data: Record<string, any>) => {\n                                    /* ignore */\n                                }}\n                                themeName={this.props.themeName}\n                                themeType={this.props.themeType}\n                                theme={this.props.theme}\n                                isFloatComma={this.props.isFloatComma}\n                                dateFormat={this.props.dateFormat}\n                            />\n                        </div>\n                    ) : null}\n                </CardContent>\n                <CardActions disableSpacing>\n                    {this.renderActions()}\n                    <div style={{ flexGrow: 1 }} />\n                    {this.renderControls()}\n                </CardActions>\n                {this.renderDialog()}\n                {this.renderControlDialog()}\n            </Card>\n        );\n    }\n\n    getCardHeaderStyle(theme: IobTheme, maxWidth?: number): React.CSSProperties {\n        const backgroundColor =\n            this.state.backgroundColor === 'primary'\n                ? theme.palette.primary.main\n                : this.state.backgroundColor === 'secondary'\n                  ? theme.palette.secondary.main\n                  : this.state.backgroundColor || theme.palette.secondary.main;\n\n        let color;\n        if (this.state.color && this.state.color !== 'primary' && this.state.color !== 'secondary') {\n            // Color was directly defined\n            color = this.state.color;\n        } else if (this.state.color === 'primary') {\n            color = theme.palette.primary.main;\n        } else if (this.state.color === 'secondary') {\n            color = theme.palette.secondary.main;\n        } else {\n            // Color was not defined\n            if (this.state.backgroundColor === 'primary') {\n                color = theme.palette.primary.contrastText;\n            } else if (this.state.backgroundColor === 'secondary' || !this.state.backgroundColor) {\n                color = theme.palette.secondary.contrastText;\n            } else {\n                color = Utils.invertColor(backgroundColor, true);\n            }\n        }\n\n        return {\n            backgroundColor,\n            color,\n            maxWidth,\n        };\n    }\n\n    renderBig(): JSX.Element {\n        const status = !this.props.device.status\n            ? []\n            : Array.isArray(this.props.device.status)\n              ? this.props.device.status\n              : [this.props.device.status];\n\n        const icon = this.state.icon ? (\n            <DeviceTypeIcon\n                src={this.state.icon}\n                style={styles.imgStyle}\n            />\n        ) : (\n            <NoImageIcon style={styles.imgStyle} />\n        );\n        const headerStyle = this.getCardHeaderStyle(this.props.theme);\n\n        const title: string = this.state.details?.data?.name || this.props.device.name || '';\n\n        return (\n            <Paper\n                style={styles.cardStyle}\n                key={JSON.stringify(this.props.id)}\n            >\n                {/* Header */}\n                <Box\n                    sx={headerStyle}\n                    style={styles.headerStyle}\n                >\n                    <div style={styles.imgAreaStyle}>\n                        {this.props.uploadImagesToInstance ? (\n                            <DeviceImageUpload\n                                uploadImagesToInstance={this.props.uploadImagesToInstance}\n                                deviceId={this.props.device.id}\n                                manufacturer={this.state.manufacturer}\n                                model={this.state.model}\n                                onImageSelect={(imageData: string): void => {\n                                    if (imageData) {\n                                        this.setState({ icon: imageData });\n                                    }\n                                }}\n                                socket={this.props.socket}\n                            />\n                        ) : null}\n                        {icon}\n                    </div>\n                    <Box\n                        style={styles.titleStyle}\n                        title={title.length > 20 ? title : undefined}\n                        sx={theme => ({ color: headerStyle.color || theme.palette.secondary.contrastText })}\n                    >\n                        {this.state.details?.data?.name || this.state.name}\n                    </Box>\n                    {this.state.hasDetails ? (\n                        <Fab\n                            disabled={!this.props.alive}\n                            size=\"small\"\n                            style={styles.detailsButtonStyle}\n                            onClick={() => {\n                                if (!this.state.open) {\n                                    this.loadDetails().catch(console.error);\n                                    this.setState({ open: true });\n                                }\n                            }}\n                            color=\"primary\"\n                        >\n                            <MoreVertIcon />\n                        </Fab>\n                    ) : null}\n                </Box>\n                {/* Body */}\n                <div style={styles.statusStyle}>\n                    {status.map((s, i) => (\n                        <DeviceStatusComponent\n                            key={i}\n                            socket={this.props.socket}\n                            deviceId={this.props.device.id}\n                            connectionType={this.state.connectionType}\n                            status={s}\n                            enabled={this.state.enabled}\n                            statusAction={this.props.device.actions?.find(a => a.id === ACTIONS.STATUS)}\n                            disableEnableAction={this.props.device.actions?.find(a => a.id === ACTIONS.ENABLE_DISABLE)}\n                            deviceHandler={this.props.deviceHandler}\n                            theme={this.props.theme}\n                            stateOrObjectHandler={this.stateOrObjectHandler}\n                        />\n                    ))}\n                </div>\n                <div style={styles.bodyStyle}>\n                    <Typography\n                        variant=\"body1\"\n                        style={styles.deviceInfoStyle}\n                    >\n                        {this.state.identifier ? (\n                            <div onClick={this.copyToClipboard}>\n                                <b style={{ marginRight: 4 }}>{getText(this.props.identifierLabel)}:</b>\n                                {this.state.identifier}\n                            </div>\n                        ) : null}\n                        {this.state.manufacturer ? (\n                            <div>\n                                <b style={{ marginRight: 4 }}>{getTranslation('manufacturer')}:</b>\n                                {this.state.manufacturer}\n                            </div>\n                        ) : null}\n                        {this.state.model ? (\n                            <div>\n                                <b style={{ marginRight: 4 }}>{getTranslation('model')}:</b>\n                                {this.state.model}\n                            </div>\n                        ) : null}\n                    </Typography>\n                    {this.props.device.customInfo ? (\n                        <div style={{ padding: '0 16px' }}>\n                            <JsonConfig\n                                instanceId={this.props.instanceId}\n                                socket={this.props.socket}\n                                schema={this.props.device.customInfo.schema as ConfigItemPanel | ConfigItemTabs}\n                                data={this.props.device.customInfo.data || {}}\n                                onChange={(_data: Record<string, any>) => {\n                                    /* ignore */\n                                }}\n                                themeName={this.props.themeName}\n                                themeType={this.props.themeType}\n                                theme={this.props.theme}\n                                isFloatComma={this.props.isFloatComma}\n                                dateFormat={this.props.dateFormat}\n                            />\n                        </div>\n                    ) : null}\n                    {/* Footer */}\n                    {!!(this.props.device.actions?.length || this.props.device.controls?.length) && (\n                        <div\n                            style={{\n                                marginTop: 'auto',\n                                display: 'flex',\n                                gap: 8,\n                                paddingBottom: 5,\n                                minHeight: 34,\n                                paddingLeft: 10,\n                                paddingRight: 10,\n                            }}\n                        >\n                            {this.renderActions()}\n                            <div style={{ flexGrow: 1 }} />\n                            {this.renderControls()}\n                        </div>\n                    )}\n                </div>\n                {this.renderDialog()}\n                {this.renderControlDialog()}\n            </Paper>\n        );\n    }\n\n    render(): JSX.Element {\n        const name = this.state.name?.toLowerCase() ?? '';\n        if (this.props.filter && !name.includes(this.props.filter.toLowerCase())) {\n            return <></>;\n        }\n\n        if (this.props.smallCards) {\n            return this.renderSmall();\n        }\n\n        return this.renderBig();\n    }\n}\n\ntype DeviceCardSkeletonProps = Pick<DeviceCardProps, 'smallCards' | 'theme'>;\n\nexport class DeviceCardSkeleton extends Component<DeviceCardSkeletonProps> {\n    render(): JSX.Element {\n        if (this.props.smallCards) {\n            return this.renderSmall();\n        }\n\n        return this.renderBig();\n    }\n\n    renderSmall(): JSX.Element {\n        const headerStyle = this.getCardHeaderStyle(this.props.theme, 345);\n\n        return (\n            <Card sx={smallCardStyle}>\n                <CardHeader\n                    style={headerStyle}\n                    avatar={\n                        <div>\n                            <Skeleton\n                                variant=\"rounded\"\n                                width={24}\n                                height={24}\n                            />\n                        </div>\n                    }\n                    title={<Skeleton />}\n                    subheader={<Skeleton />}\n                />\n                <CardContent style={{ position: 'relative' }}>\n                    <div>\n                        <Typography variant=\"body1\">\n                            <div>\n                                <Skeleton />\n                            </div>\n                            <div>\n                                <Skeleton />\n                            </div>\n                            <div>\n                                <Skeleton />\n                            </div>\n                        </Typography>\n                    </div>\n                </CardContent>\n            </Card>\n        );\n    }\n\n    renderBig(): JSX.Element {\n        const headerStyle = this.getCardHeaderStyle(this.props.theme);\n\n        return (\n            <Paper style={styles.cardStyle}>\n                <Box\n                    sx={headerStyle}\n                    style={styles.headerStyle}\n                >\n                    <div style={styles.imgAreaStyle}>\n                        <Skeleton\n                            variant=\"rounded\"\n                            width={24}\n                            height={24}\n                        />\n                    </div>\n                    <Box\n                        style={styles.titleStyle}\n                        sx={theme => ({\n                            color: headerStyle.color || theme.palette.secondary.contrastText,\n                            minWidth: '50%',\n                        })}\n                    >\n                        <Skeleton />\n                    </Box>\n                </Box>\n                <div style={styles.statusStyle}></div>\n                <div style={styles.bodyStyle}>\n                    <Typography\n                        variant=\"body1\"\n                        style={styles.deviceInfoStyle}\n                    >\n                        <div>\n                            <Skeleton />\n                        </div>\n                        <div>\n                            <Skeleton />\n                        </div>\n                        <div>\n                            <Skeleton />\n                        </div>\n                    </Typography>\n                </div>\n            </Paper>\n        );\n    }\n\n    // eslint-disable-next-line class-methods-use-this\n    getCardHeaderStyle(theme: IobTheme, maxWidth?: number): React.CSSProperties {\n        const backgroundColor = theme.palette.secondary.main;\n        const color = theme.palette.secondary.contrastText;\n\n        return {\n            backgroundColor,\n            color,\n            maxWidth,\n        };\n    }\n}\n"]}

package/build/InstanceActionButton.js

@@ -4,7 +4,7 @@ import { getTranslation, renderActionIcon } from './Utils';
 export default function InstanceActionButton(params) {
     const { action, instanceHandler } = params;
     const tooltip = getTranslation(action?.description ? action.description : '');
-    const title = getTranslation(action?.title ? action.title : '');
+    const title = getTranslation(action?.title || '');
     const icon = renderActionIcon(action);
     return (React.createElement(TooltipButton, { tooltip: tooltip, label: title, disabled: action.disabled, Icon: icon, onClick: instanceHandler(action) }));
 }

package/build/InstanceActionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"InstanceActionButton.js","sourceRoot":"./src/","sources":["InstanceActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3D,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,MAAiC;IAC1E,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9E,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAEhE,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEtC,OAAO,CACH,oBAAC,aAAa,IACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,GAClC,CACL,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ActionBase, InstanceAction } from './protocol/api';\n\nimport TooltipButton from './TooltipButton';\nimport { getTranslation, renderActionIcon } from './Utils';\n\ninterface InstanceActionButtonProps {\n    action: InstanceAction;\n    instanceHandler: (action: ActionBase) => () => void;\n}\n\nexport default function InstanceActionButton(params: InstanceActionButtonProps): React.JSX.Element | null {\n    const { action, instanceHandler } = params;\n\n    const tooltip = getTranslation(action?.description ? action.description : '');\n    const title = getTranslation(action?.title ? action.title : '');\n\n    const icon = renderActionIcon(action);\n\n    return (\n        <TooltipButton\n            tooltip={tooltip}\n            label={title}\n            disabled={action.disabled}\n            Icon={icon}\n            onClick={instanceHandler(action)}\n        />\n    );\n}\n"]}
+{"version":3,"file":"InstanceActionButton.js","sourceRoot":"./src/","sources":["InstanceActionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAO3D,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,MAAiC;IAC1E,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,GAAG,MAAM,CAAC;IAE3C,MAAM,OAAO,GAAG,cAAc,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9E,MAAM,KAAK,GAAG,cAAc,CAAC,MAAM,EAAE,KAAK,IAAI,EAAE,CAAC,CAAC;IAElD,MAAM,IAAI,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEtC,OAAO,CACH,oBAAC,aAAa,IACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,eAAe,CAAC,MAAM,CAAC,GAClC,CACL,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\n\nimport type { ActionBase, InstanceAction } from './protocol/api';\n\nimport TooltipButton from './TooltipButton';\nimport { getTranslation, renderActionIcon } from './Utils';\n\ninterface InstanceActionButtonProps {\n    action: InstanceAction;\n    instanceHandler: (action: ActionBase) => () => void;\n}\n\nexport default function InstanceActionButton(params: InstanceActionButtonProps): React.JSX.Element | null {\n    const { action, instanceHandler } = params;\n\n    const tooltip = getTranslation(action?.description ? action.description : '');\n    const title = getTranslation(action?.title || '');\n\n    const icon = renderActionIcon(action);\n\n    return (\n        <TooltipButton\n            tooltip={tooltip}\n            label={title}\n            disabled={action.disabled}\n            Icon={icon}\n            onClick={instanceHandler(action)}\n        />\n    );\n}\n"]}

package/build/TooltipButton.js

@@ -1,18 +1,13 @@
 import React from 'react';
-import { IconButton, Tooltip, Typography } from '@mui/material';
+import { Button, IconButton, Tooltip, Typography } from '@mui/material';
 export default function TooltipButton(props) {
     const { tooltip, label, disabled, Icon, onClick, url } = props;
-    const text = !!label && (React.createElement(Typography, { variant: "button", style: { marginLeft: 4 } }, label));
+    const text = label ? (React.createElement(Typography, { variant: "button", style: { marginLeft: 4 } }, label)) : null;
     const btnProps = url ? { href: url, disabled, target: '_blank' } : { onClick, disabled };
     if (tooltip) {
         return (React.createElement(Tooltip, { title: tooltip, slotProps: { popper: { sx: { pointerEvents: 'none' } } } },
-            React.createElement("span", null,
-                React.createElement(IconButton, { ...btnProps, size: "small" },
-                    Icon,
-                    text))));
+            React.createElement("span", null, text ? (React.createElement(Button, { ...btnProps, startIcon: Icon }, text)) : (React.createElement(IconButton, { ...btnProps, size: "small" }, Icon)))));
     }
-    return (React.createElement(IconButton, { ...btnProps, size: "small" },
-        Icon,
-        text));
+    return text ? (React.createElement(Button, { ...btnProps, startIcon: Icon }, text)) : (React.createElement(IconButton, { ...btnProps, size: "small" }, Icon));
 }
 //# sourceMappingURL=TooltipButton.js.map

package/build/TooltipButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipButton.js","sourceRoot":"./src/","sources":["TooltipButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWhE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAyB;IAC3D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,IAAI,CACpB,oBAAC,UAAU,IACP,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,IAEvB,KAAK,CACG,CAChB,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;IAEzF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,oBAAC,OAAO,IACJ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD;gBACI,oBAAC,UAAU,OACH,QAAQ,EACZ,IAAI,EAAC,OAAO;oBAEX,IAAI;oBACJ,IAAI,CACI,CACV,CACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,CACH,oBAAC,UAAU,OACH,QAAQ,EACZ,IAAI,EAAC,OAAO;QAEX,IAAI;QACJ,IAAI,CACI,CAChB,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport { IconButton, Tooltip, Typography } from '@mui/material';\n\ninterface TooltipButtonProps {\n    tooltip?: string;\n    label?: string;\n    disabled?: boolean;\n    Icon: React.JSX.Element | null;\n    onClick?: () => void;\n    url?: string;\n}\n\nexport default function TooltipButton(props: TooltipButtonProps): React.JSX.Element {\n    const { tooltip, label, disabled, Icon, onClick, url } = props;\n\n    const text = !!label && (\n        <Typography\n            variant=\"button\"\n            style={{ marginLeft: 4 }}\n        >\n            {label}\n        </Typography>\n    );\n\n    const btnProps = url ? { href: url, disabled, target: '_blank' } : { onClick, disabled };\n\n    if (tooltip) {\n        return (\n            <Tooltip\n                title={tooltip}\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n            >\n                <span>\n                    <IconButton\n                        {...btnProps}\n                        size=\"small\"\n                    >\n                        {Icon}\n                        {text}\n                    </IconButton>\n                </span>\n            </Tooltip>\n        );\n    }\n\n    return (\n        <IconButton\n            {...btnProps}\n            size=\"small\"\n        >\n            {Icon}\n            {text}\n        </IconButton>\n    );\n}\n"]}
+{"version":3,"file":"TooltipButton.js","sourceRoot":"./src/","sources":["TooltipButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAWxE,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAyB;IAC3D,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAE/D,MAAM,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC,CACjB,oBAAC,UAAU,IACP,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,EAAE,IAEvB,KAAK,CACG,CAChB,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,MAAM,QAAQ,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;IAEzF,IAAI,OAAO,EAAE,CAAC;QACV,OAAO,CACH,oBAAC,OAAO,IACJ,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,EAAE,EAAE;YAExD,kCACK,IAAI,CAAC,CAAC,CAAC,CACJ,oBAAC,MAAM,OACC,QAAQ,EACZ,SAAS,EAAE,IAAI,IAEd,IAAI,CACA,CACZ,CAAC,CAAC,CAAC,CACA,oBAAC,UAAU,OACH,QAAQ,EACZ,IAAI,EAAC,OAAO,IAEX,IAAI,CACI,CAChB,CACE,CACD,CACb,CAAC;IACN,CAAC;IAED,OAAO,IAAI,CAAC,CAAC,CAAC,CACV,oBAAC,MAAM,OACC,QAAQ,EACZ,SAAS,EAAE,IAAI,IAEd,IAAI,CACA,CACZ,CAAC,CAAC,CAAC,CACA,oBAAC,UAAU,OACH,QAAQ,EACZ,IAAI,EAAC,OAAO,IAEX,IAAI,CACI,CAChB,CAAC;AACN,CAAC","sourcesContent":["import React from 'react';\nimport { Button, IconButton, Tooltip, Typography } from '@mui/material';\n\ninterface TooltipButtonProps {\n    tooltip?: string;\n    label?: string;\n    disabled?: boolean;\n    Icon: React.JSX.Element | null;\n    onClick?: () => void;\n    url?: string;\n}\n\nexport default function TooltipButton(props: TooltipButtonProps): React.JSX.Element {\n    const { tooltip, label, disabled, Icon, onClick, url } = props;\n\n    const text = label ? (\n        <Typography\n            variant=\"button\"\n            style={{ marginLeft: 4 }}\n        >\n            {label}\n        </Typography>\n    ) : null;\n\n    const btnProps = url ? { href: url, disabled, target: '_blank' } : { onClick, disabled };\n\n    if (tooltip) {\n        return (\n            <Tooltip\n                title={tooltip}\n                slotProps={{ popper: { sx: { pointerEvents: 'none' } } }}\n            >\n                <span>\n                    {text ? (\n                        <Button\n                            {...btnProps}\n                            startIcon={Icon}\n                        >\n                            {text}\n                        </Button>\n                    ) : (\n                        <IconButton\n                            {...btnProps}\n                            size=\"small\"\n                        >\n                            {Icon}\n                        </IconButton>\n                    )}\n                </span>\n            </Tooltip>\n        );\n    }\n\n    return text ? (\n        <Button\n            {...btnProps}\n            startIcon={Icon}\n        >\n            {text}\n        </Button>\n    ) : (\n        <IconButton\n            {...btnProps}\n            size=\"small\"\n        >\n            {Icon}\n        </IconButton>\n    );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/dm-gui-components",
-  "version": "9.0.7",
+  "version": "9.0.9",
   "description": "ReactJS components to develop admin interface for ioBroker device manager.",
   "author": {
     "name": "Jey Cee",
@@ -59,7 +59,7 @@
     "@alcalzone/release-script": "^5.1.1",
     "@alcalzone/release-script-plugin-license": "^5.1.1",
     "@iobroker/build-tools": "^3.0.1",
-    "@iobroker/dm-utils": "^3.0.5",
+    "@iobroker/dm-utils": "^3.0.6",
     "@iobroker/dm-utils-v1": "npm:@iobroker/dm-utils@^1.0.16",
     "@iobroker/eslint-config": "^2.2.0",
     "tsc-alias": "^1.8.16",