@iobroker/adapter-react-v5 7.4.22 → 7.5.1

package/build/Components/IobUri.js.map

@@ -1 +1 @@
-{"version":3,"file":"IobUri.js","sourceRoot":"./src/","sources":["Components/IobUri.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Connection } from '@/index';\n\nexport type IobUri = string;\nexport type IobUriType = 'object' | 'state' | 'file' | 'http' | 'base64';\n\nexport type IobUriParsed = { type: IobUriType; address: string; path?: string };\n\nexport function iobUriToString(uri: IobUriParsed): IobUri {\n    if (uri.type === 'object') {\n        return `iobobject://${uri.address}/${uri.path || ''}`;\n    }\n    if (uri.type === 'state') {\n        return `iobstate://${uri.address}`;\n    }\n    if (uri.type === 'file') {\n        return `iobfile://${uri.address}/${uri.path || ''}`;\n    }\n    if (uri.type === 'http') {\n        return uri.address;\n    }\n    if (uri.path?.includes('/')) {\n        return `iobfile://${uri.address}/${uri.path}`;\n    }\n    if (uri.path) {\n        return `iobobject://${uri.address}/${uri.path}`;\n    }\n    return `iobstate://${uri.address}`;\n}\n\n/** Parse ioBroker URI */\nexport function iobUriParse(uri: string): IobUriParsed {\n    const result: IobUriParsed = {\n        type: 'object',\n        address: '',\n    };\n    if (uri.startsWith('iobobject://')) {\n        result.type = 'object';\n        uri = uri.replace('iobobject://', '');\n        const parts = uri.split('/');\n        result.address = parts[0];\n        result.path = parts[1]; // native.schemas.myObject\n    } else if (uri.startsWith('iobstate://')) {\n        result.type = 'state';\n        uri = uri.replace('iobstate://', '');\n        const parts = uri.split('/');\n        result.address = parts[0];\n        result.path = parts[1]; // val, ts, lc, from, q, ...\n    } else if (uri.startsWith('iobfile://')) {\n        result.type = 'file';\n        uri = uri.replace('iobfile://', '');\n        const parts = uri.split('/');\n        result.address = parts.shift();\n        result.path = parts.join('/'); // main/img/hello.png\n    } else if (uri.startsWith('http://') || uri.startsWith('https://')) {\n        result.type = 'http';\n        result.address = uri; // https://googlw.com/path/uri?lakds=7889\n    } else if (uri.startsWith('data:')) {\n        // data:image/jpeg;base64,\n        result.type = 'base64';\n        result.address = uri; // data:image/jpeg;base64,...\n    } else {\n        // no protocol provided\n        const parts = uri.split('/');\n        if (parts.length === 2) {\n            result.address = parts[0];\n            result.path = parts[1];\n            if (result.path.includes('.')) {\n                result.type = 'object';\n            } else if (result.path) {\n                if (\n                    result.path === 'val' ||\n                    result.path === 'q' ||\n                    result.path === 'ack' ||\n                    result.path === 'ts' ||\n                    result.path === 'lc' ||\n                    result.path === 'from' ||\n                    result.path === 'user' ||\n                    result.path === 'expire' ||\n                    result.path === 'c'\n                ) {\n                    result.type = 'state';\n                } else if (\n                    result.path === 'common' ||\n                    result.path === 'native' ||\n                    result.path === 'from' ||\n                    result.path === 'acl' ||\n                    result.path === 'type'\n                ) {\n                    result.type = 'object';\n                } else {\n                    throw new Error(`Unknown path: ${result.path}`);\n                }\n            } else {\n                result.type = 'state';\n            }\n        } else if (parts.length === 1) {\n            result.address = parts[0];\n            result.type = 'state';\n        } else {\n            // it is a file\n            result.address = parts.shift();\n            result.type = 'file';\n            result.path = parts.join('/');\n        }\n    }\n    return result;\n}\n\nexport function getAttrInObject(\n    obj: Record<string, any> | null | undefined,\n    path: string[] | undefined,\n    _position?: number,\n): any {\n    _position = _position || 0;\n    if (obj === undefined || obj === null || !path) {\n        return obj;\n    }\n    if (path.length - 1 === _position) {\n        return obj[path[_position]];\n    }\n    if (typeof obj === 'object') {\n        return getAttrInObject(obj[path[_position]], path, _position + 1);\n    }\n    return undefined;\n}\n\nexport function setAttrInObject(\n    obj: Record<string, any> | null | undefined,\n    path: string[] | undefined,\n    value: any,\n    _position?: number,\n): any {\n    _position = _position || 0;\n    if (obj === undefined || obj === null || !path) {\n        return value;\n    }\n    if (path.length - 1 === _position) {\n        obj[path[_position]] = value;\n        return obj;\n    }\n    if (typeof obj === 'object') {\n        return setAttrInObject(obj[path[_position]], path, value, _position + 1);\n    }\n}\n\nexport async function iobUriRead(uri: IobUri | IobUriParsed, socket: Connection): Promise<any> {\n    if (typeof uri === 'string') {\n        uri = iobUriParse(uri);\n    }\n    if (uri.type === 'object') {\n        const obj: ioBroker.Object | null | undefined = await socket.getObject(uri.address);\n        return getAttrInObject(obj, uri.path?.split('.'));\n    }\n    if (uri.type === 'state') {\n        const state: ioBroker.State | null | undefined = await socket.getState(uri.address);\n        if (!uri.path) {\n            return state;\n        }\n        return (state as Record<string, any>)?.[uri.path];\n    }\n    if (uri.type === 'file') {\n        return await socket.readFile(uri.address, uri.path, true);\n    }\n    if (uri.type === 'http') {\n        return fetch(uri.address)\n            .then(response => response.text())\n            .then(text => {\n                if ((text.startsWith('{') && text.endsWith('}')) || (text.startsWith('[') && text.endsWith(']'))) {\n                    try {\n                        return JSON.parse(text);\n                    } catch {\n                        // ignore\n                    }\n                }\n                return text;\n            });\n    }\n    throw new Error(`Unknown type: ${uri.type}`);\n}\n"]}
+{"version":3,"file":"IobUri.js","sourceRoot":"./src/","sources":["Components/IobUri.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Connection } from '@/index';\r\n\r\nexport type IobUri = string;\r\nexport type IobUriType = 'object' | 'state' | 'file' | 'http' | 'base64';\r\n\r\nexport type IobUriParsed = { type: IobUriType; address: string; path?: string };\r\n\r\nexport function iobUriToString(uri: IobUriParsed): IobUri {\r\n    if (uri.type === 'object') {\r\n        return `iobobject://${uri.address}/${uri.path || ''}`;\r\n    }\r\n    if (uri.type === 'state') {\r\n        return `iobstate://${uri.address}`;\r\n    }\r\n    if (uri.type === 'file') {\r\n        return `iobfile://${uri.address}/${uri.path || ''}`;\r\n    }\r\n    if (uri.type === 'http') {\r\n        return uri.address;\r\n    }\r\n    if (uri.path?.includes('/')) {\r\n        return `iobfile://${uri.address}/${uri.path}`;\r\n    }\r\n    if (uri.path) {\r\n        return `iobobject://${uri.address}/${uri.path}`;\r\n    }\r\n    return `iobstate://${uri.address}`;\r\n}\r\n\r\n/** Parse ioBroker URI */\r\nexport function iobUriParse(uri: string): IobUriParsed {\r\n    const result: IobUriParsed = {\r\n        type: 'object',\r\n        address: '',\r\n    };\r\n    if (uri.startsWith('iobobject://')) {\r\n        result.type = 'object';\r\n        uri = uri.replace('iobobject://', '');\r\n        const parts = uri.split('/');\r\n        result.address = parts[0];\r\n        result.path = parts[1]; // native.schemas.myObject\r\n    } else if (uri.startsWith('iobstate://')) {\r\n        result.type = 'state';\r\n        uri = uri.replace('iobstate://', '');\r\n        const parts = uri.split('/');\r\n        result.address = parts[0];\r\n        result.path = parts[1]; // val, ts, lc, from, q, ...\r\n    } else if (uri.startsWith('iobfile://')) {\r\n        result.type = 'file';\r\n        uri = uri.replace('iobfile://', '');\r\n        const parts = uri.split('/');\r\n        result.address = parts.shift();\r\n        result.path = parts.join('/'); // main/img/hello.png\r\n    } else if (uri.startsWith('http://') || uri.startsWith('https://')) {\r\n        result.type = 'http';\r\n        result.address = uri; // https://googlw.com/path/uri?lakds=7889\r\n    } else if (uri.startsWith('data:')) {\r\n        // data:image/jpeg;base64,\r\n        result.type = 'base64';\r\n        result.address = uri; // data:image/jpeg;base64,...\r\n    } else {\r\n        // no protocol provided\r\n        const parts = uri.split('/');\r\n        if (parts.length === 2) {\r\n            result.address = parts[0];\r\n            result.path = parts[1];\r\n            if (result.path.includes('.')) {\r\n                result.type = 'object';\r\n            } else if (result.path) {\r\n                if (\r\n                    result.path === 'val' ||\r\n                    result.path === 'q' ||\r\n                    result.path === 'ack' ||\r\n                    result.path === 'ts' ||\r\n                    result.path === 'lc' ||\r\n                    result.path === 'from' ||\r\n                    result.path === 'user' ||\r\n                    result.path === 'expire' ||\r\n                    result.path === 'c'\r\n                ) {\r\n                    result.type = 'state';\r\n                } else if (\r\n                    result.path === 'common' ||\r\n                    result.path === 'native' ||\r\n                    result.path === 'from' ||\r\n                    result.path === 'acl' ||\r\n                    result.path === 'type'\r\n                ) {\r\n                    result.type = 'object';\r\n                } else {\r\n                    throw new Error(`Unknown path: ${result.path}`);\r\n                }\r\n            } else {\r\n                result.type = 'state';\r\n            }\r\n        } else if (parts.length === 1) {\r\n            result.address = parts[0];\r\n            result.type = 'state';\r\n        } else {\r\n            // it is a file\r\n            result.address = parts.shift();\r\n            result.type = 'file';\r\n            result.path = parts.join('/');\r\n        }\r\n    }\r\n    return result;\r\n}\r\n\r\nexport function getAttrInObject(\r\n    obj: Record<string, any> | null | undefined,\r\n    path: string[] | undefined,\r\n    _position?: number,\r\n): any {\r\n    _position = _position || 0;\r\n    if (obj === undefined || obj === null || !path) {\r\n        return obj;\r\n    }\r\n    if (path.length - 1 === _position) {\r\n        return obj[path[_position]];\r\n    }\r\n    if (typeof obj === 'object') {\r\n        return getAttrInObject(obj[path[_position]], path, _position + 1);\r\n    }\r\n    return undefined;\r\n}\r\n\r\nexport function setAttrInObject(\r\n    obj: Record<string, any> | null | undefined,\r\n    path: string[] | undefined,\r\n    value: any,\r\n    _position?: number,\r\n): any {\r\n    _position = _position || 0;\r\n    if (obj === undefined || obj === null || !path) {\r\n        return value;\r\n    }\r\n    if (path.length - 1 === _position) {\r\n        obj[path[_position]] = value;\r\n        return obj;\r\n    }\r\n    if (typeof obj === 'object') {\r\n        return setAttrInObject(obj[path[_position]], path, value, _position + 1);\r\n    }\r\n}\r\n\r\nexport async function iobUriRead(uri: IobUri | IobUriParsed, socket: Connection): Promise<any> {\r\n    if (typeof uri === 'string') {\r\n        uri = iobUriParse(uri);\r\n    }\r\n    if (uri.type === 'object') {\r\n        const obj: ioBroker.Object | null | undefined = await socket.getObject(uri.address);\r\n        return getAttrInObject(obj, uri.path?.split('.'));\r\n    }\r\n    if (uri.type === 'state') {\r\n        const state: ioBroker.State | null | undefined = await socket.getState(uri.address);\r\n        if (!uri.path) {\r\n            return state;\r\n        }\r\n        return (state as Record<string, any>)?.[uri.path];\r\n    }\r\n    if (uri.type === 'file') {\r\n        return await socket.readFile(uri.address, uri.path, true);\r\n    }\r\n    if (uri.type === 'http') {\r\n        return fetch(uri.address)\r\n            .then(response => response.text())\r\n            .then(text => {\r\n                if ((text.startsWith('{') && text.endsWith('}')) || (text.startsWith('[') && text.endsWith(']'))) {\r\n                    try {\r\n                        return JSON.parse(text);\r\n                    } catch {\r\n                        // ignore\r\n                    }\r\n                }\r\n                return text;\r\n            });\r\n    }\r\n    throw new Error(`Unknown type: ${uri.type}`);\r\n}\r\n"]}

package/build/Components/Loader.js

@@ -5,229 +5,229 @@
  *
  */
 import React, { useEffect } from 'react';
-const loaderStyles = `
-/**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
- *
- * MIT License
- *
- **/
-
-.logo-background-light, .logo-background-colored {
-    background: white;
-}
-.logo-background-dark, .logo-background-blue {
-    background: black;
-}
-.logo-div {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
-    overflow: hidden;
-    border-radius: 50%;
-    z-index: 2;
-}
-.logo-border {
-    /*border-color: #164477;*/
-    border-top-color: #3399CC;
-    border-left-color: #164477;
-    border-bottom-color: #164477;
-    border-right-color: #164477;
-    border-radius: 50%;
-    border-style: solid;
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-}
-.logo-top {
-    position: absolute;
-    width: 4.5%;
-    height: 16%;
-    top: 0;
-    z-index: 2;
-}
-.logo-i {
-    position: absolute;
-    width: 14.5%;
-    height: 60%;
-    top: 20%;
-    left: 42%;
-    background: #3399CC;
-}
-.logo-i-top {
-    position: absolute;
-    width: 14.5%;
-    height: 4%;
-    left: 42%;
-    background: #3399CC;
-    border-radius: 100%;
-}
-.logo-back {
-    width: 100%;
-    height: 100%;
-    z-index: 0;
-    overflow: hidden;
-}
-@keyframes logo-grow {
-    0% {
-        width: 230px;
-        height: 230px;
-        transform: translate(-50%,-50%) scale(1);
-        opacity: 1
-    }
-    99% {
-        width: 230px;
-        height: 230px;
-        transform: translate(-50%,-50%) scale(10);
-        opacity: 0;
-    }
-    100% {
-        width: 0;
-        height: 0;
-        opacity: 0;
-    }
-}
-@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
-@keyframes logo-color-inside-light {
-    0% {
-        background: #FEFEFE;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-dark {
-    0% {
-        background: #030303;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-colored {
-    0% {
-        background: #FEFEFE;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-@keyframes logo-color-inside-blue {
-    0% {
-        background: #030303;
-    }
-    100% {
-        background: #3399CC;
-    }
-}
-
-@keyframes logo-color-outside-light {
-    0% {
-        border-color: #FEFEFE;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-dark  {
-    0% {
-        border-color: #040404;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-colored {
-    0% {
-        border-color: #FEFEFE;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-@keyframes logo-color-outside-blue  {
-    0% {
-        border-color: #040404;
-    }
-    100% {
-        border-top-color: #3399CC;
-        border-left-color: #164477;
-        border-bottom-color: #164477;
-        border-right-color: #164477;
-    }
-}
-
-.logo-animate-wait {
-    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
-}
-
-.logo-animate-grow-light {
-    background: #DDD;
-}
-.logo-animate-grow-dark {
-    background: #1d1d1d;
-}
-.logo-animate-grow-colored {
-    background: #DDD;
-}
-.logo-animate-grow-blue {
-    background: #1d1d1d;
-}
-
-.logo-animate-grow {
-    display: inline-block;
-    text-align: center;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    -ms-transform: translateX(-50%) translateY(-50%);
-    -webkit-transform: translate(-50%,-50%);
-    transform: translate(-50%,-50%);
-    width: 245px;
-    height: 245px;
-    border-radius: 50%;
-    position: absolute;
-    animation: logo-grow 1s 1 ease forwards;
-}
-
-.logo-animate-color-inside-light {
-    animation: logo-color-inside-light 2.5s;
-}
-.logo-animate-color-inside-dark {
-    animation: logo-color-inside-dark 2.5s;
-}
-.logo-animate-color-inside-colored {
-    animation: logo-color-inside-colored 2.5s;
-}
-.logo-animate-color-inside-blue {
-    animation: logo-color-inside-blue 2.5s;
-}
-
-.logo-animate-color-outside-light {
-    animation: logo-color-outside-light 1.5s;
-}
-.logo-animate-color-outside-dark {
-    animation: logo-color-outside-dark 1.5s;
-}
-.logo-animate-color-outside-colored {
-    animation: logo-color-outside-colored 1.5s;
-}
-.logo-animate-color-outside-blue {
-    animation: logo-color-outside-blue 1.5s;
-}
+const loaderStyles = `
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ **/
+
+.logo-background-light, .logo-background-colored {
+    background: white;
+}
+.logo-background-dark, .logo-background-blue {
+    background: black;
+}
+.logo-div {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    overflow: hidden;
+    border-radius: 50%;
+    z-index: 2;
+}
+.logo-border {
+    /*border-color: #164477;*/
+    border-top-color: #3399CC;
+    border-left-color: #164477;
+    border-bottom-color: #164477;
+    border-right-color: #164477;
+    border-radius: 50%;
+    border-style: solid;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+}
+.logo-top {
+    position: absolute;
+    width: 4.5%;
+    height: 16%;
+    top: 0;
+    z-index: 2;
+}
+.logo-i {
+    position: absolute;
+    width: 14.5%;
+    height: 60%;
+    top: 20%;
+    left: 42%;
+    background: #3399CC;
+}
+.logo-i-top {
+    position: absolute;
+    width: 14.5%;
+    height: 4%;
+    left: 42%;
+    background: #3399CC;
+    border-radius: 100%;
+}
+.logo-back {
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    overflow: hidden;
+}
+@keyframes logo-grow {
+    0% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(1);
+        opacity: 1
+    }
+    99% {
+        width: 230px;
+        height: 230px;
+        transform: translate(-50%,-50%) scale(10);
+        opacity: 0;
+    }
+    100% {
+        width: 0;
+        height: 0;
+        opacity: 0;
+    }
+}
+@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
+@keyframes logo-color-inside-light {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-dark {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-colored {
+    0% {
+        background: #FEFEFE;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+@keyframes logo-color-inside-blue {
+    0% {
+        background: #030303;
+    }
+    100% {
+        background: #3399CC;
+    }
+}
+
+@keyframes logo-color-outside-light {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-dark  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-colored {
+    0% {
+        border-color: #FEFEFE;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+@keyframes logo-color-outside-blue  {
+    0% {
+        border-color: #040404;
+    }
+    100% {
+        border-top-color: #3399CC;
+        border-left-color: #164477;
+        border-bottom-color: #164477;
+        border-right-color: #164477;
+    }
+}
+
+.logo-animate-wait {
+    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
+}
+
+.logo-animate-grow-light {
+    background: #DDD;
+}
+.logo-animate-grow-dark {
+    background: #1d1d1d;
+}
+.logo-animate-grow-colored {
+    background: #DDD;
+}
+.logo-animate-grow-blue {
+    background: #1d1d1d;
+}
+
+.logo-animate-grow {
+    display: inline-block;
+    text-align: center;
+    z-index: 1;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translate(-50%,-50%);
+    transform: translate(-50%,-50%);
+    width: 245px;
+    height: 245px;
+    border-radius: 50%;
+    position: absolute;
+    animation: logo-grow 1s 1 ease forwards;
+}
+
+.logo-animate-color-inside-light {
+    animation: logo-color-inside-light 2.5s;
+}
+.logo-animate-color-inside-dark {
+    animation: logo-color-inside-dark 2.5s;
+}
+.logo-animate-color-inside-colored {
+    animation: logo-color-inside-colored 2.5s;
+}
+.logo-animate-color-inside-blue {
+    animation: logo-color-inside-blue 2.5s;
+}
+
+.logo-animate-color-outside-light {
+    animation: logo-color-outside-light 1.5s;
+}
+.logo-animate-color-outside-dark {
+    animation: logo-color-outside-dark 1.5s;
+}
+.logo-animate-color-outside-colored {
+    animation: logo-color-outside-colored 1.5s;
+}
+.logo-animate-color-outside-blue {
+    animation: logo-color-outside-blue 1.5s;
+}
 `;
 export function Loader(props) {
     useEffect(() => {

package/build/Components/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"./src/","sources":["Components/Loader.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n */\nimport React, { useEffect } from 'react';\nimport type { ThemeName, ThemeType } from '../types';\n// import './loader.css'\n\ndeclare global {\n    interface Window {\n        loadingBackgroundImage: undefined | string;\n        loadingBackgroundColor: undefined | string;\n        loadingHideLogo: undefined | 'true';\n    }\n}\n\nconst loaderStyles = `\n/**\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n **/\n\n.logo-background-light, .logo-background-colored {\n    background: white;\n}\n.logo-background-dark, .logo-background-blue {\n    background: black;\n}\n.logo-div {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    overflow: hidden;\n    border-radius: 50%;\n    z-index: 2;\n}\n.logo-border {\n    /*border-color: #164477;*/\n    border-top-color: #3399CC;\n    border-left-color: #164477;\n    border-bottom-color: #164477;\n    border-right-color: #164477;\n    border-radius: 50%;\n    border-style: solid;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    position: absolute;\n}\n.logo-top {\n    position: absolute;\n    width: 4.5%;\n    height: 16%;\n    top: 0;\n    z-index: 2;\n}\n.logo-i {\n    position: absolute;\n    width: 14.5%;\n    height: 60%;\n    top: 20%;\n    left: 42%;\n    background: #3399CC;\n}\n.logo-i-top {\n    position: absolute;\n    width: 14.5%;\n    height: 4%;\n    left: 42%;\n    background: #3399CC;\n    border-radius: 100%;\n}\n.logo-back {\n    width: 100%;\n    height: 100%;\n    z-index: 0;\n    overflow: hidden;\n}\n@keyframes logo-grow {\n    0% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(1);\n        opacity: 1\n    }\n    99% {\n        width: 230px;\n        height: 230px;\n        transform: translate(-50%,-50%) scale(10);\n        opacity: 0;\n    }\n    100% {\n        width: 0;\n        height: 0;\n        opacity: 0;\n    }\n}\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\n@keyframes logo-color-inside-light {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-dark {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-colored {\n    0% {\n        background: #FEFEFE;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n@keyframes logo-color-inside-blue {\n    0% {\n        background: #030303;\n    }\n    100% {\n        background: #3399CC;\n    }\n}\n\n@keyframes logo-color-outside-light {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-dark  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-colored {\n    0% {\n        border-color: #FEFEFE;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n@keyframes logo-color-outside-blue  {\n    0% {\n        border-color: #040404;\n    }\n    100% {\n        border-top-color: #3399CC;\n        border-left-color: #164477;\n        border-bottom-color: #164477;\n        border-right-color: #164477;\n    }\n}\n\n.logo-animate-wait {\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\n}\n\n.logo-animate-grow-light {\n    background: #DDD;\n}\n.logo-animate-grow-dark {\n    background: #1d1d1d;\n}\n.logo-animate-grow-colored {\n    background: #DDD;\n}\n.logo-animate-grow-blue {\n    background: #1d1d1d;\n}\n\n.logo-animate-grow {\n    display: inline-block;\n    text-align: center;\n    z-index: 1;\n    top: 50%;\n    left: 50%;\n    -ms-transform: translateX(-50%) translateY(-50%);\n    -webkit-transform: translate(-50%,-50%);\n    transform: translate(-50%,-50%);\n    width: 245px;\n    height: 245px;\n    border-radius: 50%;\n    position: absolute;\n    animation: logo-grow 1s 1 ease forwards;\n}\n\n.logo-animate-color-inside-light {\n    animation: logo-color-inside-light 2.5s;\n}\n.logo-animate-color-inside-dark {\n    animation: logo-color-inside-dark 2.5s;\n}\n.logo-animate-color-inside-colored {\n    animation: logo-color-inside-colored 2.5s;\n}\n.logo-animate-color-inside-blue {\n    animation: logo-color-inside-blue 2.5s;\n}\n\n.logo-animate-color-outside-light {\n    animation: logo-color-outside-light 1.5s;\n}\n.logo-animate-color-outside-dark {\n    animation: logo-color-outside-dark 1.5s;\n}\n.logo-animate-color-outside-colored {\n    animation: logo-color-outside-colored 1.5s;\n}\n.logo-animate-color-outside-blue {\n    animation: logo-color-outside-blue 1.5s;\n}\n`;\n\ninterface LoaderProps {\n    /** The size in pixels of this loader. */\n    size?: number;\n    /** The chosen theme type. */\n    themeType?: ThemeType;\n    /** Theme name */\n    themeName?: ThemeName;\n    /** @deprecated Theme name. use themeName instead */\n    theme?: ThemeName;\n    /** Background color */\n    backgroundColor?: string;\n    /** Background image URL */\n    backgroundImage?: string;\n}\n\nexport function Loader(props: LoaderProps): React.JSX.Element {\n    useEffect(() => {\n        if (!window.document.getElementById('loader-iobroker-component')) {\n            const style = window.document.createElement('style');\n            style.setAttribute('id', 'loader-iobroker-component');\n            style.innerHTML = loaderStyles;\n            window.document.head.appendChild(style);\n        }\n    }, []);\n\n    const size = props.size || 234;\n    const theme = props.themeName || props.theme || props.themeType || 'light';\n    return (\n        <div\n            className={`logo-back logo-background-${theme}`}\n            style={{\n                backgroundImage:\n                    props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\n                        ? props.backgroundImage\n                        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\n                          ? `url(${window.loadingBackgroundImage})`\n                          : undefined,\n                backgroundColor:\n                    props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\n                        ? props.backgroundColor\n                        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\n                          ? window.loadingBackgroundColor\n                          : undefined,\n                backgroundSize: 'cover',\n            }}\n        >\n            {window.loadingHideLogo === 'true' ? null : (\n                <>\n                    <div\n                        className=\"logo-div\"\n                        style={{ width: size, height: size }}\n                    >\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '37%' }}\n                        />\n                        <div\n                            className={`logo-top logo-background-${theme}`}\n                            style={{ left: '57%' }}\n                        />\n                        <div\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\n                            style={{ borderWidth: size * 0.132 }}\n                        />\n                        <div className={`logo-i logo-animate-color-inside-${theme}`} />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ top: '18%' }}\n                        />\n                        <div\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\n                            style={{ bottom: '18%' }}\n                        />\n                    </div>\n                    <div\n                        className={`logo-animate-grow logo-animate-grow-${theme}`}\n                        style={{ width: size + 11, height: size + 11 }}\n                    />\n                </>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"Loader.js","sourceRoot":"./src/","sources":["Components/Loader.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\r\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\r\n *\r\n * MIT License\r\n *\r\n */\r\nimport React, { useEffect } from 'react';\r\nimport type { ThemeName, ThemeType } from '../types';\r\n// import './loader.css'\r\n\r\ndeclare global {\r\n    interface Window {\r\n        loadingBackgroundImage: undefined | string;\r\n        loadingBackgroundColor: undefined | string;\r\n        loadingHideLogo: undefined | 'true';\r\n    }\r\n}\r\n\r\nconst loaderStyles = `\r\n/**\r\n * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>\r\n *\r\n * MIT License\r\n *\r\n **/\r\n\r\n.logo-background-light, .logo-background-colored {\r\n    background: white;\r\n}\r\n.logo-background-dark, .logo-background-blue {\r\n    background: black;\r\n}\r\n.logo-div {\r\n    position: absolute;\r\n    top: 50%;\r\n    left: 50%;\r\n    -ms-transform: translateX(-50%) translateY(-50%);\r\n    -webkit-transform: translate(-50%,-50%);\r\n    transform: translate(-50%,-50%);\r\n    overflow: hidden;\r\n    border-radius: 50%;\r\n    z-index: 2;\r\n}\r\n.logo-border {\r\n    /*border-color: #164477;*/\r\n    border-top-color: #3399CC;\r\n    border-left-color: #164477;\r\n    border-bottom-color: #164477;\r\n    border-right-color: #164477;\r\n    border-radius: 50%;\r\n    border-style: solid;\r\n    box-sizing: border-box;\r\n    width: 100%;\r\n    height: 100%;\r\n    position: absolute;\r\n}\r\n.logo-top {\r\n    position: absolute;\r\n    width: 4.5%;\r\n    height: 16%;\r\n    top: 0;\r\n    z-index: 2;\r\n}\r\n.logo-i {\r\n    position: absolute;\r\n    width: 14.5%;\r\n    height: 60%;\r\n    top: 20%;\r\n    left: 42%;\r\n    background: #3399CC;\r\n}\r\n.logo-i-top {\r\n    position: absolute;\r\n    width: 14.5%;\r\n    height: 4%;\r\n    left: 42%;\r\n    background: #3399CC;\r\n    border-radius: 100%;\r\n}\r\n.logo-back {\r\n    width: 100%;\r\n    height: 100%;\r\n    z-index: 0;\r\n    overflow: hidden;\r\n}\r\n@keyframes logo-grow {\r\n    0% {\r\n        width: 230px;\r\n        height: 230px;\r\n        transform: translate(-50%,-50%) scale(1);\r\n        opacity: 1\r\n    }\r\n    99% {\r\n        width: 230px;\r\n        height: 230px;\r\n        transform: translate(-50%,-50%) scale(10);\r\n        opacity: 0;\r\n    }\r\n    100% {\r\n        width: 0;\r\n        height: 0;\r\n        opacity: 0;\r\n    }\r\n}\r\n@keyframes logo-spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }\r\n@keyframes logo-color-inside-light {\r\n    0% {\r\n        background: #FEFEFE;\r\n    }\r\n    100% {\r\n        background: #3399CC;\r\n    }\r\n}\r\n@keyframes logo-color-inside-dark {\r\n    0% {\r\n        background: #030303;\r\n    }\r\n    100% {\r\n        background: #3399CC;\r\n    }\r\n}\r\n@keyframes logo-color-inside-colored {\r\n    0% {\r\n        background: #FEFEFE;\r\n    }\r\n    100% {\r\n        background: #3399CC;\r\n    }\r\n}\r\n@keyframes logo-color-inside-blue {\r\n    0% {\r\n        background: #030303;\r\n    }\r\n    100% {\r\n        background: #3399CC;\r\n    }\r\n}\r\n\r\n@keyframes logo-color-outside-light {\r\n    0% {\r\n        border-color: #FEFEFE;\r\n    }\r\n    100% {\r\n        border-top-color: #3399CC;\r\n        border-left-color: #164477;\r\n        border-bottom-color: #164477;\r\n        border-right-color: #164477;\r\n    }\r\n}\r\n@keyframes logo-color-outside-dark  {\r\n    0% {\r\n        border-color: #040404;\r\n    }\r\n    100% {\r\n        border-top-color: #3399CC;\r\n        border-left-color: #164477;\r\n        border-bottom-color: #164477;\r\n        border-right-color: #164477;\r\n    }\r\n}\r\n@keyframes logo-color-outside-colored {\r\n    0% {\r\n        border-color: #FEFEFE;\r\n    }\r\n    100% {\r\n        border-top-color: #3399CC;\r\n        border-left-color: #164477;\r\n        border-bottom-color: #164477;\r\n        border-right-color: #164477;\r\n    }\r\n}\r\n@keyframes logo-color-outside-blue  {\r\n    0% {\r\n        border-color: #040404;\r\n    }\r\n    100% {\r\n        border-top-color: #3399CC;\r\n        border-left-color: #164477;\r\n        border-bottom-color: #164477;\r\n        border-right-color: #164477;\r\n    }\r\n}\r\n\r\n.logo-animate-wait {\r\n    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;\r\n}\r\n\r\n.logo-animate-grow-light {\r\n    background: #DDD;\r\n}\r\n.logo-animate-grow-dark {\r\n    background: #1d1d1d;\r\n}\r\n.logo-animate-grow-colored {\r\n    background: #DDD;\r\n}\r\n.logo-animate-grow-blue {\r\n    background: #1d1d1d;\r\n}\r\n\r\n.logo-animate-grow {\r\n    display: inline-block;\r\n    text-align: center;\r\n    z-index: 1;\r\n    top: 50%;\r\n    left: 50%;\r\n    -ms-transform: translateX(-50%) translateY(-50%);\r\n    -webkit-transform: translate(-50%,-50%);\r\n    transform: translate(-50%,-50%);\r\n    width: 245px;\r\n    height: 245px;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    animation: logo-grow 1s 1 ease forwards;\r\n}\r\n\r\n.logo-animate-color-inside-light {\r\n    animation: logo-color-inside-light 2.5s;\r\n}\r\n.logo-animate-color-inside-dark {\r\n    animation: logo-color-inside-dark 2.5s;\r\n}\r\n.logo-animate-color-inside-colored {\r\n    animation: logo-color-inside-colored 2.5s;\r\n}\r\n.logo-animate-color-inside-blue {\r\n    animation: logo-color-inside-blue 2.5s;\r\n}\r\n\r\n.logo-animate-color-outside-light {\r\n    animation: logo-color-outside-light 1.5s;\r\n}\r\n.logo-animate-color-outside-dark {\r\n    animation: logo-color-outside-dark 1.5s;\r\n}\r\n.logo-animate-color-outside-colored {\r\n    animation: logo-color-outside-colored 1.5s;\r\n}\r\n.logo-animate-color-outside-blue {\r\n    animation: logo-color-outside-blue 1.5s;\r\n}\r\n`;\r\n\r\ninterface LoaderProps {\r\n    /** The size in pixels of this loader. */\r\n    size?: number;\r\n    /** The chosen theme type. */\r\n    themeType?: ThemeType;\r\n    /** Theme name */\r\n    themeName?: ThemeName;\r\n    /** @deprecated Theme name. use themeName instead */\r\n    theme?: ThemeName;\r\n    /** Background color */\r\n    backgroundColor?: string;\r\n    /** Background image URL */\r\n    backgroundImage?: string;\r\n}\r\n\r\nexport function Loader(props: LoaderProps): React.JSX.Element {\r\n    useEffect(() => {\r\n        if (!window.document.getElementById('loader-iobroker-component')) {\r\n            const style = window.document.createElement('style');\r\n            style.setAttribute('id', 'loader-iobroker-component');\r\n            style.innerHTML = loaderStyles;\r\n            window.document.head.appendChild(style);\r\n        }\r\n    }, []);\r\n\r\n    const size = props.size || 234;\r\n    const theme = props.themeName || props.theme || props.themeType || 'light';\r\n    return (\r\n        <div\r\n            className={`logo-back logo-background-${theme}`}\r\n            style={{\r\n                backgroundImage:\r\n                    props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\r\n                        ? props.backgroundImage\r\n                        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\r\n                          ? `url(${window.loadingBackgroundImage})`\r\n                          : undefined,\r\n                backgroundColor:\r\n                    props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\r\n                        ? props.backgroundColor\r\n                        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\r\n                          ? window.loadingBackgroundColor\r\n                          : undefined,\r\n                backgroundSize: 'cover',\r\n            }}\r\n        >\r\n            {window.loadingHideLogo === 'true' ? null : (\r\n                <>\r\n                    <div\r\n                        className=\"logo-div\"\r\n                        style={{ width: size, height: size }}\r\n                    >\r\n                        <div\r\n                            className={`logo-top logo-background-${theme}`}\r\n                            style={{ left: '37%' }}\r\n                        />\r\n                        <div\r\n                            className={`logo-top logo-background-${theme}`}\r\n                            style={{ left: '57%' }}\r\n                        />\r\n                        <div\r\n                            className={`logo-border logo-background-${theme} logo-animate-wait`}\r\n                            style={{ borderWidth: size * 0.132 }}\r\n                        />\r\n                        <div className={`logo-i logo-animate-color-inside-${theme}`} />\r\n                        <div\r\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\r\n                            style={{ top: '18%' }}\r\n                        />\r\n                        <div\r\n                            className={`logo-i-top logo-animate-color-inside-${theme}`}\r\n                            style={{ bottom: '18%' }}\r\n                        />\r\n                    </div>\r\n                    <div\r\n                        className={`logo-animate-grow logo-animate-grow-${theme}`}\r\n                        style={{ width: size + 11, height: size + 11 }}\r\n                    />\r\n                </>\r\n            )}\r\n        </div>\r\n    );\r\n}\r\n"]}