@iobroker/dm-gui-components 10.0.22 → 10.1.0

package/build/DeviceStatus.js

@@ -1,20 +1,15 @@
-import { I18n } from '@iobroker/gui-components';
-import { Battery20 as Battery20Icon, Battery30 as Battery30Icon, Battery50 as Battery50Icon, Battery60 as Battery60Icon, Battery80 as Battery80Icon, Battery90 as Battery90Icon, BatteryAlert as BatteryAlertIcon, BatteryCharging50 as BatteryCharging50Icon, BatteryFull as BatteryFullIcon, Bluetooth as IconConnectionBluetooth, Cable as IconConnectionLan, BluetoothDisabled as IconConnectionNoBluetooth, WifiOff as IconConnectionNoWifi, Wifi as IconConnectionWifi, Link as LinkIcon, LinkOff as LinkOffIcon, NetworkCheck as NetworkCheckIcon, SystemUpdateAlt as SystemUpdateAltIcon, Warning as WarningIcon, } from '@mui/icons-material';
-import { IconButton, Tooltip } from '@mui/material';
-import React, { useMemo } from 'react';
+import { I18n, IconConnectionState, IconStatusLed } from '@iobroker/gui-components';
+import { Bluetooth as IconConnectionBluetooth, Cable as IconConnectionLan, BluetoothDisabled as IconConnectionNoBluetooth, Link as LinkIcon, LinkOff as LinkOffIcon, Warning as WarningIcon, } from '@mui/icons-material';
+import React, { useState } from 'react';
+import { IconBattery, IconSignal, IconUpdate, useValueTick } from './AnimatedIcons';
 import { useStateOrObject } from './hooks';
-import Switch from './Switch';
+import StatusPill from './StatusPill';
 import { getTranslation } from './Utils';
 export const ACTIONS = {
     STATUS: 'status',
     DISABLE: 'disable',
     ENABLE: 'enable',
 };
-const styles = {
-    tooltip: {
-        pointerEvents: 'none',
-    },
-};
 function ThreadIcon(props) {
     return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", onClick: e => props.onClick && props.onClick(e), viewBox: "0 0 165 165", width: props.width || (props.fontSize === 'small' ? 16 : 20), height: props.height || props.width || (props.fontSize === 'small' ? 16 : 20), className: props.className, style: props.style },
         React.createElement("path", { fill: "currentColor", d: "M82.498,0C37.008,0,0,37.008,0,82.496c0,45.181,36.51,81.977,81.573,82.476V82.569l-27.002-0.002  c-8.023,0-14.554,6.53-14.554,14.561c0,8.023,6.531,14.551,14.554,14.551v17.98c-17.939,0-32.534-14.595-32.534-32.531  c0-17.944,14.595-32.543,32.534-32.543l27.002,0.004v-9.096c0-14.932,12.146-27.08,27.075-27.08  c14.932,0,27.082,12.148,27.082,27.08c0,14.931-12.15,27.08-27.082,27.08l-9.097-0.001v80.641  C136.889,155.333,165,122.14,165,82.496C165,37.008,127.99,0,82.498,0z" }),
@@ -29,85 +24,51 @@ function ZigBeeIcon(props) {
         React.createElement("path", { fill: "currentColor", d: "M32.042,9.792c4.595,1.238,4.88,3.165,5.524,5.048C34.841,17.664,17.35,35.7,17.35,35.7 s10.901,1.177,23.487-1.003c-0.001,0.029-0.002,0.048-0.003,0.076C42.829,31.661,44,27.97,44,24c0-11.046-8.954-20-20-20 c-5.634,0-10.715,2.338-14.35,6.087C15.489,9.124,26.89,8.403,32.042,9.792z" }),
         React.createElement("path", { fill: "currentColor", d: "M14.724,37.285c-1.982-0.347-4.212-2.131-4.707-5.302c1.437-1.239,19.994-20.507,19.994-20.507 c-7.008-0.424-14.569-0.465-22.237,0.864C5.408,15.625,4,19.644,4,24c0,11.046,8.954,20,20,20c6.173,0,11.689-2.8,15.358-7.195 C35.486,37.33,23.257,38.769,14.724,37.285z" })));
 }
-function rssiColor(signal, themeType) {
-    if (signal < -80) {
-        return themeType === 'dark' ? '#ff5c5c' : '#aa0000';
-    }
-    if (signal < -60) {
-        return themeType === 'dark' ? '#fa8547' : '#ae5c00';
+/** The status as an object, also if the device gives only the connection as a string */
+function normalizeStatus(status) {
+    if (!status) {
+        return {};
     }
-    if (signal < -50) {
-        return themeType === 'dark' ? '#cdff4f' : '#7b9500';
+    if (typeof status === 'string') {
+        return { connection: status };
     }
-    return themeType === 'dark' ? '#5cff5c' : '#008500';
+    return status;
 }
-const iconStyleOK = {
-    fill: '#00ac00',
-    color: '#00ac00',
-};
-const iconStyleNotOK = {
-    fill: '#ff0000',
-    color: '#ff0000',
-};
-const iconStyleWarning = {
-    fill: '#da8200',
-    color: '#da8200',
-};
-const iconStyleUnknown = {
-    fill: '#8a8a8a',
-    color: '#8a8a8a',
-};
-const iconStylePreWarning = {
-    fill: '#ffcc00',
-    color: '#ffcc00',
-};
-const iconStyleUpdate = {
-    fill: '#2196f3',
-    color: '#2196f3',
-};
-function getBatteryIcon(battery) {
-    if (battery > 95) {
-        return React.createElement(BatteryFullIcon, { style: iconStyleOK });
-    }
-    if (battery > 85 && battery <= 95) {
-        return React.createElement(Battery90Icon, { style: iconStyleOK });
-    }
-    if (battery > 70 && battery <= 85) {
-        return React.createElement(Battery80Icon, { style: iconStyleOK });
-    }
-    if (battery > 55 && battery <= 70) {
-        return React.createElement(Battery60Icon, { style: iconStyleOK });
-    }
-    if (battery > 40 && battery <= 55) {
-        return React.createElement(Battery50Icon, { style: iconStylePreWarning });
-    }
-    if (battery > 25 && battery <= 40) {
-        return React.createElement(Battery30Icon, { style: iconStylePreWarning });
-    }
-    if (battery > 10 && battery <= 25) {
-        return React.createElement(Battery20Icon, { style: iconStyleWarning });
+/** The symbol of the connection type; `null` if there is nothing to show */
+function getConnectionSymbol(connectionType, connection) {
+    const disconnected = connection === 'disconnected';
+    switch (connectionType) {
+        case 'wifi':
+            // The waves are crossed out when the connection is lost
+            return React.createElement(IconConnectionState, { state: disconnected ? 'disconnected' : 'connected' });
+        case 'bluetooth':
+            return disconnected ? React.createElement(IconConnectionNoBluetooth, null) : React.createElement(IconConnectionBluetooth, null);
+        case 'lan':
+            return React.createElement(IconConnectionLan, null);
+        case 'thread':
+            return React.createElement(ThreadIcon, null);
+        case 'z-wave':
+            return React.createElement(ZWaveIcon, null);
+        case 'zigbee':
+            return React.createElement(ZigBeeIcon, null);
+        default:
+            if (connection === 'connected') {
+                return React.createElement(LinkIcon, null);
+            }
+            return disconnected ? React.createElement(LinkOffIcon, null) : null;
     }
-    return React.createElement(BatteryAlertIcon, { style: iconStyleNotOK });
 }
 /**
- * Device Status component
+ * Device Status component: connection, signal, battery, warning and update as pills of the status line.
+ *
+ * A pill is neutral while the value is fine and tinted with its color when it needs attention, so that
+ * the problems stand out in a list of many devices.
  *
  * @param props - Parameters
  * @param props.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }
  */
-export default function DeviceStatus(props) {
-    let status;
-    if (!props.status) {
-        status = {};
-    }
-    else if (typeof props.status === 'string') {
-        status = {
-            connection: props.status,
-        };
-    }
-    else {
-        status = props.status;
-    }
+export default function DeviceStatusComponent(props) {
+    const status = normalizeStatus(props.status);
     const connection = useStateOrObject(status.connection, props.stateOrObjectHandler);
     const rssi = useStateOrObject(status.rssi, props.stateOrObjectHandler);
     const battery = useStateOrObject(status.battery, props.stateOrObjectHandler);
@@ -115,123 +76,117 @@ export default function DeviceStatus(props) {
     const updateAvailable = useStateOrObject(props.update?.available, props.stateOrObjectHandler);
     const updateVersion = useStateOrObject(props.update?.version, props.stateOrObjectHandler);
     const updateNewVersion = useStateOrObject(props.update?.newVersion, props.stateOrObjectHandler);
-    const batteryIconTooltip = useMemo(() => {
+    // The new value slides in when it changes
+    const rssiRef = useValueTick(rssi);
+    const batteryRef = useValueTick(battery);
+    const pills = [];
+    // Connection
+    const connectionSymbol = getConnectionSymbol(props.connectionType, connection);
+    if (connectionSymbol) {
+        const known = connection === 'connected' || connection === 'disconnected';
+        const tooltip = known
+            ? (connection === 'connected'
+                ? getTranslation('connectedIconTooltip')
+                : getTranslation('disconnectedIconTooltip')) +
+                (props.statusAction ? `. ${getTranslation(props.statusAction.description || 'moreInformation')}` : '')
+            : undefined;
+        pills.push(React.createElement(StatusPill, { key: "connection", tone: connection === 'disconnected' ? 'err' : undefined, tooltip: tooltip, onClick: known && props.statusAction
+                ? () => props.deviceHandler(props.deviceId, props.statusAction)()
+                : undefined }, known ? connectionSymbol : React.createElement("span", { style: { display: 'flex', opacity: 0.55 } }, connectionSymbol)));
+    }
+    // Signal strength
+    const rssiNumber = rssi === undefined || rssi === null || rssi === '' ? NaN : Number(rssi);
+    if (!isNaN(rssiNumber) && rssiNumber !== 0) {
+        pills.push(React.createElement(StatusPill, { key: "rssi", tone: rssiNumber < -80 ? 'warn' : undefined, tooltip: `RSSI: ${rssiNumber} dBm` },
+            React.createElement(IconSignal, { rssi: rssiNumber }),
+            React.createElement("span", { ref: rssiRef }, rssiNumber)));
+    }
+    // Battery. A button if the backend offers the reserved "battery" action (e.g. for the battery history)
+    if (battery !== undefined && battery !== null && battery !== '') {
+        let icon;
+        let text = null;
+        let tone;
         if (typeof battery === 'number') {
-            return getBatteryIcon(battery);
+            icon = React.createElement(IconBattery, { level: battery });
+            text = `${battery}%`;
+            tone = battery <= 10 ? 'err' : battery <= 25 ? 'warn' : undefined;
         }
-        return null;
-    }, [battery]);
-    const disability = typeof props.enabled === 'boolean' ? (React.createElement(React.Fragment, null,
-        React.createElement("div", { style: { flexGrow: 1 } }),
-        React.createElement(Tooltip, { title: props.enabled ? getTranslation('disableIconTooltip') : getTranslation('enableIconTooltip'), slotProps: { popper: { sx: styles.tooltip } } },
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
-                React.createElement(Switch, { size: "small", checked: props.enabled, disabled: !props.disableEnableAction, onChange: () => props.disableEnableAction &&
-                        props.deviceHandler(props.deviceId, props.disableEnableAction)(), theme: props.theme }))))) : null;
-    let connectionSymbol;
-    if (props.connectionType === 'wifi') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(IconConnectionWifi, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(IconConnectionNoWifi, { style: iconStyleNotOK })) : (React.createElement(IconConnectionWifi, { style: iconStyleUnknown }));
-    }
-    else if (props.connectionType === 'bluetooth') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(IconConnectionBluetooth, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(IconConnectionNoBluetooth, { style: iconStyleNotOK })) : (React.createElement(IconConnectionBluetooth, { style: iconStyleUnknown }));
-    }
-    else if (props.connectionType === 'lan') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(IconConnectionLan, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(IconConnectionLan, { style: iconStyleNotOK })) : (React.createElement(IconConnectionLan, { style: iconStyleUnknown }));
-    }
-    else if (props.connectionType === 'thread') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(ThreadIcon, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(ThreadIcon, { style: iconStyleNotOK })) : (React.createElement(ThreadIcon, { style: iconStyleUnknown }));
+        else if (typeof battery === 'boolean') {
+            icon = React.createElement(IconBattery, { level: battery ? 100 : 0 });
+            tone = battery ? undefined : 'err';
+        }
+        else if (battery === 'charging') {
+            icon = React.createElement(IconBattery, { charging: true });
+        }
+        else {
+            icon = React.createElement(IconBattery, null);
+            text = battery.includes('V') ? battery : `${battery} mV`;
+        }
+        pills.push(React.createElement(StatusPill, { key: "battery", tone: tone, tooltip: getTranslation('batteryTooltip') +
+                (props.batteryAction
+                    ? `. ${getTranslation(props.batteryAction.description || 'moreInformation')}`
+                    : ''), onClick: props.batteryAction ? () => props.deviceHandler(props.deviceId, props.batteryAction)() : undefined },
+            icon,
+            text ? React.createElement("span", { ref: batteryRef }, text) : null));
+    }
+    // Warning: it pulses when it appears or changes
+    if (warning) {
+        const text = typeof warning === 'string' || typeof warning === 'object' ? getTranslation(warning) : '';
+        pills.push(React.createElement(StatusPill, { key: "warning", tone: "warn", tooltip: text || undefined },
+            React.createElement(IconStatusLed, { color: "var(--dm-warn)", beat: typeof warning === 'object' ? JSON.stringify(warning) : warning },
+                React.createElement(WarningIcon, { fontSize: "inherit" }))));
+    }
+    // Update
+    if (updateAvailable) {
+        const versions = updateNewVersion ? `${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}` : '';
+        pills.push(React.createElement(StatusPill, { key: "update", tone: "info", tooltip: getTranslation('updateAvailable') + (versions ? `: ${versions}` : ''), onClick: props.updateAction
+                ? () => {
+                    // An update is a significant operation, so always ask for confirmation
+                    // before triggering it. Reuse the action's own confirmation message if the
+                    // backend provided one; otherwise build a default one including the versions.
+                    // The confirmation is then handled by the standard device action flow
+                    // (deviceHandler -> showConfirmation -> renderConfirmationDialog).
+                    let confirmation = props.updateAction.confirmation;
+                    if (!confirmation) {
+                        let message = getTranslation('updateConfirmation');
+                        if (versions) {
+                            message += `: ${versions}`;
+                        }
+                        confirmation = { [I18n.getLanguage()]: message, en: message };
+                    }
+                    props.deviceHandler(props.deviceId, { ...props.updateAction, confirmation })();
+                }
+                : undefined },
+            React.createElement(IconUpdate, null)));
     }
-    else if (props.connectionType === 'z-wave') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(ZWaveIcon, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(ZWaveIcon, { style: iconStyleNotOK })) : (React.createElement(ZWaveIcon, { style: iconStyleUnknown }));
+    return pills.length ? React.createElement(React.Fragment, null, pills) : null;
+}
+/**
+ * The LED on the device symbol: green while the device is connected, red without connection.
+ *
+ * It sends a pulse each time the device reports a new signal strength, like the LED of a real device
+ * that blinks on traffic. Nothing is shown while the connection is unknown.
+ */
+export function DeviceLed(props) {
+    const status = normalizeStatus(props.status);
+    const connection = useStateOrObject(status.connection, props.stateOrObjectHandler);
+    const rssi = useStateOrObject(status.rssi, props.stateOrObjectHandler);
+    // Only a change of a known value is a beat, not the first value after the (re)mount of the card
+    const [beat, setBeat] = useState({ rssi: undefined, count: 0 });
+    if (rssi !== undefined && rssi !== null && rssi !== beat.rssi) {
+        // Adjusting the state while rendering, as React recommends for values derived from a change
+        setBeat({ rssi, count: beat.rssi === undefined ? 0 : beat.count + 1 });
     }
-    else if (props.connectionType === 'zigbee') {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(ZigBeeIcon, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(ZigBeeIcon, { style: iconStyleNotOK })) : (React.createElement(ZigBeeIcon, { style: iconStyleUnknown }));
+    if (connection !== 'connected' && connection !== 'disconnected') {
+        return null;
     }
-    else {
-        connectionSymbol =
-            connection === 'connected' ? (React.createElement(LinkIcon, { style: iconStyleOK })) : connection === 'disconnected' ? (React.createElement(LinkOffIcon, { style: iconStyleNotOK })) : null;
+    let color = connection === 'connected' ? 'green' : 'red';
+    if (!props.alive || props.enabled === false) {
+        color = 'grey';
     }
-    const connectionIcon = connection === 'connected' || connection === 'disconnected' ? (React.createElement(Tooltip, { title: (connection === 'connected'
-            ? getTranslation('connectedIconTooltip')
-            : getTranslation('disconnectedIconTooltip')) +
-            (props.statusAction
-                ? `. ${getTranslation(props.statusAction.description || 'moreInformation')}`
-                : ''), slotProps: { popper: { sx: styles.tooltip } } }, props.statusAction ? (React.createElement(IconButton, { onClick: e => {
-            if (props.statusAction) {
-                e.stopPropagation();
-                props.deviceHandler(props.deviceId, props.statusAction)();
-            }
-        } },
-        connectionSymbol,
-        React.createElement("div", { style: { position: 'absolute', top: 0, left: 0, color: 'grey' } }, "*"))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, connectionSymbol)))) : (connectionSymbol);
-    // The battery indicator is wrapped into a button if the reserved "battery" action is provided by the backend,
-    // so the adapter can open its own dialog (e.g. battery history or battery type) on click.
-    const renderBattery = (content) => (React.createElement(Tooltip, { title: getTranslation('batteryTooltip') +
-            (props.batteryAction ? `. ${getTranslation(props.batteryAction.description || 'moreInformation')}` : ''), slotProps: { popper: { sx: styles.tooltip } } }, props.batteryAction ? (React.createElement(IconButton, { size: "small", style: { padding: 2, borderRadius: 4 }, onClick: e => {
-            if (props.batteryAction) {
-                e.stopPropagation();
-                props.deviceHandler(props.deviceId, props.batteryAction)();
-            }
-        } },
-        React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, content))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } }, content))));
-    return (React.createElement("div", { style: {
-            display: 'flex',
-            alignItems: 'baseline',
-            cursor: props.statusAction ? 'pointer' : undefined,
-            width: props.disableEnableAction ? '100%' : undefined,
-            gap: 8,
-        } },
-        connectionIcon,
-        rssi && (React.createElement(Tooltip, { title: "RSSI", slotProps: { popper: { sx: styles.tooltip } } },
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
-                React.createElement(NetworkCheckIcon, { style: { color: rssiColor(rssi, props.theme.palette.mode) } }),
-                React.createElement("p", { style: { fontSize: 'small', margin: 0 } }, rssi)))),
-        typeof battery === 'number' &&
-            renderBattery(React.createElement(React.Fragment, null,
-                batteryIconTooltip,
-                React.createElement("p", { style: { fontSize: 'small', margin: 0 } },
-                    battery,
-                    "%"))),
-        typeof battery === 'string' &&
-            renderBattery(React.createElement(React.Fragment, null,
-                battery === 'charging' ? React.createElement(BatteryCharging50Icon, null) : React.createElement(BatteryFullIcon, null),
-                battery !== 'charging' ? (battery.includes('V') || battery.includes('mV') ? (React.createElement("p", { style: { fontSize: 'small', margin: 0 } }, battery)) : (React.createElement("p", { style: { fontSize: 'small', margin: 0 } },
-                    React.createElement("span", { style: { marginRight: 4 } }, battery),
-                    "mV"))) : null)),
-        typeof battery === 'boolean' &&
-            renderBattery(battery ? React.createElement(BatteryFullIcon, { style: iconStyleOK }) : React.createElement(BatteryAlertIcon, { style: iconStyleNotOK })),
-        warning ? (typeof warning === 'string' || typeof warning === 'object' ? (React.createElement(Tooltip, { title: getTranslation(warning), slotProps: { popper: { sx: styles.tooltip } } },
-            React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
-                React.createElement(WarningIcon, { style: iconStyleWarning })))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
-            React.createElement(WarningIcon, { style: iconStyleWarning })))) : null,
-        updateAvailable ? (React.createElement(Tooltip, { title: getTranslation('updateAvailable') +
-                (updateNewVersion ? `: ${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}` : ''), slotProps: { popper: { sx: styles.tooltip } } }, props.updateAction ? (React.createElement(IconButton, { size: "small", onClick: e => {
-                if (!props.updateAction) {
-                    return;
-                }
-                e.stopPropagation();
-                // An update is a significant operation, so always ask for confirmation
-                // before triggering it. Reuse the action's own confirmation message if the
-                // backend provided one; otherwise build a default one including the versions.
-                // The confirmation is then handled by the standard device action flow
-                // (deviceHandler -> showConfirmation -> renderConfirmationDialog).
-                let confirmation = props.updateAction.confirmation;
-                if (!confirmation) {
-                    let message = getTranslation('updateConfirmation');
-                    if (updateNewVersion) {
-                        message += `: ${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}`;
-                    }
-                    confirmation = { [I18n.getLanguage()]: message, en: message };
-                }
-                props.deviceHandler(props.deviceId, { ...props.updateAction, confirmation })();
-            } },
-            React.createElement(SystemUpdateAltIcon, { style: iconStyleUpdate }))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'center' } },
-            React.createElement(SystemUpdateAltIcon, { style: iconStyleUpdate }))))) : null,
-        disability));
+    return (React.createElement("span", { className: "dm-avatar-led" },
+        React.createElement(IconStatusLed, { color: color, beat: beat.count, ariaLabel: connection === 'connected'
+                ? getTranslation('connectedIconTooltip')
+                : getTranslation('disconnectedIconTooltip') })));
 }
 //# sourceMappingURL=DeviceStatus.js.map

package/build/DeviceStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"DeviceStatus.js","sourceRoot":"./src/","sources":["DeviceStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { I18n } from '@iobroker/gui-components';\nimport type { Connection, IobTheme, ThemeType } from '@iobroker/gui-components';\nimport {\n    Battery20 as Battery20Icon,\n    Battery30 as Battery30Icon,\n    Battery50 as Battery50Icon,\n    Battery60 as Battery60Icon,\n    Battery80 as Battery80Icon,\n    Battery90 as Battery90Icon,\n    BatteryAlert as BatteryAlertIcon,\n    BatteryCharging50 as BatteryCharging50Icon,\n    BatteryFull as BatteryFullIcon,\n    Bluetooth as IconConnectionBluetooth,\n    Cable as IconConnectionLan,\n    BluetoothDisabled as IconConnectionNoBluetooth,\n    WifiOff as IconConnectionNoWifi,\n    Wifi as IconConnectionWifi,\n    Link as LinkIcon,\n    LinkOff as LinkOffIcon,\n    NetworkCheck as NetworkCheckIcon,\n    SystemUpdateAlt as SystemUpdateAltIcon,\n    Warning as WarningIcon,\n} from '@mui/icons-material';\nimport { IconButton, Tooltip } from '@mui/material';\nimport React, { useMemo, type CSSProperties, type MouseEvent } from 'react';\nimport { useStateOrObject } from './hooks';\nimport type {\n    ActionBase,\n    ConfigConnectionType,\n    DeviceAction,\n    DeviceId,\n    DeviceInfo,\n    DeviceStatus,\n} from './protocol/api';\nimport Switch from './Switch';\nimport { getTranslation } from './Utils';\nimport type { StateOrObjectHandler } from './StateOrObjectHandler';\n\nexport const ACTIONS = {\n    STATUS: 'status',\n    DISABLE: 'disable',\n    ENABLE: 'enable',\n};\n\nconst styles: Record<string, React.CSSProperties> = {\n    tooltip: {\n        pointerEvents: 'none',\n    },\n};\n\nexport interface IconProps {\n    /**  The width in pixels or percentage of the icon. */\n    width?: number | string;\n    /**  The height in pixels or percentage of the icon. */\n    height?: number | string;\n    /** Click handler. */\n    onClick?: (e: MouseEvent) => void;\n    /** The class name for the SVG element. */\n    className?: string;\n    /** Styles for the SVG element. */\n    style?: CSSProperties;\n    /** The font size of the icon. */\n    fontSize?: 'small';\n}\n\nfunction ThreadIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 165 165\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M82.498,0C37.008,0,0,37.008,0,82.496c0,45.181,36.51,81.977,81.573,82.476V82.569l-27.002-0.002  c-8.023,0-14.554,6.53-14.554,14.561c0,8.023,6.531,14.551,14.554,14.551v17.98c-17.939,0-32.534-14.595-32.534-32.531  c0-17.944,14.595-32.543,32.534-32.543l27.002,0.004v-9.096c0-14.932,12.146-27.08,27.075-27.08  c14.932,0,27.082,12.148,27.082,27.08c0,14.931-12.15,27.08-27.082,27.08l-9.097-0.001v80.641  C136.889,155.333,165,122.14,165,82.496C165,37.008,127.99,0,82.498,0z\"\n            />\n            <path\n                fill=\"currentColor\"\n                d=\"M117.748,55.493c0-5.016-4.082-9.098-9.1-9.098c-5.015,0-9.097,4.082-9.097,9.098v9.097l9.097,0.001  C113.666,64.591,117.748,60.51,117.748,55.493z\"\n            />\n        </svg>\n    );\n}\n\nfunction ZWaveIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 1073 1068\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M716 1.1C632.9 5.3 549.8 23.7 472 55c-66.4 26.7-132.6 65.5-188.5 110.4-43.8 35.1-85.2 76.7-120.1 120.6C72.4 400.4 16.7 539.8 3.5 686 1.8 705.1-.1 754.7.7 758c.5 2 1 2 49.7 1.8l49.1-.3.7-20c2.4-64.6 13.4-126 33.2-186 80.8-243.9 297-419.9 552.1-449.4 20.2-2.4 44.2-4.1 56.6-4.1h8.9V50 0l-9.7.1c-5.4.1-16.8.6-25.3 1zm-.8 208c-78.5 4.7-158 27.4-226.5 64.5-68.7 37.3-126.4 86.3-175.2 148.9-11 14-33.2 47.3-42.3 63.5-44 77.8-68.6 164.9-70.9 251.2l-.6 22.8h49.5 49.4l1.2-19c6.3-98.7 40-185.8 102.2-263.3 12.7-15.9 41.2-45.2 57-58.7 66.1-56.3 142.1-91.8 226-105.5 18.9-3 44.1-5.5 56.7-5.5h9.3v-50-50l-11.2.1c-6.2.1-17.3.6-24.6 1zm17.8 251c-104.5 9.2-195.2 69.7-243.6 162.4-43.9 84-45.5 184.2-4.5 270 60.3 125.9 198.1 194.2 334.9 166 46.6-9.7 89.5-29.7 127.2-59.6 13.5-10.7 37.3-34.5 48-47.9 34.2-43.1 55.2-92 63.7-148.6 2.2-15.1 2.5-62.7.5-77.4-3.6-25.2-10.1-51.4-17.8-71.2-10.1-26.2-29.4-59.7-47-81.8-9.7-12.1-35-37.2-47.4-47-47.8-37.9-104.5-60.1-165.4-65-14.7-1.1-34.7-1.1-48.6.1zm174.7 138.6c-.3.5-30.9 49.2-68.1 108.3L772 814.5l67.9.5 68 .5-30.1 48.8-30 48.7h-131c-104.4 0-130.9-.3-130.5-1.3.2-.6 32.7-51.1 72.1-112.1L730 687.9c0-.5-29.5-1-66.5-1.1l-66.6-.3 27.7-44.3 27.6-44.2h128l127.5.7z\"\n            />\n        </svg>\n    );\n}\n\nfunction ZigBeeIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 48 48\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M32.042,9.792c4.595,1.238,4.88,3.165,5.524,5.048C34.841,17.664,17.35,35.7,17.35,35.7 s10.901,1.177,23.487-1.003c-0.001,0.029-0.002,0.048-0.003,0.076C42.829,31.661,44,27.97,44,24c0-11.046-8.954-20-20-20 c-5.634,0-10.715,2.338-14.35,6.087C15.489,9.124,26.89,8.403,32.042,9.792z\"\n            />\n            <path\n                fill=\"currentColor\"\n                d=\"M14.724,37.285c-1.982-0.347-4.212-2.131-4.707-5.302c1.437-1.239,19.994-20.507,19.994-20.507 c-7.008-0.424-14.569-0.465-22.237,0.864C5.408,15.625,4,19.644,4,24c0,11.046,8.954,20,20,20c6.173,0,11.689-2.8,15.358-7.195 C35.486,37.33,23.257,38.769,14.724,37.285z\"\n            />\n        </svg>\n    );\n}\n\ninterface DeviceStatusProps {\n    socket: Connection;\n    status: DeviceStatus | null;\n    deviceId: DeviceId;\n    connectionType?: ConfigConnectionType;\n    statusAction?: DeviceAction;\n    enabled?: boolean;\n    disableEnableAction?: DeviceAction;\n    /** Update information of the device (firmware/software) */\n    update?: DeviceInfo['update'];\n    /** Reserved \"update\" action. If provided, the update indicator becomes a clickable button */\n    updateAction?: DeviceAction;\n    /** Reserved \"battery\" action. If provided, the battery indicator becomes a clickable button */\n    batteryAction?: DeviceAction;\n    deviceHandler: (deviceId: DeviceId, action: ActionBase) => () => void;\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n}\n\nfunction rssiColor(signal: number, themeType: ThemeType): string {\n    if (signal < -80) {\n        return themeType === 'dark' ? '#ff5c5c' : '#aa0000';\n    }\n    if (signal < -60) {\n        return themeType === 'dark' ? '#fa8547' : '#ae5c00';\n    }\n    if (signal < -50) {\n        return themeType === 'dark' ? '#cdff4f' : '#7b9500';\n    }\n\n    return themeType === 'dark' ? '#5cff5c' : '#008500';\n}\n\nconst iconStyleOK = {\n    fill: '#00ac00',\n    color: '#00ac00',\n};\nconst iconStyleNotOK = {\n    fill: '#ff0000',\n    color: '#ff0000',\n};\nconst iconStyleWarning = {\n    fill: '#da8200',\n    color: '#da8200',\n};\nconst iconStyleUnknown = {\n    fill: '#8a8a8a',\n    color: '#8a8a8a',\n};\nconst iconStylePreWarning = {\n    fill: '#ffcc00',\n    color: '#ffcc00',\n};\nconst iconStyleUpdate = {\n    fill: '#2196f3',\n    color: '#2196f3',\n};\n\nfunction getBatteryIcon(battery: number): React.ReactNode {\n    if (battery > 95) {\n        return <BatteryFullIcon style={iconStyleOK} />;\n    }\n    if (battery > 85 && battery <= 95) {\n        return <Battery90Icon style={iconStyleOK} />;\n    }\n    if (battery > 70 && battery <= 85) {\n        return <Battery80Icon style={iconStyleOK} />;\n    }\n    if (battery > 55 && battery <= 70) {\n        return <Battery60Icon style={iconStyleOK} />;\n    }\n    if (battery > 40 && battery <= 55) {\n        return <Battery50Icon style={iconStylePreWarning} />;\n    }\n    if (battery > 25 && battery <= 40) {\n        return <Battery30Icon style={iconStylePreWarning} />;\n    }\n    if (battery > 10 && battery <= 25) {\n        return <Battery20Icon style={iconStyleWarning} />;\n    }\n\n    return <BatteryAlertIcon style={iconStyleNotOK} />;\n}\n\n/**\n * Device Status component\n *\n * @param props - Parameters\n * @param props.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }\n */\nexport default function DeviceStatus(props: DeviceStatusProps): React.JSX.Element | null {\n    let status: DeviceStatus;\n    if (!props.status) {\n        status = {};\n    } else if (typeof props.status === 'string') {\n        status = {\n            connection: props.status,\n        };\n    } else {\n        status = props.status;\n    }\n\n    const connection = useStateOrObject(status.connection, props.stateOrObjectHandler);\n    const rssi = useStateOrObject(status.rssi, props.stateOrObjectHandler);\n    const battery = useStateOrObject(status.battery, props.stateOrObjectHandler);\n    const warning = useStateOrObject(status.warning, props.stateOrObjectHandler);\n    const updateAvailable = useStateOrObject(props.update?.available, props.stateOrObjectHandler);\n    const updateVersion = useStateOrObject(props.update?.version, props.stateOrObjectHandler);\n    const updateNewVersion = useStateOrObject(props.update?.newVersion, props.stateOrObjectHandler);\n\n    const batteryIconTooltip = useMemo<React.ReactNode>(() => {\n        if (typeof battery === 'number') {\n            return getBatteryIcon(battery);\n        }\n        return null;\n    }, [battery]);\n\n    const disability =\n        typeof props.enabled === 'boolean' ? (\n            <>\n                <div style={{ flexGrow: 1 }} />\n                {\n                    <Tooltip\n                        title={\n                            props.enabled ? getTranslation('disableIconTooltip') : getTranslation('enableIconTooltip')\n                        }\n                        slotProps={{ popper: { sx: styles.tooltip } }}\n                    >\n                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                            <Switch\n                                size=\"small\"\n                                checked={props.enabled}\n                                disabled={!props.disableEnableAction}\n                                onChange={() =>\n                                    props.disableEnableAction &&\n                                    props.deviceHandler(props.deviceId, props.disableEnableAction)()\n                                }\n                                theme={props.theme}\n                            />\n                        </div>\n                    </Tooltip>\n                }\n            </>\n        ) : null;\n    let connectionSymbol: React.JSX.Element | null;\n    if (props.connectionType === 'wifi') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <IconConnectionWifi style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <IconConnectionNoWifi style={iconStyleNotOK} />\n            ) : (\n                <IconConnectionWifi style={iconStyleUnknown} />\n            );\n    } else if (props.connectionType === 'bluetooth') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <IconConnectionBluetooth style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <IconConnectionNoBluetooth style={iconStyleNotOK} />\n            ) : (\n                <IconConnectionBluetooth style={iconStyleUnknown} />\n            );\n    } else if (props.connectionType === 'lan') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <IconConnectionLan style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <IconConnectionLan style={iconStyleNotOK} />\n            ) : (\n                <IconConnectionLan style={iconStyleUnknown} />\n            );\n    } else if (props.connectionType === 'thread') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <ThreadIcon style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <ThreadIcon style={iconStyleNotOK} />\n            ) : (\n                <ThreadIcon style={iconStyleUnknown} />\n            );\n    } else if (props.connectionType === 'z-wave') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <ZWaveIcon style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <ZWaveIcon style={iconStyleNotOK} />\n            ) : (\n                <ZWaveIcon style={iconStyleUnknown} />\n            );\n    } else if (props.connectionType === 'zigbee') {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <ZigBeeIcon style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <ZigBeeIcon style={iconStyleNotOK} />\n            ) : (\n                <ZigBeeIcon style={iconStyleUnknown} />\n            );\n    } else {\n        connectionSymbol =\n            connection === 'connected' ? (\n                <LinkIcon style={iconStyleOK} />\n            ) : connection === 'disconnected' ? (\n                <LinkOffIcon style={iconStyleNotOK} />\n            ) : null;\n    }\n\n    const connectionIcon =\n        connection === 'connected' || connection === 'disconnected' ? (\n            <Tooltip\n                title={\n                    (connection === 'connected'\n                        ? getTranslation('connectedIconTooltip')\n                        : getTranslation('disconnectedIconTooltip')) +\n                    (props.statusAction\n                        ? `. ${getTranslation(props.statusAction.description || 'moreInformation')}`\n                        : '')\n                }\n                slotProps={{ popper: { sx: styles.tooltip } }}\n            >\n                {props.statusAction ? (\n                    <IconButton\n                        onClick={e => {\n                            if (props.statusAction) {\n                                e.stopPropagation();\n                                props.deviceHandler(props.deviceId, props.statusAction)();\n                            }\n                        }}\n                    >\n                        {connectionSymbol}\n                        <div style={{ position: 'absolute', top: 0, left: 0, color: 'grey' }}>*</div>\n                    </IconButton>\n                ) : (\n                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                        {connectionSymbol}\n                    </div>\n                )}\n            </Tooltip>\n        ) : (\n            connectionSymbol\n        );\n\n    // The battery indicator is wrapped into a button if the reserved \"battery\" action is provided by the backend,\n    // so the adapter can open its own dialog (e.g. battery history or battery type) on click.\n    const renderBattery = (content: React.ReactNode): React.JSX.Element => (\n        <Tooltip\n            title={\n                getTranslation('batteryTooltip') +\n                (props.batteryAction ? `. ${getTranslation(props.batteryAction.description || 'moreInformation')}` : '')\n            }\n            slotProps={{ popper: { sx: styles.tooltip } }}\n        >\n            {props.batteryAction ? (\n                <IconButton\n                    size=\"small\"\n                    style={{ padding: 2, borderRadius: 4 }}\n                    onClick={e => {\n                        if (props.batteryAction) {\n                            e.stopPropagation();\n                            props.deviceHandler(props.deviceId, props.batteryAction)();\n                        }\n                    }}\n                >\n                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>{content}</div>\n                </IconButton>\n            ) : (\n                <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>{content}</div>\n            )}\n        </Tooltip>\n    );\n\n    return (\n        <div\n            style={{\n                display: 'flex',\n                alignItems: 'baseline',\n                cursor: props.statusAction ? 'pointer' : undefined,\n                width: props.disableEnableAction ? '100%' : undefined,\n                gap: 8,\n            }}\n        >\n            {connectionIcon}\n\n            {rssi && (\n                <Tooltip\n                    title=\"RSSI\"\n                    slotProps={{ popper: { sx: styles.tooltip } }}\n                >\n                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                        <NetworkCheckIcon style={{ color: rssiColor(rssi, props.theme.palette.mode) }} />\n                        <p style={{ fontSize: 'small', margin: 0 }}>{rssi}</p>\n                    </div>\n                </Tooltip>\n            )}\n\n            {typeof battery === 'number' &&\n                renderBattery(\n                    <>\n                        {batteryIconTooltip}\n                        <p style={{ fontSize: 'small', margin: 0 }}>{battery}%</p>\n                    </>,\n                )}\n\n            {typeof battery === 'string' &&\n                renderBattery(\n                    <>\n                        {battery === 'charging' ? <BatteryCharging50Icon /> : <BatteryFullIcon />}\n                        {battery !== 'charging' ? (\n                            battery.includes('V') || battery.includes('mV') ? (\n                                <p style={{ fontSize: 'small', margin: 0 }}>{battery}</p>\n                            ) : (\n                                <p style={{ fontSize: 'small', margin: 0 }}>\n                                    <span style={{ marginRight: 4 }}>{battery}</span>\n                                    mV\n                                </p>\n                            )\n                        ) : null}\n                    </>,\n                )}\n\n            {typeof battery === 'boolean' &&\n                renderBattery(\n                    battery ? <BatteryFullIcon style={iconStyleOK} /> : <BatteryAlertIcon style={iconStyleNotOK} />,\n                )}\n\n            {warning ? (\n                typeof warning === 'string' || typeof warning === 'object' ? (\n                    <Tooltip\n                        title={getTranslation(warning)}\n                        slotProps={{ popper: { sx: styles.tooltip } }}\n                    >\n                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                            <WarningIcon style={iconStyleWarning} />\n                        </div>\n                    </Tooltip>\n                ) : (\n                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                        <WarningIcon style={iconStyleWarning} />\n                    </div>\n                )\n            ) : null}\n\n            {updateAvailable ? (\n                <Tooltip\n                    title={\n                        getTranslation('updateAvailable') +\n                        (updateNewVersion ? `: ${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}` : '')\n                    }\n                    slotProps={{ popper: { sx: styles.tooltip } }}\n                >\n                    {props.updateAction ? (\n                        <IconButton\n                            size=\"small\"\n                            onClick={e => {\n                                if (!props.updateAction) {\n                                    return;\n                                }\n                                e.stopPropagation();\n                                // An update is a significant operation, so always ask for confirmation\n                                // before triggering it. Reuse the action's own confirmation message if the\n                                // backend provided one; otherwise build a default one including the versions.\n                                // The confirmation is then handled by the standard device action flow\n                                // (deviceHandler -> showConfirmation -> renderConfirmationDialog).\n                                let confirmation: boolean | ioBroker.StringOrTranslated | undefined =\n                                    props.updateAction.confirmation;\n                                if (!confirmation) {\n                                    let message = getTranslation('updateConfirmation');\n                                    if (updateNewVersion) {\n                                        message += `: ${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}`;\n                                    }\n                                    confirmation = { [I18n.getLanguage()]: message, en: message };\n                                }\n                                props.deviceHandler(props.deviceId, { ...props.updateAction, confirmation })();\n                            }}\n                        >\n                            <SystemUpdateAltIcon style={iconStyleUpdate} />\n                        </IconButton>\n                    ) : (\n                        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>\n                            <SystemUpdateAltIcon style={iconStyleUpdate} />\n                        </div>\n                    )}\n                </Tooltip>\n            ) : null}\n\n            {disability}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"DeviceStatus.js","sourceRoot":"./src/","sources":["DeviceStatus.tsx"],"names":[],"mappings":"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","sourcesContent":["import { I18n, IconConnectionState, IconStatusLed } from '@iobroker/gui-components';\nimport type { Connection, IobTheme } from '@iobroker/gui-components';\nimport {\n    Bluetooth as IconConnectionBluetooth,\n    Cable as IconConnectionLan,\n    BluetoothDisabled as IconConnectionNoBluetooth,\n    Link as LinkIcon,\n    LinkOff as LinkOffIcon,\n    Warning as WarningIcon,\n} from '@mui/icons-material';\nimport React, { useState, type CSSProperties, type MouseEvent } from 'react';\n\nimport { IconBattery, IconSignal, IconUpdate, useValueTick } from './AnimatedIcons';\nimport { useStateOrObject } from './hooks';\nimport type {\n    ActionBase,\n    ConfigConnectionType,\n    DeviceAction,\n    DeviceId,\n    DeviceInfo,\n    DeviceStatus,\n} from './protocol/api';\nimport StatusPill from './StatusPill';\nimport type { StateOrObjectHandler } from './StateOrObjectHandler';\nimport { getTranslation } from './Utils';\n\nexport const ACTIONS = {\n    STATUS: 'status',\n    DISABLE: 'disable',\n    ENABLE: 'enable',\n};\n\nexport interface IconProps {\n    /**  The width in pixels or percentage of the icon. */\n    width?: number | string;\n    /**  The height in pixels or percentage of the icon. */\n    height?: number | string;\n    /** Click handler. */\n    onClick?: (e: MouseEvent) => void;\n    /** The class name for the SVG element. */\n    className?: string;\n    /** Styles for the SVG element. */\n    style?: CSSProperties;\n    /** The font size of the icon. */\n    fontSize?: 'small';\n}\n\nfunction ThreadIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 165 165\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M82.498,0C37.008,0,0,37.008,0,82.496c0,45.181,36.51,81.977,81.573,82.476V82.569l-27.002-0.002  c-8.023,0-14.554,6.53-14.554,14.561c0,8.023,6.531,14.551,14.554,14.551v17.98c-17.939,0-32.534-14.595-32.534-32.531  c0-17.944,14.595-32.543,32.534-32.543l27.002,0.004v-9.096c0-14.932,12.146-27.08,27.075-27.08  c14.932,0,27.082,12.148,27.082,27.08c0,14.931-12.15,27.08-27.082,27.08l-9.097-0.001v80.641  C136.889,155.333,165,122.14,165,82.496C165,37.008,127.99,0,82.498,0z\"\n            />\n            <path\n                fill=\"currentColor\"\n                d=\"M117.748,55.493c0-5.016-4.082-9.098-9.1-9.098c-5.015,0-9.097,4.082-9.097,9.098v9.097l9.097,0.001  C113.666,64.591,117.748,60.51,117.748,55.493z\"\n            />\n        </svg>\n    );\n}\n\nfunction ZWaveIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 1073 1068\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M716 1.1C632.9 5.3 549.8 23.7 472 55c-66.4 26.7-132.6 65.5-188.5 110.4-43.8 35.1-85.2 76.7-120.1 120.6C72.4 400.4 16.7 539.8 3.5 686 1.8 705.1-.1 754.7.7 758c.5 2 1 2 49.7 1.8l49.1-.3.7-20c2.4-64.6 13.4-126 33.2-186 80.8-243.9 297-419.9 552.1-449.4 20.2-2.4 44.2-4.1 56.6-4.1h8.9V50 0l-9.7.1c-5.4.1-16.8.6-25.3 1zm-.8 208c-78.5 4.7-158 27.4-226.5 64.5-68.7 37.3-126.4 86.3-175.2 148.9-11 14-33.2 47.3-42.3 63.5-44 77.8-68.6 164.9-70.9 251.2l-.6 22.8h49.5 49.4l1.2-19c6.3-98.7 40-185.8 102.2-263.3 12.7-15.9 41.2-45.2 57-58.7 66.1-56.3 142.1-91.8 226-105.5 18.9-3 44.1-5.5 56.7-5.5h9.3v-50-50l-11.2.1c-6.2.1-17.3.6-24.6 1zm17.8 251c-104.5 9.2-195.2 69.7-243.6 162.4-43.9 84-45.5 184.2-4.5 270 60.3 125.9 198.1 194.2 334.9 166 46.6-9.7 89.5-29.7 127.2-59.6 13.5-10.7 37.3-34.5 48-47.9 34.2-43.1 55.2-92 63.7-148.6 2.2-15.1 2.5-62.7.5-77.4-3.6-25.2-10.1-51.4-17.8-71.2-10.1-26.2-29.4-59.7-47-81.8-9.7-12.1-35-37.2-47.4-47-47.8-37.9-104.5-60.1-165.4-65-14.7-1.1-34.7-1.1-48.6.1zm174.7 138.6c-.3.5-30.9 49.2-68.1 108.3L772 814.5l67.9.5 68 .5-30.1 48.8-30 48.7h-131c-104.4 0-130.9-.3-130.5-1.3.2-.6 32.7-51.1 72.1-112.1L730 687.9c0-.5-29.5-1-66.5-1.1l-66.6-.3 27.7-44.3 27.6-44.2h128l127.5.7z\"\n            />\n        </svg>\n    );\n}\n\nfunction ZigBeeIcon(props: IconProps): React.JSX.Element {\n    return (\n        <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            onClick={e => props.onClick && props.onClick(e)}\n            viewBox=\"0 0 48 48\"\n            width={props.width || (props.fontSize === 'small' ? 16 : 20)}\n            height={props.height || props.width || (props.fontSize === 'small' ? 16 : 20)}\n            className={props.className}\n            style={props.style}\n        >\n            <path\n                fill=\"currentColor\"\n                d=\"M32.042,9.792c4.595,1.238,4.88,3.165,5.524,5.048C34.841,17.664,17.35,35.7,17.35,35.7 s10.901,1.177,23.487-1.003c-0.001,0.029-0.002,0.048-0.003,0.076C42.829,31.661,44,27.97,44,24c0-11.046-8.954-20-20-20 c-5.634,0-10.715,2.338-14.35,6.087C15.489,9.124,26.89,8.403,32.042,9.792z\"\n            />\n            <path\n                fill=\"currentColor\"\n                d=\"M14.724,37.285c-1.982-0.347-4.212-2.131-4.707-5.302c1.437-1.239,19.994-20.507,19.994-20.507 c-7.008-0.424-14.569-0.465-22.237,0.864C5.408,15.625,4,19.644,4,24c0,11.046,8.954,20,20,20c6.173,0,11.689-2.8,15.358-7.195 C35.486,37.33,23.257,38.769,14.724,37.285z\"\n            />\n        </svg>\n    );\n}\n\n/** The status as an object, also if the device gives only the connection as a string */\nfunction normalizeStatus(status: DeviceStatus | null | undefined): Exclude<DeviceStatus, string> {\n    if (!status) {\n        return {};\n    }\n    if (typeof status === 'string') {\n        return { connection: status };\n    }\n    return status;\n}\n\n/** The symbol of the connection type; `null` if there is nothing to show */\nfunction getConnectionSymbol(\n    connectionType: ConfigConnectionType | undefined,\n    connection: string | undefined,\n): React.JSX.Element | null {\n    const disconnected = connection === 'disconnected';\n    switch (connectionType) {\n        case 'wifi':\n            // The waves are crossed out when the connection is lost\n            return <IconConnectionState state={disconnected ? 'disconnected' : 'connected'} />;\n        case 'bluetooth':\n            return disconnected ? <IconConnectionNoBluetooth /> : <IconConnectionBluetooth />;\n        case 'lan':\n            return <IconConnectionLan />;\n        case 'thread':\n            return <ThreadIcon />;\n        case 'z-wave':\n            return <ZWaveIcon />;\n        case 'zigbee':\n            return <ZigBeeIcon />;\n        default:\n            if (connection === 'connected') {\n                return <LinkIcon />;\n            }\n            return disconnected ? <LinkOffIcon /> : null;\n    }\n}\n\ninterface DeviceStatusProps {\n    socket: Connection;\n    status: DeviceStatus | null;\n    deviceId: DeviceId;\n    connectionType?: ConfigConnectionType;\n    statusAction?: DeviceAction;\n    /** Update information of the device (firmware/software) */\n    update?: DeviceInfo['update'];\n    /** Reserved \"update\" action. If provided, the update indicator becomes a clickable button */\n    updateAction?: DeviceAction;\n    /** Reserved \"battery\" action. If provided, the battery indicator becomes a clickable button */\n    batteryAction?: DeviceAction;\n    deviceHandler: (deviceId: DeviceId, action: ActionBase) => () => void;\n    theme: IobTheme;\n    stateOrObjectHandler: StateOrObjectHandler;\n}\n\n/**\n * Device Status component: connection, signal, battery, warning and update as pills of the status line.\n *\n * A pill is neutral while the value is fine and tinted with its color when it needs attention, so that\n * the problems stand out in a list of many devices.\n *\n * @param props - Parameters\n * @param props.status - Status object, e.g. { connection: 'connected', battery: 100, rssi: -50 }\n */\nexport default function DeviceStatusComponent(props: DeviceStatusProps): React.JSX.Element | null {\n    const status = normalizeStatus(props.status);\n\n    const connection = useStateOrObject(status.connection, props.stateOrObjectHandler);\n    const rssi = useStateOrObject(status.rssi, props.stateOrObjectHandler);\n    const battery = useStateOrObject(status.battery, props.stateOrObjectHandler);\n    const warning = useStateOrObject(status.warning, props.stateOrObjectHandler);\n    const updateAvailable = useStateOrObject(props.update?.available, props.stateOrObjectHandler);\n    const updateVersion = useStateOrObject(props.update?.version, props.stateOrObjectHandler);\n    const updateNewVersion = useStateOrObject(props.update?.newVersion, props.stateOrObjectHandler);\n\n    // The new value slides in when it changes\n    const rssiRef = useValueTick<HTMLSpanElement>(rssi);\n    const batteryRef = useValueTick<HTMLSpanElement>(battery);\n\n    const pills: React.JSX.Element[] = [];\n\n    // Connection\n    const connectionSymbol = getConnectionSymbol(props.connectionType, connection);\n    if (connectionSymbol) {\n        const known = connection === 'connected' || connection === 'disconnected';\n        const tooltip = known\n            ? (connection === 'connected'\n                  ? getTranslation('connectedIconTooltip')\n                  : getTranslation('disconnectedIconTooltip')) +\n              (props.statusAction ? `. ${getTranslation(props.statusAction.description || 'moreInformation')}` : '')\n            : undefined;\n        pills.push(\n            <StatusPill\n                key=\"connection\"\n                tone={connection === 'disconnected' ? 'err' : undefined}\n                tooltip={tooltip}\n                onClick={\n                    known && props.statusAction\n                        ? () => props.deviceHandler(props.deviceId, props.statusAction!)()\n                        : undefined\n                }\n            >\n                {known ? connectionSymbol : <span style={{ display: 'flex', opacity: 0.55 }}>{connectionSymbol}</span>}\n            </StatusPill>,\n        );\n    }\n\n    // Signal strength\n    const rssiNumber = rssi === undefined || rssi === null || (rssi as unknown) === '' ? NaN : Number(rssi);\n    if (!isNaN(rssiNumber) && rssiNumber !== 0) {\n        pills.push(\n            <StatusPill\n                key=\"rssi\"\n                tone={rssiNumber < -80 ? 'warn' : undefined}\n                tooltip={`RSSI: ${rssiNumber} dBm`}\n            >\n                <IconSignal rssi={rssiNumber} />\n                <span ref={rssiRef}>{rssiNumber}</span>\n            </StatusPill>,\n        );\n    }\n\n    // Battery. A button if the backend offers the reserved \"battery\" action (e.g. for the battery history)\n    if (battery !== undefined && battery !== null && (battery as unknown) !== '') {\n        let icon: React.JSX.Element;\n        let text: string | null = null;\n        let tone: 'warn' | 'err' | undefined;\n        if (typeof battery === 'number') {\n            icon = <IconBattery level={battery} />;\n            text = `${battery}%`;\n            tone = battery <= 10 ? 'err' : battery <= 25 ? 'warn' : undefined;\n        } else if (typeof battery === 'boolean') {\n            icon = <IconBattery level={battery ? 100 : 0} />;\n            tone = battery ? undefined : 'err';\n        } else if (battery === 'charging') {\n            icon = <IconBattery charging />;\n        } else {\n            icon = <IconBattery />;\n            text = battery.includes('V') ? battery : `${battery} mV`;\n        }\n        pills.push(\n            <StatusPill\n                key=\"battery\"\n                tone={tone}\n                tooltip={\n                    getTranslation('batteryTooltip') +\n                    (props.batteryAction\n                        ? `. ${getTranslation(props.batteryAction.description || 'moreInformation')}`\n                        : '')\n                }\n                onClick={\n                    props.batteryAction ? () => props.deviceHandler(props.deviceId, props.batteryAction!)() : undefined\n                }\n            >\n                {icon}\n                {text ? <span ref={batteryRef}>{text}</span> : null}\n            </StatusPill>,\n        );\n    }\n\n    // Warning: it pulses when it appears or changes\n    if (warning) {\n        const text = typeof warning === 'string' || typeof warning === 'object' ? getTranslation(warning) : '';\n        pills.push(\n            <StatusPill\n                key=\"warning\"\n                tone=\"warn\"\n                tooltip={text || undefined}\n            >\n                <IconStatusLed\n                    color=\"var(--dm-warn)\"\n                    beat={typeof warning === 'object' ? JSON.stringify(warning) : warning}\n                >\n                    <WarningIcon fontSize=\"inherit\" />\n                </IconStatusLed>\n            </StatusPill>,\n        );\n    }\n\n    // Update\n    if (updateAvailable) {\n        const versions = updateNewVersion ? `${updateVersion ? `${updateVersion} → ` : ''}${updateNewVersion}` : '';\n        pills.push(\n            <StatusPill\n                key=\"update\"\n                tone=\"info\"\n                tooltip={getTranslation('updateAvailable') + (versions ? `: ${versions}` : '')}\n                onClick={\n                    props.updateAction\n                        ? () => {\n                              // An update is a significant operation, so always ask for confirmation\n                              // before triggering it. Reuse the action's own confirmation message if the\n                              // backend provided one; otherwise build a default one including the versions.\n                              // The confirmation is then handled by the standard device action flow\n                              // (deviceHandler -> showConfirmation -> renderConfirmationDialog).\n                              let confirmation: boolean | ioBroker.StringOrTranslated | undefined =\n                                  props.updateAction!.confirmation;\n                              if (!confirmation) {\n                                  let message = getTranslation('updateConfirmation');\n                                  if (versions) {\n                                      message += `: ${versions}`;\n                                  }\n                                  confirmation = { [I18n.getLanguage()]: message, en: message };\n                              }\n                              props.deviceHandler(props.deviceId, { ...props.updateAction!, confirmation })();\n                          }\n                        : undefined\n                }\n            >\n                <IconUpdate />\n            </StatusPill>,\n        );\n    }\n\n    return pills.length ? <>{pills}</> : null;\n}\n\ninterface DeviceLedProps {\n    status?: DeviceStatus | null;\n    stateOrObjectHandler: StateOrObjectHandler;\n    /** The instance runs. If not, the LED is grey. */\n    alive: boolean;\n    /** The device is switched off: the LED is grey */\n    enabled?: boolean;\n}\n\n/**\n * The LED on the device symbol: green while the device is connected, red without connection.\n *\n * It sends a pulse each time the device reports a new signal strength, like the LED of a real device\n * that blinks on traffic. Nothing is shown while the connection is unknown.\n */\nexport function DeviceLed(props: DeviceLedProps): React.JSX.Element | null {\n    const status = normalizeStatus(props.status);\n    const connection = useStateOrObject(status.connection, props.stateOrObjectHandler);\n    const rssi = useStateOrObject(status.rssi, props.stateOrObjectHandler);\n\n    // Only a change of a known value is a beat, not the first value after the (re)mount of the card\n    const [beat, setBeat] = useState<{ rssi: unknown; count: number }>({ rssi: undefined, count: 0 });\n    if (rssi !== undefined && rssi !== null && rssi !== beat.rssi) {\n        // Adjusting the state while rendering, as React recommends for values derived from a change\n        setBeat({ rssi, count: beat.rssi === undefined ? 0 : beat.count + 1 });\n    }\n\n    if (connection !== 'connected' && connection !== 'disconnected') {\n        return null;\n    }\n\n    let color = connection === 'connected' ? 'green' : 'red';\n    if (!props.alive || props.enabled === false) {\n        color = 'grey';\n    }\n\n    return (\n        <span className=\"dm-avatar-led\">\n            <IconStatusLed\n                color={color}\n                beat={beat.count}\n                ariaLabel={\n                    connection === 'connected'\n                        ? getTranslation('connectedIconTooltip')\n                        : getTranslation('disconnectedIconTooltip')\n                }\n            />\n        </span>\n    );\n}\n"]}

package/build/StatusIndicator.js

@@ -1,27 +1,16 @@
 import React from 'react';
-import { IconButton, Tooltip } from '@mui/material';
 import { useStateOrObject } from './hooks';
+import StatusPill from './StatusPill';
 import { getIndicatorColor, getTranslation, renderIcon } from './Utils';
 const styles = {
-    tooltip: {
-        pointerEvents: 'none',
-    },
-    content: {
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        lineHeight: 1,
-    },
-    text: {
-        fontSize: 'small',
-        margin: 0,
-        whiteSpace: 'nowrap',
+    tooltipText: {
+        whiteSpace: 'pre-line',
     },
     row: {
         display: 'flex',
         alignItems: 'center',
         flexWrap: 'wrap',
-        gap: 8,
+        gap: 4,
     },
 };
 /**
@@ -88,30 +77,13 @@ export default function StatusIndicator(props) {
     }
     const tooltipSource = level?.tooltip ?? indicator.tooltip;
     const tooltip = tooltipSource ? getTranslation(tooltipSource) : '';
+    // An indicator in the color "error" or "warning" needs attention: its pill is tinted like the built-in ones
+    const tone = colorName === 'error' ? 'err' : colorName === 'warning' ? 'warn' : undefined;
     // Only fall back to the "question mark" icon if the indicator shows nothing else at all
-    const iconElement = iconName || !label ? renderIcon(iconName, resolvedColor) : null;
-    const content = (React.createElement("div", { style: styles.content },
+    const iconElement = iconName || !label ? renderIcon(iconName, tone ? undefined : resolvedColor) : null;
+    return (React.createElement(StatusPill, { tone: tone, color: tone ? undefined : resolvedColor, tooltip: tooltip ? React.createElement("span", { style: styles.tooltipText }, tooltip) : undefined, href: props.url, onClick: props.url ? undefined : props.onClick, disabled: props.disabled },
         iconElement,
-        label ? React.createElement("p", { style: { ...styles.text, color: resolvedColor } }, label) : null));
-    let element;
-    if (props.url) {
-        element = (React.createElement(IconButton, { size: "small", style: { padding: 2, borderRadius: 4 }, href: props.url, target: "_blank", disabled: props.disabled }, content));
-    }
-    else if (props.onClick) {
-        element = (React.createElement(IconButton, { size: "small", style: { padding: 2, borderRadius: 4 }, disabled: props.disabled, onClick: e => {
-                // The card itself may react on clicks, so the event must not bubble
-                e.stopPropagation();
-                props.onClick?.();
-            } }, content));
-    }
-    else {
-        element = content;
-    }
-    if (!tooltip) {
-        return element;
-    }
-    return (React.createElement(Tooltip, { title: tooltip, slotProps: { popper: { sx: styles.tooltip } } },
-        React.createElement("span", { style: { display: 'inline-flex' } }, element)));
+        label ? React.createElement("span", null, label) : null));
 }
 /**
  * The line of custom status indicators.