iobroker.mywebui 1.86.0 → 1.88.0

package/default-controls/controls/levelbars/level_bar.control

@@ -1 +1 @@
-{"html": "<style></style>\n<div class=\"level-bar\" bind-css:width=\"??control_width\" bind-css:height=\"??control_height\" style=\"left:47px;top:10.9844px;width:348px;height:21px;\">\n    <div class=\"level-fill\" id=\"levelFill\" draggable=\"false\" @change=\"dfd\" bind-css:background-color=\"??color\" style=\"width:0px;pointer-events:auto;\"></div>\n    <div class=\"level-pointer\" id=\"levelPointer\" draggable=\"false\" style=\"pointer-events:auto;\"></div>\n    <div class=\"level-needle\" id=\"levelNeedle\" draggable=\"false\" style=\"pointer-events:auto;\"></div>\n    <div class=\"level-text\" id=\"levelText\" draggable=\"false\" style=\"pointer-events:auto;\">0%</div>\n    <div class=\"level-value\" id=\"minValue\" draggable=\"false\" style=\"pointer-events:auto;\">Min: [[this.min]]</div>\n    <div class=\"level-value\" id=\"maxValue\" draggable=\"false\" style=\"pointer-events:auto;right:-45px;\">Max: [[this.max]]</div>\n</div>\n", "style": ":host {\n    background-color: transparent;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n/* Basic styling for the level bar */\n\n.level-bar {\n    width: 300px;\n    height: 20px;\n    border: 1px solid #000;\n    position: relative;\n    margin-bottom: 20px;\n}\n\n.level-fill {\n    background-color: green;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.level-pointer {\n    width: 2px;\n    height: 20px;\n    background-color: var(--ui-error,#FF0000);\n    position: absolute;\n    top: 0;\n    z-index: 1;\n}\n\n.level-needle {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 10px solid var(--ui-error,#FF0000);\n    top: -10px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 2;\n}\n\n.level-text {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: #000;\n}\n\n.level-value {\n    position: absolute;\n    color: #000;\n    font-size: 12px;\n    top: 100%;\n    text-align: center;\n    width: 50px;\n    transform: translateX(-50%);\n}\n\n.mm-marking {\n    position: absolute;\n    background-color: #000;\n    width: 1px;\n    height: 5px;\n    top: 0;\n}\n\n.slider-container {\n    margin-top: 20px;\n}", "script": "/**\n* @param {BaseScreenViewerAndControl} instance\n*/\n\nexport function init(instance) {\n   //instance._bindingsRefresh();\n   let lvvalue = instance.level;\n   updateLevel(lvvalue, instance)\n   instance._assignEvent('level-changed', (ev) => updateLevel(ev.detail.newValue, instance));\n   instance._assignEvent('marking_min-changed', (ev) => drawMMMarkings(ev.detail.newValue, instance.marking_max, instance.marking_step,instance));\n   instance._assignEvent('marking_max-changed', (ev) => drawMMMarkings(instance.marking_min, ev.detail.newValue, instance.marking_step,instance));\n   instance._assignEvent('marking_step-changed', (ev) => drawMMMarkings(instance.marking_min, instance.marking_max, ev.detail.newValue,instance));\n   drawMMMarkings(0, 100, 5,instance);\n    /*setInterval(()=>{\n     let vcv = instance._bindings;\n      \n    },2000);*/\n}\n\n\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n  \n   //instance._bindingsRefresh();\n   //updateLevel(instance.level, instance);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n}\n\n// Function to update the level bar based on slider value\n      function updateLevel(value, instance) {\n      var levelFill = instance._getDomElement('levelFill');\n      var levelText = instance._getDomElement('levelText');\n      var levelPointer = instance._getDomElement('levelPointer');\n      var levelNeedle = instance._getDomElement('levelNeedle');\n      var minText = instance._getDomElement('minValue');\n      var maxText = instance._getDomElement('maxValue');\n      var minimum = instance.min;\n      var maximum = instance.max;\n      \n      \n      levelText.innerText = value + '%';\n\n      // Update position of pointer and needle\n      var levelBarWidth = instance.shadowRoot.querySelector('.level-bar').offsetWidth;\n      //var pointerPosition = (value / 100) * levelBarWidth;\n      var pointerPosition=((value-minimum)/(maximum-minimum))*levelBarWidth;\n      if(instance.level >= maximum)\n      {\n          levelFill.style.width = levelBarWidth + 'px';\n          levelPointer.style.left = levelBarWidth + 'px';\n          levelNeedle.style.left = levelBarWidth + 'px';\n      }\n      if(instance.level <= minimum)\n      {\n          levelFill.style.width = 0 + 'px';\n          levelPointer.style.left = 0 + 'px';\n          levelNeedle.style.left = 0 + 'px';\n      }\n      else{\n          levelFill.style.width = pointerPosition + 'px';\n          levelPointer.style.left = pointerPosition + 'px';\n          levelNeedle.style.left = pointerPosition + 'px';\n      }\n      \n\n      \n\n      // Update position of min and max values\n      minText.style.left = '0';\n      maxText.style.left = '100%';\n    }\n\n    // Function to draw millimeter markings on the level bar\n    function drawMMMarkings(min, max, step,instance) {\n      // Get the level bar container\n      var levelBar = instance.shadowRoot.querySelector('.level-bar');\n\n      // Clear previous markings\n      levelBar.querySelectorAll('.mm-marking').forEach(mark => mark.remove());\n\n      // Calculate total width of the level bar\n      var levelBarWidth = levelBar.offsetWidth;\n\n      // Calculate the number of markings\n      var numberOfMarks = (max - min) / step;\n\n      // Calculate the distance between each marking\n      var spacing = levelBarWidth / numberOfMarks;\n\n      // Create and position the markings\n      for (var i = 0; i <= numberOfMarks; i++) {\n        var mark = document.createElement('div');\n        mark.classList.add('mm-marking');\n        mark.style.left = i * spacing + 'px';\n        levelBar.appendChild(mark);\n      }\n    }\n\n    \n\n/**\n* dfd - 'change' event of #slider (<input>)\n* @param {Event} event\n* @param {Element} eventRaisingElement\n* @param {ShadowRoot} shadowRoot\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function dfd(event, eventRaisingElement, shadowRoot, instance) {\n    //console.log(event);\n}\n", "properties": {"max": {"type": "number", "default": "20"}, "min": {"type": "number", "default": "4"}, "level": {"type": "number"}, "control_width": {"type": "string", "default": "255px"}, "control_height": {"type": "string", "default": "26px"}, "marking_min": {"type": "number"}, "marking_max": {"type": "number", "default": "100"}, "marking_step": {"type": "number", "default": "5"}, "color": {"type": "color", "default": "red"}}, "settings": {}}
+{"html": "<style></style>\n<div class=\"level-bar\" bind-css:width=\"??control_width\" bind-css:height=\"??control_height\" style=\"left:47px;top:10.9844px;width:348px;height:21px;\">\n    <div class=\"level-fill\" id=\"levelFill\" draggable=\"false\" @change=\"dfd\" bind-css:background-color=\"??color\" style=\"width:0px;pointer-events:auto;\"></div>\n    <div class=\"level-pointer\" id=\"levelPointer\" draggable=\"false\" style=\"pointer-events:auto;\"></div>\n    <div class=\"level-needle\" id=\"levelNeedle\" draggable=\"false\" style=\"pointer-events:auto;\"></div>\n    <div class=\"level-text\" id=\"levelText\" draggable=\"false\" style=\"pointer-events:auto;\">0%</div>\n    <div class=\"level-value\" id=\"minValue\" draggable=\"false\" style=\"pointer-events:auto;\">Min: [[this.min]]</div>\n    <div class=\"level-value\" id=\"maxValue\" draggable=\"false\" style=\"pointer-events:auto;right:-45px;\">Max: [[this.max]]</div>\n</div>\n", "style": ":host {\n    background-color: transparent;\n}\n\n* {\n    box-sizing: border-box;\n}\n\n/* Basic styling for the level bar */\n\n.level-bar {\n    width: 300px;\n    height: 20px;\n    border: 1px solid var(--ui-border,#000);\n    position: relative;\n    margin-bottom: 20px;\n}\n\n.level-fill {\n    background-color: var(--ui-ok,green);\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n\n.level-pointer {\n    width: 2px;\n    height: 20px;\n    background-color: var(--ui-error,#FF0000);\n    position: absolute;\n    top: 0;\n    z-index: 1;\n}\n\n.level-needle {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-left: 5px solid transparent;\n    border-right: 5px solid transparent;\n    border-bottom: 10px solid var(--ui-error,#FF0000);\n    top: -10px;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 2;\n}\n\n.level-text {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    color: var(--ui-text,#000);\n}\n\n.level-value {\n    position: absolute;\n    color: var(--ui-text,#000);\n    font-size: 12px;\n    top: 100%;\n    text-align: center;\n    width: 50px;\n    transform: translateX(-50%);\n}\n\n.mm-marking {\n    position: absolute;\n    background-color: var(--ui-dim,#000);\n    width: 1px;\n    height: 5px;\n    top: 0;\n}\n\n.slider-container {\n    margin-top: 20px;\n}", "script": "/**\n* @param {BaseScreenViewerAndControl} instance\n*/\n\nexport function init(instance) {\n   //instance._bindingsRefresh();\n   let lvvalue = instance.level;\n   updateLevel(lvvalue, instance)\n   instance._assignEvent('level-changed', (ev) => updateLevel(ev.detail.newValue, instance));\n   instance._assignEvent('marking_min-changed', (ev) => drawMMMarkings(ev.detail.newValue, instance.marking_max, instance.marking_step,instance));\n   instance._assignEvent('marking_max-changed', (ev) => drawMMMarkings(instance.marking_min, ev.detail.newValue, instance.marking_step,instance));\n   instance._assignEvent('marking_step-changed', (ev) => drawMMMarkings(instance.marking_min, instance.marking_max, ev.detail.newValue,instance));\n   drawMMMarkings(0, 100, 5,instance);\n    /*setInterval(()=>{\n     let vcv = instance._bindings;\n      \n    },2000);*/\n}\n\n\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function connectedCallback(instance) {\n  \n   //instance._bindingsRefresh();\n   //updateLevel(instance.level, instance);\n}\n\n/**\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function disconnectedCallback(instance) {\n}\n\n// Function to update the level bar based on slider value\n      function updateLevel(value, instance) {\n      var levelFill = instance._getDomElement('levelFill');\n      var levelText = instance._getDomElement('levelText');\n      var levelPointer = instance._getDomElement('levelPointer');\n      var levelNeedle = instance._getDomElement('levelNeedle');\n      var minText = instance._getDomElement('minValue');\n      var maxText = instance._getDomElement('maxValue');\n      var minimum = instance.min;\n      var maximum = instance.max;\n      \n      \n      levelText.innerText = value + '%';\n\n      // Update position of pointer and needle\n      var levelBarWidth = instance.shadowRoot.querySelector('.level-bar').offsetWidth;\n      //var pointerPosition = (value / 100) * levelBarWidth;\n      var pointerPosition=((value-minimum)/(maximum-minimum))*levelBarWidth;\n      if(instance.level >= maximum)\n      {\n          levelFill.style.width = levelBarWidth + 'px';\n          levelPointer.style.left = levelBarWidth + 'px';\n          levelNeedle.style.left = levelBarWidth + 'px';\n      }\n      if(instance.level <= minimum)\n      {\n          levelFill.style.width = 0 + 'px';\n          levelPointer.style.left = 0 + 'px';\n          levelNeedle.style.left = 0 + 'px';\n      }\n      else{\n          levelFill.style.width = pointerPosition + 'px';\n          levelPointer.style.left = pointerPosition + 'px';\n          levelNeedle.style.left = pointerPosition + 'px';\n      }\n      \n\n      \n\n      // Update position of min and max values\n      minText.style.left = '0';\n      maxText.style.left = '100%';\n    }\n\n    // Function to draw millimeter markings on the level bar\n    function drawMMMarkings(min, max, step,instance) {\n      // Get the level bar container\n      var levelBar = instance.shadowRoot.querySelector('.level-bar');\n\n      // Clear previous markings\n      levelBar.querySelectorAll('.mm-marking').forEach(mark => mark.remove());\n\n      // Calculate total width of the level bar\n      var levelBarWidth = levelBar.offsetWidth;\n\n      // Calculate the number of markings\n      var numberOfMarks = (max - min) / step;\n\n      // Calculate the distance between each marking\n      var spacing = levelBarWidth / numberOfMarks;\n\n      // Create and position the markings\n      for (var i = 0; i <= numberOfMarks; i++) {\n        var mark = document.createElement('div');\n        mark.classList.add('mm-marking');\n        mark.style.left = i * spacing + 'px';\n        levelBar.appendChild(mark);\n      }\n    }\n\n    \n\n/**\n* dfd - 'change' event of #slider (<input>)\n* @param {Event} event\n* @param {Element} eventRaisingElement\n* @param {ShadowRoot} shadowRoot\n* @param {BaseScreenViewerAndControl} instance\n*/\nexport function dfd(event, eventRaisingElement, shadowRoot, instance) {\n    //console.log(event);\n}\n", "properties": {"max": {"type": "number", "default": "20"}, "min": {"type": "number", "default": "4"}, "level": {"type": "number"}, "control_width": {"type": "string", "default": "255px"}, "control_height": {"type": "string", "default": "26px"}, "marking_min": {"type": "number"}, "marking_max": {"type": "number", "default": "100"}, "marking_step": {"type": "number", "default": "5"}, "color": {"type": "color", "default": "red"}}, "settings": {}}

package/default-controls/controls/navigation/app-bar.control

@@ -1 +1 @@
-{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": ""}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><div id=\"slotLeft\" class=\"bar-slot\"></div><img id=\"barIcon\" class=\"bar-icon\" alt=\"\" style=\"display:none;\"/><span id=\"barCap\" class=\"bar-cap\"></span><div id=\"slotCenter\" class=\"bar-slot bar-grow\" style=\"justify-content:center;\"></div><div id=\"slotRight\" class=\"bar-slot\"></div></div>", "style": ":host{display:block;width:100%;height:100%;}\n.bar{display:flex;align-items:center;gap:12px;height:100%;padding:0 16px 0 60px;color:#fff;box-sizing:border-box;background:var(--bar-bg,linear-gradient(90deg,#1e3c72 0%,#2a5298 100%));box-shadow:0 2px 12px rgba(0,0,0,.25);}\n.bar-icon{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}\n.bar-cap{font-size:17px;font-weight:600;letter-spacing:.3px;}\n.bar-slot{display:flex;align-items:center;gap:8px;}\n.bar-grow{flex:1;min-width:0;}\n:host([data-theme=\"dark\"]){--bar-bg:linear-gradient(90deg,#0a0e27 0%,#1a1f3a 100%);}\n:host([data-theme=\"light\"]){--bar-bg:linear-gradient(90deg,#ffffff 0%,#eceff1 100%);}\n:host([data-theme=\"purple\"]){--bar-bg:linear-gradient(90deg,#4a1d6e 0%,#7b2d8e 100%);}\n:host([data-theme=\"green\"]){--bar-bg:linear-gradient(90deg,#1b5e20 0%,#2e7d32 100%);}\n:host([data-theme=\"orange\"]){--bar-bg:linear-gradient(90deg,#bf360c 0%,#e64a19 100%);}\n:host([data-theme=\"teal\"]){--bar-bg:linear-gradient(90deg,#004d40 0%,#00695c 100%);}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const resolveImg = (img) => { if(!img) return ''; if(/^(https?:|data:|blob:|\\/)/.test(img)) return img; try{ return (window.IOB&&window.IOB.imagePrefix?window.IOB.imagePrefix:'')+img; }catch(e){ return img; } };\n    const cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const navCfg = (window.IOB && window.IOB.config && window.IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', navCfg.theme || 'default');\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const upd = () => {\n        const bar=instance._getDomElement('bar'), ic=instance._getDomElement('barIcon'), cap=instance._getDomElement('barCap');\n        const bg = instance.bgColor || cfg.bgColor;\n        if(bg) instance.style.setProperty('--bar-bg', bg);\n        const icon = instance.icon || cfg.icon;\n        if(ic){ if(icon){ ic.src=resolveImg(icon); ic.style.display=''; } else ic.style.display='none'; }\n        if(cap) cap.textContent = instance.caption || cfg.caption || '';\n    };\n    instance._assignEvent('caption-changed', upd);\n    instance._assignEvent('icon-changed', upd);\n    instance._assignEvent('bg-color-changed', upd);\n    upd();\n    wireSlot(instance._getDomElement('slotLeft'), cfg, 'left');\n    wireSlot(instance._getDomElement('slotCenter'), cfg, 'center');\n    wireSlot(instance._getDomElement('slotRight'), cfg, 'right');\n}"}
+{"properties": {"caption": {"type": "string", "default": ""}, "icon": {"type": "string", "default": ""}, "bgColor": {"type": "color", "default": ""}}, "settings": {"width": "100%", "height": "48px"}, "html": "<div id=\"bar\" class=\"bar\"><div id=\"slotLeft\" class=\"bar-slot\"></div><img id=\"barIcon\" class=\"bar-icon\" alt=\"\" style=\"display:none;\"/><span id=\"barCap\" class=\"bar-cap\"></span><div id=\"slotCenter\" class=\"bar-slot bar-grow\" style=\"justify-content:center;\"></div><div id=\"slotRight\" class=\"bar-slot\"></div></div>", "style": ":host{display:block;width:100%;height:100%;}\n.bar{display:flex;align-items:center;gap:12px;height:100%;padding:0 16px 0 60px;color:var(--bar-fg,#fff);box-sizing:border-box;background:var(--bar-bg,linear-gradient(90deg,#1e3c72 0%,#2a5298 100%));box-shadow:0 2px 12px rgba(0,0,0,.25);}\n.bar-icon{height:30px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}\n.bar-cap{font-size:17px;font-weight:600;letter-spacing:.3px;}\n.bar-slot{display:flex;align-items:center;gap:8px;}\n.bar-grow{flex:1;min-width:0;}\n:host([data-theme=\"dark\"]){--bar-bg:linear-gradient(90deg,#0a0e27 0%,#1a1f3a 100%);}\n:host([data-theme=\"light\"]){--bar-bg:linear-gradient(90deg,#ffffff 0%,#eceff1 100%);}\n:host([data-theme=\"purple\"]){--bar-bg:linear-gradient(90deg,#4a1d6e 0%,#7b2d8e 100%);}\n:host([data-theme=\"green\"]){--bar-bg:linear-gradient(90deg,#1b5e20 0%,#2e7d32 100%);}\n:host([data-theme=\"orange\"]){--bar-bg:linear-gradient(90deg,#bf360c 0%,#e64a19 100%);}\n:host([data-theme=\"teal\"]){--bar-bg:linear-gradient(90deg,#004d40 0%,#00695c 100%);}\n:host([data-theme=\"auto\"]){--bar-bg:var(--ui-surface,#252b38);--bar-fg:var(--ui-text,#e2e6ec);}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const resolveImg = (img) => { if(!img) return ''; if(/^(https?:|data:|blob:|\\/)/.test(img)) return img; try{ return (window.IOB&&window.IOB.imagePrefix?window.IOB.imagePrefix:'')+img; }catch(e){ return img; } };\n    const cfg = (window.IOB && window.IOB.config && window.IOB.config.appBar) || {};\n    const navCfg = (window.IOB && window.IOB.config && window.IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', navCfg.theme || 'default');\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const upd = () => {\n        const bar=instance._getDomElement('bar'), ic=instance._getDomElement('barIcon'), cap=instance._getDomElement('barCap');\n        const bg = instance.bgColor || cfg.bgColor;\n        if(bg) instance.style.setProperty('--bar-bg', bg);\n        const icon = instance.icon || cfg.icon;\n        if(ic){ if(icon){ ic.src=resolveImg(icon); ic.style.display=''; } else ic.style.display='none'; }\n        if(cap) cap.textContent = instance.caption || cfg.caption || '';\n    };\n    instance._assignEvent('caption-changed', upd);\n    instance._assignEvent('icon-changed', upd);\n    instance._assignEvent('bg-color-changed', upd);\n    upd();\n    wireSlot(instance._getDomElement('slotLeft'), cfg, 'left');\n    wireSlot(instance._getDomElement('slotCenter'), cfg, 'center');\n    wireSlot(instance._getDomElement('slotRight'), cfg, 'right');\n}"}

package/default-controls/controls/navigation/sidebar.control

@@ -1 +1 @@
-{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"slotTop\" class=\"sb-slot\"></div><div id=\"sbItems\" class=\"sb-items\"></div><div id=\"slotBottom\" class=\"sb-slot\"></div></div>", "style": ":host{display:block;width:100%;height:100%;box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;background:var(--sb-bg,linear-gradient(180deg,#1e3c72 0%,#2a5298 100%));color:var(--sb-fg,rgba(255,255,255,.9));box-shadow:2px 0 18px rgba(0,0,0,.28);box-sizing:border-box;}\n.sb-hdr{padding:18px 16px 14px;font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--sb-hdr-fg,#fff);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}\n.sb-items::-webkit-scrollbar{width:6px;}\n.sb-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}\n.sb-slot{display:block;}\n:host([data-theme=\"dark\"]){--sb-bg:linear-gradient(180deg,#0a0e27 0%,#1a1f3a 100%);--sb-fg:rgba(255,255,255,.88);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.04);--mi-hover:rgba(255,255,255,.1);--mi-active:linear-gradient(135deg,rgba(74,158,255,.35),rgba(74,158,255,.14));--mi-active-fg:#fff;--mi-active-icon:#4a9eff;}\n:host([data-theme=\"light\"]){--sb-bg:linear-gradient(180deg,#f5f7fa 0%,#e4e8f0 100%);--sb-fg:#37474f;--sb-hdr-fg:#1a237e;--mi-bg:rgba(0,0,0,.04);--mi-hover:rgba(33,150,243,.1);--mi-active:linear-gradient(135deg,rgba(33,150,243,.22),rgba(33,150,243,.1));--mi-active-fg:#1565c0;--mi-active-icon:#1976d2;}\n:host([data-theme=\"purple\"]){--sb-bg:linear-gradient(180deg,#4a1d6e 0%,#7b2d8e 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(224,64,251,.35),rgba(224,64,251,.15));--mi-active-fg:#fff;--mi-active-icon:#8e24aa;}\n:host([data-theme=\"green\"]){--sb-bg:linear-gradient(180deg,#1b5e20 0%,#2e7d32 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(105,240,174,.3),rgba(105,240,174,.12));--mi-active-fg:#fff;--mi-active-icon:#2e7d32;}\n:host([data-theme=\"orange\"]){--sb-bg:linear-gradient(180deg,#bf360c 0%,#e64a19 100%);--sb-fg:rgba(255,255,255,.92);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.08);--mi-hover:rgba(255,255,255,.18);--mi-active:linear-gradient(135deg,rgba(255,171,64,.32),rgba(255,171,64,.14));--mi-active-fg:#fff;--mi-active-icon:#e64a19;}\n:host([data-theme=\"teal\"]){--sb-bg:linear-gradient(180deg,#004d40 0%,#00695c 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(29,233,182,.3),rgba(29,233,182,.12));--mi-active-fg:#fff;--mi-active-icon:#00897b;}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', cfg.theme || 'default');\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    const hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if(cfg.bgColor) instance.style.setProperty('--sb-bg', cfg.bgColor);\n    if(cfg.textColor){ instance.style.setProperty('--sb-fg', cfg.textColor); instance.style.setProperty('--mi-fg', cfg.textColor); }\n    if(cfg.menuHeaderTextColor) instance.style.setProperty('--sb-hdr-fg', cfg.menuHeaderTextColor);\n    if(cfg.bgColorSelected){ instance.style.setProperty('--mi-active', cfg.bgColorSelected); instance.style.setProperty('--mi-active-icon', cfg.bgColorSelected); }\n    if(cfg.textColorSelected) instance.style.setProperty('--mi-active-fg', cfg.textColorSelected);\n    if(hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; }\n    let state='expanded'; const ICONS_W=64; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner){ if(hasItems && !cfg.hideMenu) applyRuntimeLayout(); else { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; } }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.position='fixed'; instance.style.left='0'; instance.style.bottom='0'; instance.style.top=top+'px';\n        instance.style.zIndex='99999'; instance.style.overflow='hidden'; instance.style.transition='width .2s ease,transform .2s ease';\n        if(!burger){ burger=document.createElement('div'); burger.id='__nav-burger'; burger.textContent='☰'; const inBar=top>0; burger.style.cssText='position:fixed;top:'+(inBar?0:8)+'px;left:'+(inBar?0:8)+'px;z-index:100002;width:'+(inBar?top:42)+'px;height:'+(inBar?top:42)+'px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;'+(inBar?'':'border-radius:8px;')+'background:'+(cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)'))+';color:'+(cfg.showButtonColor||'#fff')+';transition:background .15s;'; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width='calc(100% - '+left+')'; v.style.top=top+'px'; v.style.height='calc(100% - '+top+'px)'; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n    wireSlot(instance._getDomElement('slotTop'), cfg, 'top');\n    wireSlot(instance._getDomElement('slotBottom'), cfg, 'bottom');\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}
+{"properties": {}, "settings": {"width": "220px", "height": "100%"}, "html": "<div id=\"sb\" class=\"sb\"><div id=\"sbHdr\" class=\"sb-hdr\"></div><div id=\"slotTop\" class=\"sb-slot\"></div><div id=\"sbItems\" class=\"sb-items\"></div><div id=\"slotBottom\" class=\"sb-slot\"></div></div>", "style": ":host{display:block;width:100%;height:100%;box-sizing:border-box;}\n.sb{display:flex;flex-direction:column;height:100%;width:100%;background:var(--sb-bg,linear-gradient(180deg,#1e3c72 0%,#2a5298 100%));color:var(--sb-fg,rgba(255,255,255,.9));box-shadow:2px 0 18px rgba(0,0,0,.28);box-sizing:border-box;}\n.sb-hdr{padding:18px 16px 14px;font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--sb-hdr-fg,#fff);border-bottom:1px solid rgba(255,255,255,.12);white-space:nowrap;overflow:hidden;}\n.sb-items{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 0;}\n.sb-items::-webkit-scrollbar{width:6px;}\n.sb-items::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}\n.sb-slot{display:block;}\n:host([data-theme=\"dark\"]){--sb-bg:linear-gradient(180deg,#0a0e27 0%,#1a1f3a 100%);--sb-fg:rgba(255,255,255,.88);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.04);--mi-hover:rgba(255,255,255,.1);--mi-active:linear-gradient(135deg,rgba(74,158,255,.35),rgba(74,158,255,.14));--mi-active-fg:#fff;--mi-active-icon:#4a9eff;}\n:host([data-theme=\"light\"]){--sb-bg:linear-gradient(180deg,#f5f7fa 0%,#e4e8f0 100%);--sb-fg:#37474f;--sb-hdr-fg:#1a237e;--mi-bg:rgba(0,0,0,.04);--mi-hover:rgba(33,150,243,.1);--mi-active:linear-gradient(135deg,rgba(33,150,243,.22),rgba(33,150,243,.1));--mi-active-fg:#1565c0;--mi-active-icon:#1976d2;}\n:host([data-theme=\"purple\"]){--sb-bg:linear-gradient(180deg,#4a1d6e 0%,#7b2d8e 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(224,64,251,.35),rgba(224,64,251,.15));--mi-active-fg:#fff;--mi-active-icon:#8e24aa;}\n:host([data-theme=\"green\"]){--sb-bg:linear-gradient(180deg,#1b5e20 0%,#2e7d32 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(105,240,174,.3),rgba(105,240,174,.12));--mi-active-fg:#fff;--mi-active-icon:#2e7d32;}\n:host([data-theme=\"orange\"]){--sb-bg:linear-gradient(180deg,#bf360c 0%,#e64a19 100%);--sb-fg:rgba(255,255,255,.92);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.08);--mi-hover:rgba(255,255,255,.18);--mi-active:linear-gradient(135deg,rgba(255,171,64,.32),rgba(255,171,64,.14));--mi-active-fg:#fff;--mi-active-icon:#e64a19;}\n:host([data-theme=\"teal\"]){--sb-bg:linear-gradient(180deg,#004d40 0%,#00695c 100%);--sb-fg:rgba(255,255,255,.9);--sb-hdr-fg:#fff;--mi-bg:rgba(255,255,255,.07);--mi-hover:rgba(255,255,255,.16);--mi-active:linear-gradient(135deg,rgba(29,233,182,.3),rgba(29,233,182,.12));--mi-active-fg:#fff;--mi-active-icon:#00897b;}\n:host([data-theme=\"auto\"]){--sb-bg:var(--ui-surface,#252b38);--sb-fg:var(--ui-text,#e2e6ec);--sb-hdr-fg:var(--ui-text,#fff);--mi-bg:color-mix(in srgb,var(--ui-text,#fff) 6%,transparent);--mi-fg:var(--ui-text,#e2e6ec);--mi-hover:color-mix(in srgb,var(--ui-text,#fff) 13%,transparent);--mi-active:color-mix(in srgb,var(--accent,#2680eb) 26%,transparent);--mi-active-border:color-mix(in srgb,var(--accent,#2680eb) 55%,transparent);--mi-active-fg:var(--ui-text,#fff);--mi-active-icon:var(--accent,#2680eb);}", "script": "export function init(instance){\n    instance._bindingsRefresh();\n    const IOB = window.IOB;\n    const cfg = (IOB && IOB.config && IOB.config.navigation) || {};\n    instance.setAttribute('data-theme', cfg.theme || 'default');\n    function htmlFromDef(def){\n        let attrs='';\n        if(def.defaultAttributes) for(const a in def.defaultAttributes){ const v=def.defaultAttributes[a]; attrs+=' '+a+'=\"'+String(typeof v==='object'?JSON.stringify(v):v).replace(/\"/g,'&quot;')+'\"'; }\n        let style='';\n        if(def.defaultStyles) for(const k in def.defaultStyles) style+=k+':'+def.defaultStyles[k]+';';\n        if(def.defaultWidth) style+='width:'+def.defaultWidth+';';\n        if(def.defaultHeight) style+='height:'+def.defaultHeight+';';\n        return '<'+def.tag+attrs+(style?' style=\"'+style+'\"':'')+'>'+(def.defaultContent||'')+'</'+def.tag+'>';\n    }\n    function wireSlot(zone, cfgRoot, key){\n        if(!zone) return;\n        zone.innerHTML = (cfgRoot && cfgRoot.slots && cfgRoot.slots[key]) || '';\n        if(!isDesigner) return;\n        if(!zone.innerHTML.trim()){ zone.dataset.empty='1'; zone.style.minHeight='30px'; zone.style.outline='1px dashed rgba(255,255,255,.28)'; zone.style.borderRadius='8px'; zone.style.margin='4px 8px'; }\n        (function(){\n            let chip=null,target=null,hideT=null;\n            const saveFromDom=()=>{ if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=Array.from(zone.children).map(c=>c.outerHTML).join(''); if(window.IOB&&window.IOB.saveConfig) window.IOB.saveConfig(); };\n            const hideChip=()=>{ if(chip) chip.style.display='none'; target=null; };\n            const ensureChip=()=>{ if(chip) return chip; chip=document.createElement('div'); chip.className='nav-slot-delchip'; chip.textContent='✕'; chip.title='Delete'; chip.style.cssText='position:fixed;z-index:2147483647;width:18px;height:18px;line-height:18px;text-align:center;font:700 12px/18px sans-serif;background:#e74c3c;color:#fff;border-radius:50%;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.45);user-select:none;display:none;'; chip.addEventListener('mouseenter',()=>{ if(hideT){clearTimeout(hideT);hideT=null;} }); chip.addEventListener('mouseleave',hideChip); chip.addEventListener('click',e=>{ e.preventDefault(); e.stopPropagation(); if(target&&target.parentNode===zone){ target.remove(); saveFromDom(); } hideChip(); }); document.body.appendChild(chip); return chip; };\n            const showChip=(el)=>{ if(hideT){clearTimeout(hideT);hideT=null;} target=el; const c=ensureChip(); const r=el.getBoundingClientRect(); c.style.left=(r.right-9)+'px'; c.style.top=(r.top-9)+'px'; c.style.display='block'; };\n            zone.addEventListener('mouseover', e=>{ let el=e.target; while(el && el!==zone && el.parentNode!==zone) el=el.parentNode; if(el && el.parentNode===zone && el.nodeType===1) showChip(el); });\n            zone.addEventListener('mouseleave', ()=>{ hideT=setTimeout(()=>{ if(chip && chip.style.display!=='none' && !chip.matches(':hover')) hideChip(); }, 160); });\n        })();\n        zone.addEventListener('dragover', e=>{ if(e.dataTransfer && e.dataTransfer.types && e.dataTransfer.types.indexOf('text/json/elementdefintion')>=0){ e.preventDefault(); zone.style.background='rgba(255,255,255,.18)'; } });\n        zone.addEventListener('dragleave', ()=>{ zone.style.background=''; });\n        zone.addEventListener('drop', e=>{ e.preventDefault(); e.stopPropagation(); zone.style.background='';\n            try{ const td=e.dataTransfer.getData('text/json/elementdefintion'); if(!td) return; const def=JSON.parse(td); const html=htmlFromDef(def);\n                if(!cfgRoot.slots) cfgRoot.slots={}; cfgRoot.slots[key]=(cfgRoot.slots[key]||'')+html;\n                if(window.IOB && window.IOB.saveConfig) window.IOB.saveConfig();\n            }catch(err){ console.warn('[nav] slot drop failed', err); }\n        });\n    }\n    const isDesigner = !!document.querySelector('iobroker-webui-app-shell');\n    if(typeof isDesigner!=='undefined' && isDesigner){ try{ document.querySelectorAll('.nav-slot-delchip').forEach(n=>n.remove()); }catch(e){} }\n    const hdr=instance._getDomElement('sbHdr'), items=instance._getDomElement('sbItems');\n    if(cfg.bgColor) instance.style.setProperty('--sb-bg', cfg.bgColor);\n    if(cfg.textColor){ instance.style.setProperty('--sb-fg', cfg.textColor); instance.style.setProperty('--mi-fg', cfg.textColor); }\n    if(cfg.menuHeaderTextColor) instance.style.setProperty('--sb-hdr-fg', cfg.menuHeaderTextColor);\n    if(cfg.bgColorSelected){ instance.style.setProperty('--mi-active', cfg.bgColorSelected); instance.style.setProperty('--mi-active-icon', cfg.bgColorSelected); }\n    if(cfg.textColorSelected) instance.style.setProperty('--mi-active-fg', cfg.textColorSelected);\n    if(hdr){ hdr.textContent=cfg.menuHeaderText||''; hdr.style.display=cfg.menuHeaderText?'':'none'; }\n    let state='expanded'; const ICONS_W=64; let burger=null; let hasItems=false;\n    const navWidth = cfg.menuWidth ? (/^\\d+$/.test(String(cfg.menuWidth))?cfg.menuWidth+'px':String(cfg.menuWidth)) : '220px';\n    const setActive=(name)=>{ if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>{ mi.selected=(mi.screenName===name); }); };\n    const navTo=(name)=>{ if(IOB&&IOB.changeView) IOB.changeView.emit(name); setActive(name); if(cfg.hideAfterSelection) setState('hidden'); };\n    async function loadEntries(){\n        if(!IOB||!IOB.getAllNames) return [];\n        const names=await IOB.getAllNames('screen').catch(()=>[]);\n        const list=[];\n        for(const n of names){ const o=await IOB.getWebuiObject('screen',n).catch(()=>null); const nv=o&&o.settings&&o.settings.navigation; if(nv&&nv.show) list.push({name:n,title:nv.title||n,order:parseFloat(nv.order)||0,image:nv.image||''}); }\n        list.sort((a,b)=>a.order-b.order); return list;\n    }\n    async function render(){\n        const list=await loadEntries(); hasItems=list.length>0;\n        if(items){ items.innerHTML='';\n            for(const e of list){ const mi=document.createElement('webui-navigation-menu-item'); mi.screenName=e.name; mi.title=e.title; mi.image=e.image; mi.addEventListener('menuitemclick',()=>navTo(e.name)); items.appendChild(mi); }\n        }\n        if(!isDesigner){ if(hasItems && !cfg.hideMenu) applyRuntimeLayout(); else { const v=document.getElementById('viewer'); if(v){ v.style.left='0'; v.style.width='100%'; } instance.style.display='none'; } }\n    }\n    function applyRuntimeLayout(){\n        const ab=document.getElementById('__nav-appbar-host'); const top=ab?ab.offsetHeight:0;\n        instance.style.position='fixed'; instance.style.left='0'; instance.style.bottom='0'; instance.style.top=top+'px';\n        instance.style.zIndex='99999'; instance.style.overflow='hidden'; instance.style.transition='width .2s ease,transform .2s ease';\n        if(!burger){ burger=document.createElement('div'); burger.id='__nav-burger'; burger.textContent='☰'; const inBar=top>0; burger.style.cssText='position:fixed;top:'+(inBar?0:8)+'px;left:'+(inBar?0:8)+'px;z-index:100002;width:'+(inBar?top:42)+'px;height:'+(inBar?top:42)+'px;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;'+(inBar?'':'border-radius:8px;')+'background:'+(cfg.showButtonBg||(inBar?'transparent':'rgba(0,0,0,.45)'))+';color:'+(cfg.showButtonColor||'#fff')+';transition:background .15s;'; burger.onclick=cycle; document.body.appendChild(burger); }\n        setState(state);\n    }\n    function setState(s){\n        state=s; const v=document.getElementById('viewer'); const top=parseInt(instance.style.top)||0; let left='0px';\n        const compact=(state==='icons');\n        if(items) items.querySelectorAll('webui-navigation-menu-item').forEach(mi=>mi.compact=compact);\n        if(state==='expanded'){ instance.style.width=navWidth; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display=cfg.menuHeaderText?'':'none'; left=navWidth; }\n        else if(state==='icons'){ instance.style.width=ICONS_W+'px'; instance.style.transform='translateX(0)'; if(hdr)hdr.style.display='none'; left=ICONS_W+'px'; }\n        else { instance.style.transform='translateX(-110%)'; left='0px'; }\n        if(v){ v.style.left=left; v.style.width='calc(100% - '+left+')'; v.style.top=top+'px'; v.style.height='calc(100% - '+top+'px)'; }\n    }\n    function cycle(){ const o=['expanded','icons','hidden']; let n=o[(o.indexOf(state)+1)%o.length]; if(n==='hidden'&&cfg.doNotHideCompletely)n='icons'; setState(n); }\n    wireSlot(instance._getDomElement('slotTop'), cfg, 'top');\n    wireSlot(instance._getDomElement('slotBottom'), cfg, 'bottom');\n    render();\n    if(IOB&&IOB.changeView) IOB.changeView.on(v=>setActive(v));\n    const sv=document.getElementById('viewer'); if(sv&&sv.screenName) setActive(sv.screenName);\n}"}

package/default-controls/controls/user-badge.control

@@ -0,0 +1 @@
+{"properties": {"stateid": {"type": "string", "default": "local_username"}, "label": {"type": "string", "default": ""}, "showavatar": {"type": "enum", "default": "true", "values": ["true", "false"]}, "showstatus": {"type": "enum", "default": "true", "values": ["true", "false"]}}, "settings": {"width": "170px", "height": "40px"}, "html": "<div class=\"ub\"><div class=\"ub-av\" bind-css:display=\"??showavatar;(__0===false||__0==='false')?'none':''\"><span bind-content:text=\"?stateid;(__0==null?'?':String(__0)).trim().charAt(0).toUpperCase()||'?'\"></span><span class=\"ub-dot\" bind-css:display=\"??showstatus;(__0===false||__0==='false')?'none':''\"></span></div><div class=\"ub-tx\"><span class=\"ub-label\" bind-content:text=\"??label\" bind-css:display=\"??label;__0?'':'none'\"></span><span class=\"ub-name\" bind-content:text=\"?stateid;(__0==null||String(__0).trim()==='')?'\\u2014':String(__0)\"></span></div></div>", "style": ":host{display:inline-block;height:100%;font-family:'Segoe UI',system-ui,Roboto,sans-serif;}.ub{display:inline-flex;align-items:center;gap:10px;height:100%;padding:4px 14px 4px 5px;box-sizing:border-box;border-radius:999px;background:color-mix(in srgb,var(--ui-text,#fff) 7%,transparent);border:1px solid var(--ui-border,#3b4250);transition:background .15s;}.ub:hover{background:color-mix(in srgb,var(--ui-text,#fff) 12%,transparent);}.ub-av{position:relative;width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent,#2680eb),color-mix(in srgb,var(--accent,#2680eb) 55%,var(--ui-page,#000)));color:#fff;font-size:14px;font-weight:700;letter-spacing:.5px;box-shadow:0 1px 4px rgba(0,0,0,.25);}.ub-dot{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:var(--ui-ok,#37d67a);border:2px solid var(--ui-surface,#252b38);box-sizing:border-box;}.ub-tx{display:flex;flex-direction:column;justify-content:center;line-height:1.15;min-width:0;}.ub-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--ui-dim,#9aa3b0);white-space:nowrap;}.ub-name{font-size:14px;font-weight:600;color:var(--ui-text,#e2e6ec);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}", "script": "export function init(instance){ try{ instance._bindingsRefresh && instance._bindingsRefresh(); }catch(e){} }\nexport function connectedCallback(instance){}"}