npm - @iobroker/gui-components - Versions diffs - 10.3.14 → 10.3.15 - Mend

@iobroker/gui-components 10.3.14 → 10.3.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

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

@@ -1,8 +1,13 @@
 /**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ * Copyright 2018-2026 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * MIT License
  *
+ * Loader of the community edition: the ioBroker mark is a power button, so the loader switches ioBroker on.
+ * 1. Switch on: the top of the "i" lights up, the ring draws itself from there to both sides, the stem grows.
+ * 2. Wait: light runs through the ring, devices on an orbit send data packets into it.
+ * 3. Open (only with `done`): the devices gather in the ring, the ring flashes and a circle opens from the centre.
+ * Only SVG and CSS, no JavaScript timer. The previous loader is `LoaderCommunityLegacy`.
  */
 import React from 'react';
 import type { ThemeName, ThemeType } from '../../types';
@@ -14,7 +19,7 @@ declare global {
     }
 }
 interface LoaderProps {
-    /** The size in pixels of this loader. */
+    /** Width of the mark in pixels (default 210); on small screens it shrinks to 30% of the shorter side. */
     size?: number;
     /** The chosen theme type. */
     themeType?: ThemeType;
@@ -26,6 +31,12 @@ interface LoaderProps {
     backgroundColor?: string;
     /** Background image URL */
     backgroundImage?: string;
+    /** Optional line below the mark, e.g. the current loading step. Shown in capitals with a leading "//". */
+    status?: string;
+    /** Play the closing animation: the loader opens and shows what is rendered below it. */
+    done?: boolean;
+    /** Called when the closing animation is over, so the loader can be removed. */
+    onFinished?: () => void;
 }
 export declare function LoaderCommunity(props: LoaderProps): React.JSX.Element;
 export {};

package/build/Components/Loaders/Community.js CHANGED Viewed

@@ -1,265 +1,198 @@
 /**
- * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ * Copyright 2018-2026 Denis Haev (bluefox) <dogafox@gmail.com>
  *
  * MIT License
  *
+ * Loader of the community edition: the ioBroker mark is a power button, so the loader switches ioBroker on.
+ * 1. Switch on: the top of the "i" lights up, the ring draws itself from there to both sides, the stem grows.
+ * 2. Wait: light runs through the ring, devices on an orbit send data packets into it.
+ * 3. Open (only with `done`): the devices gather in the ring, the ring flashes and a circle opens from the centre.
+ * Only SVG and CSS, no JavaScript timer. The previous loader is `LoaderCommunityLegacy`.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+/** The ring of the mark (img/logo.svg), used as mask for the light running through it */
+const RING_PATH = 'M386,91v68.6c68.2,25.1,117,90.5,117,167c0,98.1-80.2,177.9-178.7,177.9s-178.7-79.8-178.7-177.9c0-76.5,48.8-141.9,117-167V91C159.2,118.5,83.1,213.5,83.1,326.5c0,134.6,107.9,243.7,241.1,243.7s241.1-109.1,241.1-243.7C565.3,213.5,489.2,118.5,386,91z';
+const CAP_PATH = 'M324.2,148.6c12.4,0,24.5,1.3,36.3,3.7V85.6c-11.8-1.8-23.9-2.7-36.3-2.7s-24.4,0.9-36.3,2.7v66.7C299.7,149.9,311.8,148.6,324.2,148.6z';
+const STEM_PATH = 'M324.2,175.3c-12.5,0-24.6,1.5-36.2,4.4v291c11.6,2.9,23.8,4.4,36.2,4.4c12.5,0,24.6-1.5,36.3-4.4v-291C348.9,176.9,336.7,175.3,324.2,175.3z';
+const RING_MASK = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 648.5 652.8'%3E%3Cpath d='${RING_PATH}'/%3E%3C/svg%3E") center / 100% 100% no-repeat`;
+/** Devices on the orbit: angle in degrees, radius of the dot, delay of its packet in seconds */
+const NODES = [
+    [14, 10, 0],
+    [66, 7, 1.9],
+    [117, 12, 0.7],
+    [163, 8, 3.1],
+    [208, 10, 1.3],
+    [259, 7, 2.5],
+    [312, 9, 3.7],
+];
+/** Duration of the closing animation in ms (reduced motion: crossfade) */
+const OPEN_DURATION = 1150;
+const OPEN_DURATION_REDUCED = 350;
 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;
-    }
-}
+@property --iob-ld-hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
+.iob-ld {
+    --iob-ld-mark: min(210px, 30vmin);
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
+    background-color: var(--iob-ld-bg); background-size: cover; background-position: center;
+}
+.iob-ld-dark { --iob-ld-bg: #080B1C; --iob-ld-orbit: rgba(126, 195, 243, 0.16); --iob-ld-node: #1D90CA; --iob-ld-packet: #7EC3F3; --iob-ld-label: #1D90CA; --iob-ld-flash: #E8F6FF; }
+.iob-ld-blue { --iob-ld-bg: #031D38; --iob-ld-orbit: rgba(126, 195, 243, 0.22); --iob-ld-node: #7EC3F3; --iob-ld-packet: #E8F6FF; --iob-ld-label: #7EC3F3; --iob-ld-flash: #E8F6FF; }
+.iob-ld-light { --iob-ld-bg: #FFFFFF; --iob-ld-orbit: rgba(0, 88, 148, 0.14); --iob-ld-node: #1D90CA; --iob-ld-packet: #1D90CA; --iob-ld-label: #005894; --iob-ld-flash: #FFFFFF; }
+.iob-ld-colored { --iob-ld-bg: #E6EEF7; --iob-ld-orbit: rgba(0, 88, 148, 0.16); --iob-ld-node: #005894; --iob-ld-packet: #1D90CA; --iob-ld-label: #005894; --iob-ld-flash: #FFFFFF; }
-@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;
-    }
-}
+.iob-ld-orbit {
+    position: absolute; left: 50%; top: 50%; width: calc(var(--iob-ld-mark) * 1.8505); height: calc(var(--iob-ld-mark) * 1.8505);
+    transform: translate(-50%, -50%); overflow: visible; opacity: 0;
+    animation: iob-ld-fade-in 0.9s 0.95s forwards;
+}
+.iob-ld-orbit-line { fill: none; stroke: var(--iob-ld-orbit); stroke-width: 2; stroke-dasharray: 2 12; }
+.iob-ld-gather, .iob-ld-nodes { transform-box: view-box; transform-origin: 0 0; }
+.iob-ld-nodes { animation: iob-ld-spin 90s linear infinite; }
+.iob-ld-dot { fill: var(--iob-ld-node); transform-box: fill-box; transform-origin: center; animation: iob-ld-send 4.2s ease-out infinite; }
+.iob-ld-packet { fill: var(--iob-ld-packet); opacity: 0; animation: iob-ld-travel 4.2s infinite; }
+.iob-ld-splash { fill: none; stroke: var(--iob-ld-packet); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: iob-ld-splash 4.2s infinite; }
-.logo-animate-wait {
-    animation: logo-color-outside 1.5s, logo-spin 1.5s linear infinite;
-}
+.iob-ld-mark { position: absolute; left: 50%; top: 50%; width: var(--iob-ld-mark); aspect-ratio: 648.5 / 652.8; transform: translate(-50%, -50%); }
+.iob-ld-mark svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }
+.iob-ld-draw { fill: none; stroke: #FFFFFF; stroke-width: 90; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: iob-ld-draw 0.62s cubic-bezier(0.6, 0, 0.2, 1) 0.3s forwards; }
+.iob-ld-cap { transform-box: fill-box; transform-origin: center; animation: iob-ld-pop 0.42s cubic-bezier(0.3, 1.7, 0.5, 1) both; }
+.iob-ld-stem { transform-box: fill-box; transform-origin: 50% 100%; animation: iob-ld-grow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }
+.iob-ld-flash { fill: var(--iob-ld-flash); opacity: 0; }
+.iob-ld-current { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: iob-ld-fade-in 0.5s 1.15s forwards; -webkit-mask: ${RING_MASK}; mask: ${RING_MASK}; }
+.iob-ld-current > div {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+    background: conic-gradient(from 0deg, transparent 0turn 0.68turn, rgba(126, 195, 243, 0.55) 0.95turn, rgba(232, 246, 255, 0.95) 1turn);
+    animation: iob-ld-spin 1.9s linear infinite;
+}
+.iob-ld-status {
+    position: absolute; left: 0; right: 0; top: calc(50% + var(--iob-ld-mark) * 0.86);
+    text-align: center; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    font: 500 13px/1.5 Roboto, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iob-ld-label);
+    opacity: 0; animation: iob-ld-fade-in 0.5s 1s forwards;
+}
+.iob-ld-status::before { content: '// '; }
-.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;
-}
+.iob-ld-done {
+    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--iob-ld-hole), #000 calc(var(--iob-ld-hole) + 1px));
+    mask-image: radial-gradient(circle at 50% 50%, transparent var(--iob-ld-hole), #000 calc(var(--iob-ld-hole) + 1px));
+    animation: iob-ld-open 0.75s 0.3s cubic-bezier(0.6, 0, 0.4, 1) forwards;
+}
+.iob-ld-done .iob-ld-gather { animation: iob-ld-gather 0.45s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; }
+.iob-ld-done .iob-ld-flash { animation: iob-ld-flash 0.5s 0.12s ease-out; }
+.iob-ld-done .iob-ld-mark { animation: iob-ld-mark-out 0.6s 0.35s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
+.iob-ld-done .iob-ld-status { animation: none; opacity: 0; transition: opacity 0.2s; }
-.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;
-}
+@keyframes iob-ld-fade-in { to { opacity: 1; } }
+@keyframes iob-ld-fade-out { to { opacity: 0; } }
+@keyframes iob-ld-spin { to { transform: rotate(360deg); } }
+@keyframes iob-ld-draw { to { stroke-dashoffset: 0; } }
+@keyframes iob-ld-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
+@keyframes iob-ld-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
+@keyframes iob-ld-send { 0% { transform: scale(1.5); } 12%, 100% { transform: scale(1); } }
+@keyframes iob-ld-travel {
+    0% { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
+    6% { opacity: 1; }
+    36% { transform: translateY(176px); opacity: 1; }
+    38%, 100% { transform: translateY(176px); opacity: 0; }
+}
+@keyframes iob-ld-splash {
+    0%, 35% { transform: scale(0.2); opacity: 0; }
+    38% { transform: scale(0.5); opacity: 0.9; }
+    58%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes iob-ld-gather { to { transform: scale(0.5); opacity: 0; } }
+@keyframes iob-ld-flash { 0% { opacity: 0; } 35% { opacity: 0.85; } 100% { opacity: 0; } }
+@keyframes iob-ld-mark-out { to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }
+@keyframes iob-ld-open { to { --iob-ld-hole: 120vmax; } }
-.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;
+@media (prefers-reduced-motion: reduce) {
+    .iob-ld-orbit, .iob-ld-current { display: none; }
+    .iob-ld-draw { animation: none; stroke-dashoffset: 0; }
+    .iob-ld-cap, .iob-ld-stem { animation: none; }
+    .iob-ld-mark { opacity: 0; animation: iob-ld-fade-in 0.3s forwards; }
+    .iob-ld-status { animation: iob-ld-fade-in 0.3s forwards; }
+    .iob-ld-done { -webkit-mask-image: none; mask-image: none; animation: iob-ld-fade-out 0.3s forwards; }
+    .iob-ld-done .iob-ld-mark { animation: none; opacity: 1; }
 }
 `;
+let maskCounter = 0;
 export function LoaderCommunity(props) {
+    // Every instance needs its own mask id, there may be more than one loader on a page
+    const [maskId] = useState(() => `iob-ld-draw-${++maskCounter}`);
     useEffect(() => {
-        if (!window.document.getElementById('loader-iobroker-component')) {
+        if (!window.document.getElementById('loader-iobroker-community')) {
             const style = window.document.createElement('style');
-            style.setAttribute('id', 'loader-iobroker-component');
+            style.setAttribute('id', 'loader-iobroker-community');
             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 } })))));
+    // Kept in a ref, so a new callback on every render of the parent does not restart the timer
+    const onFinished = useRef(props.onFinished);
+    useEffect(() => {
+        onFinished.current = props.onFinished;
+    }, [props.onFinished]);
+    const { done } = props;
+    useEffect(() => {
+        if (!done) {
+            return undefined;
+        }
+        const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+        const timer = setTimeout(() => onFinished.current?.(), reduced ? OPEN_DURATION_REDUCED : OPEN_DURATION);
+        return () => clearTimeout(timer);
+    }, [done]);
+    // "blue" and "colored" have own looks; "modernDark" is dark; other names (PT, DX...) follow themeType
+    const themeName = props.themeName || props.theme;
+    let theme;
+    if (themeName === 'blue' || themeName === 'colored') {
+        theme = themeName;
+    }
+    else if (themeName === 'dark' || themeName === 'modernDark') {
+        theme = 'dark';
+    }
+    else if (themeName === 'light' || themeName === 'modernLight') {
+        theme = 'light';
+    }
+    else {
+        theme = props.themeType === 'dark' ? 'dark' : 'light';
+    }
+    const backgroundImage = props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'
+        ? props.backgroundImage
+        : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'
+            ? `url(${window.loadingBackgroundImage})`
+            : undefined;
+    const backgroundColor = props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'
+        ? props.backgroundColor
+        : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'
+            ? window.loadingBackgroundColor
+            : undefined;
+    const style = { backgroundImage, backgroundColor };
+    if (props.size) {
+        style['--iob-ld-mark'] = `min(${props.size}px, 30vmin)`;
+    }
+    return (React.createElement("div", { className: `iob-ld iob-ld-${theme}${done ? ' iob-ld-done' : ''}`, style: style, "aria-busy": !done },
+        React.createElement("svg", { className: "iob-ld-orbit", viewBox: "-600 -600 1200 1200", "aria-hidden": "true" },
+            React.createElement("circle", { className: "iob-ld-orbit-line", r: "430" }),
+            React.createElement("g", { className: "iob-ld-gather" },
+                React.createElement("g", { className: "iob-ld-nodes" }, NODES.map(([angle, radius, delay]) => {
+                    const animationDelay = `${delay}s`;
+                    return (React.createElement("g", { key: angle, transform: `rotate(${angle})` },
+                        React.createElement("circle", { className: "iob-ld-splash", cy: "-252", r: "16", style: { animationDelay } }),
+                        React.createElement("circle", { className: "iob-ld-packet", cy: "-430", r: "7", style: { animationDelay } }),
+                        React.createElement("circle", { className: "iob-ld-dot", cy: "-430", r: radius, style: { animationDelay } })));
+                })))),
+        window.loadingHideLogo === 'true' ? null : (React.createElement("div", { className: "iob-ld-mark", "aria-hidden": "true" },
+            React.createElement("svg", { viewBox: "0 0 648.5 652.8" },
+                React.createElement("defs", null,
+                    React.createElement("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "648.5", height: "652.8" },
+                        React.createElement("path", { className: "iob-ld-draw", pathLength: 1, d: "M324.2,116.5A210,210 0 0 1 324.2,536.5" }),
+                        React.createElement("path", { className: "iob-ld-draw", pathLength: 1, d: "M324.2,116.5A210,210 0 0 0 324.2,536.5" }))),
+                React.createElement("path", { mask: `url(#${maskId})`, fill: "#164477", d: RING_PATH }),
+                React.createElement("path", { className: "iob-ld-cap", fill: "#3399CC", d: CAP_PATH }),
+                React.createElement("path", { className: "iob-ld-stem", fill: "#3399CC", d: STEM_PATH }),
+                React.createElement("path", { className: "iob-ld-flash", d: RING_PATH })),
+            React.createElement("div", { className: "iob-ld-current" },
+                React.createElement("div", null)))),
+        props.status ? (React.createElement("div", { className: "iob-ld-status", role: "status" }, props.status)) : null));
 }
 //# sourceMappingURL=Community.js.map

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

	@@ -1 +1 @@
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"]}
1	+ {"version":3,"file":"Community.js","sourceRoot":"./src/","sources":["Components/Loaders/Community.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AACH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAW3D,yFAAyF;AACzF,MAAM,SAAS,GACX,sPAAsP,CAAC;AAC3P,MAAM,QAAQ,GACV,qIAAqI,CAAC;AAC1I,MAAM,SAAS,GACX,0IAA0I,CAAC;AAC/I,MAAM,SAAS,GAAG,4GAA4G,SAAS,gDAAgD,CAAC;AAExL,gGAAgG;AAChG,MAAM,KAAK,GAA+B;IACtC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IACX,CAAC,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC;IACd,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;IACb,CAAC,GAAG,EAAE,EAAE,EAAE,GAAG,CAAC;IACd,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;IACb,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC;CAChB,CAAC;AAEF,0EAA0E;AAC1E,MAAM,aAAa,GAAG,IAAI,CAAC;AAC3B,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAElC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6JA8BwI,SAAS,WAAW,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzL,CAAC;AAuBF,IAAI,WAAW,GAAG,CAAC,CAAC;AAEpB,MAAM,UAAU,eAAe,CAAC,KAAkB;IAC9C,oFAAoF;IACpF,MAAM,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,eAAe,EAAE,WAAW,EAAE,CAAC,CAAC;IAEhE,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,CAAC;YAC/D,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACrD,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,2BAA2B,CAAC,CAAC;YACtD,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC;YAC/B,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC;IACL,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,4FAA4F;IAC5F,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5C,SAAS,CAAC,GAAG,EAAE;QACX,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC;IAC1C,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAEvB,MAAM,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IACvB,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,IAAI,EAAE,CAAC;YACR,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,MAAM,OAAO,GAAG,MAAM,CAAC,UAAU,EAAE,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;QAChF,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;QACxG,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,sGAAsG;IACtG,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,KAAK,CAAC;IACjD,IAAI,KAA4C,CAAC;IACjD,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;QAClD,KAAK,GAAG,SAAS,CAAC;IACtB,CAAC;SAAM,IAAI,SAAS,KAAK,MAAM,IAAI,SAAS,KAAK,YAAY,EAAE,CAAC;QAC5D,KAAK,GAAG,MAAM,CAAC;IACnB,CAAC;SAAM,IAAI,SAAS,KAAK,OAAO,IAAI,SAAS,KAAK,aAAa,EAAE,CAAC;QAC9D,KAAK,GAAG,OAAO,CAAC;IACpB,CAAC;SAAM,CAAC;QACJ,KAAK,GAAG,KAAK,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1D,CAAC;IAED,MAAM,eAAe,GACjB,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,KAAK,0BAA0B;QACzE,CAAC,CAAC,KAAK,CAAC,eAAe;QACvB,CAAC,CAAC,MAAM,CAAC,sBAAsB,IAAI,MAAM,CAAC,sBAAsB,KAAK,0BAA0B;YAC7F,CAAC,CAAC,OAAO,MAAM,CAAC,sBAAsB,GAAG;YACzC,CAAC,CAAC,SAAS,CAAC;IACtB,MAAM,eAAe,GACjB,KAAK,CAAC,eAAe,IAAI,KAAK,CAAC,eAAe,KAAK,0BAA0B;QACzE,CAAC,CAAC,KAAK,CAAC,eAAe;QACvB,CAAC,CAAC,MAAM,CAAC,sBAAsB,IAAI,MAAM,CAAC,sBAAsB,KAAK,0BAA0B;YAC7F,CAAC,CAAC,MAAM,CAAC,sBAAsB;YAC/B,CAAC,CAAC,SAAS,CAAC;IAEtB,MAAM,KAAK,GAA6D,EAAE,eAAe,EAAE,eAAe,EAAE,CAAC;IAC7G,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;QACb,KAAK,CAAC,eAAe,CAAC,GAAG,OAAO,KAAK,CAAC,IAAI,aAAa,CAAC;IAC5D,CAAC;IAED,OAAO,CACH,6BACI,SAAS,EAAE,iBAAiB,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,EAAE,EAChE,KAAK,EAAE,KAAK,eACD,CAAC,IAAI;QAEhB,6BACI,SAAS,EAAC,cAAc,EACxB,OAAO,EAAC,qBAAqB,iBACjB,MAAM;YAElB,gCACI,SAAS,EAAC,mBAAmB,EAC7B,CAAC,EAAC,KAAK,GACT;YACF,2BAAG,SAAS,EAAC,eAAe;gBACxB,2BAAG,SAAS,EAAC,cAAc,IACtB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,EAAE;oBAClC,MAAM,cAAc,GAAG,GAAG,KAAK,GAAG,CAAC;oBACnC,OAAO,CACH,2BACI,GAAG,EAAE,KAAK,EACV,SAAS,EAAE,UAAU,KAAK,GAAG;wBAE7B,gCACI,SAAS,EAAC,eAAe,EACzB,EAAE,EAAC,MAAM,EACT,CAAC,EAAC,IAAI,EACN,KAAK,EAAE,EAAE,cAAc,EAAE,GAC3B;wBACF,gCACI,SAAS,EAAC,eAAe,EACzB,EAAE,EAAC,MAAM,EACT,CAAC,EAAC,GAAG,EACL,KAAK,EAAE,EAAE,cAAc,EAAE,GAC3B;wBACF,gCACI,SAAS,EAAC,YAAY,EACtB,EAAE,EAAC,MAAM,EACT,CAAC,EAAE,MAAM,EACT,KAAK,EAAE,EAAE,cAAc,EAAE,GAC3B,CACF,CACP,CAAC;gBACN,CAAC,CAAC,CACF,CACJ,CACF;QACL,MAAM,CAAC,eAAe,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACxC,6BACI,SAAS,EAAC,aAAa,iBACX,MAAM;YAElB,6BAAK,OAAO,EAAC,iBAAiB;gBAC1B;oBACI,8BACI,EAAE,EAAE,MAAM,EACV,SAAS,EAAC,gBAAgB,EAC1B,CAAC,EAAC,GAAG,EACL,CAAC,EAAC,GAAG,EACL,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,OAAO;wBAEd,8BACI,SAAS,EAAC,aAAa,EACvB,UAAU,EAAE,CAAC,EACb,CAAC,EAAC,wCAAwC,GAC5C;wBACF,8BACI,SAAS,EAAC,aAAa,EACvB,UAAU,EAAE,CAAC,EACb,CAAC,EAAC,wCAAwC,GAC5C,CACC,CACJ;gBACP,8BACI,IAAI,EAAE,QAAQ,MAAM,GAAG,EACvB,IAAI,EAAC,SAAS,EACd,CAAC,EAAE,SAAS,GACd;gBACF,8BACI,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,SAAS,EACd,CAAC,EAAE,QAAQ,GACb;gBACF,8BACI,SAAS,EAAC,aAAa,EACvB,IAAI,EAAC,SAAS,EACd,CAAC,EAAE,SAAS,GACd;gBACF,8BACI,SAAS,EAAC,cAAc,EACxB,CAAC,EAAE,SAAS,GACd,CACA;YACN,6BAAK,SAAS,EAAC,gBAAgB;gBAC3B,gCAAO,CACL,CACJ,CACT;QACA,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CACZ,6BACI,SAAS,EAAC,eAAe,EACzB,IAAI,EAAC,QAAQ,IAEZ,KAAK,CAAC,MAAM,CACX,CACT,CAAC,CAAC,CAAC,IAAI,CACN,CACT,CAAC;AACN,CAAC","sourcesContent":["/*\n Copyright 2018-2026 Denis Haev (bluefox) <dogafox@gmail.com>\n \n MIT License\n \n Loader of the community edition: the ioBroker mark is a power button, so the loader switches ioBroker on.\n * 1. Switch on: the top of the \"i\" lights up, the ring draws itself from there to both sides, the stem grows.\n * 2. Wait: light runs through the ring, devices on an orbit send data packets into it.\n * 3. Open (only with `done`): the devices gather in the ring, the ring flashes and a circle opens from the centre.\n * Only SVG and CSS, no JavaScript timer. The previous loader is `LoaderCommunityLegacy`.\n /\nimport React, { useEffect, useRef, useState } 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\n/* The ring of the mark (img/logo.svg), used as mask for the light running through it /\nconst RING_PATH =\n 'M386,91v68.6c68.2,25.1,117,90.5,117,167c0,98.1-80.2,177.9-178.7,177.9s-178.7-79.8-178.7-177.9c0-76.5,48.8-141.9,117-167V91C159.2,118.5,83.1,213.5,83.1,326.5c0,134.6,107.9,243.7,241.1,243.7s241.1-109.1,241.1-243.7C565.3,213.5,489.2,118.5,386,91z';\nconst CAP_PATH =\n 'M324.2,148.6c12.4,0,24.5,1.3,36.3,3.7V85.6c-11.8-1.8-23.9-2.7-36.3-2.7s-24.4,0.9-36.3,2.7v66.7C299.7,149.9,311.8,148.6,324.2,148.6z';\nconst STEM_PATH =\n 'M324.2,175.3c-12.5,0-24.6,1.5-36.2,4.4v291c11.6,2.9,23.8,4.4,36.2,4.4c12.5,0,24.6-1.5,36.3-4.4v-291C348.9,176.9,336.7,175.3,324.2,175.3z';\nconst RING_MASK = `url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 648.5 652.8'%3E%3Cpath d='${RING_PATH}'/%3E%3C/svg%3E\") center / 100% 100% no-repeat`;\n\n/* Devices on the orbit: angle in degrees, radius of the dot, delay of its packet in seconds /\nconst NODES: [number, number, number][] = [\n [14, 10, 0],\n [66, 7, 1.9],\n [117, 12, 0.7],\n [163, 8, 3.1],\n [208, 10, 1.3],\n [259, 7, 2.5],\n [312, 9, 3.7],\n];\n\n/* Duration of the closing animation in ms (reduced motion: crossfade) /\nconst OPEN_DURATION = 1150;\nconst OPEN_DURATION_REDUCED = 350;\n\nconst loaderStyles = `\n@property --iob-ld-hole { syntax: '<length>'; inherits: false; initial-value: 0px; }\n.iob-ld {\n --iob-ld-mark: min(210px, 30vmin);\n position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;\n background-color: var(--iob-ld-bg); background-size: cover; background-position: center;\n}\n.iob-ld-dark { --iob-ld-bg: #080B1C; --iob-ld-orbit: rgba(126, 195, 243, 0.16); --iob-ld-node: #1D90CA; --iob-ld-packet: #7EC3F3; --iob-ld-label: #1D90CA; --iob-ld-flash: #E8F6FF; }\n.iob-ld-blue { --iob-ld-bg: #031D38; --iob-ld-orbit: rgba(126, 195, 243, 0.22); --iob-ld-node: #7EC3F3; --iob-ld-packet: #E8F6FF; --iob-ld-label: #7EC3F3; --iob-ld-flash: #E8F6FF; }\n.iob-ld-light { --iob-ld-bg: #FFFFFF; --iob-ld-orbit: rgba(0, 88, 148, 0.14); --iob-ld-node: #1D90CA; --iob-ld-packet: #1D90CA; --iob-ld-label: #005894; --iob-ld-flash: #FFFFFF; }\n.iob-ld-colored { --iob-ld-bg: #E6EEF7; --iob-ld-orbit: rgba(0, 88, 148, 0.16); --iob-ld-node: #005894; --iob-ld-packet: #1D90CA; --iob-ld-label: #005894; --iob-ld-flash: #FFFFFF; }\n\n.iob-ld-orbit {\n position: absolute; left: 50%; top: 50%; width: calc(var(--iob-ld-mark) 1.8505); height: calc(var(--iob-ld-mark) * 1.8505);\n transform: translate(-50%, -50%); overflow: visible; opacity: 0;\n animation: iob-ld-fade-in 0.9s 0.95s forwards;\n}\n.iob-ld-orbit-line { fill: none; stroke: var(--iob-ld-orbit); stroke-width: 2; stroke-dasharray: 2 12; }\n.iob-ld-gather, .iob-ld-nodes { transform-box: view-box; transform-origin: 0 0; }\n.iob-ld-nodes { animation: iob-ld-spin 90s linear infinite; }\n.iob-ld-dot { fill: var(--iob-ld-node); transform-box: fill-box; transform-origin: center; animation: iob-ld-send 4.2s ease-out infinite; }\n.iob-ld-packet { fill: var(--iob-ld-packet); opacity: 0; animation: iob-ld-travel 4.2s infinite; }\n.iob-ld-splash { fill: none; stroke: var(--iob-ld-packet); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; animation: iob-ld-splash 4.2s infinite; }\n\n.iob-ld-mark { position: absolute; left: 50%; top: 50%; width: var(--iob-ld-mark); aspect-ratio: 648.5 / 652.8; transform: translate(-50%, -50%); }\n.iob-ld-mark svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; }\n.iob-ld-draw { fill: none; stroke: #FFFFFF; stroke-width: 90; stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: iob-ld-draw 0.62s cubic-bezier(0.6, 0, 0.2, 1) 0.3s forwards; }\n.iob-ld-cap { transform-box: fill-box; transform-origin: center; animation: iob-ld-pop 0.42s cubic-bezier(0.3, 1.7, 0.5, 1) both; }\n.iob-ld-stem { transform-box: fill-box; transform-origin: 50% 100%; animation: iob-ld-grow 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) 0.8s both; }\n.iob-ld-flash { fill: var(--iob-ld-flash); opacity: 0; }\n.iob-ld-current { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; animation: iob-ld-fade-in 0.5s 1.15s forwards; -webkit-mask: ${RING_MASK}; mask: ${RING_MASK}; }\n.iob-ld-current > div {\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\n background: conic-gradient(from 0deg, transparent 0turn 0.68turn, rgba(126, 195, 243, 0.55) 0.95turn, rgba(232, 246, 255, 0.95) 1turn);\n animation: iob-ld-spin 1.9s linear infinite;\n}\n.iob-ld-status {\n position: absolute; left: 0; right: 0; top: calc(50% + var(--iob-ld-mark) * 0.86);\n text-align: center; padding: 0 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;\n font: 500 13px/1.5 Roboto, Arial, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--iob-ld-label);\n opacity: 0; animation: iob-ld-fade-in 0.5s 1s forwards;\n}\n.iob-ld-status::before { content: '// '; }\n\n.iob-ld-done {\n -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--iob-ld-hole), #000 calc(var(--iob-ld-hole) + 1px));\n mask-image: radial-gradient(circle at 50% 50%, transparent var(--iob-ld-hole), #000 calc(var(--iob-ld-hole) + 1px));\n animation: iob-ld-open 0.75s 0.3s cubic-bezier(0.6, 0, 0.4, 1) forwards;\n}\n.iob-ld-done .iob-ld-gather { animation: iob-ld-gather 0.45s cubic-bezier(0.5, 0, 0.9, 0.4) forwards; }\n.iob-ld-done .iob-ld-flash { animation: iob-ld-flash 0.5s 0.12s ease-out; }\n.iob-ld-done .iob-ld-mark { animation: iob-ld-mark-out 0.6s 0.35s cubic-bezier(0.5, 0, 0.75, 0) forwards; }\n.iob-ld-done .iob-ld-status { animation: none; opacity: 0; transition: opacity 0.2s; }\n\n@keyframes iob-ld-fade-in { to { opacity: 1; } }\n@keyframes iob-ld-fade-out { to { opacity: 0; } }\n@keyframes iob-ld-spin { to { transform: rotate(360deg); } }\n@keyframes iob-ld-draw { to { stroke-dashoffset: 0; } }\n@keyframes iob-ld-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }\n@keyframes iob-ld-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }\n@keyframes iob-ld-send { 0% { transform: scale(1.5); } 12%, 100% { transform: scale(1); } }\n@keyframes iob-ld-travel {\n 0% { transform: translateY(0); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }\n 6% { opacity: 1; }\n 36% { transform: translateY(176px); opacity: 1; }\n 38%, 100% { transform: translateY(176px); opacity: 0; }\n}\n@keyframes iob-ld-splash {\n 0%, 35% { transform: scale(0.2); opacity: 0; }\n 38% { transform: scale(0.5); opacity: 0.9; }\n 58%, 100% { transform: scale(2); opacity: 0; }\n}\n@keyframes iob-ld-gather { to { transform: scale(0.5); opacity: 0; } }\n@keyframes iob-ld-flash { 0% { opacity: 0; } 35% { opacity: 0.85; } 100% { opacity: 0; } }\n@keyframes iob-ld-mark-out { to { transform: translate(-50%, -50%) scale(1.4); opacity: 0; } }\n@keyframes iob-ld-open { to { --iob-ld-hole: 120vmax; } }\n\n@media (prefers-reduced-motion: reduce) {\n .iob-ld-orbit, .iob-ld-current { display: none; }\n .iob-ld-draw { animation: none; stroke-dashoffset: 0; }\n .iob-ld-cap, .iob-ld-stem { animation: none; }\n .iob-ld-mark { opacity: 0; animation: iob-ld-fade-in 0.3s forwards; }\n .iob-ld-status { animation: iob-ld-fade-in 0.3s forwards; }\n .iob-ld-done { -webkit-mask-image: none; mask-image: none; animation: iob-ld-fade-out 0.3s forwards; }\n .iob-ld-done .iob-ld-mark { animation: none; opacity: 1; }\n}\n`;\n\ninterface LoaderProps {\n /** Width of the mark in pixels (default 210); on small screens it shrinks to 30% of the shorter side. /\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 /* Optional line below the mark, e.g. the current loading step. Shown in capitals with a leading \"//\". /\n status?: string;\n /* Play the closing animation: the loader opens and shows what is rendered below it. /\n done?: boolean;\n /* Called when the closing animation is over, so the loader can be removed. */\n onFinished?: () => void;\n}\n\nlet maskCounter = 0;\n\nexport function LoaderCommunity(props: LoaderProps): React.JSX.Element {\n // Every instance needs its own mask id, there may be more than one loader on a page\n const [maskId] = useState(() => `iob-ld-draw-${++maskCounter}`);\n\n useEffect(() => {\n if (!window.document.getElementById('loader-iobroker-community')) {\n const style = window.document.createElement('style');\n style.setAttribute('id', 'loader-iobroker-community');\n style.innerHTML = loaderStyles;\n window.document.head.appendChild(style);\n }\n }, []);\n\n // Kept in a ref, so a new callback on every render of the parent does not restart the timer\n const onFinished = useRef(props.onFinished);\n useEffect(() => {\n onFinished.current = props.onFinished;\n }, [props.onFinished]);\n\n const { done } = props;\n useEffect(() => {\n if (!done) {\n return undefined;\n }\n const reduced = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n const timer = setTimeout(() => onFinished.current?.(), reduced ? OPEN_DURATION_REDUCED : OPEN_DURATION);\n return () => clearTimeout(timer);\n }, [done]);\n\n // \"blue\" and \"colored\" have own looks; \"modernDark\" is dark; other names (PT, DX...) follow themeType\n const themeName = props.themeName \|\| props.theme;\n let theme: 'dark' \| 'light' \| 'blue' \| 'colored';\n if (themeName === 'blue' \|\| themeName === 'colored') {\n theme = themeName;\n } else if (themeName === 'dark' \|\| themeName === 'modernDark') {\n theme = 'dark';\n } else if (themeName === 'light' \|\| themeName === 'modernLight') {\n theme = 'light';\n } else {\n theme = props.themeType === 'dark' ? 'dark' : 'light';\n }\n\n const backgroundImage =\n props.backgroundImage && props.backgroundImage !== '@@loginBackgroundImage@@'\n ? props.backgroundImage\n : window.loadingBackgroundImage && window.loadingBackgroundImage !== '@@loginBackgroundImage@@'\n ? `url(${window.loadingBackgroundImage})`\n : undefined;\n const backgroundColor =\n props.backgroundColor && props.backgroundColor !== '@@loginBackgroundColor@@'\n ? props.backgroundColor\n : window.loadingBackgroundColor && window.loadingBackgroundColor !== '@@loginBackgroundColor@@'\n ? window.loadingBackgroundColor\n : undefined;\n\n const style: React.CSSProperties & Record<string, string \| undefined> = { backgroundImage, backgroundColor };\n if (props.size) {\n style['--iob-ld-mark'] = `min(${props.size}px, 30vmin)`;\n }\n\n return (\n <div\n className={`iob-ld iob-ld-${theme}${done ? ' iob-ld-done' : ''}`}\n style={style}\n aria-busy={!done}\n >\n <svg\n className=\"iob-ld-orbit\"\n viewBox=\"-600 -600 1200 1200\"\n aria-hidden=\"true\"\n >\n <circle\n className=\"iob-ld-orbit-line\"\n r=\"430\"\n />\n <g className=\"iob-ld-gather\">\n <g className=\"iob-ld-nodes\">\n {NODES.map(([angle, radius, delay]) => {\n const animationDelay = `${delay}s`;\n return (\n <g\n key={angle}\n transform={`rotate(${angle})`}\n >\n <circle\n className=\"iob-ld-splash\"\n cy=\"-252\"\n r=\"16\"\n style={{ animationDelay }}\n />\n <circle\n className=\"iob-ld-packet\"\n cy=\"-430\"\n r=\"7\"\n style={{ animationDelay }}\n />\n <circle\n className=\"iob-ld-dot\"\n cy=\"-430\"\n r={radius}\n style={{ animationDelay }}\n />\n </g>\n );\n })}\n </g>\n </g>\n </svg>\n {window.loadingHideLogo === 'true' ? null : (\n <div\n className=\"iob-ld-mark\"\n aria-hidden=\"true\"\n >\n <svg viewBox=\"0 0 648.5 652.8\">\n <defs>\n <mask\n id={maskId}\n maskUnits=\"userSpaceOnUse\"\n x=\"0\"\n y=\"0\"\n width=\"648.5\"\n height=\"652.8\"\n >\n <path\n className=\"iob-ld-draw\"\n pathLength={1}\n d=\"M324.2,116.5A210,210 0 0 1 324.2,536.5\"\n />\n <path\n className=\"iob-ld-draw\"\n pathLength={1}\n d=\"M324.2,116.5A210,210 0 0 0 324.2,536.5\"\n />\n </mask>\n </defs>\n <path\n mask={`url(#${maskId})`}\n fill=\"#164477\"\n d={RING_PATH}\n />\n <path\n className=\"iob-ld-cap\"\n fill=\"#3399CC\"\n d={CAP_PATH}\n />\n <path\n className=\"iob-ld-stem\"\n fill=\"#3399CC\"\n d={STEM_PATH}\n />\n <path\n className=\"iob-ld-flash\"\n d={RING_PATH}\n />\n </svg>\n <div className=\"iob-ld-current\">\n <div />\n </div>\n </div>\n )}\n {props.status ? (\n <div\n className=\"iob-ld-status\"\n role=\"status\"\n >\n {props.status}\n </div>\n ) : null}\n </div>\n );\n}\n"]}

package/build/Components/Loaders/CommunityLegacy.d.ts ADDED Viewed

@@ -0,0 +1,32 @@
+/**
+ * Copyright 2018-2024 Denis Haev (bluefox) <dogafox@gmail.com>
+ *
+ * MIT License
+ *
+ * Previous loader of the community edition, replaced by `LoaderCommunity` in 2026-11.
+ */
+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 LoaderCommunityLegacy(props: LoaderProps): React.JSX.Element;
+export {};