iobroker.webui 1.22.0 → 1.23.2

package/README.md

@@ -133,6 +133,17 @@ runtime.html?screenName=screen2
 	Placeholder for next versions:
 	### __WORK IN PROGRESS__
 -->
+### 1.23.2 (2025-01-19)
+- one more fix in gulpfile
+
+### 1.23.1 (2025-01-19)
+- fix gulp should work again
+
+### 1.23.0 (2025-01-19)
+- fix paste in events assignment
+- iobroker Signal Selector
+- binding to width and height in custom controls
+
 ### 1.22.0 (2025-01-15)
 - local signals browser
 - style completition fixes

package/dist/importmaps/importmap-config.d.ts

@@ -31,5 +31,6 @@ declare const importMapConfig: {
         wunderbaum: string;
         "wunderbaum/": string;
         "toastify-js": string;
+        "iobroker.iobroker-webcomponent-object-selector/": string;
     };
 };

package/dist/importmaps/importmap-config.js

@@ -31,7 +31,8 @@ const importMapConfig = {
         "long": "./node_modules/long/index.js",
         "wunderbaum": "./node_modules/wunderbaum/dist/wunderbaum.esm.min.js",
         "wunderbaum/": "./node_modules/wunderbaum/",
-        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js"
+        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js",
+        "iobroker.iobroker-webcomponent-object-selector/": "./node_modules/iobroker.iobroker-webcomponent-object-selector/"
     }
 };
 //@ts-ignore

package/gulpfile.mjs

@@ -47,14 +47,9 @@ function copyNodeModules() {
         "monaco-editor",
         //"tslib"
         //"wunderbaum",
-        
-        "/node_modules/blockly/blockly_compressed.js",
-        "/node_modules/blockly/blocks_compressed.js",
-        "/node_modules/blockly/javascript_compressed.js",
-        "/node_modules/blockly/msg/en.js",
-        "/node_modules/@blockly/zoom-to-fit/dist/index.js",
-    ]
 
+        "iobroker.iobroker-webcomponent-object-selector"
+    ]
     runtimeModules = runtimeModules.map(x => './node_modules/' + x + '/**/*')
 
     return src(runtimeModules, { base: './', encoding: false })
@@ -113,7 +108,7 @@ function cleanupNodeModules() {
 
 function cleanupMonaco() {
     return deleteAsync([
-        './www/node_modules/monaco-editor/min/vs/basic-languages/**/*', 
+        './www/node_modules/monaco-editor/min/vs/basic-languages/**/*',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/javascript',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/typescript',
         '!./www/node_modules/monaco-editor/min/vs/basic-languages/html',

package/io-package.json

@@ -1,7 +1,7 @@
 {
   "common": {
     "name": "webui",
-    "version": "1.22.0",
+    "version": "1.23.2",
     "titleLang": {
       "en": "webui",
       "de": "webui",
@@ -29,6 +29,45 @@
       "zh-cn": "使用万维网传送器的高锰用户接口"
     },
     "news": {
+      "1.23.2": {
+        "en": "one more fix in gulpfile",
+        "de": "noch eine fix in gulpfile",
+        "ru": "еще одно исправление в gulpfile",
+        "pt": "mais uma correção no gulpfile",
+        "nl": "nog een fix in gulpfile",
+        "fr": "une autre correction dans gulpfile",
+        "it": "un altro fix in gulpfile",
+        "es": "uno más se fijan en el archivo del gulp",
+        "pl": "jeszcze jeden fix w gulpfile",
+        "uk": "ще одна фіксація в gulpfile",
+        "zh-cn": "再加一个固醇"
+      },
+      "1.23.1": {
+        "en": "fix gulp should work again",
+        "de": "gulp sollte wieder funktionieren",
+        "ru": "исправить gulp должно работать снова",
+        "pt": "corrigir gulp deve funcionar novamente",
+        "nl": "fix gulp moet weer werken",
+        "fr": "réparer gulp devrait fonctionner à nouveau",
+        "it": "fissare gulp dovrebbe funzionare di nuovo",
+        "es": "arreglar golp debe trabajar de nuevo",
+        "pl": "fix gulp powinien działać ponownie",
+        "uk": "закріпити гельпом потрібно знову",
+        "zh-cn": "修补 gulp 应再次工作"
+      },
+      "1.23.0": {
+        "en": "fix paste in events assignment\niobroker Signal Selector\nbinding to width and height in custom controls",
+        "de": "fixieren sie paste in der ereigniszuordnung\niobroker Signal Selektor\nbindung an breite und höhe in benutzerdefinierten steuerungen",
+        "ru": "фиксация пасты в присвоении событий\niobroker Signal Selector\nпривязки к ширине и высоте в пользовательском контроле",
+        "pt": "corrigir pasta na atribuição de eventos\nseletor de Sinal iobroker\nligação à largura e altura em controles personalizados",
+        "nl": "plak plakken in de opdracht van gebeurtenissen\niobroker-signaalkiezer\nbinding aan breedte en hoogte in aangepaste controles",
+        "fr": "fixer coller dans l'affectation des événements\nsélecteur de signal iobroker\nfixation à la largeur et à la hauteur dans les commandes personnalisées",
+        "it": "correzione della pasta nell'assegnazione degli eventi\niobroker Selettore Segnale\nlegare a larghezza e altezza nei controlli personalizzati",
+        "es": "arreglar pasta en la asignación de eventos\niobroker Signal Selector\nunión a ancho y altura en controles personalizados",
+        "pl": "fix pasta w przyporządkowaniu zdarzeń\niobroker Selektor sygnału\nwiązanie do szerokości i wysokości w sterowaniu własnym",
+        "uk": "фіксувати пасту в появі подій\niobroker Signal Вибратор\nобов'язковий для ширини і висоти в користувацьких управліннях",
+        "zh-cn": "在事件任务中固定粘贴\nio 经纪人信号选择器\n绑定自定义控件中的宽度和高度"
+      },
       "1.22.0": {
         "en": "local signals browser\nstyle completition fixes\nspecial bindings for \"ring\" cameras",
         "de": "lokale signale browser\nstil completition fixes\nspezielle bindungen für \"ring\"-kameras",
@@ -80,45 +119,6 @@
         "pl": "dodaj kilka pakietów\nuruchom prosty skrypt cmd i uaktualnij wyświetlacz macierzysty\naktualizacja pakietów, downgrade monaco\nnaprawić kopię zapasową",
         "uk": "додати кілька пакетів\nзапустити простий скрипт cmd і оновлення отримати батьківський екран\nоновлення пакетів, град монако\nрезервне копіювання",
         "zh-cn": "添加几个软件包\n运行简单的脚本 cmd 并更新父屏幕\n更新软件包, 降级\n修复备份"
-      },
-      "1.19.4": {
-        "en": "copy & paste events",
-        "de": "kopieren und einfügen von ereignissen",
-        "ru": "копировать события",
-        "pt": "copiar e colar eventos",
-        "nl": "gebeurtenissen kopiëren & plakken",
-        "fr": "copier & coller les événements",
-        "it": "copia & incolla eventi",
-        "es": "copy \" paste events",
-        "pl": "kopiowanie i wklejanie zdarzeń",
-        "uk": "скопіювати та вставляти події",
-        "zh-cn": "复制粘贴事件( p)"
-      },
-      "1.19.3": {
-        "en": "support null value",
-        "de": "unterstützungswert",
-        "ru": "нулевое значение",
-        "pt": "suporte valor nulo",
-        "nl": "steun nulwaarde",
-        "fr": "support valeur null",
-        "it": "supporto valore null",
-        "es": "valor nulo",
-        "pl": "wartość null wsparcia",
-        "uk": "підтримка значення null",
-        "zh-cn": "支持无效值"
-      },
-      "1.19.2": {
-        "en": "use name in classlist",
-        "de": "name in der klassenliste verwenden",
-        "ru": "имя в класслисте",
-        "pt": "use o nome na lista de classes",
-        "nl": "naam gebruiken in klasselijst",
-        "fr": "utiliser le nom dans la liste des classes",
-        "it": "usare il nome in classifica",
-        "es": "nombre de uso en la lista de clases",
-        "pl": "użyj nazwy na liście klas",
-        "uk": "ім'я користувача в класі",
-        "zh-cn": "使用分类列表中的名称"
       }
     },
     "icon": "logo.png",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iobroker.webui",
-  "version": "1.22.0",
+  "version": "1.23.2",
   "description": "ioBroker webui",
   "type": "module",
   "main": "dist/backend/main.js",
@@ -44,7 +44,7 @@
   },
   "dependencies": {
     "@iobroker/adapter-core": "^3.2.3",
-    "@types/node": "^22.10.6"
+    "@types/node": "^22.10.7"
   },
   "devDependencies": {
     "@adobe/css-tools": "4.4.1",
@@ -59,15 +59,15 @@
     "@node-projects/node-html-parser-esm": "^6.2.0",
     "@node-projects/propertygrid.webcomponent": "^1.2.3",
     "@node-projects/splitview.webcomponent": "^1.0.1",
-    "@node-projects/web-component-designer": "^0.1.237",
+    "@node-projects/web-component-designer": "^0.1.239",
     "@node-projects/web-component-designer-codeview-monaco": "^0.1.32",
     "@node-projects/web-component-designer-htmlparserservice-nodehtmlparser": "^0.1.11",
     "@node-projects/web-component-designer-stylesheetservice-css-tools": "^0.1.10",
-    "@node-projects/web-component-designer-visualization-addons": "^0.1.103",
-    "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.31",
+    "@node-projects/web-component-designer-visualization-addons": "^0.1.112",
+    "@node-projects/web-component-designer-widgets-wunderbaum": "^0.1.32",
     "@types/json-schema": "^7.0.15",
     "@web/dev-server": "^0.4.6",
-    "blockly": "^11.2.0",
+    "blockly": "^11.2.1",
     "chai": "^5.1.2",
     "chai-as-promised": "^8.0.1",
     "construct-style-sheets-polyfill": "^3.1.0",
@@ -78,9 +78,11 @@
     "es-module-shims": "^2.0.3",
     "eslint": "^9.18.0",
     "esprima-next": "^6.0.3",
+    "glob-stream": "^8.0.2",
     "gulp": "^5.0.0",
     "gulp-git": "^2.11.0",
     "gulp-replace": "^1.1.4",
+    "iobroker.iobroker-webcomponent-object-selector": "file:binary/iobroker.iobroker-webcomponent-object-selector-0.0.1.tgz",
     "long": "^5.2.4",
     "mobile-drag-drop": "^3.0.0-rc.0",
     "mocha": "^11.0.1",

package/www/dist/frontend/config/ConfigureWebcomponentDesigner.js

@@ -2,7 +2,7 @@ import { BaseCustomWebcomponentBindingsService, EventsService, JsonFileElementsS
 import { NodeHtmlParserService } from '@node-projects/web-component-designer-htmlparserservice-nodehtmlparser';
 import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
 import { CssToolsStylesheetService } from '@node-projects/web-component-designer-stylesheetservice-css-tools';
-import { BindingsEditor, VisualizationBindingsService, PropertyGridDragDropService, ScriptRefactorService, VisualizationBindingsRefactorService } from "@node-projects/web-component-designer-visualization-addons";
+import { VisualizationBindingsService, PropertyGridDragDropService, ScriptRefactorService, VisualizationBindingsRefactorService } from "@node-projects/web-component-designer-visualization-addons";
 import { IobrokerWebuiBindableObjectsService } from "../services/IobrokerWebuiBindableObjectsService.js";
 import { IobrokerWebuiDemoProviderService } from "../services/IobrokerWebuiDemoProviderService.js";
 import { IobrokerWebuiConfirmationWrapper } from "./IobrokerWebuiConfirmationWrapper.js";
@@ -22,6 +22,7 @@ import { IobrokerWebuiCustomControlEventsService } from "../services/IobrokerWeb
 import { IobrokerWebuiBindableObjectsForPropertiesService } from "../services/IobrokerWebuiBindableObjectsForPropertiesService.js";
 import { IobrokerWebuiBindableLocalObjectsService } from "../services/IobrokerWebuiBindableLocalObjectsService.js";
 import { IobrokerWebuiBindableObjectDragDropService } from "../services/IobrokerWebuiBindableObjectDragDropService.js";
+import { IobrokerWebuiBindingsEditor } from "./IobrokerWebuiBindingsEditor.js";
 export function configureDesigner(bindingsHelper) {
     const serviceContainer = createDefaultServiceContainer();
     serviceContainer.register("bindingService", new BaseCustomWebcomponentBindingsService());
@@ -63,7 +64,7 @@ export function configureDesigner(bindingsHelper) {
     }
     serviceContainer.config.openBindingsEditor = async (property, designItems, binding, target) => {
         if (!binding || binding.service instanceof VisualizationBindingsService) {
-            let dynEdt = new BindingsEditor(property, binding, target, serviceContainer, designItems[0].instanceServiceContainer, window.appShell);
+            let dynEdt = new IobrokerWebuiBindingsEditor(property, binding, target, serviceContainer, designItems[0].instanceServiceContainer, window.appShell);
             let cw = new IobrokerWebuiConfirmationWrapper();
             cw.title = "Edit Binding of '" + property.name + "' - " + property.propertyType;
             cw.appendChild(dynEdt);

package/www/dist/frontend/config/IobrokerWebuiAppShell.js

@@ -8,6 +8,7 @@ const bindingsHelper = new BindingsHelper(iobrokerHandler);
 LazyLoader.LoadJavascript('./node_modules/monaco-editor/min/vs/loader.js');
 import '@node-projects/web-component-designer';
 import { ValueType } from '@node-projects/web-component-designer';
+import { BindableObjectsBrowser } from '@node-projects/web-component-designer-widgets-wunderbaum';
 import { PanelContainer } from 'dock-spawn-ts/lib/js/PanelContainer.js';
 import { PanelType } from 'dock-spawn-ts/lib/js/enums/PanelType.js';
 import { configureDesigner } from './ConfigureWebcomponentDesigner.js';
@@ -124,6 +125,10 @@ export class IobrokerWebuiAppShell extends BaseCustomWebComponentConstructorAppe
         this.scriptSystem = scriptSystem;
         this.bindingsHelper = bindingsHelper;
     }
+    createBindableObjectBrowser() {
+        return new BindableObjectsBrowser();
+    }
+    ;
     async ready() {
         this._dock = this._getDomElement('dock');
         this._solutionExplorer = this._getDomElement('solutionExplorer');

package/www/dist/frontend/config/IobrokerWebuiBindingsEditor.js

@@ -0,0 +1,25 @@
+import { BindingsEditor } from "@node-projects/web-component-designer-visualization-addons";
+import { openSelectIdDialog } from "iobroker.iobroker-webcomponent-object-selector/dist/selectIdHelper.js";
+//@ts-ignore
+export class IobrokerWebuiBindingsEditor extends BindingsEditor {
+    static is = 'iobroker-webui-bindings-editor';
+    constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell) {
+        super(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell);
+        let groupObjectNameControl = this._getDomElement('groupObjectName');
+        let btn = document.createElement('button');
+        btn.textContent = 'IOB';
+        btn.title = "iobroker signal selector";
+        btn.style.height = '22px';
+        btn.onclick = async () => {
+            var res = await openSelectIdDialog({ host: window.iobrokerHost, port: window.iobrokerPort, protocol: window.location.protocol, language: 'en', selected: '', allowAll: true });
+            if (res) {
+                if (this.objectNames.length > 1)
+                    this.objectNames += ";";
+                this.objectNames += res;
+                this._bindingsRefresh();
+            }
+        };
+        groupObjectNameControl.appendChild(btn);
+    }
+}
+customElements.define(IobrokerWebuiBindingsEditor.is, IobrokerWebuiBindingsEditor);

package/www/dist/frontend/config/IobrokerWebuiSignalPropertyEditor.js

@@ -0,0 +1,18 @@
+import { SignalPropertyEditor } from "@node-projects/web-component-designer-visualization-addons";
+import { openSelectIdDialog } from "iobroker.iobroker-webcomponent-object-selector/dist/selectIdHelper.js";
+export class IobrokerWebuiSignalPropertyEditor extends SignalPropertyEditor {
+    constructor(property, shell) {
+        super(property, shell);
+        let btn = document.createElement('button');
+        btn.textContent = 'IOB';
+        btn.title = "iobroker signal selector";
+        btn.onclick = async () => {
+            var res = await openSelectIdDialog({ host: window.iobrokerHost, port: window.iobrokerPort, protocol: window.location.protocol, language: 'en', selected: this._ip.value, allowAll: true });
+            if (res) {
+                this._ip.value = res;
+                this._valueChanged(this._ip.value);
+            }
+        };
+        this._container.appendChild(btn);
+    }
+}

package/www/dist/frontend/generated/Properties.json

@@ -39,7 +39,7 @@
                 "arguments",
                 "caller",
                 "name",
-                "__@hasInstance@2369"
+                "__@hasInstance@5144"
             ],
             "type": "object"
         },
@@ -78,6 +78,9 @@
                     },
                     "type": "array"
                 },
+                "bindToSize": {
+                    "type": "boolean"
+                },
                 "height": {
                     "type": "string"
                 },
@@ -93,7 +96,8 @@
                 "width",
                 "height",
                 "useGlobalStyle",
-                "addoptedStyles"
+                "addoptedStyles",
+                "bindToSize"
             ],
             "type": "object"
         },

package/www/dist/frontend/runtime/CustomControls.js

@@ -8,30 +8,60 @@ export class BaseCustomControl extends BaseCustomWebComponentConstructorAppend {
     #scriptObject;
     #bindings;
     #eventListeners = [];
+    #resizeObserver;
+    #specialValueHandler;
     constructor() {
         super();
         this._bindingsParse(null, true);
         if (this.constructor[webuiCustomControlSymbol].control.settings.useGlobalStyle)
             this.shadowRoot.adoptedStyleSheets = [iobrokerHandler.globalStylesheet, ...this.shadowRoot.adoptedStyleSheets];
+        if (this.constructor[webuiCustomControlSymbol].control.settings.bindToSize) {
+            this.#resizeObserver = new ResizeObserver((entries) => {
+                let cbs = this.#specialValueHandler.valueChangedCallbacks.get('width');
+                if (cbs) {
+                    for (const c of cbs)
+                        c();
+                }
+                cbs = this.#specialValueHandler.valueChangedCallbacks.get('height');
+                if (cbs) {
+                    for (const c of cbs)
+                        c();
+                }
+            });
+        }
     }
     async connectedCallback() {
         this._parseAttributesToProperties();
         this._bindingsRefresh();
-        this.#bindings = window.appShell.bindingsHelper.applyAllBindings(this.shadowRoot, this._getRelativeSignalsPath(), this);
+        this.#specialValueHandler = {
+            valueProvider: (specialValueName) => {
+                switch (specialValueName) {
+                    case 'width':
+                        return this.getBoundingClientRect().width;
+                    case 'height':
+                        return this.getBoundingClientRect().height;
+                }
+                return null;
+            },
+            valueChangedCallbacks: new Map()
+        };
+        this.#bindings = window.appShell.bindingsHelper.applyAllBindings(this.shadowRoot, this._getRelativeSignalsPath(), this, this.#specialValueHandler);
         this.#scriptObject = await window.appShell.scriptSystem.assignAllScripts('customControl ' + this.constructor[webuiCustomControlSymbol].name, this.constructor[webuiCustomControlSymbol].control.script, this.shadowRoot, this, iobrokerHandler);
-        this.#scriptObject?.connectedCallback?.(this);
+        this.#scriptObject?.connectedCallback?.(this, this.shadowRoot);
         for (let e of this.#eventListeners) {
             this.addEventListener(e[0], e[1]);
         }
+        this.#resizeObserver.observe(this);
     }
     disconnectedCallback() {
         for (let e of this.#eventListeners) {
             this.removeEventListener(e[0], e[1]);
         }
-        this.#scriptObject?.disconnectedCallback?.(this);
+        this.#scriptObject?.disconnectedCallback?.(this, this.shadowRoot);
         for (const b of this.#bindings)
             b();
         this.#bindings = null;
+        this.#resizeObserver.unobserve(this);
     }
     _assignEvent(event, callback) {
         const arrayEl = [event, callback];
@@ -101,7 +131,8 @@ export function generateCustomControl(name, control) {
         window['IobrokerWebuiCustomControl' + name] = function () {
             //@ts-ignore
             let instance = Reflect.construct(BaseCustomControl, [], window['IobrokerWebuiCustomControl' + name]);
-            for (let p in control.properties) {
+            let currControl = window['IobrokerWebuiCustomControl' + name][webuiCustomControlSymbol].control;
+            for (let p in currControl.properties) {
                 Object.defineProperty(instance, p, {
                     get() {
                         return this['_' + p];
@@ -116,8 +147,8 @@ export function generateCustomControl(name, control) {
                     enumerable: true,
                     configurable: true,
                 });
-                if (control.properties[p].default) {
-                    instance['_' + p] = control.properties[p].default;
+                if (currControl.properties[p].default) {
+                    instance['_' + p] = currControl.properties[p].default;
                 }
             }
             return instance;

package/www/dist/frontend/runtime/ScreenViewer.js

@@ -268,7 +268,7 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
             if (this._screenName)
                 this._loadScreen();
         });
-        this._scriptObject?.connectedCallback?.(this);
+        this._scriptObject?.connectedCallback?.(this, this._rootShadow);
         for (let e of this.#eventListeners) {
             this.addEventListener(e[0], e[1]);
         }
@@ -281,7 +281,7 @@ let ScreenViewer = class ScreenViewer extends BaseCustomWebComponentConstructorA
         }
         this._refreshViewSubscription?.dispose();
         this._screensChangedSubscription?.dispose();
-        this._scriptObject?.disconnectedCallback?.(this);
+        this._scriptObject?.disconnectedCallback?.(this, this._rootShadow);
         if (this._resizeObserver)
             this._resizeObserver.disconnect();
     }

package/www/dist/frontend/services/IobrokerWebuiPropertiesService.js

@@ -1,8 +1,8 @@
 import { BaseCustomWebComponentPropertiesService, PropertyType } from "@node-projects/web-component-designer";
 import { BaseCustomControl, webuiCustomControlSymbol } from "../runtime/CustomControls.js";
 import { iobrokerHandler } from "../common/IobrokerHandler.js";
-import { SignalPropertyEditor } from "@node-projects/web-component-designer-visualization-addons";
 import { ScreenViewer } from "../runtime/ScreenViewer.js";
+import { IobrokerWebuiSignalPropertyEditor } from "../config/IobrokerWebuiSignalPropertyEditor.js";
 export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentPropertiesService {
     isHandledElement(designItem) {
         return designItem.element instanceof BaseCustomControl || designItem.element instanceof ScreenViewer;
@@ -47,7 +47,7 @@ export class IobrokerWebuiPropertiesService extends BaseCustomWebComponentProper
                     properties.push(property);
                 }
                 else if (prp.type == 'signal') {
-                    let property = { name: name, type: "signal", service: this, propertyType: PropertyType.propertyAndAttribute, createEditor: p => new SignalPropertyEditor(p, window.appShell) };
+                    let property = { name: name, type: "signal", service: this, propertyType: PropertyType.propertyAndAttribute, createEditor: p => new IobrokerWebuiSignalPropertyEditor(p, window.appShell) };
                     properties.push(property);
                 }
                 else if (prp.type == 'screen') {

package/www/dist/importmaps/importmap-config.js

@@ -31,7 +31,8 @@ const importMapConfig = {
         "long": "./node_modules/long/index.js",
         "wunderbaum": "./node_modules/wunderbaum/dist/wunderbaum.esm.min.js",
         "wunderbaum/": "./node_modules/wunderbaum/",
-        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js"
+        "toastify-js": "./node_modules/toastify-js/src/toastify-es.js",
+        "iobroker.iobroker-webcomponent-object-selector/": "./node_modules/iobroker.iobroker-webcomponent-object-selector/"
     }
 };
 //@ts-ignore

package/www/index.html

@@ -197,6 +197,11 @@
     nav button:not([disabled]) img:active {
       filter: invert(41%) sepia(92%) saturate(1090%) hue-rotate(335deg) brightness(99%) contrast(93%);
     }
+
+    /* iobroker select object dialog */
+    .MuiDialog-root {
+      z-index: 100000 !important; 
+    }
   </style>
 </head>
 
@@ -213,7 +218,7 @@
     </button>
     <button data-command="save" title="save" disabled><img src="./node_modules/@node-projects/web-component-designer/assets/icons/save.svg"></button>
     <div style="margin-left: 30px;">
-      webui - 1.22.0 - e581534
+      webui - 1.23.2 - 9dc5ced
     </div>
     <button style="margin-left: 30px;" data-command="paste" title="paste" disabled><img
         src="./node_modules/@node-projects/web-component-designer/assets/icons/paste.svg"></button>

package/www/node_modules/@node-projects/web-component-designer/dist/elements/services/propertiesService/services/CssCurrentPropertiesService.js

@@ -6,6 +6,7 @@ import cssProperties from "./CssProperties.json" with { type: 'json' };
 import { BindingTarget } from '../../../item/BindingTarget.js';
 import { AbstractCssPropertiesService } from './AbstractCssPropertiesService.js';
 import { PropertiesHelper } from './PropertiesHelper.js';
+import { AbstractPropertiesService } from './AbstractPropertiesService.js';
 const localName = '<local>';
 export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
     getRefreshMode(designItem) {
@@ -39,6 +40,15 @@ export class CssCurrentPropertiesService extends AbstractCssPropertiesService {
                 return 0;
             return 1;
         });
+        const bindings = AbstractPropertiesService.getOrBuildCachedBindings(designItem);
+        let localStyles = styles.find(x => x.selector === null);
+        for (const b of bindings) {
+            if (b.target === BindingTarget.css) {
+                if (!localStyles.declarations.find(x => x.name == b.targetName)) {
+                    localStyles.declarations.push({ name: b.targetName, value: null, important: false, parent: null });
+                }
+            }
+        }
         let arr = styles.map(x => ({
             name: (x.selector ?? localName) + (x.specificity ? ' (' + x.specificity.A + '-' + x.specificity.B + '-' + x.specificity.C + ')' : ''), description: x.stylesheetName ?? '', properties: [
                 ...x.declarations.map(y => {

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/components/BindingsEditor.js

@@ -1,6 +1,5 @@
 import { BaseCustomWebComponentConstructorAppend, html, css } from '@node-projects/base-custom-webcomponent';
 import { BindingMode, BindingTarget } from '@node-projects/web-component-designer';
-import { BindableObjectsBrowser } from "@node-projects/web-component-designer-widgets-wunderbaum";
 import { BindingsEditorHistoric } from './BindingsEditorHistoric.js';
 export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     static template = html `
@@ -11,12 +10,12 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                         <div class="row">
                             <span style="cursor: pointer;" title="to use multiple objects, seprate them with semicolon (;). access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName. Bind to signal configurations via $objectId. You could also use signals inside of a Signal Name via {name}">objects</span>
                         </div>
-                        <div style="display:flex;align-items: flex-end;">
-                            <input id="objnm" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
+                        <div id="groupObjectName" style="display:flex;align-items: flex-end;">
+                            <input id="objectName" class="row" value="{{?this.objectNames::change}}" style="flex-grow: 1;">
                             <button @click="_clear" style="height: 22px">X</button>
                             <button @click="_select" style="height: 22px">...</button>
                         </div>
-                        <div class="row">
+                        <div id="groupObjectType" class="row">
                             <label style="white-space: nowrap; margin-right: 4px;" title="if set, the value is converted to the type before binding is applied">type :</label>
                             <select class="row" value="{{?this.objectValueType}}">
                                 <option selected value="">ignore</option>
@@ -25,13 +24,13 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
                                 <option value="string">string</string>
                             </select>
                         </div>
-                        <div class="row">
+                        <div id="groupBindingMode" class="row">
                             <input type="checkbox" disabled="[[!this.twoWayPossible]]" checked="{{this.twoWay::change}}" @change="_refresh">
                             <span>two way binding</span>
                             <span css:display="[[this.twoWay ? 'inline' : 'none']]" style="margin-left: 15px">events:&nbsp;</span>
                             <input css:display="[[this.twoWay ? 'inline-block' : 'none']]" title="to use multiple events, seprate them with semicolon (;)" class="row" value="{{?this.events::change}}" style="flex-grow: 1;">
                         </div>
-                        <div class="row" style="position: relative">
+                        <div id="groupinvert" class="row" style="position: relative">
                             <input type="checkbox" checked="{{this.invert::change}}">
                             <span>invert logic</span>
                             <button css:border="[[this.historic ? 'solid lime 5px' : 'none']]" style="position: absolute; right: 1px; top: 5px; padding: 10px;" @click="showHistoric">historic</button>
@@ -194,7 +193,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
     constructor(property, binding, bindingTarget, serviceContainer, instanceServiceContainer, shell) {
         super();
         super._restoreCachedInititalValues();
-        this._objNmInput = this._getDomElement('objnm');
+        this._objNmInput = this._getDomElement('objectName');
         this._property = property;
         this._binding = binding;
         this._bindingTarget = bindingTarget;
@@ -261,7 +260,7 @@ export class BindingsEditor extends BaseCustomWebComponentConstructorAppend {
         });
     }
     async _select() {
-        let b = new BindableObjectsBrowser();
+        let b = this._shell.createBindableObjectBrowser();
         b.initialize(this._serviceContainer, this._instanceServiceContainer, 'binding');
         b.title = 'select signal...';
         const abortController = new AbortController();

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/components/EventAssignment.js

@@ -221,7 +221,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
                     action: () => { copyTextToClipboard(this.selectedItems[0].getAttribute('@' + eventItem.name)); }
                 }, {
                     title: 'paste',
-                    action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); }
+                    action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); this._bindingsRefresh(); }
                 }
             ];
             ContextMenu.show(ctxMenu, e);
@@ -282,7 +282,7 @@ export class EventAssignment extends BaseCustomWebComponentConstructorAppend {
                 action: () => { copyTextToClipboard(this.selectedItems[0].getAttribute('@' + eventItem.name)); }
             }, {
                 title: 'paste',
-                action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); }
+                action: async () => { this.selectedItems[0].setAttribute('@' + eventItem.name, await getTextFromClipboard()); this._bindingsRefresh(); }
             });
         }
         return ctxMenu;

package/www/node_modules/@node-projects/web-component-designer-visualization-addons/dist/components/VisualizationPropertyGrid.js

@@ -1,5 +1,4 @@
 import { PropertyGrid } from '@node-projects/propertygrid.webcomponent';
-import { BindableObjectsBrowser } from '@node-projects/web-component-designer-widgets-wunderbaum';
 import { CodeViewMonaco } from '@node-projects/web-component-designer-codeview-monaco';
 export class VisualizationPropertyGrid extends PropertyGrid {
     serviceContainer;
@@ -49,7 +48,7 @@ export class VisualizationPropertyGrid extends PropertyGrid {
                 let btn = document.createElement('button');
                 btn.textContent = '...';
                 btn.onclick = async () => {
-                    let b = new BindableObjectsBrowser();
+                    let b = this.visualizationShell.createBindableObjectBrowser();
                     b.initialize(this.serviceContainer, this.instanceServiceContainer, this.bindableObjectsTarget);
                     b.title = 'select signal...';
                     const abortController = new AbortController();