@node-projects/web-component-designer-visualization-addons 0.1.106 → 0.1.108

package/dist/components/BindingsEditor.d.ts

@@ -29,14 +29,16 @@ export declare class BindingsEditor extends BaseCustomWebComponentConstructorApp
         value: any;
     }[];
     objectValueType: string;
-    private _property;
-    private _binding;
-    private _bindingTarget;
-    private _serviceContainer;
-    private _instanceServiceContainer;
-    private _shell;
-    private _activeRow;
-    private _objNmInput;
+    protected _property: IProperty;
+    protected _binding: IBinding & {
+        converter: Record<string, any>;
+    };
+    protected _bindingTarget: BindingTarget;
+    protected _serviceContainer: ServiceContainer;
+    protected _instanceServiceContainer: InstanceServiceContainer;
+    protected _shell: VisualizationShell;
+    protected _activeRow: number;
+    protected _objNmInput: HTMLInputElement;
     constructor(property: IProperty, binding: IBinding & {
         converter: Record<string, any>;
     }, bindingTarget: BindingTarget, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, shell: VisualizationShell);

package/dist/components/BindingsEditor.js

@@ -10,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>
@@ -24,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>
@@ -193,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;

package/dist/services/SignalPropertyEditor.d.ts

@@ -2,6 +2,7 @@ import { BasePropertyEditor, IProperty, ValueType } from "@node-projects/web-com
 import { VisualizationShell } from "../interfaces/VisualizationShell.js";
 export declare class SignalPropertyEditor extends BasePropertyEditor<HTMLElement> {
     _ip: HTMLInputElement;
+    protected _container: HTMLDivElement;
     constructor(property: IProperty, shell: VisualizationShell);
     refreshValue(valueType: ValueType, value: any): void;
 }

package/dist/services/SignalPropertyEditor.js

@@ -1,17 +1,18 @@
 import { BasePropertyEditor } from "@node-projects/web-component-designer";
 export class SignalPropertyEditor extends BasePropertyEditor {
     _ip;
+    _container;
     constructor(property, shell) {
         super(property);
-        let cnt = document.createElement('div');
-        cnt.style.display = 'flex';
+        this._container = document.createElement('div');
+        this._container.style.display = 'flex';
         this._ip = document.createElement('input');
         this._ip.onchange = (e) => this._valueChanged(this._ip.value);
         this._ip.onfocus = (e) => {
             this._ip.selectionStart = 0;
             this._ip.selectionEnd = this._ip.value?.length;
         };
-        cnt.appendChild(this._ip);
+        this._container.appendChild(this._ip);
         let btn = document.createElement('button');
         btn.textContent = '...';
         btn.onclick = async () => {
@@ -30,8 +31,8 @@ export class SignalPropertyEditor extends BasePropertyEditor {
                 this._valueChanged(this._ip.value);
             }
         };
-        cnt.appendChild(btn);
-        this.element = cnt;
+        this._container.appendChild(btn);
+        this.element = this._container;
     }
     refreshValue(valueType, value) {
         if (value == null)

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "0.1.106",
+  "version": "0.1.108",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",