@iobroker/adapter-react-v5 8.0.5 → 8.0.7

package/build/Components/Loader.js

@@ -1,265 +1,29 @@
 /**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ * Copyright 2018-2025 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * MIT License
  *
  */
-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;
-}
-`;
+import React from 'react';
+import { LoaderMV } from './Loaders/MV';
+import { LoaderNW } from './Loaders/NW';
+import { LoaderVendor } from './Loaders/Vendor';
+import { LoaderCommunity } from './Loaders/Community';
+import { LoaderPT } from './Loaders/PT';
 export function Loader(props) {
-    useEffect(() => {
-        if (!window.document.getElementById('loader-iobroker-component')) {
-            const style = window.document.createElement('style');
-            style.setAttribute('id', 'loader-iobroker-component');
-            style.innerHTML = loaderStyles;
-            window.document.head.appendChild(style);
-        }
-    }, []);
-    const size = props.size || 234;
-    const theme = props.themeName || props.theme || props.themeType || 'light';
-    return (React.createElement("div", { className: `logo-back logo-background-${theme}`, style: {
-            backgroundImage: props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
-                ? props.backgroundImage
-                : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
-                    ? `url(${window.loadingBackgroundImage})`
-                    : undefined,
-            backgroundColor: props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
-                ? props.backgroundColor
-                : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
-                    ? window.loadingBackgroundColor
-                    : undefined,
-            backgroundSize: 'cover',
-        } }, window.loadingHideLogo === 'true' ? null : (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: "logo-div", style: { width: size, height: size } },
-            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
-            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
-            React.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
-            React.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
-            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
-            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
-        React.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })))));
+    const vendorPrefix = window.vendorPrefix;
+    if (vendorPrefix === 'PT') {
+        return React.createElement(LoaderPT, { themeType: props.themeType });
+    }
+    if (vendorPrefix === 'MV') {
+        return React.createElement(LoaderMV, { themeType: props.themeType });
+    }
+    if (vendorPrefix === 'NW') {
+        return React.createElement(LoaderNW, { themeType: props.themeType });
+    }
+    if (vendorPrefix && vendorPrefix !== '@@vendorPrefix@@') {
+        return React.createElement(LoaderVendor, { themeType: props.themeType });
+    }
+    return React.createElement(LoaderCommunity, { themeType: props.themeType });
 }
 //# sourceMappingURL=Loader.js.map

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":["/**\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"]}
+{"version":3,"file":"Loader.js","sourceRoot":"./src/","sources":["Components/Loader.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAyBxC,MAAM,UAAU,MAAM,CAAC,KAAkB;IACrC,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC;IACzC,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;QACxB,OAAO,oBAAC,QAAQ,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACpD,CAAC;IACD,IAAI,YAAY,IAAI,YAAY,KAAK,kBAAkB,EAAE,CAAC;QACtD,OAAO,oBAAC,YAAY,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;IACxD,CAAC;IACD,OAAO,oBAAC,eAAe,IAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAI,CAAC;AAC3D,CAAC","sourcesContent":["/**\n * Copyright 2018-2025 Denis Haev (bluefox) <dogafox@gmail.com>\n *\n * MIT License\n *\n */\nimport React from 'react';\nimport type { ThemeName, ThemeType } from '../types';\nimport { LoaderMV } from './Loaders/MV';\nimport { LoaderNW } from './Loaders/NW';\nimport { LoaderVendor } from './Loaders/Vendor';\nimport { LoaderCommunity } from './Loaders/Community';\nimport { LoaderPT } from './Loaders/PT';\n\ndeclare global {\n    interface Window {\n        loadingBackgroundImage: undefined | string;\n        loadingBackgroundColor: undefined | string;\n        loadingHideLogo: undefined | 'true';\n    }\n}\n\nexport interface 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    const vendorPrefix = window.vendorPrefix;\n    if (vendorPrefix === 'PT') {\n        return <LoaderPT themeType={props.themeType} />;\n    }\n    if (vendorPrefix === 'MV') {\n        return <LoaderMV themeType={props.themeType} />;\n    }\n    if (vendorPrefix === 'NW') {\n        return <LoaderNW themeType={props.themeType} />;\n    }\n    if (vendorPrefix && vendorPrefix !== '@@vendorPrefix@@') {\n        return <LoaderVendor themeType={props.themeType} />;\n    }\n    return <LoaderCommunity themeType={props.themeType} />;\n}\n"]}

package/build/Components/Loaders/Community.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ */
+import React from 'react';
+import type { ThemeName, ThemeType } from '../../types';
+declare global {
+    interface Window {
+        loadingBackgroundImage: undefined | string;
+        loadingBackgroundColor: undefined | string;
+        loadingHideLogo: undefined | 'true';
+    }
+}
+interface LoaderProps {
+    /** The size in pixels of this loader. */
+    size?: number;
+    /** The chosen theme type. */
+    themeType?: ThemeType;
+    /** Theme name */
+    themeName?: ThemeName;
+    /** @deprecated Theme name. use themeName instead */
+    theme?: ThemeName;
+    /** Background color */
+    backgroundColor?: string;
+    /** Background image URL */
+    backgroundImage?: string;
+}
+export declare function LoaderCommunity(props: LoaderProps): React.JSX.Element;
+export {};

package/build/Components/Loaders/Community.js

@@ -0,0 +1,265 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ */
+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;
+}
+`;
+export function LoaderCommunity(props) {
+    useEffect(() => {
+        if (!window.document.getElementById('loader-iobroker-component')) {
+            const style = window.document.createElement('style');
+            style.setAttribute('id', 'loader-iobroker-component');
+            style.innerHTML = loaderStyles;
+            window.document.head.appendChild(style);
+        }
+    }, []);
+    const size = props.size || 234;
+    const theme = props.themeName || props.theme || props.themeType || 'light';
+    return (React.createElement("div", { className: `logo-back logo-background-${theme}`, style: {
+            backgroundImage: props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
+                ? props.backgroundImage
+                : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
+                    ? `url(${window.loadingBackgroundImage})`
+                    : undefined,
+            backgroundColor: props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
+                ? props.backgroundColor
+                : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
+                    ? window.loadingBackgroundColor
+                    : undefined,
+            backgroundSize: 'cover',
+        } }, window.loadingHideLogo === 'true' ? null : (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "logo-div", style: { width: size, height: size } },
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
+            React.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
+            React.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
+            React.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
+            React.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
+        React.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })))));
+}
+//# sourceMappingURL=Community.js.map

package/build/Components/Loaders/Community.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Community.js","sourceRoot":"./src/","sources":["Components/Loaders/Community.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\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 LoaderCommunity(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"]}