@iobroker/gui-components 8.0.1

package/build/AdminConnection.d.ts

@@ -0,0 +1 @@
+export { AdminConnection } from '@iobroker/socket-client';

package/build/AdminConnection.js

@@ -0,0 +1,2 @@
+export { AdminConnection } from '@iobroker/socket-client';
+//# sourceMappingURL=AdminConnection.js.map

package/build/AdminConnection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdminConnection.js","sourceRoot":"./src/","sources":["AdminConnection.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC","sourcesContent":["export { AdminConnection } from '@iobroker/socket-client';\r\n"]}

package/build/Components/404.d.ts

@@ -0,0 +1,4 @@
+import { type JSX } from 'react';
+/** Generates the 404 error page */
+declare function Page404(): JSX.Element;
+export default Page404;

package/build/Components/404.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import { Box } from '@mui/material';
+/*
+Copyright 2019 Robin Selmer
+https://codepen.io/robinselmer/pen/vJjbOZ
+*/
+import { I18n } from '../i18n';
+const styles = {
+    content: {
+        background: 'black',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+    root: {
+        boxSizing: 'border-box',
+        height: '100%',
+        width: '100%',
+        backgroundColor: '#000000',
+        backgroundImage: 'radial-gradient(#104254 , #05181c)',
+        fontFamily: "'Inconsolata', Helvetica, sans-serif",
+        fontSize: '1.5rem',
+        color: 'rgba(128, 175, 255, 0.8)',
+        textShadow: `0 0 1ex rgba(51, 70, 255, 1),
+        0 0 2px rgba(255, 255, 255, 0.8)`,
+    },
+    overlay: {
+        pointerEvents: 'none',
+        width: '100%',
+        height: '100%',
+        background: `repeating-linear-gradient(
+                180deg,
+            rgba(0, 0, 0, 0) 0,
+            rgba(0, 0, 0, 0.3) 50%,
+            rgba(0, 0, 0, 0) 100%)`,
+        backgroundSize: 'auto 4px',
+        zIndex: 99,
+        '&::before': {
+            content: '""',
+            pointerEvents: 'none',
+            position: 'absolute',
+            display: 'block',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            width: '100%',
+            height: '100%',
+            backgroundImage: `linear-gradient(
+                0deg,
+                transparent 0%,
+                rgba(32, 50, 128, 0.2) 2%,
+                rgba(32, 50, 128, 0.8) 3%,
+                rgba(32, 50, 128, 0.2) 3%,
+                transparent 100%)`,
+            backgroundRepeat: 'no-repeat',
+            animation: 'scan 7.5s linear 0s infinite',
+        },
+    },
+    terminal: {
+        boxSizing: 'inherit',
+        position: 'absolute',
+        height: '100%',
+        width: 'calc(100% - 8rem)',
+        maxWidth: '100%',
+        padding: '4rem',
+        textTransform: 'uppercase',
+    },
+    output: {
+        color: 'rgba(128, 175, 255, 0.8)',
+        textShadow: `
+        0 0 1px rgba(51, 70, 255, 0.4),
+            0 0 2px rgba(255, 255, 255, 0.8)`,
+        '&::before': {
+            content: '"> "',
+        },
+    },
+    errorCode: {
+        color: 'white',
+    },
+};
+/** Generates the 404 error page */
+function Page404() {
+    return (React.createElement("div", { style: styles.content },
+        React.createElement("div", { style: styles.root },
+            React.createElement(Box, { component: "div", sx: styles.overlay },
+                React.createElement("div", { style: styles.terminal },
+                    React.createElement("h1", null,
+                        I18n.t('ra_Error'),
+                        React.createElement("span", { style: styles.errorCode }, "404")),
+                    React.createElement(Box, { component: "p", sx: styles.output }, I18n.t('ra_The page you are looking for was not found')),
+                    React.createElement(Box, { component: "p", sx: styles.output }, I18n.t('ra_Good luck')))))));
+}
+export default Page404;
+//# sourceMappingURL=404.js.map

package/build/Components/404.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"404.js","sourceRoot":"./src/","sources":["Components/404.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAC;AAEpC;;;EAGE;AAEF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,GAAwB;IAChC,OAAO,EAAE;QACL,UAAU,EAAE,OAAO;QACnB,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;QACT,IAAI,EAAE,CAAC;QACP,KAAK,EAAE,CAAC;KACX;IACD,IAAI,EAAE;QACF,SAAS,EAAE,YAAY;QACvB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,MAAM;QACb,eAAe,EAAE,SAAS;QAC1B,eAAe,EAAE,oCAAoC;QACrD,UAAU,EAAE,sCAAsC;QAClD,QAAQ,EAAE,QAAQ;QAClB,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;yCACqB;KACpC;IACD,OAAO,EAAE;QACL,aAAa,EAAE,MAAM;QACrB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,UAAU,EAAE;;;;mCAIe;QAC3B,cAAc,EAAE,UAAU;QAC1B,MAAM,EAAE,EAAE;QACV,WAAW,EAAE;YACT,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,MAAM;YACrB,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,OAAO;YAChB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,KAAK,EAAE,CAAC;YACR,MAAM,EAAE,CAAC;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,eAAe,EAAE;;;;;;kCAMK;YACtB,gBAAgB,EAAE,WAAW;YAC7B,SAAS,EAAE,8BAA8B;SAC5C;KACJ;IAED,QAAQ,EAAE;QACN,SAAS,EAAE,SAAS;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,mBAAmB;QAC1B,QAAQ,EAAE,MAAM;QAChB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,WAAW;KAC7B;IACD,MAAM,EAAE;QACJ,KAAK,EAAE,0BAA0B;QACjC,UAAU,EAAE;;6CAEyB;QACrC,WAAW,EAAE;YACT,OAAO,EAAE,MAAM;SAClB;KACJ;IACD,SAAS,EAAE;QACP,KAAK,EAAE,OAAO;KACjB;CACJ,CAAC;AAEF,mCAAmC;AACnC,SAAS,OAAO;IACZ,OAAO,CACH,6BAAK,KAAK,EAAE,MAAM,CAAC,OAAO;QACtB,6BAAK,KAAK,EAAE,MAAM,CAAC,IAAI;YACnB,oBAAC,GAAG,IACA,SAAS,EAAC,KAAK,EACf,EAAE,EAAE,MAAM,CAAC,OAAO;gBAElB,6BAAK,KAAK,EAAE,MAAM,CAAC,QAAQ;oBACvB;wBACK,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC;wBACnB,8BAAM,KAAK,EAAE,MAAM,CAAC,SAAS,UAAY,CACxC;oBACL,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,+CAA+C,CAAC,CACtD;oBACN,oBAAC,GAAG,IACA,SAAS,EAAC,GAAG,EACb,EAAE,EAAE,MAAM,CAAC,MAAM,IAEhB,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CACrB,CACJ,CACJ,CACJ,CACJ,CACT,CAAC;AACN,CAAC;AAED,eAAe,OAAO,CAAC","sourcesContent":["import React, { type JSX } from 'react';\r\nimport { Box } from '@mui/material';\r\n\r\n/*\r\nCopyright 2019 Robin Selmer\r\nhttps://codepen.io/robinselmer/pen/vJjbOZ\r\n*/\r\n\r\nimport { I18n } from '../i18n';\r\n\r\nconst styles: Record<string, any> = {\r\n    content: {\r\n        background: 'black',\r\n        position: 'absolute',\r\n        top: 0,\r\n        bottom: 0,\r\n        left: 0,\r\n        right: 0,\r\n    },\r\n    root: {\r\n        boxSizing: 'border-box',\r\n        height: '100%',\r\n        width: '100%',\r\n        backgroundColor: '#000000',\r\n        backgroundImage: 'radial-gradient(#104254 , #05181c)',\r\n        fontFamily: \"'Inconsolata', Helvetica, sans-serif\",\r\n        fontSize: '1.5rem',\r\n        color: 'rgba(128, 175, 255, 0.8)',\r\n        textShadow: `0 0 1ex rgba(51, 70, 255, 1),\r\n        0 0 2px rgba(255, 255, 255, 0.8)`,\r\n    },\r\n    overlay: {\r\n        pointerEvents: 'none',\r\n        width: '100%',\r\n        height: '100%',\r\n        background: `repeating-linear-gradient(\r\n                180deg,\r\n            rgba(0, 0, 0, 0) 0,\r\n            rgba(0, 0, 0, 0.3) 50%,\r\n            rgba(0, 0, 0, 0) 100%)`,\r\n        backgroundSize: 'auto 4px',\r\n        zIndex: 99,\r\n        '&::before': {\r\n            content: '\"\"',\r\n            pointerEvents: 'none',\r\n            position: 'absolute',\r\n            display: 'block',\r\n            top: 0,\r\n            left: 0,\r\n            right: 0,\r\n            bottom: 0,\r\n            width: '100%',\r\n            height: '100%',\r\n            backgroundImage: `linear-gradient(\r\n                0deg,\r\n                transparent 0%,\r\n                rgba(32, 50, 128, 0.2) 2%,\r\n                rgba(32, 50, 128, 0.8) 3%,\r\n                rgba(32, 50, 128, 0.2) 3%,\r\n                transparent 100%)`,\r\n            backgroundRepeat: 'no-repeat',\r\n            animation: 'scan 7.5s linear 0s infinite',\r\n        },\r\n    },\r\n\r\n    terminal: {\r\n        boxSizing: 'inherit',\r\n        position: 'absolute',\r\n        height: '100%',\r\n        width: 'calc(100% - 8rem)',\r\n        maxWidth: '100%',\r\n        padding: '4rem',\r\n        textTransform: 'uppercase',\r\n    },\r\n    output: {\r\n        color: 'rgba(128, 175, 255, 0.8)',\r\n        textShadow: `\r\n        0 0 1px rgba(51, 70, 255, 0.4),\r\n            0 0 2px rgba(255, 255, 255, 0.8)`,\r\n        '&::before': {\r\n            content: '\"> \"',\r\n        },\r\n    },\r\n    errorCode: {\r\n        color: 'white',\r\n    },\r\n};\r\n\r\n/** Generates the 404 error page */\r\nfunction Page404(): JSX.Element {\r\n    return (\r\n        <div style={styles.content}>\r\n            <div style={styles.root}>\r\n                <Box\r\n                    component=\"div\"\r\n                    sx={styles.overlay}\r\n                >\r\n                    <div style={styles.terminal}>\r\n                        <h1>\r\n                            {I18n.t('ra_Error')}\r\n                            <span style={styles.errorCode}>404</span>\r\n                        </h1>\r\n                        <Box\r\n                            component=\"p\"\r\n                            sx={styles.output}\r\n                        >\r\n                            {I18n.t('ra_The page you are looking for was not found')}\r\n                        </Box>\r\n                        <Box\r\n                            component=\"p\"\r\n                            sx={styles.output}\r\n                        >\r\n                            {I18n.t('ra_Good luck')}\r\n                        </Box>\r\n                    </div>\r\n                </Box>\r\n            </div>\r\n        </div>\r\n    );\r\n}\r\n\r\nexport default Page404;\r\n"]}

package/build/Components/ColorPicker.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { Component, type CSSProperties } from 'react';
+import { type RGBColor } from 'react-color';
+import type { IobTheme } from '../types';
+interface ColorPickerProps {
+    /** Set to true to disable the color picker. */
+    disabled?: boolean;
+    /** The currently selected color. */
+    value?: string;
+    /** @deprecated The currently selected color use value */
+    color?: string;
+    /** The color change callback. */
+    onChange: (rgba: string) => void;
+    /** Label of the color picker. */
+    label?: string;
+    /** @deprecated TLabel of the color picker use label */
+    name?: string;
+    /** Additional styling for this component. */
+    style?: CSSProperties;
+    /** The CSS class name. */
+    className?: string;
+    customPalette?: string[];
+    noInputField?: boolean;
+    barWidth?: number;
+    sx?: Record<string, any>;
+    theme?: IobTheme;
+}
+interface ColorPickerState {
+    displayColorPicker: boolean;
+    color: string | RGBColor;
+    anchorEl: HTMLDivElement | null;
+}
+/**
+ * A color picker component.
+ */
+export declare class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {
+    /**
+     * Constructor for the color picker.
+     *
+     * @param props The properties.
+     */
+    constructor(props: ColorPickerProps);
+    private handleClick;
+    private handleClose;
+    /**
+     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
+     *
+     * @param color The color to convert.
+     * @param isHex If true, the color will be converted to hex format.
+     * @returns the hex or rgba representation of the given color.
+     */
+    static getColor(color: string | {
+        rgb: RGBColor;
+    } | RGBColor, isHex?: boolean): string;
+    /**
+     * Convert rgb() or rgba() format to hex format #rrggbb.
+     *
+     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.
+     */
+    static rgb2hex(rgb: string): string;
+    private handleChange;
+    /**
+     * If the props are updated from outside, they should override the state
+     *
+     * @param _prevProps The previous properties.
+     * @param prevState The previous state.
+     */
+    componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void;
+    renderCustomPalette(): React.JSX.Element | null;
+    render(): React.JSX.Element;
+}
+export {};

package/build/Components/ColorPicker.js

@@ -0,0 +1,222 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import React, { Component } from 'react';
+import { ChromePicker } from 'react-color';
+import { TextField, Menu, IconButton, Button, Box } from '@mui/material';
+import { Delete as IconDelete, Close as IconClose } from '@mui/icons-material';
+import { I18n } from '../i18n';
+const styles = {
+    color: {
+        width: 36,
+        height: 14,
+        borderRadius: 2,
+    },
+    delButton: {
+        marginTop: 16,
+    },
+    swatch: {
+        mt: '16px',
+        p: '5px',
+        backgroundColor: 'background.paper',
+        borderRadius: '1px',
+        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+        display: 'inline-block',
+        cursor: 'pointer',
+        verticalAlign: 'middle',
+    },
+    swatchDisabled: {
+        opacity: 0.5,
+        cursor: 'default',
+    },
+    popover: {
+        '& .MuiPaper-root': {
+            textAlign: 'right',
+            backgroundColor: '#00000000',
+            boxShadow: 'none',
+        },
+    },
+    popoverList: {
+        padding: 0,
+    },
+    closeButton: (theme) => ({
+        backgroundColor: `${theme.palette.background.paper} !important`,
+        borderRadius: '0 0 25% 25%',
+        '&:hover': {
+            backgroundColor: `${theme.palette.secondary.main} !important`,
+        },
+    }),
+    cover: {
+        position: 'fixed',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+    },
+    textDense: {
+        mt: 0,
+        mb: 0,
+    },
+    picker: (theme) => ({
+        background: `${theme.palette.background.paper} !important`,
+    }),
+    iconButton: {
+        width: 16,
+        height: 16,
+    },
+    button: {
+        width: 32,
+        height: 32,
+        minWidth: 32,
+        minHeight: 32,
+    },
+};
+/**
+ * A color picker component.
+ */
+export class ColorPicker extends Component {
+    /**
+     * Constructor for the color picker.
+     *
+     * @param props The properties.
+     */
+    constructor(props) {
+        super(props);
+        this.state = {
+            displayColorPicker: false,
+            color: this.props.value || this.props.color || '',
+            anchorEl: null,
+        };
+    }
+    handleClick = (e) => {
+        this.setState({
+            displayColorPicker: !this.state.displayColorPicker,
+            anchorEl: this.state.displayColorPicker ? null : e.currentTarget,
+        });
+    };
+    handleClose = () => {
+        this.setState({ displayColorPicker: false, anchorEl: null });
+    };
+    /**
+     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.
+     *
+     * @param color The color to convert.
+     * @param isHex If true, the color will be converted to hex format.
+     * @returns the hex or rgba representation of the given color.
+     */
+    static getColor(color, isHex) {
+        if (color && typeof color === 'object') {
+            const oColor = color;
+            if (oColor.rgb) {
+                if (isHex) {
+                    return `#${oColor.rgb.r.toString(16).padStart(2, '0')}${oColor.rgb.g.toString(16).padStart(2, '0')}${oColor.rgb.b.toString(16).padStart(2, '0')}`;
+                }
+                return `rgba(${oColor.rgb.r},${oColor.rgb.g},${oColor.rgb.b},${oColor.rgb.a})`;
+            }
+            const rColor = color;
+            if (isHex) {
+                return `#${rColor.r.toString(16).padStart(2, '0')}${rColor.g.toString(16).padStart(2, '0')}${rColor.b.toString(16).padStart(2, '0')}`;
+            }
+            return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a})`;
+        }
+        if (typeof color === 'string') {
+            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';
+        }
+        return '';
+    }
+    /**
+     * Convert rgb() or rgba() format to hex format #rrggbb.
+     *
+     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.
+     */
+    static rgb2hex(rgb) {
+        const m = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+        if (m) {
+            const r = parseInt(m[1], 10).toString(16).padStart(2, '0');
+            const g = parseInt(m[2], 10).toString(16).padStart(2, '0');
+            const b = parseInt(m[3], 10).toString(16).padStart(2, '0');
+            return m?.length === 4 ? `#${r}${g}${b}` : rgb;
+        }
+        return rgb;
+    }
+    handleChange = (color) => {
+        this.setState({ color }, () => this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));
+    };
+    /**
+     * If the props are updated from outside, they should override the state
+     *
+     * @param _prevProps The previous properties.
+     * @param prevState The previous state.
+     */
+    componentDidUpdate(_prevProps, prevState) {
+        const color = ColorPicker.getColor(this.props.color || this.props.value || '');
+        if (color !== prevState.color) {
+            this.setState({ color });
+        }
+    }
+    renderCustomPalette() {
+        if (!this.props.customPalette) {
+            return null;
+        }
+        return (React.createElement("div", { style: { width: '100%', display: 'flex', flexWrap: 'wrap' } }, this.props.customPalette.map(color => (React.createElement(Button, { style: styles.button, key: color, onClick: () => {
+                this.handleChange(color);
+                setTimeout(() => this.handleClose(), 300);
+            } },
+            React.createElement("div", { style: { ...styles.iconButton, background: color } }))))));
+    }
+    render() {
+        const style = { ...(this.props.style || {}) };
+        style.position = 'relative';
+        const { color } = this.state;
+        return (React.createElement(Box, { component: "div", style: style, sx: this.props.sx || undefined, className: this.props.className || '' },
+            this.props.noInputField ? null : (React.createElement(TextField, { disabled: this.props.disabled, variant: "standard", id: "ar_color_picker_name", label: this.props.label || this.props.name, value: color || '', margin: "dense", sx: {
+                    '&.MuiFormControl-root': styles.textDense,
+                    width: color ? 'calc(100% - 80px)' : 'calc(100% - 56px)',
+                    mr: color ? undefined : 1,
+                }, onChange: e => this.handleChange(e.target.value) })),
+            !this.props.noInputField && color ? (React.createElement(IconButton, { disabled: this.props.disabled, onClick: () => this.handleChange(''), size: "small", style: this.props.label || this.props.name ? styles.delButton : undefined },
+                React.createElement(IconDelete, null))) : null,
+            React.createElement(Box, { component: "div", onClick: e => !this.props.disabled && this.handleClick(e), title: I18n.t('ra_Select color'), sx: {
+                    ...styles.swatch,
+                    ...(this.props.disabled ? styles.swatchDisabled : undefined),
+                    background: color ? undefined : 'transparent',
+                    border: color ? undefined : '1px dashed #ccc',
+                    boxSizing: 'border-box',
+                    marginTop: this.props.noInputField || !(this.props.label || this.props.name) ? 0 : undefined,
+                } },
+                React.createElement("div", { style: {
+                        ...styles.color,
+                        background: ColorPicker.getColor(color),
+                        width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || 36,
+                    } })),
+            this.state.displayColorPicker && !this.props.disabled ? (React.createElement(Menu, { sx: {
+                    ...styles.popover,
+                    '&. MuiMenu-list': styles.popoverList,
+                }, anchorEl: this.state.anchorEl, open: !0, onClose: () => this.handleClose() },
+                React.createElement(ChromePicker, { color: this.state.color || undefined, onChangeComplete: (_color) => this.handleChange(_color.rgb), styles: {
+                        default: {
+                            picker: {
+                                backgroundColor: this.props.theme?.palette.background.paper || '#888',
+                            },
+                        },
+                    } }),
+                color && this.props.noInputField ? (React.createElement(IconButton, { sx: styles.closeButton, onClick: () => this.handleChange('') },
+                    React.createElement(IconDelete, null))) : null,
+                React.createElement(IconButton, { sx: styles.closeButton, onClick: () => this.handleClose() },
+                    React.createElement(IconClose, null)),
+                this.renderCustomPalette())) : null));
+    }
+}
+//# sourceMappingURL=ColorPicker.js.map

package/build/Components/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.js","sourceRoot":"./src/","sources":["Components/ColorPicker.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\r\n *\r\n * Licensed under the Creative Commons Attribution-NonCommercial License, Version 4.0 (the \"License\");\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n * https://creativecommons.org/licenses/by-nc/4.0/legalcode.txt\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an \"AS IS\" BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\nimport React, { Component, type CSSProperties } from 'react';\r\nimport { ChromePicker, type RGBColor } from 'react-color';\r\n\r\nimport { TextField, Menu, IconButton, Button, Box } from '@mui/material';\r\n\r\nimport { Delete as IconDelete, Close as IconClose } from '@mui/icons-material';\r\n\r\nimport { I18n } from '../i18n';\r\n\r\nimport type { IobTheme } from '../types';\r\n\r\nconst styles: Record<string, any> = {\r\n    color: {\r\n        width: 36,\r\n        height: 14,\r\n        borderRadius: 2,\r\n    },\r\n    delButton: {\r\n        marginTop: 16,\r\n    },\r\n    swatch: {\r\n        mt: '16px',\r\n        p: '5px',\r\n        backgroundColor: 'background.paper',\r\n        borderRadius: '1px',\r\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\r\n        display: 'inline-block',\r\n        cursor: 'pointer',\r\n        verticalAlign: 'middle',\r\n    },\r\n    swatchDisabled: {\r\n        opacity: 0.5,\r\n        cursor: 'default',\r\n    },\r\n    popover: {\r\n        '& .MuiPaper-root': {\r\n            textAlign: 'right',\r\n            backgroundColor: '#00000000',\r\n            boxShadow: 'none',\r\n        },\r\n    },\r\n    popoverList: {\r\n        padding: 0,\r\n    },\r\n    closeButton: (theme: IobTheme) => ({\r\n        backgroundColor: `${theme.palette.background.paper} !important`,\r\n        borderRadius: '0 0 25% 25%',\r\n        '&:hover': {\r\n            backgroundColor: `${theme.palette.secondary.main} !important`,\r\n        },\r\n    }),\r\n    cover: {\r\n        position: 'fixed',\r\n        top: 0,\r\n        right: 0,\r\n        bottom: 0,\r\n        left: 0,\r\n    },\r\n    textDense: {\r\n        mt: 0,\r\n        mb: 0,\r\n    },\r\n    picker: (theme: IobTheme) => ({\r\n        background: `${theme.palette.background.paper} !important`,\r\n    }),\r\n    iconButton: {\r\n        width: 16,\r\n        height: 16,\r\n    },\r\n    button: {\r\n        width: 32,\r\n        height: 32,\r\n        minWidth: 32,\r\n        minHeight: 32,\r\n    },\r\n};\r\n\r\ninterface ColorPickerProps {\r\n    /** Set to true to disable the color picker. */\r\n    disabled?: boolean;\r\n    /** The currently selected color. */\r\n    value?: string;\r\n    /** @deprecated The currently selected color use value */\r\n    color?: string;\r\n    /** The color change callback. */\r\n    onChange: (rgba: string) => void;\r\n    /** Label of the color picker. */\r\n    label?: string;\r\n    /** @deprecated TLabel of the color picker use label */\r\n    name?: string;\r\n    /** Additional styling for this component. */\r\n    style?: CSSProperties;\r\n    /** The CSS class name. */\r\n    className?: string;\r\n    customPalette?: string[];\r\n    noInputField?: boolean;\r\n    barWidth?: number;\r\n    sx?: Record<string, any>;\r\n    theme?: IobTheme;\r\n}\r\n\r\ninterface ColorPickerState {\r\n    displayColorPicker: boolean;\r\n    color: string | RGBColor;\r\n    anchorEl: HTMLDivElement | null;\r\n}\r\n\r\n/**\r\n * A color picker component.\r\n */\r\nexport class ColorPicker extends Component<ColorPickerProps, ColorPickerState> {\r\n    /**\r\n     * Constructor for the color picker.\r\n     *\r\n     * @param props The properties.\r\n     */\r\n    constructor(props: ColorPickerProps) {\r\n        super(props);\r\n        this.state = {\r\n            displayColorPicker: false,\r\n            color: this.props.value || this.props.color || '',\r\n            anchorEl: null,\r\n        };\r\n    }\r\n\r\n    private handleClick = (e: React.MouseEvent<HTMLDivElement>): void => {\r\n        this.setState({\r\n            displayColorPicker: !this.state.displayColorPicker,\r\n            anchorEl: this.state.displayColorPicker ? null : e.currentTarget,\r\n        });\r\n    };\r\n\r\n    private handleClose = (): void => {\r\n        this.setState({ displayColorPicker: false, anchorEl: null });\r\n    };\r\n\r\n    /**\r\n     * Convert the given color to hex ('#rrggbb') or rgba ('rgba(r,g,b,a)') format.\r\n     *\r\n     * @param color The color to convert.\r\n     * @param isHex If true, the color will be converted to hex format.\r\n     * @returns the hex or rgba representation of the given color.\r\n     */\r\n    static getColor(color: string | { rgb: RGBColor } | RGBColor, isHex?: boolean): string {\r\n        if (color && typeof color === 'object') {\r\n            const oColor = color as { rgb: RGBColor };\r\n            if (oColor.rgb) {\r\n                if (isHex) {\r\n                    return `#${oColor.rgb.r.toString(16).padStart(2, '0')}${oColor.rgb.g.toString(16).padStart(2, '0')}${oColor.rgb.b.toString(16).padStart(2, '0')}`;\r\n                }\r\n                return `rgba(${oColor.rgb.r},${oColor.rgb.g},${oColor.rgb.b},${oColor.rgb.a})`;\r\n            }\r\n            const rColor = color as RGBColor;\r\n            if (isHex) {\r\n                return `#${rColor.r.toString(16).padStart(2, '0')}${rColor.g.toString(16).padStart(2, '0')}${rColor.b.toString(16).padStart(2, '0')}`;\r\n            }\r\n            return `rgba(${rColor.r},${rColor.g},${rColor.b},${rColor.a})`;\r\n        }\r\n        if (typeof color === 'string') {\r\n            return isHex ? ColorPicker.rgb2hex(color || '') : color || '';\r\n        }\r\n        return '';\r\n    }\r\n\r\n    /**\r\n     * Convert rgb() or rgba() format to hex format #rrggbb.\r\n     *\r\n     * @param rgb The color in rgb() or rgba() format. if not in this format, the color will be returned as is.\r\n     */\r\n    static rgb2hex(rgb: string): string {\r\n        const m = rgb.match(/^rgba?[\\s+]?\\([\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?,[\\s+]?(\\d+)[\\s+]?/i);\r\n\r\n        if (m) {\r\n            const r = parseInt(m[1], 10).toString(16).padStart(2, '0');\r\n            const g = parseInt(m[2], 10).toString(16).padStart(2, '0');\r\n            const b = parseInt(m[3], 10).toString(16).padStart(2, '0');\r\n\r\n            return m?.length === 4 ? `#${r}${g}${b}` : rgb;\r\n        }\r\n        return rgb;\r\n    }\r\n\r\n    private handleChange = (color: string | RGBColor): void => {\r\n        this.setState({ color }, () => this.props.onChange && this.props.onChange(ColorPicker.getColor(color)));\r\n    };\r\n\r\n    /**\r\n     * If the props are updated from outside, they should override the state\r\n     *\r\n     * @param _prevProps The previous properties.\r\n     * @param prevState The previous state.\r\n     */\r\n    componentDidUpdate(_prevProps: ColorPickerProps, prevState: ColorPickerState): void {\r\n        const color = ColorPicker.getColor(this.props.color || this.props.value || '');\r\n\r\n        if (color !== prevState.color) {\r\n            this.setState({ color });\r\n        }\r\n    }\r\n\r\n    renderCustomPalette(): React.JSX.Element | null {\r\n        if (!this.props.customPalette) {\r\n            return null;\r\n        }\r\n        return (\r\n            <div style={{ width: '100%', display: 'flex', flexWrap: 'wrap' }}>\r\n                {this.props.customPalette.map(color => (\r\n                    <Button\r\n                        style={styles.button}\r\n                        key={color}\r\n                        onClick={() => {\r\n                            this.handleChange(color);\r\n                            setTimeout(() => this.handleClose(), 300);\r\n                        }}\r\n                    >\r\n                        <div style={{ ...styles.iconButton, background: color }} />\r\n                    </Button>\r\n                ))}\r\n            </div>\r\n        );\r\n    }\r\n\r\n    render(): React.JSX.Element {\r\n        const style = { ...(this.props.style || {}) };\r\n        style.position = 'relative';\r\n        const { color } = this.state;\r\n\r\n        return (\r\n            <Box\r\n                component=\"div\"\r\n                style={style}\r\n                sx={this.props.sx || undefined}\r\n                className={this.props.className || ''}\r\n            >\r\n                {this.props.noInputField ? null : (\r\n                    <TextField\r\n                        disabled={this.props.disabled}\r\n                        variant=\"standard\"\r\n                        id=\"ar_color_picker_name\"\r\n                        label={this.props.label || this.props.name}\r\n                        value={color || ''}\r\n                        margin=\"dense\"\r\n                        sx={{\r\n                            '&.MuiFormControl-root': styles.textDense,\r\n                            width: color ? 'calc(100% - 80px)' : 'calc(100% - 56px)',\r\n                            mr: color ? undefined : 1,\r\n                        }}\r\n                        onChange={e => this.handleChange(e.target.value)}\r\n                    />\r\n                )}\r\n                {!this.props.noInputField && color ? (\r\n                    <IconButton\r\n                        disabled={this.props.disabled}\r\n                        onClick={() => this.handleChange('')}\r\n                        size=\"small\"\r\n                        style={this.props.label || this.props.name ? styles.delButton : undefined}\r\n                    >\r\n                        <IconDelete />\r\n                    </IconButton>\r\n                ) : null}\r\n                <Box\r\n                    component=\"div\"\r\n                    onClick={e => !this.props.disabled && this.handleClick(e)}\r\n                    title={I18n.t('ra_Select color')}\r\n                    sx={{\r\n                        ...styles.swatch,\r\n                        ...(this.props.disabled ? styles.swatchDisabled : undefined),\r\n                        background: color ? undefined : 'transparent',\r\n                        border: color ? undefined : '1px dashed #ccc',\r\n                        boxSizing: 'border-box',\r\n                        marginTop: this.props.noInputField || !(this.props.label || this.props.name) ? 0 : undefined,\r\n                    }}\r\n                >\r\n                    <div\r\n                        style={{\r\n                            ...styles.color,\r\n                            background: ColorPicker.getColor(color),\r\n                            width: this.props.noInputField ? this.props.barWidth || 16 : this.props.barWidth || 36,\r\n                        }}\r\n                    />\r\n                </Box>\r\n                {this.state.displayColorPicker && !this.props.disabled ? (\r\n                    <Menu\r\n                        sx={{\r\n                            ...styles.popover,\r\n                            '&. MuiMenu-list': styles.popoverList,\r\n                        }}\r\n                        anchorEl={this.state.anchorEl}\r\n                        open={!0}\r\n                        onClose={() => this.handleClose()}\r\n                    >\r\n                        <ChromePicker\r\n                            color={this.state.color || undefined}\r\n                            onChangeComplete={(_color: { rgb: RGBColor }) => this.handleChange(_color.rgb)}\r\n                            styles={{\r\n                                default: {\r\n                                    picker: {\r\n                                        backgroundColor: this.props.theme?.palette.background.paper || '#888',\r\n                                    },\r\n                                },\r\n                            }}\r\n                        />\r\n                        {color && this.props.noInputField ? (\r\n                            <IconButton\r\n                                sx={styles.closeButton}\r\n                                onClick={() => this.handleChange('')}\r\n                            >\r\n                                <IconDelete />\r\n                            </IconButton>\r\n                        ) : null}\r\n                        <IconButton\r\n                            sx={styles.closeButton}\r\n                            onClick={() => this.handleClose()}\r\n                        >\r\n                            <IconClose />\r\n                        </IconButton>\r\n                        {this.renderCustomPalette()}\r\n                    </Menu>\r\n                ) : null}\r\n            </Box>\r\n        );\r\n    }\r\n}\r\n"]}

package/build/Components/ComplexCron.d.ts

@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+type CronNames = 'seconds' | 'minutes' | 'hours' | 'dates' | 'months' | 'dow';
+interface CronProps {
+    seconds: string | false | null;
+    minutes: string | null;
+    hours: string | null;
+    dates: string | null;
+    months: string | null;
+    dow: string | null;
+}
+interface ComplexCronProps {
+    cronExpression: string;
+    onChange: (cron: string) => void;
+    language: ioBroker.Languages;
+}
+interface ComplexCronState {
+    extended: boolean;
+    tab: number;
+    cron: string;
+    seconds?: string | false;
+    minutes?: string;
+    hours?: string;
+    dates?: string;
+    months?: string;
+    dow?: string;
+    modes: CronProps;
+}
+export declare class ComplexCron extends Component<ComplexCronProps, ComplexCronState> {
+    constructor(props: ComplexCronProps);
+    static cron2state(cron: string): CronProps;
+    static state2cron(state: ComplexCronState | CronProps): string;
+    recalcCron(): void;
+    onToggle(i: boolean | number, type: CronNames, max: number): void;
+    getDigitsSelector(type: CronNames, max: number): React.JSX.Element[];
+    getPeriodsTab(type: CronNames, max: number): React.JSX.Element | null;
+    static convertCronToText(cron: string, lang: ioBroker.Languages): string;
+    setCronAttr(attr: CronNames, value: string, modes?: CronProps): void;
+    render(): React.JSX.Element;
+}
+export {};