@node-projects/web-component-designer-visualization-addons 1.1.3 → 1.1.4

package/dist/helpers/BindingsHelper.js

@@ -840,7 +840,7 @@ export class BindingsHelper {
                 return bindResolvedSource(source, index);
             const prefix = source[0];
             if ((prefix !== '?' && prefix !== '#') || source[1] === prefix)
-                return bindResolvedSource(source[1] === prefix ? source.substring(1) : source, index);
+                return bindResolvedSource((prefix === '?' || prefix === '#') && source[1] === prefix ? source.substring(1) : source, index);
             const owner = prefix === '?' ? root : element;
             if (!owner)
                 return () => { };

package/dist/index-min.js

@@ -1295,7 +1295,7 @@ ${H('{ "source": "parameter", "name": "myParam" }')}  <span class="cs-comment">/
             <input value="[[this._getRelativeSignalsPath(item)]]" @keypress="[[this._changeRelativeSignalsPath(event, item)]]" placeholder="relative signals path" title="relative signals path" style="min-width: 50px; flex-basis: 20px; flex-grow: 1;" class="mth" type="text">
             <button css:background="[[this._hasParameters(item) ? 'lime' : '']]" style="display: flex; padding: 0; flex-grow: 0;" title="parameter" @click="[[this._editParameter(event, item)]]">p</button>
         </div>`;static scriptTypeColors={js:"purple",blockly:"yellow",script:"lightgreen",empty:"pink"};static is="node-projects-visualization-event-assignment";constructor(){super(),this._restoreCachedInititalValues()}ready(){this._bindingsParse()}_blocklyToolbox;_instanceServiceContainer;_selectionChangedHandler;_selectedItems;_visualizationHandler;_visualizationShell;_scriptCommandsTypeInfo;_propertiesTypeInfo;_commandDescriptions;events;initialize(e,t,i,s,l,a){this._visualizationHandler=e,this._visualizationShell=t,this._scriptCommandsTypeInfo=i,this._propertiesTypeInfo=s,this._blocklyToolbox=l,this._commandDescriptions=a}set instanceServiceContainer(e){this._instanceServiceContainer=e,this._selectionChangedHandler?.dispose(),this._selectionChangedHandler=this._instanceServiceContainer?.selectionService.onSelectionChanged.on(t=>{this.selectedItems=t.selectedElements}),this.selectedItems=this._instanceServiceContainer?.selectionService.selectedElements??[]}dispose(){this.instanceServiceContainer=null}_createControlsForScript(e){switch(this._getScriptType(e)){case"none":return""}return this.constructor.editRowTemplate.content.cloneNode(!0)}_getScriptName(e){if(this.selectedItems[0].hasAttribute("@"+e.name)){let t=this.selectedItems[0].getAttribute("@"+e.name);if(t[0]==="{"){if(t.includes("name"))return JSON.parse(t).name}else return t}return null}async _changeScriptName(e,t){if(e.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+t.name)){let i=e.target.value,s=this.selectedItems[0].getAttribute("@"+t.name);if(s.startsWith("{")){let l=JSON.parse(s);l.name=i,this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(l))}else this._selectedItems[0].setAttribute("@"+t.name,i)}}_getRelativeSignalsPath(e){if(this.selectedItems[0].hasAttribute("@"+e.name)){let t=this.selectedItems[0].getAttribute("@"+e.name);if(t[0]==="{"&&t.includes("relativeSignalsPath"))return JSON.parse(t).relativeSignalsPath}return null}async _changeRelativeSignalsPath(e,t){if(e.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+t.name)){let i=e.target.value,s=this.selectedItems[0].getAttribute("@"+t.name);if(s.startsWith("{")){let l=JSON.parse(s);l.relativeSignalsPath=i,this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(l))}else{let l={name:s,relativeSignalsPath:i};this._selectedItems[0].setAttribute("@"+t.name,JSON.stringify(l))}}}_hasParameters(e){return this.selectedItems[0].hasAttribute("@"+e.name)?this.selectedItems[0].getAttribute("@"+e.name).includes("parameters"):!1}_getScriptTypeColor(e){let t=this._getScriptType(e);return r.scriptTypeColors[t]??"white"}_getScriptType(e){if(e.designItem.hasAttribute("@"+e.name)){let t=e.designItem.getAttribute("@"+e.name);if(t.startsWith("{")){let i=JSON.parse(t);return"blocks"in i?"blockly":"commands"in i?"script":"js"}else return t==""?"empty":"js"}return"none"}_getEventMethodname(e){return this.selectedItems.length?this.selectedItems[0].getAttribute("@"+e.name):""}_inputMthName(e,t){let i=e.target;this.selectedItems[0].setAttribute("@"+t.name,i.value)}_ctxMenu(e,t){e.preventDefault();let i=this._getScriptType(t);if(i=="empty")this._showContextMenuAssignScript(e,t,!0);else if(i!="none"){let s=[{title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+t.name),this._bindingsRefresh()}},{title:"-"},{title:"copy",action:()=>{je(this.selectedItems[0].getAttribute("@"+t.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+t.name,await Pe()),this._bindingsRefresh()}}];Le.show(s,e)}else this._showContextMenuAssignScript(e,t,!0)}async _addEvent(e){if(e.key=="Enter"){let t=this._getDomElement("addEventInput");this._selectedItems[0].setAttribute("@"+Wt.camelToDashCase(t.value.replaceAll(" ","-")),""),t.value="",this.scrollTop=0,this.refresh()}}_createAssignScriptContextMenu(e,t){let i=[{title:"Simple Script",action:()=>{this._editEvent("script",e,t)}},{title:"Javascript",action:()=>{let l=prompt("name of function ?");l&&(this._selectedItems[0].setAttribute("@"+t.name,l),this.refresh(),this._editEvent("js",null,t))}},{title:"Blockly",action:()=>{this._editBlockly(null,t)}}],s=this._getScriptType(t);return s!="none"&&(i.push({title:"-"}),i.push({title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+t.name),this._bindingsRefresh()}})),s!="empty"&&i.push({title:"-"},{title:"copy",action:()=>{je(this.selectedItems[0].getAttribute("@"+t.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+t.name,await Pe()),this._bindingsRefresh()}}),i}async _showContextMenuAssignScript(e,t,i){e.preventDefault();let s=this._getScriptType(t);if(s!="none"&&s!="empty"&&!i)this._editEvent(s,e,t);else{let l=this._createAssignScriptContextMenu(e,t);Le.show(l,e)}}async _editParameter(e,t){let i=new ie,s={};i.title="ParameterEditor for '"+t.name+"' of '"+t.designItem.name+"'";let l=t.designItem.getAttribute("@"+t.name);if(l&&l[0]=="{")try{s=JSON.parse(l).parameters}catch{}if(i.setParametersObject(s),await this._visualizationShell.openConfirmation(i,{x:100,y:100,width:700,height:500})){let n=i.getParametersObject(),o={name:l,parameters:n};l&&l[0]=="{"&&(o=JSON.parse(l),o.parameters=n),n==null&&delete o.parameters;let c=JSON.stringify(o);t.designItem.setAttribute("@"+t.name,c),this._bindingsRefresh()}}async _editBlockly(e,t){let i=new Y(this._blocklyToolbox);i.title="Blockly Script for '"+t.name+"' of '"+t.designItem.name+"'";let s=t.designItem.getAttribute("@"+t.name),l=null,a=null;if(s){let o=JSON.parse(s);l=o.parameters,a=o.relativeSignalsPath,i.load(o)}if(await this._visualizationShell.openConfirmation(i,{x:100,y:100,width:700,height:500})){let o=i.save();l&&(o.parameters=l),a&&(o.relativeSignalsPath=a),t.designItem.setAttribute("@"+t.name,JSON.stringify(o)),this._bindingsRefresh()}}async _editJavascript(e,t){}async _editSimpleScript(e,t){let i=t.designItem.getAttribute("@"+t.name);if(!i||i.startsWith("{")){let s={commands:[]},l=null,a=null;i&&(s=JSON.parse(i),l=s.parameters,a=s.relativeSignalsPath);let n=new te;if(n.serviceContainer=t.designItem.serviceContainer,n.instanceServiceContainer=t.designItem.instanceServiceContainer,n.scriptCommandsTypeInfo=this._scriptCommandsTypeInfo,n.propertiesTypeInfo=this._propertiesTypeInfo,n.visualizationShell=this._visualizationShell,n.visualizationHandler=this._visualizationHandler,this._commandDescriptions&&(n.commandDescriptions={...n.commandDescriptions,...this._commandDescriptions}),n.loadScript(s),n.title="Script '"+t.name+"' on "+t.designItem.name,await this._visualizationShell.openConfirmation(n,{title:n.title,width:600,height:500})){let c=n.getScriptCommands();if(c&&c.length){let p={commands:c};l&&(p.parameters=l),a&&(p.relativeSignalsPath=a);let d=JSON.stringify(p);t.designItem.setAttribute("@"+t.name,d),this._bindingsRefresh()}}}}async _editEvent(e,t,i){e=="js"?this._editJavascript(t,i):e=="blockly"?this._editBlockly(t,i):this._editSimpleScript(t,i)}refresh(){this._selectedItems!=null&&this._selectedItems.length?this.events=this._selectedItems[0].serviceContainer.getLastServiceWhere("eventsService",e=>e.isHandledElementFromEventsService(this._selectedItems[0])).getPossibleEvents(this._selectedItems[0]).map(e=>({...e,designItem:this._selectedItems[0]})):this.events=[],this._bindingsRefresh()}get selectedItems(){return this._selectedItems}set selectedItems(e){this._selectedItems!=e&&(this._selectedItems=e,this.refresh())}};customElements.define(ge.is,ge);import{TypedEvent as Ft,cssFromString as Me}from"@node-projects/base-custom-webcomponent";import{BindingTarget as y}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{PropertiesHelper as O}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";var se="bind-prop:",le="bind-attr:",ce="bind-class:",pe="bind-css:",ne="bind-cssvar:",J="bind-content:",Se="bind-visible:",We="bind(",Ht="--tmpBinding_",bs=/{{(.*)}}/;function de(r){return r.constructor?.elementProperties!=null}function Ce(r){let e=[],t=[],i=0;for(let s=0;s<r.length;s++)r[s]=="{"?(e.push(r.substring(i,s)),i=s+1):r[s]=="}"&&(t.push(r.substring(i,s)),i=s+1);return e.push(r.substring(i)),{parts:e,signals:t}}function He(r,e,t,i){let s=!0,l=0,a=()=>{let o=++l,c=r.valueProvider(e,t);c instanceof Promise?c.then(p=>s&&o===l&&i(p)):s&&i(c)};a(),r.valueChangedCallbacks||(r.valueChangedCallbacks=new Map);let n=r.valueChangedCallbacks.get(e);return n||(n=[],r.valueChangedCallbacks.set(e,n)),n.push(a),()=>{s=!1;let o=n.indexOf(a);o>=0&&n.splice(o,1),n.length===0&&r.valueChangedCallbacks.get(e)===n&&r.valueChangedCallbacks.delete(e)}}function Jt(r,e){let t=e.split("."),i=r;for(let s of t){if(i==null||typeof i!="object")return;i=i[s]}return i}function fe(r,e,t,i,s=!1){let l=s&&t.includes("."),a=l?()=>Jt(e,t):()=>e[t];if(i(a()),l)return()=>{};let n=()=>i(a()),o=r.getChangedEventName(e,t);return e.addEventListener(o,n),()=>e.removeEventListener(o,n)}function Je(r,e,t){t(r.getAttribute(e));let i=new MutationObserver(()=>t(r.getAttribute(e)));return i.observe(r,{attributes:!0,attributeFilter:[e]}),()=>i.disconnect()}var ke=class{bindingsHelper;parts;signals;values;unsubscribeTargetValue;cleanupCalls=[];combinedName;disposed=!1;valueChangedCb;visualizationHandler;element;relativeSignalPath;constructor(e,t,i,s,l,a,n,o){this.bindingsHelper=e,this.visualizationHandler=t,this.valueChangedCb=s,this.element=l,this.relativeSignalPath=a,this.parseIndirectBinding(i),this.values=new Array(this.signals.length);let c=(p,d,h)=>{let u,g=()=>{},f=w=>{let x=w;if(typeof x=="string"&&x[0]==="."&&(x=t.getNormalizedSignalName(x,a,l)),x!==u)if(g(),u=x,typeof x=="string"){let T=(z,P)=>this.handleValueChanged(P.val,h);g=e.subscribeToState(x,T)}else g=()=>{}};this.cleanupCalls.push(fe(e,p,d,f,!0)),this.cleanupCalls.push(()=>g())};try{for(let p=0;p<this.signals.length;p++){let d=this.signals[p];if(d.startsWith("?@")||d.startsWith("#@")){let h=d[0]==="?"?n:l;this.cleanupCalls.push(Je(h,d.substring(2),u=>this.handleValueChanged(u,p)))}else if(d.startsWith("??")||d.startsWith("##")||d.startsWith("?$")||d.startsWith("#$")){let h=d[0]==="?"?n:l;this.cleanupCalls.push(fe(e,h,d.substring(2),u=>this.handleValueChanged(u,p),!0))}else if(d[0]==="\xA7"){let h=d.substring(1);if(!o)throw new Error(`No special value handler registered for "${d}"`);this.cleanupCalls.push(He(o,h,{element:l,relativeSignalPath:a,root:n},u=>this.handleValueChanged(u,p)))}else if(d[0]==="?"||d[0]==="#")c(d[0]==="?"?n:l,d.substring(1),p);else{let h=(u,g)=>this.handleValueChanged(g.val,p);this.cleanupCalls.push(e.subscribeToState(d,h))}}}catch(p){throw this.dispose(),p}}parseIndirectBinding(e){let{parts:t,signals:i}=Ce(e);this.parts=t,this.signals=i;for(let s=0;s<i.length;s++)i[s][0]=="."&&(i[s]=this.visualizationHandler.getNormalizedSignalName(i[s],this.relativeSignalPath,this.element))}handleValueChanged(e,t){if(this.disposed)return;this.values[t]=e;let i=this.parts[0];for(let s=0;s<this.parts.length-1;s++){let l=this.values[s];if(l==null)return;i+=l+this.parts[s+1]}if(i[0]=="."&&(i=this.visualizationHandler.getNormalizedSignalName(i,this.relativeSignalPath,this.element)),this.combinedName!=i&&(this.unsubscribeTargetValue&&this.unsubscribeTargetValue(),!this.disposed)){this.combinedName=i;let s=(l,a)=>this.valueChangedCb(a);this.unsubscribeTargetValue=this.bindingsHelper.subscribeToState(i,s)}}dispose(){this.disposed=!0,this.unsubscribeTargetValue&&(this.unsubscribeTargetValue(),this.unsubscribeTargetValue=null);for(let e of this.cleanupCalls)e();this.cleanupCalls.length=0}setState(e){!this.disposed&&this.combinedName&&this.visualizationHandler.setState(this.combinedName,e)}},Fe=class r{_visualizationHandler;namedConverterCallback;_stateSubscriptions=new Map;_scheduledUpdates=new Set;_updateFlushScheduled=!1;_compiledConverters=new WeakMap;constructor(e){this._visualizationHandler=e}scheduleUpdate(e){this._scheduledUpdates.add(e),!this._updateFlushScheduled&&(this._updateFlushScheduled=!0,queueMicrotask(()=>{this._updateFlushScheduled=!1;let t=[...this._scheduledUpdates];this._scheduledUpdates.clear();for(let i of t)i()}))}getChangedEventName(e,t){let i=t.indexOf("::");if(i>=0)return t.substring(i+2);if(e instanceof HTMLInputElement||e instanceof HTMLSelectElement)return"change";let s=O.camelToDashCase(t);return de(e)?s:s+"-changed"}getParsedTargetName(e,t){return t===y.cssvar||t===y.class?r.dotToCamelCase(e):t===y.attribute?e:O.dashToCamelCase(e)}parseBinding(e,t,i,s,l){let a=t.substring(l.length);if(s===y.cssvar&&(a="--"+a),!i.startsWith("{")){let o={signal:i,target:s};if(i[0]==="="){if(i=i.substring(1),o.signal=i,i.includes("::")){let c=i.split("::");i=c[0],o.signal=i,o.events=c[1].split(",")}o.twoWay=!0,o.events||(o.events=[this.getChangedEventName(e,a)],!(e instanceof HTMLInputElement)&&!(e instanceof HTMLSelectElement)&&!de(e)&&(o.maybeLitElement=!0,o.litEventNames=o.events))}if(i[0]==="!"&&(o.signal=i.substring(1),o.inverted=!0),o.signal.includes(";")){let c=o.signal.split(";");o.expression=c.pop(),o.signal=c.join(";")}return[this.getParsedTargetName(a,s),o]}let n=JSON.parse(i);return n.target=s,n.twoWay&&(n.events==null||n.events.length==0)&&(n.events=[this.getChangedEventName(e,a)]),[this.getParsedTargetName(a,s),n]}serializeBinding(e,t,i){let s={...i};delete s.type,i.twoWay?i.events!=null&&i.events.length==1&&((e instanceof HTMLInputElement||e instanceof HTMLSelectElement)&&i.events?.[0]=="change"||de(e)&&i.events?.[0]==t||!de(e)&&i.events?.[0]==t+"-changed")&&delete s.events:(delete s.events,delete s.expressionTwoWay);let l=s.twoWay&&s.events?.length>0?"::"+s.events.join(","):"",a=l!==""&&!!i.expression?.includes("::")||!!i.expressionTwoWay?.includes("::")||i.signal.trim()[0]=="{",n=i.target==y.property||i.target==y.attribute||i.target==y.class||i.target==y.css||i.target==y.cssvar,o=!a&&n&&!i.expressionTwoWay&&i.converter==null&&!i.historic&&!i.writeBackSignal;if(o&&!i.expression){let c=this.getShortBindingAttributeName(t,i.target,!1),d=((i.target==y.property||i.target==y.attribute)&&i.twoWay?"=":"")+(i.inverted?"!":"")+i.signal+(!i.twoWay&&i.signal.includes(";")?";":"")+l;return[c,d]}if(o&&i.expression&&!i.expression.includes(`
-`)&&!i.expression.includes(";")){let c=this.getShortBindingAttributeName(t,i.target,!0),d=((i.target==y.attribute||i.target==y.property&&t!="textContent"&&t!="innerHTML")&&i.twoWay?"=":"")+(i.inverted?"!":"")+i.signal+";"+i.expression+l;return[c,d]}return(i.inverted===null||i.inverted===!1)&&delete s.inverted,(i.expression===null||i.expression==="")&&delete s.expression,(i.expressionTwoWay===null||i.expressionTwoWay==="")&&delete s.expressionTwoWay,i.writeBackSignal||delete s.writeBackSignal,(i.twoWay===null||i.twoWay===!1)&&delete s.twoWay,delete s.target,i.historic||delete s.historic,[this.getJsonBindingAttributeName(t,i.target),JSON.stringify(s)]}getShortBindingAttributeName(e,t,i){return t==y.property&&e=="textContent"?J+"text":t==y.property&&e=="innerHTML"?J+"html":t==y.attribute?le+O.camelToDashCase(e):t==y.class?ce+O.camelToDashCase(e):t==y.css?pe+O.camelToDashCase(e):t==y.cssvar?i?ne+O.camelToDashCase(e):ne+r.camelToDotCase(e.substring(2)):se+O.camelToDashCase(e)}getJsonBindingAttributeName(e,t){return t==y.content||t==y.property&&e=="innerHTML"?J+"html":t==y.property&&e=="textContent"?J+"text":t==y.attribute?le+O.camelToDashCase(e):t==y.class?ce+r.camelToDotCase(e):t==y.css?pe+O.camelToDashCase(e):t==y.cssvar?ne+r.camelToDotCase(e.substring(2)):se+O.camelToDashCase(e)}getBindingAttributeName(e,t,i){return i==y.attribute?le+O.camelToDashCase(t):i==y.class?ce+r.camelToDotCase(t):i==y.css?pe+O.camelToDashCase(t):i==y.visible?Se:i==y.cssvar?ne+r.camelToDotCase(t):i==y.property&&t=="innerHTML"?J+"html":i==y.property&&t=="textContent"?J+"text":se+O.camelToDashCase(t)}*getBindings(e){if(e.attributes)for(let t of e.attributes)t.name.startsWith(se)?yield this.parseBinding(e,t.name,t.value,y.property,se):t.name.startsWith(J)?yield this.parseBinding(e,t.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",t.value,y.property,se):t.name.startsWith(le)?yield this.parseBinding(e,t.name,t.value,y.attribute,le):t.name.startsWith(ce)?yield this.parseBinding(e,t.name,t.value,y.class,ce):t.name.startsWith(pe)?yield this.parseBinding(e,t.name,t.value,y.css,pe):t.name.startsWith(ne)?yield this.parseBinding(e,t.name,t.value,y.cssvar,ne):t.name.startsWith(Se)&&(yield this.parseBinding(e,t.name,t.value,y.visible,Se))}applyAllBindings(e,t,i,s,l){let a=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),o=n.nextNode();for(;o;){let c=this.getBindings(o);for(let p of c)try{let d=this.applyBinding(o,p,t,i,s),h=!1,u=()=>{h||(h=!0,d())};if(a.push(u),p[1].maybeLitElement&&o.localName.includes("-")&&!customElements.get(o.localName)){let g=o,f=p;customElements.whenDefined(o.localName).then(()=>{!h&&de(g)&&(h=!0,d(),f[1].events=f[1].litEventNames,a.push(this.applyBinding(g,f,t,i,s)))})}}catch(d){console.warn("error applying binding",o,p,d)}if(l&&l(o)){let p=n.nextSibling();for(;!p&&o;)o=n.parentNode(),p=n.nextSibling();o=p}else o=n.nextNode()}return a}static#e=0;async parseCssBindings(e,t,i,s){if(!e.includes(We))return[Me(e),[]];let l=await import("@node-projects/css-parser"),a=l.parse(e),n=[];for(let c of a.stylesheet.rules)if(c.type===l.CssTypes.rule){for(let p of c.declarations)if(p.type===l.CssTypes.declaration&&p.value.includes(We)){let d=this.parseCssBinding(p.value,t,i,s);p.value=d[0],n.push(...d[1])}}let o=l.stringify(a,{indent:"",compress:!0});return[Me(o),n]}parseCssBinding(e,t,i,s,l){e=e.trim();let a="",n="",o=!1,c="",p=!1,d=null,h=[];for(let u=0;u<e.length;u++){let g=e[u];if(o)if(p)c+=g,p=!1;else if(d&&g==="\\")p=!0;else if(g===d)d=null;else if(d===null&&g===")"){let f=r.#e++,w=Ht+f,x=[w,{signal:c,target:y.cssvar}];c.startsWith("{")&&(x=JSON.parse(c)),h.push(this.applyBinding(t,x,i,s,l)),a+="var("+w+")",o=!1,c=""}else c+=g;else g==="("?(n!=="bind"?(a+=n,a+=g):(o=!0,e[u+1]==="'"||e[u+1]==='"'?(u++,d=e[u]):d=null),n=""):g===" "||g===","||g==="("||g==="+"||g==="-"||g==="*"||g==="/"?(a+=n+g,n=""):n+=g}return[a+n,h]}subscribeToState(e,t){let i=this._stateSubscriptions.get(e);if(i){if(i.callbacks.add(t),i.hasValue){let l=i.value;queueMicrotask(()=>i.callbacks.has(t)&&t(e,l))}}else{i={callbacks:new Set([t]),callback:null,subscriptionResult:null,revision:0,hasValue:!1},i.callback=(l,a)=>{i.revision++,i.hasValue=!0,i.value=a;for(let n of i.callbacks)n(l,a)},this._stateSubscriptions.set(e,i);try{i.subscriptionResult=this._visualizationHandler.subscribeState(e,i.callback);let l=i.revision;this._visualizationHandler.getState(e).then(a=>{this._stateSubscriptions.get(e)===i&&i.revision===l&&i.callback(e,a)})}catch(l){throw this._stateSubscriptions.delete(e),i.subscriptionResult!=null&&this._visualizationHandler.unsubscribeState(e,i.callback,i.subscriptionResult),l}}let s=!0;return()=>{s&&(s=!1,i.callbacks.delete(t),i.callbacks.size===0&&this._stateSubscriptions.get(e)===i&&(this._stateSubscriptions.delete(e),this._visualizationHandler.unsubscribeState(e,i.callback,i.subscriptionResult)))}}applyBinding(e,t,i,s,l){let a=[],n=!0,o=()=>{if(n){n=!1,this._scheduledUpdates.delete(X);for(let m=a.length-1;m>=0;m--)a[m]();a.length=0}},c=m=>a.push(m),p=t[1].signal.split(";"),d=new Array(p.length);for(let m=0;m<p.length;m++){let b=p[m];d[m]="__"+m;let v=b.indexOf(":");v>=0&&(d[m]=b.substring(0,v),b=b.substring(v+1),p[m]=b)}let h=new Array(p.length),u=[...d,"__res","__ctx"];t[1].expression&&!t[1].compiledExpression&&(t[1].compiledExpression=t[1].expression.includes("return ")?new Function(u,t[1].expression):new Function(u,"return "+t[1].expression));let g=this.getCompiledConverter(t[1],u),f={element:e,root:s,boundNames:t[1].signal,boundTargetName:t[0],boundTargetType:t[1].target},w=this.createTargetWriter(e,t),x=t[1].writeBackSignal;x?.[0]==="."&&(x=i+x);let T,z,P,G=!1,q=!1,M=!1,X=()=>{if(M=!1,!n)return;let m=T;t[1].compiledExpression&&(m=t[1].compiledExpression(...h,z,f),z=m),t[1].converter&&(typeof t[1].converter=="string"?m=this.namedConverterCallback(t[1].converter,m,e,t):m=this.applyCompiledConverter(m,g,h,z,f,t[1].converterDefault)),t[1].inverted&&(m=!m),q=!0,!(G&&(m===null||typeof m!="object")&&Object.is(P,m))&&(G=!0,P=m,x&&this._visualizationHandler.setState(x,m,!0),w(m))},I=(m,b,v)=>{n&&(!v&&b===0&&(m=r.parseValueWithType(m,t)),h[b]=m,T=m,!q&&p.length===1?X():M||(M=!0,this.scheduleUpdate(X)))},L=new Array(p.length),oe=(m,b)=>(L[m]=b,()=>{L[m]===b&&(L[m]=null)}),k=(m,b,v)=>{let V=oe(v,S=>m[b]=S),R=fe(this,m,b,S=>I(S,v,!1));return()=>{R(),V()}},N=(m,b,v)=>{let V=oe(v,S=>S==null?m.removeAttribute(b):m.setAttribute(b,S)),R=Je(m,b,S=>I(S,v,!1));return()=>{R(),V()}},E=(m,b)=>{if(m.startsWith("?@")||m.startsWith("#@")){let _=m[0]==="?"?s:e;return _?N(_,m.substring(2),b):()=>{}}if(m.startsWith("?$")||m.startsWith("#$")){let _=m[0]==="?"?s:e;return _?k(_,m.substring(2),b):()=>{}}if(m[0]==="?"||m[0]==="#"){let _=m[0]==="?"?s:e;return _?k(_,m.substring(1),b):()=>{}}if(m[0]==="$"){let _=m.substring(1);_[0]==="."&&(_=this._visualizationHandler.getNormalizedSignalName(_,i,e));let D=!0;return this._visualizationHandler.getObject(_).then(A=>{D&&I(A,b,!0)}),()=>D=!1}if(m[0]==="\xA7"){if(!l)throw new Error(`No special value handler registered for "${m}"`);return He(l,m.substring(1),{element:e,binding:t,relativeSignalPath:i,root:s},_=>I(_,b,!0))}if(m.includes("{")){let _=new ke(this,this._visualizationHandler,m,A=>I(A.val,b,!1),e,i,s,l),D=oe(b,A=>_.setState(A));return()=>{_.dispose(),D()}}let v=m;if(v[0]==="."&&(v=this._visualizationHandler.getNormalizedSignalName(v,i,e)),t[1].historic){let _=t[1].historic;if(_.reloadInterval){let A=!0,W=null,F=async()=>{let at=await this._visualizationHandler.getHistoricData(v,_);!n||!A||(I(at?.values,b,!0),W=setTimeout(F,_.reloadInterval))};return F(),()=>{A=!1,W!==null&&clearTimeout(W),W=null}}let D=!0;return this._visualizationHandler.getHistoricData(v,_).then(A=>{D&&I(A?.values,b,!0)}),()=>D=!1}let V=(_,D)=>I(D?.val,b,!1),R=this.subscribeToState(v,V),S=oe(b,_=>this._visualizationHandler.setState(v,_));return()=>{R(),S()}},B=(m,b)=>{if(m.startsWith("?@")||m.startsWith("#@")||m.startsWith("?$")||m.startsWith("#$"))return E(m,b);let v=m[0];if(v!=="?"&&v!=="#"||m[1]===v)return E(m[1]===v?m.substring(1):m,b);let V=v==="?"?s:e;if(!V)return()=>{};let R=m.substring(1),S=()=>{},_,A=fe(this,V,R,W=>{let F=typeof W=="string"?W:null;F!==_&&(S(),_=F,S=F?E(F,b):()=>{})});return()=>{A(),S()}};try{t[1].twoWay&&c(this.addTwoWayBinding(t,e,m=>L[0]?.(m)));for(let m=0;m<p.length;m++)typeof p[m]=="string"&&c(B(p[m],m))}catch(m){throw o(),m}return o}addTwoWayBinding(e,t,i){e[1].expressionTwoWay&&!e[1].compiledExpressionTwoWay&&(e[1].compiledExpressionTwoWay=e[1].expressionTwoWay.includes("return ")?new Function(["value"],e[1].expressionTwoWay):new Function(["value"],"return "+e[1].expressionTwoWay));let s=[],l=()=>{let a=e[1].target==y.attribute?t.getAttribute(e[0]):t[e[0]];a=r.parseValueWithType(a,e),e[1].compiledExpressionTwoWay&&(a=e[1].compiledExpressionTwoWay(a)),i(a)};for(let a of e[1].events??[]){let n=t[a];if(n instanceof Ft){let o=n.on(l);s.push(()=>o.dispose())}else t.addEventListener(a,l),s.push(()=>t.removeEventListener(a,l))}return()=>{for(let a of s)a();s.length=0}}static parseValueWithType(e,t){if(t[1].type)switch(t[1].type){case"number":return parseFloat(e);case"boolean":return e===!0||e==="true"||!!parseInt(e);case"string":return e?.toString();case"integer":return parseInt(e)}return e}compileConverter(e,t){let i=new Map,s=[],l=a=>{if(typeof a!="string")return{value:a};let n=new Function(t,"return `"+a+"`");return{value:a,evaluate:(o,c,p)=>n(...o,c,p)}};for(let a in e){let n=l(e[a]);if(i.set(a,n),a.startsWith(">=")){let o=parseFloat(a.substring(2));s.push({matches:c=>c>=o,value:n})}else if(a.startsWith("<=")){let o=parseFloat(a.substring(2));s.push({matches:c=>c<=o,value:n})}else if(a[0]===">"){let o=parseFloat(a.substring(1));s.push({matches:c=>c>o,value:n})}else if(a[0]==="<"){let o=parseFloat(a.substring(1));s.push({matches:c=>c<o,value:n})}else{let o=a.split("-");if(o.length>1){let c=o[0]===""?null:parseFloat(o[0]),p=o[1]===""?null:parseFloat(o[1]);s.push({matches:d=>(c===null||d>=c)&&(p===null||p>=d),value:n})}}}return{exactValues:i,conditions:s}}getCompiledConverter(e,t){if(!e.converter||typeof e.converter!="object")return null;let i=t.join("\0"),s=this._compiledConverters.get(e);if(s?.converter===e.converter&&s.argumentsKey===i)return s.compiled;let l=this.compileConverter(e.converter,t);return this._compiledConverters.set(e,{converter:e.converter,argumentsKey:i,compiled:l}),l}applyCompiledConverter(e,t,i,s,l,a){let n=String(e),o=t.exactValues.get(n),c=t.exactValues.has(n);if(!c){let p=parseFloat(e);for(let d of t.conditions)if(d.matches(p)){o=d.value,c=!0;break}}return c?o.evaluate?o.evaluate(i,s,l):o.value:a!==void 0?a:e}createTargetWriter(e,t){let i=t[0];switch(t[1].target){case y.property:return s=>e[i]=s;case y.attribute:return s=>{typeof s=="boolean"?s?e.setAttribute(i,""):e.removeAttribute(i):e.setAttribute(i,s)};case y.css:return s=>e.style[i]=s;case y.cssvar:return s=>e.style.setProperty(i,s);case y.class:return s=>e.classList.toggle(i,!!s);case y.visible:return s=>e.style.visibility=s?"":"collapse";default:return()=>{}}}static camelToDotCase(e){return e.replace(/([A-Z])/g,t=>`.${t[0].toLowerCase()}`)}static dotToCamelCase(e){return e.replace(/\.([a-z])/g,t=>t[1].toUpperCase())}};var Ue=class{name;relativeSignalsPath;commands;parameters};import{deepValue as U,setDeepValue as $e,sleep as Ut}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import ae from"long";var ye="cyclic",$t={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},Ge=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(r){this._visualizationHandler=r}async execute(r,e){let t=-1,i=!1,s=!1,l=e.event?.type,a=l?$t[l]:null;if(a){let n=e.element;l=="pointerdown"&&(n=window),n.addEventListener(a,()=>{i=!0},{once:!0})}for(let n=0;n<r.length;n++){let o=r[n];if(o.type=="Exit"){s=!0;break}else if(o.type=="If"){let p=(await this.evaluateIfFormula(o,e)?o.trueCommands:o.elseCommands)??[];if(!await this.execute(p,e)){s=!0;break}}else if(o.type=="Goto"){let c=await this.getValue(o.label,e);if(n=r.findIndex(p=>p.type=="Label"&&p.label==c),n<0)break}else if(o.type=="Condition"){let c=await this.getValue(o.value1,e),p=await this.getValue(o.value2,e),d=await this.getValue(o.comparisonType,e),h=!1;switch(d){case"==null":h=c==null;break;case"!=null":h=c!=null;break;case"==true":h=c==!0;break;case"==false":h=c==!1;break;case"==":h=c==p;break;case"!=":h=c!=p;break;case">":h=c>p;break;case"<":h=c<p;break;case">=":h=c>=p;break;case"<=":h=c<=p;break;case"&&":h=c&&p;break;case"||":h=c||p;break}if(h){await this.runExternalScript(await this.getValue(o.trueScriptName,e),await this.getValue(o.trueScriptType,e));let u=await this.getValue(o.trueGotoLabel,e);if(u&&(n=r.findIndex(g=>g.type=="Label"&&g.label==u),n<0))break}else{await this.runExternalScript(await this.getValue(o.falseScriptName,e),await this.getValue(o.falseScriptType,e));let u=await this.getValue(o.falseGotoLabel,e);if(u&&(n=r.findIndex(g=>g.type=="Label"&&g.label==u),n<0))break}}else if(o.type=="Repeat"){let c=await this.getValue(o.label,e),p=await this.getValue(o.count,e);if(await this.getValue(o.mode,e)=="eventValid"&&i){i=!1;continue}if(p!=0&&t==-1&&(t=p-1),t==0||(t>0&&t--,n=-1,c&&(n=r.findIndex(h=>h.type=="Label"&&h.label==c),n<0)))continue}else if(!await this.runScriptCommand(o,e)){s=!0;break}}return!s}async getValueFromTarget(r,e,t){return r==="property"?U(t.root,e):r==="elementProperty"?U(t.element,e):(await this._visualizationHandler.getState(this.getSignalName(e,t)))?.val}async setValueOnTarget(r,e,t,i){r==="property"?$e(t.root,e,i):r==="elementProperty"?$e(t.element,e,i):await this._visualizationHandler.setState(this.getSignalName(e,t),i)}async runExternalScript(r,e){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"If":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let r=await this.getValue(command.value??500,context);await Ut(r);break}case"Console":{let r=await this.getValue(command.target??"log",context),e=await this.getValue(command.message,context);console[r](e);break}case"ToggleSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),t=await this.getValueFromTarget(e,r,context);await this._visualizationHandler.setState(this.getSignalName(r,context),!t);break}case"ToggleSignalValueThroughList":{let r=await this.getValue(command.valueList,context),e=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,e,context),s=r.indexOf(i)+1;s>=r.length&&(s=0);let l=r[s];await this._visualizationHandler.setState(this.getSignalName(e,context),l);break}case"SetSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context);await this.setValueOnTarget(e,r,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),i=await this.getValueFromTarget(e,r,context)+await this.getValue(command.value,context);await this.setValueOnTarget(e,r,context,i);break}case"DecrementSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),i=await this.getValueFromTarget(e,r,context)-await this.getValue(command.value,context);await this.setValueOnTarget(e,r,context,i);break}case"CalculateSignalValue":{let formula=await this.getValue(command.formula,context),target=await this.getValue(command.target,context),targetSignal=await this.getValue(command.targetSignal,context),nm=await this.parseStringWithValues(formula,context),result=eval(nm);await this.setValueOnTarget(target,targetSignal,context,result);break}case"SetBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e),l=ae.fromNumber(i).or(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"ClearBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e);s.negate();let l=ae.fromNumber(i).and(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"ToggleBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e),l=ae.fromNumber(i).xor(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"Javascript":{let r=await this.getValue(command.script,context),e=context;e.shadowRoot=context.element.getRootNode(),e.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",r)),command.compiledScript(e);break}case"SetElementProperty":{command=Q.upgradeSetElementProperty(command);let r=await this.getValue(command.name,context);r===""&&(r=null);let e=await this.getValue(command.value,context),t=await this.getValue(command.parentIndex??0,context),i=await this.getValue(command.target??"property",context),s=await this.getValue(command.targetSelectorTarget??"container",context),l=await this.getValue(command.targetSelector,context),a=await this.getValue(command.mode??"toggle",context),n=this.getTargetFromTargetSelector(context,s,t,l);for(let o of n)i=="attribute"?o.setAttribute(r,e):i=="property"?o[r]=e:i=="css"?o.style[r]=e:i=="class"&&(a==="toggle"?o.classList.toggle(r??e):a==="remove"?o.classList.remove(r??e):o.classList.add(r??e));break}case"SubscribeSignal":{let r=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let t=()=>{this._visualizationHandler.unsubscribeState(r,t,null)};this._visualizationHandler.subscribeState(r,t)}else this._visualizationHandler.subscribeState(r,this._subscriptionCallback);break}case"UnsubscribeSignal":{let r=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(r,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let r=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(r);break}case"ClearSignalsInGroup":{let r=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(r);break}case"RunScript":{let r=await this.getValue(command.name,context),e=await this.getValue(command.scriptType,context);this.runExternalScript(r,e);break}case"ShowMessageBox":{let r=null,e=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let s=await this.getValue(command.message,context);confirm(s)?r=1:r=2}else{let s=await this.getValue(command.message,context);alert(s),r=1}let i=await this.getValue(command.resultSignal,context);if(i&&this._visualizationHandler.setState(i,r),e&&r!=1)return!1;break}case"ShowPrompt":{let r=await this.getValue(command.message,context),e=await this.getValue(command.default,context),t=prompt(r,e),i=await this.getValue(command.resultSignal,context);i&&t&&this._visualizationHandler.setState(i,t);break}case"Login":case"Logout":case"CloseDialog":case"OpenDialog":case"OpenScreen":case"SwitchLanguage":case"CopySignalValuesFromFolder":case"ExportSignalValuesAsJson":case"ImportSignalValuesFromJson":{alert('command: "'+command.type+'" is not yet implemented');break}}return!0}getTarget(r,e,t){if(e==="container"){let i=r.element.getRootNode().host;for(let s=0;s<(t??0);s++)i=i.getRootNode().host;return i}else if(e==="element"){let i=r.element;for(let s=0;s<(t??0);s++)i=i.parentElement;return i}return null}getTargetFromTargetSelector(r,e,t,i){let s=this.getTarget(r,e,t),l=[s];return i&&(e==="container"?l=s.shadowRoot.querySelectorAll(i):l=s.querySelectorAll(i)),l}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return U(outerContext.root,value.name);case"elementProperty":return U(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let r=U(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(r,outerContext)))?.val}case"event":{let r=outerContext.event;return value.name&&(r=U(r,value.name)),r}case"parameter":return outerContext.parameters[value.name];case"context":return U(outerContext,value.name);case"complexString":{let r=value.name;return r!=null?await this.parseStringWithValues(r,outerContext):null}case"complexSignal":{let r=value.name;if(r!=null){let e=await this.parseStringWithValues(r,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(e,outerContext)))?.val}return null}case"expression":{var ctx=outerContext;return eval(value.name)}}return value}async getStateOrFieldOrParameter(name,context){if(name[0]==="\xA7"){var ctx=context;return eval("ctx."+name.substring(1))}else{if(name[0]==="?"&&name[1]==="?")return context.root[name.substring(2)];if(name[0]==="?")return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)],context))}return await this._visualizationHandler.getState(this.getSignalName(name,context))}async parseStringWithValues(r,e){let t=Ce(r),i=await Promise.all(t.signals.map(l=>this.getStateOrFieldOrParameter(this.getSignalName(l,e),e))),s=t.parts[0];for(let l=0;l<t.parts.length-1;l++){let a=i[l];typeof a=="object"&&(a=a.val),a==null&&(a=""),s+=a+t.parts[l+1]}return s}async evaluateIfFormula(r,e){let t=r.signals??[],i=t.map((a,n)=>a.varName?.trim()||"__"+n),s=await Promise.all(t.map(a=>this.getValue(a,e))),l=await this.getValue(r.formula,e);return(!r.compiledFormula||r._compiledFormulaSrc!==l)&&(r.compiledFormula=new Function(...i,"return ("+l+");"),r._compiledFormulaSrc=l),!!r.compiledFormula(...s)}getSignalName(r,e){return r[0]==="."?e.relativeSignalsPath+r:r}createScriptContext(r,e,t,i,s){return{root:r,event:e,element:t,parameters:i,relativeSignalsPath:s}}async assignAllScripts(r,e,t,i,s,l,a,n){l??=this.createScriptContext;let o=await this.loadAndInitJsObject(r,e,t,i,n);for(let c of t.querySelectorAll("*"))for(let p of c.attributes)if(p.name[0]==="@")try{let d=p.name.substring(1),h=p.value.trim(),u=d.startsWith(ye),g=u?parseInt(d.substring(d.indexOf(":")+1)):null,f=await this.resolveHandler(h,o,c,t,i,s,l,a,d);f&&this.bindHandler(c,d,u,g,f)}catch{console.warn("error assigning script",c,p)}return o}async loadAndInitJsObject(r,e,t,i,s){if(!e)return null;try{let a=await import(URL.createObjectURL(new Blob([e],{type:"application/javascript"})));return s?s(a):a.init?.(i,t),a}catch(l){return console.error("error parsing javascript - "+r,l),null}}async resolveHandler(r,e,t,i,s,l,a,n,o){if(r[0]!=="{")return p=>{e?.[r]?e[r](p,t,i,s):console.warn(`javascript function named: "${r}" not found, maybe missing a "export" ?`)};let c=JSON.parse(r);if("commands"in c)return p=>this.execute(c.commands,a(s,p,t,c.parameters,c.relativeSignalsPath));if("blocks"in c){let p=null;return async d=>{p??=await Ee(c),p(d,i,c.parameters,c.relativeSignalsPath??"",l,a(s,d,t,c.parameters,c.relativeSignalsPath))}}if("name"in c){if(n)return n(t,o,c),null;let p=c.name;return d=>{e?.[p]?e[p](d,t,i,s,c.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(r,e,t,i,s){if(!t){r.addEventListener(e,s);return}let l=setInterval(()=>{r.isConnected?s(null):clearInterval(l)},i)}};import{OverlayLayer as Gt,DesignItem as $,InsertAction as qt,BindingTarget as j,PropertyType as be}from"@node-projects/web-component-designer";var qe=class{constructor(e,t){this._bindingsHelper=e,this._visualizationHandler=t}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(e,t,i){let s=$.GetDesignItem(i);if(s&&!s.isRootItem){let l=e.getNormalizedElementCoordinates(i);this.rect=e.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",l.x,l.y,l.width,l.height,"",null,Gt.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(i,this.rect)}}dragLeave(e,t,i){let s=$.GetDesignItem(i);if(s&&!s.isRootItem){let l=this.rectMap.get(i);e.overlayLayer.removeOverlay(l),this.rectMap.delete(i)}}dragOver(e,t,i){return"copy"}async drop(e,t,i,s){for(let o of this.rectMap.values())e.overlayLayer.removeOverlay(o);this.rectMap.clear();let l=$.GetDesignItem(s),a=await this._visualizationHandler.getObject(i.fullName),n=this._visualizationHandler.getSignalInformation(a);if(l&&!l.isRootItem)if(s instanceof HTMLInputElement){let o={signal:i.fullName,target:j.property},c=this._bindingsHelper.serializeBinding(s,s.type=="checkbox"?"checked":"value",o);l.setAttribute(c[0],c[1])}else{let o={signal:i.fullName,target:j.content},c=this._bindingsHelper.serializeBinding(s,null,o);l.setAttribute(c[0],c[1])}else{let o=e.getNormalizedEventCoordinates(t),c,p,d=await this._visualizationHandler.getState(i.fullName);if(n.role==="url"&&typeof d?.val=="string")if(d.val.endsWith("jpg")||d.val.endsWith("jpeg")||d.val.endsWith("png")||d.val.endsWith("gif")||d.val.endsWith("svg")){let h=document.createElement("img");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}else if(d.val.endsWith("mp4")){let h=document.createElement("video");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}else{let h=document.createElement("iframe");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}if(!c){let h=document.createElement("input");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u=n.writeable!==!1,g={signal:i.fullName,target:j.property,twoWay:u},f=this._bindingsHelper.serializeBinding(h,"value",g);n.type==="boolean"?(f=this._bindingsHelper.serializeBinding(h,"checked",g),c.setAttribute("type","checkbox")):n.role=="date"?(g.twoWay=u,f=this._bindingsHelper.serializeBinding(h,"value-as-number",g),c.setAttribute("type","date"),c.setAttribute("readonly","")):n.role=="datetime"&&(g.twoWay=u,f=this._bindingsHelper.serializeBinding(h,"value-as-number",g),c.setAttribute("type","datetime-local"),c.setAttribute("readonly","")),c.setAttribute(f[0],f[1])}c.setStyle("position","absolute"),c.setStyle("left",o.x+"px"),c.setStyle("top",o.y+"px"),e.instanceServiceContainer.undoService.execute(new qt(e.rootDesignItem,e.rootDesignItem.childCount,c)),p.commit(),requestAnimationFrame(()=>e.instanceServiceContainer.selectionService.setSelectedElements([c]))}}dragOverOnProperty(e,t,i){return"copy"}dropOnProperty(e,t,i,s){if(t.type=="signal"){t.service.setValue(s,t,i.fullName);return}let l={signal:i.fullName,target:j.property};t.propertyType==be.attribute&&(l.target=j.attribute),t.propertyType==be.cssValue&&(l.target=j.css),l.signal=i.fullName,l.twoWay=t.propertyType==be.property||t.propertyType==be.propertyAndAttribute;let a=s[0].openGroup("drop binding");for(let n of s){let o=this._bindingsHelper.serializeBinding(n.element,t.name,l);n.setAttribute(o[0],o[1])}a.commit()}};import{BindingMode as Te,BindingTarget as Xe,PropertiesHelper as Xt}from"@node-projects/web-component-designer";var Ye=class r{constructor(e){this._bindingsHelper=e}_bindingsHelper;static type="visualization-binding";getBindings(e){return Array.from(this._bindingsHelper.getBindings(e.element)).map(i=>({targetName:i[1].target===Xe.css||i[1].target===Xe.attribute?Xt.camelToDashCase(i[0]):i[0],target:i[1].target,mode:i[1].twoWay?Te.twoWay:Te.oneWay,invert:i[1].inverted,bindableObjectNames:i[1].signal.split(";"),expression:i[1].expression,expressionTwoWay:i[1].expressionTwoWay,converter:i[1].converter,converters:i[1].converter,type:r.type,service:this,changedEvents:i[1].events,historic:i[1].historic,writeBackSignal:i[1].writeBackSignal}))}setBinding(e,t){let i={signal:t.bindableObjectNames.join(";"),target:t.target};i.inverted=t.invert,i.twoWay=t.mode==Te.twoWay,i.expression=t.expression,i.expressionTwoWay=t.expressionTwoWay,i.historic=t.historic,i.type=t.type,typeof t.converters=="string"?i.converter=t.converters:Array.isArray(t.converters)&&t.converters.length>0?i.converter=Object.fromEntries(t.converters.map(a=>[a.key,a.value])):t.converters!=null&&(i.converter=t.converters),i.target=t.target,i.events=t.changedEvents,i.writeBackSignal=t.writeBackSignal;let s=this._bindingsHelper.serializeBinding(e.element,t.targetName,i),l=e.openGroup("edit_binding");return e.setAttribute(s[0],s[1]),l.commit(),!0}clearBinding(e,t,i){let s=this._bindingsHelper.getBindingAttributeName(e.element,t,i);return e.removeAttribute(s),!0}};var Yt=[{prefix:"?@",itemType:"attribute"},{prefix:"#@",itemType:"attribute"},{prefix:"?$",itemType:"signalObject"},{prefix:"#$",itemType:"signalObject"},{prefix:"??",itemType:"property"},{prefix:"##",itemType:"property"},{prefix:"?",itemType:"property"},{prefix:"#",itemType:"property"}];function Ke(r){let e=Yt.find(t=>r.startsWith(t.prefix));return e?{name:r.substring(e.prefix.length),...e}:{name:r,prefix:"",itemType:"signal"}}var Ze=class{getRefactorings(e){let t=[];for(let i of e){let s=i.serviceContainer.bindingService.getBindings(i);if(s)for(let l of s)for(let a of l.bindableObjectNames)if(a.includes(":")){let n=a.split(":")[0],o=Ke(a.substring(n.length+1));t.push({service:this,name:o.name,itemType:o.itemType,designItem:i,type:"binding",sourceObject:l,display:l.target+"/"+l.targetName+" - "+n+":",shortName:n,prefix:o.prefix})}else{let n=Ke(a);t.push({service:this,name:n.name,itemType:n.itemType,designItem:i,type:"binding",sourceObject:l,display:l.target+"/"+l.targetName,prefix:n.prefix})}}return t}refactor(e,t,i){let s=e.sourceObject;e.shortName?s.bindableObjectNames=s.bindableObjectNames.map(l=>l==e.shortName+":"+e.prefix+t?e.shortName+":"+e.prefix+i:l):s.bindableObjectNames=s.bindableObjectNames.map(l=>l==e.prefix+t?e.prefix+i:l),e.designItem.serviceContainer.bindingService.setBinding(e.designItem,s)}};var Qe=class{dragOverOnProperty(e,t,i){return"copy"}dropOnProperty(e,t,i,s){t.service.setValue(s,t,i.text)}};import{BindingTarget as C}from"@node-projects/web-component-designer";var et=class{getRefactorings(e){let t=[];for(let i of e)for(let s of i.attributes())if(s[0][0]=="@"){let l=s[1];if(l[0]=="{"){let a=JSON.parse(l);if("commands"in a)for(let n of a.commands){for(let o in n){let c=n[o];if(c!=null&&typeof c=="object"){let p=c;if(p.source==="signal")t.push({name:p.name,itemType:"signal",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[signal]",refactor:d=>p.name=d});else if(p.source==="property")t.push({name:p.name,itemType:"property",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[property]",refactor:d=>p.name=d});else if(p.source==="complexString")for(let d of p.name.matchAll(/\{(.*?)\}/g)){let h=d[0],u=d[1];if(u[0]==="?"){let g="?";u=u.substring(1),u[0]==="?"&&(g="??",u=u.substring(1)),t.push({name:u,itemType:"property",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[complexString]->property",refactor:f=>p.name=p.name.replace(h,"{"+g+f+"}")})}else t.push({name:u,itemType:"signal",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[complexString]->signal",refactor:g=>p.name=p.name.replace(h,"{"+g+"}")})}}}switch(n.type){case"SetSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ToggleSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"IncrementSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"DecrementSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"SetBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ClearBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ToggleBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"OpenScreen":n.screen&&typeof n.screen=="string"&&t.push({name:n.screen,itemType:"screen",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/screen",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.screen=o});break;case"OpenDialog":n.screen&&typeof n.screen=="string"&&t.push({name:n.screen,itemType:"screen",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/screen",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.screen=o});break;case"CalculateSignalValue":n.targetSignal&&typeof n.targetSignal=="string"&&t.push({name:n.targetSignal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/targetSignal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.targetSignal=o});break;case"SubscribeSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"UnsubscribeSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ShowMessageBox":n.resultSignal&&typeof n.resultSignal=="string"&&t.push({name:n.resultSignal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/resultSignal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.resultSignal=o});break}}else"blocks"in a;if("parameters"in a)for(let n in a.parameters)typeof a.parameters[n]=="string"&&t.push({name:a.parameters[n],itemType:"parameter",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:s[0].substring(1)+"/parameters/"+n,refactor:o=>a.parameters[n]=o})}}return t}refactor(e,t,i){e.refactor(i);let s=JSON.stringify(e.sourceObject);e.designItem.setAttribute(e.targetName,s)}};import{BasePropertyEditor as Kt}from"@node-projects/web-component-designer";var tt=class extends Kt{_ip;_container;constructor(e,t){super(e),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=s=>this._valueChanged(this._ip.value),this._ip.onfocus=s=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let i=document.createElement("button");i.textContent="...",i.onclick=async()=>{let s=t.createBindableObjectBrowser();s.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),s.title="select signal...";let l=new AbortController;s.objectDoubleclicked.on(()=>{l.abort(),this._ip.value=s.selectedObject.fullName,this._valueChanged(this._ip.value)}),await t.openConfirmation(s,{x:100,y:100,width:400,height:300,abortSignal:l.signal})&&(this._ip.value=s.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(i),this.element=this._container}refreshValue(e,t){t==null?this._ip.value="":this._ip.value=t}};import{EventsService as Zt}from"@node-projects/web-component-designer";var it=class r extends Zt{static _cyclicEvent=[{name:`${ye}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(e){let t=super.getPossibleEvents(e);return t.push(...r._cyclicEvent),t}getEvent(e,t){return t.includes(ye)?r._cyclicEvent.find(s=>s.name==t)??{name:t,propertyName:"on"+t,eventObjectName:"Event"}:super.getEvent(e,t)}};import{PropertyType as oi}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js";import{BaseCustomWebComponentLazyAppend as ii,css as si}from"@node-projects/base-custom-webcomponent";import{BindingTarget as ni}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{ContextMenu as ai}from"@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js";import{BindingTarget as ve}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{RefreshMode as Qt}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/IPropertiesService.js";import{PropertyType as ei}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js";import{ValueType as st}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/ValueType.js";import{AbstractPropertiesService as ti}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPropertiesService.js";var xe=class extends ti{getRefreshMode(){return Qt.fullOnValueChange}isHandledElement(e){return!e.isRootItem}getBindings(e){return e.serviceContainer.getServices("bindingService").flatMap(t=>(t.getBindings(e)??[]).filter(i=>i.target===ve.class).map(i=>({...i,service:t})))}async getProperties(e){return this.getBindings(e).map(t=>this.createProperty(t.targetName))}async getProperty(e,t){return this.createProperty(t)}createProperty(e){return{name:e,type:"boolean",propertyType:ei.property,service:this}}getPropertyTarget(){return ve.class}getBinding(e,t){return this.getBindings(e[0]).find(i=>i.targetName===t.name)}isSet(e,t){return this.getBinding(e,t)?st.bound:st.none}getValue(e,t){return this.getBinding(e,t)?.expression}validateName(e,t,i){return!t||/[\s"'<>/=]/.test(t)||t!==t.toLowerCase()?"Use a lowercase class name without spaces or HTML attribute delimiters, e.g. is-active.":t!==i&&this.getBindings(e).some(s=>s.targetName===t)?"This class already has a binding.":null}rename(e,t,i){let s=this.validateName(e,i,t.targetName);if(s)throw new Error(s);if(i===t.targetName)return;let l=e.openGroup(`rename class binding: ${t.targetName} to ${i}`);try{if(!t.service.setBinding(e,{...t,targetName:i}))throw new Error("The binding service could not rename this binding.");if(!t.service.clearBinding(e,t.targetName,ve.class))throw new Error("The binding service could not remove the previous binding.");l.commit()}catch(a){throw l.abort(),a}}remove(e,t){let i=e.openGroup(`remove class binding: ${t.targetName}`);try{if(!t.service.clearBinding(e,t.targetName,ve.class))throw new Error("The binding service could not remove this binding.");i.commit()}catch(s){throw i.abort(),s}}};var ue=class extends ii{_items=[];_service=new xe;_rows;_add;_toggle;_signature;_editing=!1;static style=si`
+`)&&!i.expression.includes(";")){let c=this.getShortBindingAttributeName(t,i.target,!0),d=((i.target==y.attribute||i.target==y.property&&t!="textContent"&&t!="innerHTML")&&i.twoWay?"=":"")+(i.inverted?"!":"")+i.signal+";"+i.expression+l;return[c,d]}return(i.inverted===null||i.inverted===!1)&&delete s.inverted,(i.expression===null||i.expression==="")&&delete s.expression,(i.expressionTwoWay===null||i.expressionTwoWay==="")&&delete s.expressionTwoWay,i.writeBackSignal||delete s.writeBackSignal,(i.twoWay===null||i.twoWay===!1)&&delete s.twoWay,delete s.target,i.historic||delete s.historic,[this.getJsonBindingAttributeName(t,i.target),JSON.stringify(s)]}getShortBindingAttributeName(e,t,i){return t==y.property&&e=="textContent"?J+"text":t==y.property&&e=="innerHTML"?J+"html":t==y.attribute?le+O.camelToDashCase(e):t==y.class?ce+O.camelToDashCase(e):t==y.css?pe+O.camelToDashCase(e):t==y.cssvar?i?ne+O.camelToDashCase(e):ne+r.camelToDotCase(e.substring(2)):se+O.camelToDashCase(e)}getJsonBindingAttributeName(e,t){return t==y.content||t==y.property&&e=="innerHTML"?J+"html":t==y.property&&e=="textContent"?J+"text":t==y.attribute?le+O.camelToDashCase(e):t==y.class?ce+r.camelToDotCase(e):t==y.css?pe+O.camelToDashCase(e):t==y.cssvar?ne+r.camelToDotCase(e.substring(2)):se+O.camelToDashCase(e)}getBindingAttributeName(e,t,i){return i==y.attribute?le+O.camelToDashCase(t):i==y.class?ce+r.camelToDotCase(t):i==y.css?pe+O.camelToDashCase(t):i==y.visible?Se:i==y.cssvar?ne+r.camelToDotCase(t):i==y.property&&t=="innerHTML"?J+"html":i==y.property&&t=="textContent"?J+"text":se+O.camelToDashCase(t)}*getBindings(e){if(e.attributes)for(let t of e.attributes)t.name.startsWith(se)?yield this.parseBinding(e,t.name,t.value,y.property,se):t.name.startsWith(J)?yield this.parseBinding(e,t.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",t.value,y.property,se):t.name.startsWith(le)?yield this.parseBinding(e,t.name,t.value,y.attribute,le):t.name.startsWith(ce)?yield this.parseBinding(e,t.name,t.value,y.class,ce):t.name.startsWith(pe)?yield this.parseBinding(e,t.name,t.value,y.css,pe):t.name.startsWith(ne)?yield this.parseBinding(e,t.name,t.value,y.cssvar,ne):t.name.startsWith(Se)&&(yield this.parseBinding(e,t.name,t.value,y.visible,Se))}applyAllBindings(e,t,i,s,l){let a=[],n=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT),o=n.nextNode();for(;o;){let c=this.getBindings(o);for(let p of c)try{let d=this.applyBinding(o,p,t,i,s),h=!1,u=()=>{h||(h=!0,d())};if(a.push(u),p[1].maybeLitElement&&o.localName.includes("-")&&!customElements.get(o.localName)){let g=o,f=p;customElements.whenDefined(o.localName).then(()=>{!h&&de(g)&&(h=!0,d(),f[1].events=f[1].litEventNames,a.push(this.applyBinding(g,f,t,i,s)))})}}catch(d){console.warn("error applying binding",o,p,d)}if(l&&l(o)){let p=n.nextSibling();for(;!p&&o;)o=n.parentNode(),p=n.nextSibling();o=p}else o=n.nextNode()}return a}static#e=0;async parseCssBindings(e,t,i,s){if(!e.includes(We))return[Me(e),[]];let l=await import("@node-projects/css-parser"),a=l.parse(e),n=[];for(let c of a.stylesheet.rules)if(c.type===l.CssTypes.rule){for(let p of c.declarations)if(p.type===l.CssTypes.declaration&&p.value.includes(We)){let d=this.parseCssBinding(p.value,t,i,s);p.value=d[0],n.push(...d[1])}}let o=l.stringify(a,{indent:"",compress:!0});return[Me(o),n]}parseCssBinding(e,t,i,s,l){e=e.trim();let a="",n="",o=!1,c="",p=!1,d=null,h=[];for(let u=0;u<e.length;u++){let g=e[u];if(o)if(p)c+=g,p=!1;else if(d&&g==="\\")p=!0;else if(g===d)d=null;else if(d===null&&g===")"){let f=r.#e++,w=Ht+f,x=[w,{signal:c,target:y.cssvar}];c.startsWith("{")&&(x=JSON.parse(c)),h.push(this.applyBinding(t,x,i,s,l)),a+="var("+w+")",o=!1,c=""}else c+=g;else g==="("?(n!=="bind"?(a+=n,a+=g):(o=!0,e[u+1]==="'"||e[u+1]==='"'?(u++,d=e[u]):d=null),n=""):g===" "||g===","||g==="("||g==="+"||g==="-"||g==="*"||g==="/"?(a+=n+g,n=""):n+=g}return[a+n,h]}subscribeToState(e,t){let i=this._stateSubscriptions.get(e);if(i){if(i.callbacks.add(t),i.hasValue){let l=i.value;queueMicrotask(()=>i.callbacks.has(t)&&t(e,l))}}else{i={callbacks:new Set([t]),callback:null,subscriptionResult:null,revision:0,hasValue:!1},i.callback=(l,a)=>{i.revision++,i.hasValue=!0,i.value=a;for(let n of i.callbacks)n(l,a)},this._stateSubscriptions.set(e,i);try{i.subscriptionResult=this._visualizationHandler.subscribeState(e,i.callback);let l=i.revision;this._visualizationHandler.getState(e).then(a=>{this._stateSubscriptions.get(e)===i&&i.revision===l&&i.callback(e,a)})}catch(l){throw this._stateSubscriptions.delete(e),i.subscriptionResult!=null&&this._visualizationHandler.unsubscribeState(e,i.callback,i.subscriptionResult),l}}let s=!0;return()=>{s&&(s=!1,i.callbacks.delete(t),i.callbacks.size===0&&this._stateSubscriptions.get(e)===i&&(this._stateSubscriptions.delete(e),this._visualizationHandler.unsubscribeState(e,i.callback,i.subscriptionResult)))}}applyBinding(e,t,i,s,l){let a=[],n=!0,o=()=>{if(n){n=!1,this._scheduledUpdates.delete(X);for(let m=a.length-1;m>=0;m--)a[m]();a.length=0}},c=m=>a.push(m),p=t[1].signal.split(";"),d=new Array(p.length);for(let m=0;m<p.length;m++){let b=p[m];d[m]="__"+m;let v=b.indexOf(":");v>=0&&(d[m]=b.substring(0,v),b=b.substring(v+1),p[m]=b)}let h=new Array(p.length),u=[...d,"__res","__ctx"];t[1].expression&&!t[1].compiledExpression&&(t[1].compiledExpression=t[1].expression.includes("return ")?new Function(u,t[1].expression):new Function(u,"return "+t[1].expression));let g=this.getCompiledConverter(t[1],u),f={element:e,root:s,boundNames:t[1].signal,boundTargetName:t[0],boundTargetType:t[1].target},w=this.createTargetWriter(e,t),x=t[1].writeBackSignal;x?.[0]==="."&&(x=i+x);let T,z,P,G=!1,q=!1,M=!1,X=()=>{if(M=!1,!n)return;let m=T;t[1].compiledExpression&&(m=t[1].compiledExpression(...h,z,f),z=m),t[1].converter&&(typeof t[1].converter=="string"?m=this.namedConverterCallback(t[1].converter,m,e,t):m=this.applyCompiledConverter(m,g,h,z,f,t[1].converterDefault)),t[1].inverted&&(m=!m),q=!0,!(G&&(m===null||typeof m!="object")&&Object.is(P,m))&&(G=!0,P=m,x&&this._visualizationHandler.setState(x,m,!0),w(m))},I=(m,b,v)=>{n&&(!v&&b===0&&(m=r.parseValueWithType(m,t)),h[b]=m,T=m,!q&&p.length===1?X():M||(M=!0,this.scheduleUpdate(X)))},L=new Array(p.length),oe=(m,b)=>(L[m]=b,()=>{L[m]===b&&(L[m]=null)}),k=(m,b,v)=>{let V=oe(v,S=>m[b]=S),R=fe(this,m,b,S=>I(S,v,!1));return()=>{R(),V()}},N=(m,b,v)=>{let V=oe(v,S=>S==null?m.removeAttribute(b):m.setAttribute(b,S)),R=Je(m,b,S=>I(S,v,!1));return()=>{R(),V()}},E=(m,b)=>{if(m.startsWith("?@")||m.startsWith("#@")){let _=m[0]==="?"?s:e;return _?N(_,m.substring(2),b):()=>{}}if(m.startsWith("?$")||m.startsWith("#$")){let _=m[0]==="?"?s:e;return _?k(_,m.substring(2),b):()=>{}}if(m[0]==="?"||m[0]==="#"){let _=m[0]==="?"?s:e;return _?k(_,m.substring(1),b):()=>{}}if(m[0]==="$"){let _=m.substring(1);_[0]==="."&&(_=this._visualizationHandler.getNormalizedSignalName(_,i,e));let D=!0;return this._visualizationHandler.getObject(_).then(A=>{D&&I(A,b,!0)}),()=>D=!1}if(m[0]==="\xA7"){if(!l)throw new Error(`No special value handler registered for "${m}"`);return He(l,m.substring(1),{element:e,binding:t,relativeSignalPath:i,root:s},_=>I(_,b,!0))}if(m.includes("{")){let _=new ke(this,this._visualizationHandler,m,A=>I(A.val,b,!1),e,i,s,l),D=oe(b,A=>_.setState(A));return()=>{_.dispose(),D()}}let v=m;if(v[0]==="."&&(v=this._visualizationHandler.getNormalizedSignalName(v,i,e)),t[1].historic){let _=t[1].historic;if(_.reloadInterval){let A=!0,W=null,F=async()=>{let at=await this._visualizationHandler.getHistoricData(v,_);!n||!A||(I(at?.values,b,!0),W=setTimeout(F,_.reloadInterval))};return F(),()=>{A=!1,W!==null&&clearTimeout(W),W=null}}let D=!0;return this._visualizationHandler.getHistoricData(v,_).then(A=>{D&&I(A?.values,b,!0)}),()=>D=!1}let V=(_,D)=>I(D?.val,b,!1),R=this.subscribeToState(v,V),S=oe(b,_=>this._visualizationHandler.setState(v,_));return()=>{R(),S()}},B=(m,b)=>{if(m.startsWith("?@")||m.startsWith("#@")||m.startsWith("?$")||m.startsWith("#$"))return E(m,b);let v=m[0];if(v!=="?"&&v!=="#"||m[1]===v)return E((v==="?"||v==="#")&&m[1]===v?m.substring(1):m,b);let V=v==="?"?s:e;if(!V)return()=>{};let R=m.substring(1),S=()=>{},_,A=fe(this,V,R,W=>{let F=typeof W=="string"?W:null;F!==_&&(S(),_=F,S=F?E(F,b):()=>{})});return()=>{A(),S()}};try{t[1].twoWay&&c(this.addTwoWayBinding(t,e,m=>L[0]?.(m)));for(let m=0;m<p.length;m++)typeof p[m]=="string"&&c(B(p[m],m))}catch(m){throw o(),m}return o}addTwoWayBinding(e,t,i){e[1].expressionTwoWay&&!e[1].compiledExpressionTwoWay&&(e[1].compiledExpressionTwoWay=e[1].expressionTwoWay.includes("return ")?new Function(["value"],e[1].expressionTwoWay):new Function(["value"],"return "+e[1].expressionTwoWay));let s=[],l=()=>{let a=e[1].target==y.attribute?t.getAttribute(e[0]):t[e[0]];a=r.parseValueWithType(a,e),e[1].compiledExpressionTwoWay&&(a=e[1].compiledExpressionTwoWay(a)),i(a)};for(let a of e[1].events??[]){let n=t[a];if(n instanceof Ft){let o=n.on(l);s.push(()=>o.dispose())}else t.addEventListener(a,l),s.push(()=>t.removeEventListener(a,l))}return()=>{for(let a of s)a();s.length=0}}static parseValueWithType(e,t){if(t[1].type)switch(t[1].type){case"number":return parseFloat(e);case"boolean":return e===!0||e==="true"||!!parseInt(e);case"string":return e?.toString();case"integer":return parseInt(e)}return e}compileConverter(e,t){let i=new Map,s=[],l=a=>{if(typeof a!="string")return{value:a};let n=new Function(t,"return `"+a+"`");return{value:a,evaluate:(o,c,p)=>n(...o,c,p)}};for(let a in e){let n=l(e[a]);if(i.set(a,n),a.startsWith(">=")){let o=parseFloat(a.substring(2));s.push({matches:c=>c>=o,value:n})}else if(a.startsWith("<=")){let o=parseFloat(a.substring(2));s.push({matches:c=>c<=o,value:n})}else if(a[0]===">"){let o=parseFloat(a.substring(1));s.push({matches:c=>c>o,value:n})}else if(a[0]==="<"){let o=parseFloat(a.substring(1));s.push({matches:c=>c<o,value:n})}else{let o=a.split("-");if(o.length>1){let c=o[0]===""?null:parseFloat(o[0]),p=o[1]===""?null:parseFloat(o[1]);s.push({matches:d=>(c===null||d>=c)&&(p===null||p>=d),value:n})}}}return{exactValues:i,conditions:s}}getCompiledConverter(e,t){if(!e.converter||typeof e.converter!="object")return null;let i=t.join("\0"),s=this._compiledConverters.get(e);if(s?.converter===e.converter&&s.argumentsKey===i)return s.compiled;let l=this.compileConverter(e.converter,t);return this._compiledConverters.set(e,{converter:e.converter,argumentsKey:i,compiled:l}),l}applyCompiledConverter(e,t,i,s,l,a){let n=String(e),o=t.exactValues.get(n),c=t.exactValues.has(n);if(!c){let p=parseFloat(e);for(let d of t.conditions)if(d.matches(p)){o=d.value,c=!0;break}}return c?o.evaluate?o.evaluate(i,s,l):o.value:a!==void 0?a:e}createTargetWriter(e,t){let i=t[0];switch(t[1].target){case y.property:return s=>e[i]=s;case y.attribute:return s=>{typeof s=="boolean"?s?e.setAttribute(i,""):e.removeAttribute(i):e.setAttribute(i,s)};case y.css:return s=>e.style[i]=s;case y.cssvar:return s=>e.style.setProperty(i,s);case y.class:return s=>e.classList.toggle(i,!!s);case y.visible:return s=>e.style.visibility=s?"":"collapse";default:return()=>{}}}static camelToDotCase(e){return e.replace(/([A-Z])/g,t=>`.${t[0].toLowerCase()}`)}static dotToCamelCase(e){return e.replace(/\.([a-z])/g,t=>t[1].toUpperCase())}};var Ue=class{name;relativeSignalsPath;commands;parameters};import{deepValue as U,setDeepValue as $e,sleep as Ut}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import ae from"long";var ye="cyclic",$t={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},Ge=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(r){this._visualizationHandler=r}async execute(r,e){let t=-1,i=!1,s=!1,l=e.event?.type,a=l?$t[l]:null;if(a){let n=e.element;l=="pointerdown"&&(n=window),n.addEventListener(a,()=>{i=!0},{once:!0})}for(let n=0;n<r.length;n++){let o=r[n];if(o.type=="Exit"){s=!0;break}else if(o.type=="If"){let p=(await this.evaluateIfFormula(o,e)?o.trueCommands:o.elseCommands)??[];if(!await this.execute(p,e)){s=!0;break}}else if(o.type=="Goto"){let c=await this.getValue(o.label,e);if(n=r.findIndex(p=>p.type=="Label"&&p.label==c),n<0)break}else if(o.type=="Condition"){let c=await this.getValue(o.value1,e),p=await this.getValue(o.value2,e),d=await this.getValue(o.comparisonType,e),h=!1;switch(d){case"==null":h=c==null;break;case"!=null":h=c!=null;break;case"==true":h=c==!0;break;case"==false":h=c==!1;break;case"==":h=c==p;break;case"!=":h=c!=p;break;case">":h=c>p;break;case"<":h=c<p;break;case">=":h=c>=p;break;case"<=":h=c<=p;break;case"&&":h=c&&p;break;case"||":h=c||p;break}if(h){await this.runExternalScript(await this.getValue(o.trueScriptName,e),await this.getValue(o.trueScriptType,e));let u=await this.getValue(o.trueGotoLabel,e);if(u&&(n=r.findIndex(g=>g.type=="Label"&&g.label==u),n<0))break}else{await this.runExternalScript(await this.getValue(o.falseScriptName,e),await this.getValue(o.falseScriptType,e));let u=await this.getValue(o.falseGotoLabel,e);if(u&&(n=r.findIndex(g=>g.type=="Label"&&g.label==u),n<0))break}}else if(o.type=="Repeat"){let c=await this.getValue(o.label,e),p=await this.getValue(o.count,e);if(await this.getValue(o.mode,e)=="eventValid"&&i){i=!1;continue}if(p!=0&&t==-1&&(t=p-1),t==0||(t>0&&t--,n=-1,c&&(n=r.findIndex(h=>h.type=="Label"&&h.label==c),n<0)))continue}else if(!await this.runScriptCommand(o,e)){s=!0;break}}return!s}async getValueFromTarget(r,e,t){return r==="property"?U(t.root,e):r==="elementProperty"?U(t.element,e):(await this._visualizationHandler.getState(this.getSignalName(e,t)))?.val}async setValueOnTarget(r,e,t,i){r==="property"?$e(t.root,e,i):r==="elementProperty"?$e(t.element,e,i):await this._visualizationHandler.setState(this.getSignalName(e,t),i)}async runExternalScript(r,e){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"If":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let r=await this.getValue(command.value??500,context);await Ut(r);break}case"Console":{let r=await this.getValue(command.target??"log",context),e=await this.getValue(command.message,context);console[r](e);break}case"ToggleSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),t=await this.getValueFromTarget(e,r,context);await this._visualizationHandler.setState(this.getSignalName(r,context),!t);break}case"ToggleSignalValueThroughList":{let r=await this.getValue(command.valueList,context),e=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,e,context),s=r.indexOf(i)+1;s>=r.length&&(s=0);let l=r[s];await this._visualizationHandler.setState(this.getSignalName(e,context),l);break}case"SetSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context);await this.setValueOnTarget(e,r,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),i=await this.getValueFromTarget(e,r,context)+await this.getValue(command.value,context);await this.setValueOnTarget(e,r,context,i);break}case"DecrementSignalValue":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.target,context),i=await this.getValueFromTarget(e,r,context)-await this.getValue(command.value,context);await this.setValueOnTarget(e,r,context,i);break}case"CalculateSignalValue":{let formula=await this.getValue(command.formula,context),target=await this.getValue(command.target,context),targetSignal=await this.getValue(command.targetSignal,context),nm=await this.parseStringWithValues(formula,context),result=eval(nm);await this.setValueOnTarget(target,targetSignal,context,result);break}case"SetBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e),l=ae.fromNumber(i).or(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"ClearBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e);s.negate();let l=ae.fromNumber(i).and(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"ToggleBitInSignal":{let r=await this.getValue(command.signal,context),e=await this.getValue(command.bitNumber??0,context),t=await this.getValue(command.target,context),i=await this.getValueFromTarget(t,r,context),s=ae.fromNumber(1).shiftLeft(e),l=ae.fromNumber(i).xor(s).toNumber();await this.setValueOnTarget(t,r,context,l);break}case"Javascript":{let r=await this.getValue(command.script,context),e=context;e.shadowRoot=context.element.getRootNode(),e.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",r)),command.compiledScript(e);break}case"SetElementProperty":{command=Q.upgradeSetElementProperty(command);let r=await this.getValue(command.name,context);r===""&&(r=null);let e=await this.getValue(command.value,context),t=await this.getValue(command.parentIndex??0,context),i=await this.getValue(command.target??"property",context),s=await this.getValue(command.targetSelectorTarget??"container",context),l=await this.getValue(command.targetSelector,context),a=await this.getValue(command.mode??"toggle",context),n=this.getTargetFromTargetSelector(context,s,t,l);for(let o of n)i=="attribute"?o.setAttribute(r,e):i=="property"?o[r]=e:i=="css"?o.style[r]=e:i=="class"&&(a==="toggle"?o.classList.toggle(r??e):a==="remove"?o.classList.remove(r??e):o.classList.add(r??e));break}case"SubscribeSignal":{let r=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let t=()=>{this._visualizationHandler.unsubscribeState(r,t,null)};this._visualizationHandler.subscribeState(r,t)}else this._visualizationHandler.subscribeState(r,this._subscriptionCallback);break}case"UnsubscribeSignal":{let r=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(r,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let r=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(r);break}case"ClearSignalsInGroup":{let r=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(r);break}case"RunScript":{let r=await this.getValue(command.name,context),e=await this.getValue(command.scriptType,context);this.runExternalScript(r,e);break}case"ShowMessageBox":{let r=null,e=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let s=await this.getValue(command.message,context);confirm(s)?r=1:r=2}else{let s=await this.getValue(command.message,context);alert(s),r=1}let i=await this.getValue(command.resultSignal,context);if(i&&this._visualizationHandler.setState(i,r),e&&r!=1)return!1;break}case"ShowPrompt":{let r=await this.getValue(command.message,context),e=await this.getValue(command.default,context),t=prompt(r,e),i=await this.getValue(command.resultSignal,context);i&&t&&this._visualizationHandler.setState(i,t);break}case"Login":case"Logout":case"CloseDialog":case"OpenDialog":case"OpenScreen":case"SwitchLanguage":case"CopySignalValuesFromFolder":case"ExportSignalValuesAsJson":case"ImportSignalValuesFromJson":{alert('command: "'+command.type+'" is not yet implemented');break}}return!0}getTarget(r,e,t){if(e==="container"){let i=r.element.getRootNode().host;for(let s=0;s<(t??0);s++)i=i.getRootNode().host;return i}else if(e==="element"){let i=r.element;for(let s=0;s<(t??0);s++)i=i.parentElement;return i}return null}getTargetFromTargetSelector(r,e,t,i){let s=this.getTarget(r,e,t),l=[s];return i&&(e==="container"?l=s.shadowRoot.querySelectorAll(i):l=s.querySelectorAll(i)),l}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return U(outerContext.root,value.name);case"elementProperty":return U(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let r=U(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(r,outerContext)))?.val}case"event":{let r=outerContext.event;return value.name&&(r=U(r,value.name)),r}case"parameter":return outerContext.parameters[value.name];case"context":return U(outerContext,value.name);case"complexString":{let r=value.name;return r!=null?await this.parseStringWithValues(r,outerContext):null}case"complexSignal":{let r=value.name;if(r!=null){let e=await this.parseStringWithValues(r,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(e,outerContext)))?.val}return null}case"expression":{var ctx=outerContext;return eval(value.name)}}return value}async getStateOrFieldOrParameter(name,context){if(name[0]==="\xA7"){var ctx=context;return eval("ctx."+name.substring(1))}else{if(name[0]==="?"&&name[1]==="?")return context.root[name.substring(2)];if(name[0]==="?")return await this._visualizationHandler.getState(this.getSignalName(context.root[name.substring(1)],context))}return await this._visualizationHandler.getState(this.getSignalName(name,context))}async parseStringWithValues(r,e){let t=Ce(r),i=await Promise.all(t.signals.map(l=>this.getStateOrFieldOrParameter(this.getSignalName(l,e),e))),s=t.parts[0];for(let l=0;l<t.parts.length-1;l++){let a=i[l];typeof a=="object"&&(a=a.val),a==null&&(a=""),s+=a+t.parts[l+1]}return s}async evaluateIfFormula(r,e){let t=r.signals??[],i=t.map((a,n)=>a.varName?.trim()||"__"+n),s=await Promise.all(t.map(a=>this.getValue(a,e))),l=await this.getValue(r.formula,e);return(!r.compiledFormula||r._compiledFormulaSrc!==l)&&(r.compiledFormula=new Function(...i,"return ("+l+");"),r._compiledFormulaSrc=l),!!r.compiledFormula(...s)}getSignalName(r,e){return r[0]==="."?e.relativeSignalsPath+r:r}createScriptContext(r,e,t,i,s){return{root:r,event:e,element:t,parameters:i,relativeSignalsPath:s}}async assignAllScripts(r,e,t,i,s,l,a,n){l??=this.createScriptContext;let o=await this.loadAndInitJsObject(r,e,t,i,n);for(let c of t.querySelectorAll("*"))for(let p of c.attributes)if(p.name[0]==="@")try{let d=p.name.substring(1),h=p.value.trim(),u=d.startsWith(ye),g=u?parseInt(d.substring(d.indexOf(":")+1)):null,f=await this.resolveHandler(h,o,c,t,i,s,l,a,d);f&&this.bindHandler(c,d,u,g,f)}catch{console.warn("error assigning script",c,p)}return o}async loadAndInitJsObject(r,e,t,i,s){if(!e)return null;try{let a=await import(URL.createObjectURL(new Blob([e],{type:"application/javascript"})));return s?s(a):a.init?.(i,t),a}catch(l){return console.error("error parsing javascript - "+r,l),null}}async resolveHandler(r,e,t,i,s,l,a,n,o){if(r[0]!=="{")return p=>{e?.[r]?e[r](p,t,i,s):console.warn(`javascript function named: "${r}" not found, maybe missing a "export" ?`)};let c=JSON.parse(r);if("commands"in c)return p=>this.execute(c.commands,a(s,p,t,c.parameters,c.relativeSignalsPath));if("blocks"in c){let p=null;return async d=>{p??=await Ee(c),p(d,i,c.parameters,c.relativeSignalsPath??"",l,a(s,d,t,c.parameters,c.relativeSignalsPath))}}if("name"in c){if(n)return n(t,o,c),null;let p=c.name;return d=>{e?.[p]?e[p](d,t,i,s,c.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(r,e,t,i,s){if(!t){r.addEventListener(e,s);return}let l=setInterval(()=>{r.isConnected?s(null):clearInterval(l)},i)}};import{OverlayLayer as Gt,DesignItem as $,InsertAction as qt,BindingTarget as j,PropertyType as be}from"@node-projects/web-component-designer";var qe=class{constructor(e,t){this._bindingsHelper=e,this._visualizationHandler=t}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(e,t,i){let s=$.GetDesignItem(i);if(s&&!s.isRootItem){let l=e.getNormalizedElementCoordinates(i);this.rect=e.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",l.x,l.y,l.width,l.height,"",null,Gt.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(i,this.rect)}}dragLeave(e,t,i){let s=$.GetDesignItem(i);if(s&&!s.isRootItem){let l=this.rectMap.get(i);e.overlayLayer.removeOverlay(l),this.rectMap.delete(i)}}dragOver(e,t,i){return"copy"}async drop(e,t,i,s){for(let o of this.rectMap.values())e.overlayLayer.removeOverlay(o);this.rectMap.clear();let l=$.GetDesignItem(s),a=await this._visualizationHandler.getObject(i.fullName),n=this._visualizationHandler.getSignalInformation(a);if(l&&!l.isRootItem)if(s instanceof HTMLInputElement){let o={signal:i.fullName,target:j.property},c=this._bindingsHelper.serializeBinding(s,s.type=="checkbox"?"checked":"value",o);l.setAttribute(c[0],c[1])}else{let o={signal:i.fullName,target:j.content},c=this._bindingsHelper.serializeBinding(s,null,o);l.setAttribute(c[0],c[1])}else{let o=e.getNormalizedEventCoordinates(t),c,p,d=await this._visualizationHandler.getState(i.fullName);if(n.role==="url"&&typeof d?.val=="string")if(d.val.endsWith("jpg")||d.val.endsWith("jpeg")||d.val.endsWith("png")||d.val.endsWith("gif")||d.val.endsWith("svg")){let h=document.createElement("img");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}else if(d.val.endsWith("mp4")){let h=document.createElement("video");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}else{let h=document.createElement("iframe");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u={signal:i.fullName,target:j.property},g=this._bindingsHelper.serializeBinding(h,"src",u);c.setAttribute(g[0],g[1]),c.element.src=d.val}if(!c){let h=document.createElement("input");c=$.createDesignItemFromInstance(h,e.serviceContainer,e.instanceServiceContainer),p=c.openGroup("Insert");let u=n.writeable!==!1,g={signal:i.fullName,target:j.property,twoWay:u},f=this._bindingsHelper.serializeBinding(h,"value",g);n.type==="boolean"?(f=this._bindingsHelper.serializeBinding(h,"checked",g),c.setAttribute("type","checkbox")):n.role=="date"?(g.twoWay=u,f=this._bindingsHelper.serializeBinding(h,"value-as-number",g),c.setAttribute("type","date"),c.setAttribute("readonly","")):n.role=="datetime"&&(g.twoWay=u,f=this._bindingsHelper.serializeBinding(h,"value-as-number",g),c.setAttribute("type","datetime-local"),c.setAttribute("readonly","")),c.setAttribute(f[0],f[1])}c.setStyle("position","absolute"),c.setStyle("left",o.x+"px"),c.setStyle("top",o.y+"px"),e.instanceServiceContainer.undoService.execute(new qt(e.rootDesignItem,e.rootDesignItem.childCount,c)),p.commit(),requestAnimationFrame(()=>e.instanceServiceContainer.selectionService.setSelectedElements([c]))}}dragOverOnProperty(e,t,i){return"copy"}dropOnProperty(e,t,i,s){if(t.type=="signal"){t.service.setValue(s,t,i.fullName);return}let l={signal:i.fullName,target:j.property};t.propertyType==be.attribute&&(l.target=j.attribute),t.propertyType==be.cssValue&&(l.target=j.css),l.signal=i.fullName,l.twoWay=t.propertyType==be.property||t.propertyType==be.propertyAndAttribute;let a=s[0].openGroup("drop binding");for(let n of s){let o=this._bindingsHelper.serializeBinding(n.element,t.name,l);n.setAttribute(o[0],o[1])}a.commit()}};import{BindingMode as Te,BindingTarget as Xe,PropertiesHelper as Xt}from"@node-projects/web-component-designer";var Ye=class r{constructor(e){this._bindingsHelper=e}_bindingsHelper;static type="visualization-binding";getBindings(e){return Array.from(this._bindingsHelper.getBindings(e.element)).map(i=>({targetName:i[1].target===Xe.css||i[1].target===Xe.attribute?Xt.camelToDashCase(i[0]):i[0],target:i[1].target,mode:i[1].twoWay?Te.twoWay:Te.oneWay,invert:i[1].inverted,bindableObjectNames:i[1].signal.split(";"),expression:i[1].expression,expressionTwoWay:i[1].expressionTwoWay,converter:i[1].converter,converters:i[1].converter,type:r.type,service:this,changedEvents:i[1].events,historic:i[1].historic,writeBackSignal:i[1].writeBackSignal}))}setBinding(e,t){let i={signal:t.bindableObjectNames.join(";"),target:t.target};i.inverted=t.invert,i.twoWay=t.mode==Te.twoWay,i.expression=t.expression,i.expressionTwoWay=t.expressionTwoWay,i.historic=t.historic,i.type=t.type,typeof t.converters=="string"?i.converter=t.converters:Array.isArray(t.converters)&&t.converters.length>0?i.converter=Object.fromEntries(t.converters.map(a=>[a.key,a.value])):t.converters!=null&&(i.converter=t.converters),i.target=t.target,i.events=t.changedEvents,i.writeBackSignal=t.writeBackSignal;let s=this._bindingsHelper.serializeBinding(e.element,t.targetName,i),l=e.openGroup("edit_binding");return e.setAttribute(s[0],s[1]),l.commit(),!0}clearBinding(e,t,i){let s=this._bindingsHelper.getBindingAttributeName(e.element,t,i);return e.removeAttribute(s),!0}};var Yt=[{prefix:"?@",itemType:"attribute"},{prefix:"#@",itemType:"attribute"},{prefix:"?$",itemType:"signalObject"},{prefix:"#$",itemType:"signalObject"},{prefix:"??",itemType:"property"},{prefix:"##",itemType:"property"},{prefix:"?",itemType:"property"},{prefix:"#",itemType:"property"}];function Ke(r){let e=Yt.find(t=>r.startsWith(t.prefix));return e?{name:r.substring(e.prefix.length),...e}:{name:r,prefix:"",itemType:"signal"}}var Ze=class{getRefactorings(e){let t=[];for(let i of e){let s=i.serviceContainer.bindingService.getBindings(i);if(s)for(let l of s)for(let a of l.bindableObjectNames)if(a.includes(":")){let n=a.split(":")[0],o=Ke(a.substring(n.length+1));t.push({service:this,name:o.name,itemType:o.itemType,designItem:i,type:"binding",sourceObject:l,display:l.target+"/"+l.targetName+" - "+n+":",shortName:n,prefix:o.prefix})}else{let n=Ke(a);t.push({service:this,name:n.name,itemType:n.itemType,designItem:i,type:"binding",sourceObject:l,display:l.target+"/"+l.targetName,prefix:n.prefix})}}return t}refactor(e,t,i){let s=e.sourceObject;e.shortName?s.bindableObjectNames=s.bindableObjectNames.map(l=>l==e.shortName+":"+e.prefix+t?e.shortName+":"+e.prefix+i:l):s.bindableObjectNames=s.bindableObjectNames.map(l=>l==e.prefix+t?e.prefix+i:l),e.designItem.serviceContainer.bindingService.setBinding(e.designItem,s)}};var Qe=class{dragOverOnProperty(e,t,i){return"copy"}dropOnProperty(e,t,i,s){t.service.setValue(s,t,i.text)}};import{BindingTarget as C}from"@node-projects/web-component-designer";var et=class{getRefactorings(e){let t=[];for(let i of e)for(let s of i.attributes())if(s[0][0]=="@"){let l=s[1];if(l[0]=="{"){let a=JSON.parse(l);if("commands"in a)for(let n of a.commands){for(let o in n){let c=n[o];if(c!=null&&typeof c=="object"){let p=c;if(p.source==="signal")t.push({name:p.name,itemType:"signal",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[signal]",refactor:d=>p.name=d});else if(p.source==="property")t.push({name:p.name,itemType:"property",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[property]",refactor:d=>p.name=d});else if(p.source==="complexString")for(let d of p.name.matchAll(/\{(.*?)\}/g)){let h=d[0],u=d[1];if(u[0]==="?"){let g="?";u=u.substring(1),u[0]==="?"&&(g="??",u=u.substring(1)),t.push({name:u,itemType:"property",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[complexString]->property",refactor:f=>p.name=p.name.replace(h,"{"+g+f+"}")})}else t.push({name:u,itemType:"signal",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:n.type+"/"+s[0].substring(1)+"/"+o+"[complexString]->signal",refactor:g=>p.name=p.name.replace(h,"{"+g+"}")})}}}switch(n.type){case"SetSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ToggleSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"IncrementSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"DecrementSignalValue":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"SetBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ClearBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ToggleBitInSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"OpenScreen":n.screen&&typeof n.screen=="string"&&t.push({name:n.screen,itemType:"screen",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/screen",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.screen=o});break;case"OpenDialog":n.screen&&typeof n.screen=="string"&&t.push({name:n.screen,itemType:"screen",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/screen",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.screen=o});break;case"CalculateSignalValue":n.targetSignal&&typeof n.targetSignal=="string"&&t.push({name:n.targetSignal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/targetSignal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.targetSignal=o});break;case"SubscribeSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"UnsubscribeSignal":n.signal&&typeof n.signal=="string"&&t.push({name:n.signal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/signal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.signal=o});break;case"ShowMessageBox":n.resultSignal&&typeof n.resultSignal=="string"&&t.push({name:n.resultSignal,itemType:"signal",target:C.event,targetName:s[0],display:n.type+"/"+s[0].substring(1)+"/resultSignal",service:this,designItem:i,type:"script",sourceObject:a,refactor:o=>n.resultSignal=o});break}}else"blocks"in a;if("parameters"in a)for(let n in a.parameters)typeof a.parameters[n]=="string"&&t.push({name:a.parameters[n],itemType:"parameter",target:C.event,targetName:s[0],service:this,designItem:i,type:"script",sourceObject:a,display:s[0].substring(1)+"/parameters/"+n,refactor:o=>a.parameters[n]=o})}}return t}refactor(e,t,i){e.refactor(i);let s=JSON.stringify(e.sourceObject);e.designItem.setAttribute(e.targetName,s)}};import{BasePropertyEditor as Kt}from"@node-projects/web-component-designer";var tt=class extends Kt{_ip;_container;constructor(e,t){super(e),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=s=>this._valueChanged(this._ip.value),this._ip.onfocus=s=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let i=document.createElement("button");i.textContent="...",i.onclick=async()=>{let s=t.createBindableObjectBrowser();s.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),s.title="select signal...";let l=new AbortController;s.objectDoubleclicked.on(()=>{l.abort(),this._ip.value=s.selectedObject.fullName,this._valueChanged(this._ip.value)}),await t.openConfirmation(s,{x:100,y:100,width:400,height:300,abortSignal:l.signal})&&(this._ip.value=s.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(i),this.element=this._container}refreshValue(e,t){t==null?this._ip.value="":this._ip.value=t}};import{EventsService as Zt}from"@node-projects/web-component-designer";var it=class r extends Zt{static _cyclicEvent=[{name:`${ye}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(e){let t=super.getPossibleEvents(e);return t.push(...r._cyclicEvent),t}getEvent(e,t){return t.includes(ye)?r._cyclicEvent.find(s=>s.name==t)??{name:t,propertyName:"on"+t,eventObjectName:"Event"}:super.getEvent(e,t)}};import{PropertyType as oi}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js";import{BaseCustomWebComponentLazyAppend as ii,css as si}from"@node-projects/base-custom-webcomponent";import{BindingTarget as ni}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{ContextMenu as ai}from"@node-projects/web-component-designer/dist/elements/helper/contextMenu/ContextMenu.js";import{BindingTarget as ve}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{RefreshMode as Qt}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/IPropertiesService.js";import{PropertyType as ei}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/PropertyType.js";import{ValueType as st}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/ValueType.js";import{AbstractPropertiesService as ti}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/services/AbstractPropertiesService.js";var xe=class extends ti{getRefreshMode(){return Qt.fullOnValueChange}isHandledElement(e){return!e.isRootItem}getBindings(e){return e.serviceContainer.getServices("bindingService").flatMap(t=>(t.getBindings(e)??[]).filter(i=>i.target===ve.class).map(i=>({...i,service:t})))}async getProperties(e){return this.getBindings(e).map(t=>this.createProperty(t.targetName))}async getProperty(e,t){return this.createProperty(t)}createProperty(e){return{name:e,type:"boolean",propertyType:ei.property,service:this}}getPropertyTarget(){return ve.class}getBinding(e,t){return this.getBindings(e[0]).find(i=>i.targetName===t.name)}isSet(e,t){return this.getBinding(e,t)?st.bound:st.none}getValue(e,t){return this.getBinding(e,t)?.expression}validateName(e,t,i){return!t||/[\s"'<>/=]/.test(t)||t!==t.toLowerCase()?"Use a lowercase class name without spaces or HTML attribute delimiters, e.g. is-active.":t!==i&&this.getBindings(e).some(s=>s.targetName===t)?"This class already has a binding.":null}rename(e,t,i){let s=this.validateName(e,i,t.targetName);if(s)throw new Error(s);if(i===t.targetName)return;let l=e.openGroup(`rename class binding: ${t.targetName} to ${i}`);try{if(!t.service.setBinding(e,{...t,targetName:i}))throw new Error("The binding service could not rename this binding.");if(!t.service.clearBinding(e,t.targetName,ve.class))throw new Error("The binding service could not remove the previous binding.");l.commit()}catch(a){throw l.abort(),a}}remove(e,t){let i=e.openGroup(`remove class binding: ${t.targetName}`);try{if(!t.service.clearBinding(e,t.targetName,ve.class))throw new Error("The binding service could not remove this binding.");i.commit()}catch(s){throw i.abort(),s}}};var ue=class extends ii{_items=[];_service=new xe;_rows;_add;_toggle;_signature;_editing=!1;static style=si`
     :host { display: block; grid-column: 1 / -1; min-width: 0; color: var(--wcd-color-text, white); }
     :host([hidden]) { display: none !important; }
     .header, .row { display: flex; align-items: center; gap: 8px; min-height: 28px; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "web-component-designer addon for visualizations",
   "name": "@node-projects/web-component-designer-visualization-addons",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "type": "module",
   "main": "./dist/index.js",
   "author": "jochen.kuehner@gmx.de",
@@ -19,9 +19,9 @@
     "@node-projects/css-parser": "^5.2.0",
     "@node-projects/propertygrid.webcomponent": ">=1.2.3",
     "@node-projects/splitview.webcomponent": ">=1.0.1",
-    "@node-projects/web-component-designer": "1.1.3",
-    "@node-projects/web-component-designer-codeview-monaco": "1.1.3",
-    "@node-projects/web-component-designer-widgets-wunderbaum": "1.1.3",
+    "@node-projects/web-component-designer": "1.1.4",
+    "@node-projects/web-component-designer-codeview-monaco": "1.1.4",
+    "@node-projects/web-component-designer-widgets-wunderbaum": "1.1.4",
     "blockly": ">=13.2.1",
     "long": ">=5.2.3"
   },

package/tests/BindingsHelper.test.ts

@@ -88,6 +88,69 @@ const flushMicrotasks = async () => {
 };
 
 describe('BindingsHelper runtime', () => {
+  test('preserves local signal names for class and two-way checkbox bindings', async () => {
+    const handler = new TestVisualizationHandler();
+    handler.values.set('__expandedPkSupply', false);
+    handler.values.set('__confirmed', false);
+    const helper = new BindingsHelper(handler);
+    const element = document.createElement('div');
+    const checkbox = document.createElement('input');
+    checkbox.type = 'checkbox';
+    const disposeClass = helper.applyBinding(element, ['expanded', {
+      signal: '__expandedPkSupply',
+      target: BindingTarget.class
+    }], '', null);
+    const disposeCheckbox = helper.applyBinding(checkbox, ['checked', {
+      signal: '__confirmed',
+      twoWay: true,
+      events: ['change'],
+      target: BindingTarget.property
+    }], '', null);
+    await flushMicrotasks();
+
+    expect(handler.subscribeCalls).toEqual(['__expandedPkSupply', '__confirmed']);
+    expect(handler.getStateCalls).toEqual(['__expandedPkSupply', '__confirmed']);
+    expect(element.classList.contains('expanded')).toBe(false);
+    expect(checkbox.checked).toBe(false);
+
+    handler.emit('__expandedPkSupply', true);
+    handler.emit('__confirmed', true);
+    await flushMicrotasks();
+    expect(element.classList.contains('expanded')).toBe(true);
+    expect(checkbox.checked).toBe(true);
+
+    checkbox.checked = false;
+    checkbox.dispatchEvent(new Event('change'));
+    expect(handler.setStateCalls).toEqual([{ id: '__confirmed', value: false, ack: undefined }]);
+
+    disposeClass();
+    disposeCheckbox();
+    expect(handler.unsubscribeCalls).toEqual(['__expandedPkSupply', '__confirmed']);
+  });
+
+  test('still resolves doubled question-mark and hash prefixes as direct property bindings', () => {
+    const handler = new TestVisualizationHandler();
+    const helper = new BindingsHelper(handler);
+    const root = document.createElement('div');
+    const element = document.createElement('div');
+    root['screenValue'] = 7;
+    element['targetValue'] = 9;
+    const disposeScreen = helper.applyBinding(element, ['fromScreen', {
+      signal: '??screenValue',
+      target: BindingTarget.property
+    }], '', root);
+    const disposeTarget = helper.applyBinding(element, ['fromTarget', {
+      signal: '##targetValue',
+      target: BindingTarget.property
+    }], '', root);
+
+    expect(element['fromScreen']).toBe(7);
+    expect(element['fromTarget']).toBe(9);
+    expect(handler.subscribeCalls).toEqual([]);
+    disposeScreen();
+    disposeTarget();
+  });
+
   test('shares subscriptions and initial reads for the same signal', async () => {
     const handler = new TestVisualizationHandler();
     handler.values.set('shared', 7);