@iobroker/adapter-react-v5 7.0.1 → 7.1.0

package/Components/Image.js

@@ -1,32 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const IconNoIcon_1 = __importDefault(require("../icons/IconNoIcon"));
 function getElementFromSource(src) {
     const svgContainer = document.createElement('div');
@@ -61,7 +39,10 @@ function serializeAttrs(map) {
     }
     return ret;
 }
-class Image extends react_1.Component {
+/**
+ * A component for displaying an image.
+ */
+class Image extends react_2.Component {
     constructor(props) {
         var _a;
         super(props);
@@ -108,11 +89,9 @@ class Image extends react_1.Component {
             const inner = svg.innerHTML;
             const svgProps = serializeAttrs(svg.attributes);
             svg.remove();
-            return react_1.default.createElement("svg", Object.assign({ className: this.props.className, style: this.state.color ? { color: this.state.color } : {} }, svgProps, { 
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML: { __html: inner } }));
+            return (react_1.default.createElement("svg", Object.assign({ className: this.props.className, style: this.state.color ? { color: this.state.color } : {} }, svgProps, { dangerouslySetInnerHTML: { __html: inner } })));
         }
-        catch (e) {
+        catch (_a) {
             // ignore
         }
         return null;
@@ -131,7 +110,9 @@ class Image extends react_1.Component {
             if (this.state.imgError || !this.state.src) {
                 return react_1.default.createElement(IconNoIcon_1.default, { className: this.props.className });
             }
-            if (Image.REMOTE_SERVER && !this.state.src.startsWith('http://') && !this.state.src.startsWith('https://')) {
+            if (Image.REMOTE_SERVER &&
+                !this.state.src.startsWith('http://') &&
+                !this.state.src.startsWith('https://')) {
                 let src = (this.props.imagePrefix || '') + this.state.src;
                 if (src.startsWith('./')) {
                     src = Image.REMOTE_PREFIX + src.substring(2);
@@ -139,9 +120,9 @@ class Image extends react_1.Component {
                 else if (!src.startsWith('/')) {
                     src = Image.REMOTE_PREFIX + src;
                 }
-                return react_1.default.createElement("img", { className: this.props.className, src: `https://remote-files.iobroker.in${src}`, alt: "", onError: () => (this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })) });
+                return (react_1.default.createElement("img", { className: this.props.className, src: `https://remote-files.iobroker.in${src}`, alt: "", onError: () => this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' }) }));
             }
-            return react_1.default.createElement("img", { className: this.props.className, src: (this.props.imagePrefix || '') + this.state.src, alt: "", onError: () => (this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' })) });
+            return (react_1.default.createElement("img", { className: this.props.className, src: (this.props.imagePrefix || '') + this.state.src, alt: "", onError: () => this.props.showError ? this.setState({ imgError: true }) : this.setState({ src: '' }) }));
         }
         return null;
     }

package/Components/Loader.d.ts

@@ -3,9 +3,9 @@
  *
  * MIT License
  *
- * */
+ */
 import React from 'react';
-import { ThemeName, ThemeType } from '../types';
+import type { ThemeName, ThemeType } from '../types';
 declare global {
     interface Window {
         loadingBackgroundImage: undefined | string;

package/Components/Loader.js

@@ -28,231 +28,231 @@ Object.defineProperty(exports, "__esModule", { value: true });
  *
  * MIT License
  *
- * */
+ */
 const react_1 = __importStar(require("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;
+}
 `;
 function Loader(props) {
     (0, react_1.useEffect)(() => {
@@ -265,23 +265,26 @@ function Loader(props) {
     }, []);
     const size = props.size || 234;
     const theme = props.themeName || props.theme || props.themeType || 'light';
-    return react_1.default.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),
+    return (react_1.default.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_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("div", { className: "logo-div", style: { width: size, height: size } },
-                    react_1.default.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
-                    react_1.default.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
-                    react_1.default.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
-                    react_1.default.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
-                    react_1.default.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
-                    react_1.default.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
-                react_1.default.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })));
+        } }, window.loadingHideLogo === 'true' ? null : (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: "logo-div", style: { width: size, height: size } },
+            react_1.default.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '37%' } }),
+            react_1.default.createElement("div", { className: `logo-top logo-background-${theme}`, style: { left: '57%' } }),
+            react_1.default.createElement("div", { className: `logo-border logo-background-${theme} logo-animate-wait`, style: { borderWidth: size * 0.132 } }),
+            react_1.default.createElement("div", { className: `logo-i logo-animate-color-inside-${theme}` }),
+            react_1.default.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { top: '18%' } }),
+            react_1.default.createElement("div", { className: `logo-i-top logo-animate-color-inside-${theme}`, style: { bottom: '18%' } })),
+        react_1.default.createElement("div", { className: `logo-animate-grow logo-animate-grow-${theme}`, style: { width: size + 11, height: size + 11 } })))));
 }
 exports.default = Loader;

package/Components/Loaders/MV.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ThemeType } from '../../types';
+import type { ThemeType } from '../../types';
 interface LogoProps {
     themeType?: ThemeType;
     size?: number;
@@ -8,5 +8,10 @@ interface LogoProps {
     /** Background image URL */
     backgroundImage?: string;
 }
+/**
+ * Vendor specific loader
+ *
+ * @param props Properties
+ */
 declare function LoaderMV(props: LogoProps): React.JSX.Element;
 export default LoaderMV;