@node-projects/web-component-designer-visualization-addons 0.1.142 → 0.1.143

package/dist/index-min.js

@@ -386,5 +386,5 @@ export async function run(eventData, shadowRoot, parameters, relativeSignalsPath
 `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[B+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+r]:!o&&e.target==f.class&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[R+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+r]:!o&&e.target==f.class&&e.expression&&!e.expression.includes(`
 `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[R+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+r]:!o&&e.target==f.css&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[V+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+r]:!o&&e.target==f.css&&e.expression&&!e.expression.includes(`
 `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[V+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+r]:!o&&e.target==f.cssvar&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[A+n.camelToDotCase(s.substring(2)),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+r]:!o&&e.target==f.cssvar&&e.expression&&!e.expression.includes(`
-`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[A+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+r]:((e.inverted===null||e.inverted===!1)&&delete i.inverted,(e.expression===null||e.expression==="")&&delete i.expression,(e.expressionTwoWay===null||e.expressionTwoWay==="")&&delete i.expressionTwoWay,(e.twoWay===null||e.twoWay===!1)&&delete i.twoWay,delete i.target,e.historic||delete i.historic,e.target==f.content?[w+"html",JSON.stringify(i)]:e.target==f.attribute?[B+v.camelToDashCase(s),JSON.stringify(i)]:e.target==f.class?[R+n.camelToDotCase(s),JSON.stringify(i)]:e.target==f.css?[V+v.camelToDashCase(s),JSON.stringify(i)]:e.target==f.cssvar?[A+n.camelToDotCase(s.substring(2)),JSON.stringify(i)]:e.target==f.property&&s=="innerHTML"?[w+"html",JSON.stringify(i)]:e.target==f.property&&s=="textContent"?[w+"text",JSON.stringify(i)]:[S+v.camelToDashCase(s),JSON.stringify(i)])}getBindingAttributeName(t,s,e){return e==f.attribute?B+v.camelToDashCase(s):e==f.class?R+n.camelToDotCase(s):e==f.css?V+v.camelToDashCase(s):e==f.visible?F:e==f.cssvar?A+n.camelToDotCase(s):e==f.property&&s=="innerHTML"?w+"html":e==f.property&&s=="textContent"?w+"text":S+v.camelToDashCase(s)}*getBindings(t){if(t.attributes)for(let s of t.attributes)s.name.startsWith(S)?yield this.parseBinding(t,s.name,s.value,f.property,S):s.name.startsWith(w)?yield this.parseBinding(t,s.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",s.value,f.property,S):s.name.startsWith(B)?yield this.parseBinding(t,s.name,s.value,f.attribute,B):s.name.startsWith(R)?yield this.parseBinding(t,s.name,s.value,f.class,R):s.name.startsWith(V)?yield this.parseBinding(t,s.name,s.value,f.css,V):s.name.startsWith(A)?yield this.parseBinding(t,s.name,s.value,f.cssvar,A):s.name.startsWith(F)&&(yield this.parseBinding(t,s.name,s.value,f.visible,F))}applyAllBindings(t,s,e,i,r){let o=[],a=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),l;for(;l=a.nextNode();){let c=this.getBindings(l);for(let p of c)try{let d=this.applyBinding(l,p,s,e,i);if(o.push(d),p[1].maybeLitElement&&l.localName.includes("-")&&!customElements.get(l.localName)){let m=l,h=p;customElements.whenDefined(l.localName).then(()=>{z(m)&&(d(),h[1].events=h[1].litEventNames,o.push(this.applyBinding(m,h,s,e,i)))})}}catch(d){console.warn("error applying binding",l,p,d)}if(r&&r(l)){l=a.nextSibling();continue}}return o}static#e=0;async parseCssBindings(t,s,e,i){let r=await import("@node-projects/css-parser"),o=r.parse(t),a;for(let c of o.stylesheet.rules)if(c.type===r.CssTypes.rule){for(let p of c.declarations)if(p.type===r.CssTypes.declaration&&p.value.includes(He)){let d=this.parseCssBinding(p.value,s,e,i);p.value=d[0],a?a.push(...d[1]):a=d[1]}}let l=r.stringify(o,{indent:"",compress:!0});return[Me(l),a]}parseCssBinding(t,s,e,i,r){t=t.trim();let o="",a="",l=!1,c="",p=!1,d=null,m=[];for(let h=0;h<t.length;h++){let u=t[h];if(l)if(p)c+=u;else if(d&&u==="\\")p=!0;else if(u===d)d=null;else if(d===null&&u===")"){let g=n.#e++,y=Fe+g,x=[y,{signal:c,target:f.cssvar}];c.startsWith("{")&&(x=JSON.parse(c)),m.push(this.applyBinding(s,x,e,i,r)),o+="var("+y+")",l=!1,c=""}else c+=u;else u==="("?(a!=="bind"?(o+=a,o+=u):(l=!0,t[h+1]==="'"||t[h+1]==='"'?(h++,d=t[h]):d=null),a=""):u===" "||u===","||u==="("||u==="+"||u==="-"||u==="*"||u==="/"?(o+=a+u,a=""):a+=u}return[o+a,m]}applyBinding(t,s,e,i,r){let o=[],a,l=()=>{for(let m of o)this._visualizationHandler.unsubscribeState(m[0],m[1],m[2]);if(a)for(let m of a)m()},c=s[1].signal.split(";"),p=new Array(c.length);for(let m=0;m<c.length;m++){let h=c[m];if(p[m]="__"+m,h.includes(":")){let u=h.split(":");p[m]=u[0],h=u[1],c[m]=h}if(h[0]==="?"){if(i){let u=h.substring(1);if(u[0]=="?")c[m]=u;else{c[m]=i[u],u[0]==="$"&&(u=u.substring(1),c[m]="$"+i[u]);let g=()=>{l(),this.applyBinding(t,s,e,i,r)},y=this.getChangedEventName(i,u);i.addEventListener(y,g),a||(a=[]),a.push(()=>i.removeEventListener(y,g))}}}else if(h[0]==="#"){let u=h.substring(1);if(u[0]=="#")c[m]=u;else{c[m]=i[u],u[0]==="$"&&(u=u.substring(1),c[m]="$"+i[u]);let g=()=>{l(),this.applyBinding(t,s,e,i,r)},y=this.getChangedEventName(t,u);i.addEventListener(y,g),a||(a=[]),a.push(()=>i.removeEventListener(y,g))}}h[0]==="."&&(c[m]=this._visualizationHandler.getNormalizedSignalName(h,e,t))}let d=new Array(c.length);for(let m=0;m<c.length;m++){let h=c[m];if(h[0]==="?"){if(i){let u=h.substring(1),g=()=>{let y=!1;y||(y=!0,this.handleValueChanged(t,i,s,i[u],d,m,p,!1,e),y=!1)};i.addEventListener(v.camelToDashCase(u)+"-changed",g),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(u)+"-changed",g));try{this.handleValueChanged(t,i,s,i[u],d,m,p,!1,e)}catch(y){console.error(y)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,y=>i[u]=y)}}else if(h[0]==="#"){let u=h.substring(1),g=()=>{let y=!1;y||(y=!0,this.handleValueChanged(t,i,s,t[u],d,m,p,!1,e),y=!1)};t.addEventListener(v.camelToDashCase(u)+"-changed",g),a||(a=[]),a.push(()=>t.removeEventListener(v.camelToDashCase(u)+"-changed",g));try{this.handleValueChanged(t,i,s,t[u],d,m,p,!1,e)}catch(y){console.error(y)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,y=>t[u]=y)}else if(h[0]==="$"){let u=h.substring(1);u[0]==="."&&(u=this._visualizationHandler.getNormalizedSignalName(u,e,t)),this._visualizationHandler.getObject(u).then(g=>{this.handleValueChanged(t,i,s,g,d,m,p,!0,e)})}else if(h[0]==="\xA7"){let u=h.substring(1),g=r.valueProvider(u,{element:t,binding:s,relativeSignalPath:e,root:i});g instanceof Promise?g.then(x=>this.handleValueChanged(t,i,s,x,d,m,p,!0,e)):this.handleValueChanged(t,i,s,g,d,m,p,!0,e),r.valueChangedCallbacks||(r.valueChangedCallbacks=new Map);let y=r.valueChangedCallbacks.get(u);y==null&&(y=[],r.valueChangedCallbacks.set(u,y)),y.push(()=>{let x=r.valueProvider(u,{element:t,binding:s,relativeSignalPath:e,root:i});x instanceof Promise?x.then(he=>this.handleValueChanged(t,i,s,he,d,m,p,!0,e)):this.handleValueChanged(t,i,s,x,d,m,p,!0,e)})}else if(h.includes("{")){let u=new J(this,this._visualizationHandler,h,g=>this.handleValueChanged(t,i,s,g.val,d,m,p,!1,e),t,e,i,r);a||(a=[]),a.push(()=>u.dispose()),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>u.setState(g))}else if(s[1].historic)if(s[1].historic.reloadInterval){let u={timerId:-1},g=async()=>{let y=await this._visualizationHandler.getHistoricData(h,s[1].historic);this.handleValueChanged(t,i,s,y?.values,d,m,p,!0,e),u.timerId!==null&&(u.timerId=setTimeout(g,s[1].historic.reloadInterval))};g(),a||(a=[]),a.push(()=>{u.timerId>0&&clearTimeout(u.timerId),u.timerId=null})}else this._visualizationHandler.getHistoricData(h,s[1].historic).then(u=>this.handleValueChanged(t,i,s,u?.values,d,m,p,!0,e));else{let u=(g,y)=>this.handleValueChanged(t,i,s,y.val,d,m,p,!1,e);o.push([h,u,this._visualizationHandler.subscribeState(h,u)]),this._visualizationHandler.getState(h).then(g=>this.handleValueChanged(t,i,s,g?.val,d,m,p,!1,e)),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>this._visualizationHandler.setState(h,g))}}return l}addTwoWayBinding(t,s,e){t[1].expressionTwoWay&&(t[1].compiledExpressionTwoWay||(t[1].expressionTwoWay.includes("return ")?t[1].compiledExpressionTwoWay=new Function(["value"],t[1].expressionTwoWay):t[1].compiledExpressionTwoWay=new Function(["value"],"return "+t[1].expressionTwoWay)));for(let i of t[1].events){let r=s[i];r instanceof Le?r.on(()=>{let o;t[1].target==f.attribute?o=s.getAttribute(t[0]):o=s[t[0]],o=n.parseValueWithType(o,t),t[1].compiledExpressionTwoWay&&(o=t[1].compiledExpressionTwoWay(o)),e(o)}):s.addEventListener(i,o=>{let a;t[1].target==f.attribute?a=s.getAttribute(t[0]):a=s[t[0]],a=n.parseValueWithType(a,t),t[1].compiledExpressionTwoWay&&(a=t[1].compiledExpressionTwoWay(a)),e(a)})}}static parseValueWithType(t,s){if(s[1].type)switch(s[1].type){case"number":return parseFloat(t);case"boolean":return t===!0||t==="true"||!!parseInt(t);case"string":return t?.toString();case"integer":return parseInt(t)}return t}handleValueChanged(t,s,e,i,r,o,a,l,c){let p=i;if(!l&&o==0&&(p=n.parseValueWithType(p,e)),r[o]=p,e[1].expression&&(e[1].compiledExpression||(a.push("__res"),a.push("__ctx"),e[1].expression.includes("return ")?e[1].compiledExpression=new Function(a,e[1].expression):e[1].compiledExpression=new Function(a,"return "+e[1].expression)),r[a.length-1]={element:t,root:s,boundNames:e[1].signal,boundTargetName:e[0],boundTargetType:e[1].target},p=e[1].compiledExpression(...r),r[a.length-1]=p),e[1].converter)if(typeof e[1].converter=="string")p=this.namedConverterCallback(e[1].converter,p,t,e);else{let d=p!=null?p.toString():p;if(d in e[1].converter){let m=e[1].converter[d];typeof m=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...r):p=m}else{let m=!1,h=parseFloat(p);for(let u in e[1].converter)if(u.length>2&&u[0]===">"&&u[1]==="="){let g=parseFloat(u.substring(2));if(h>=g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>2&&u[0]==="<"&&u[1]==="="){let g=parseFloat(u.substring(2));if(h<=g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>1&&u[0]===">"){let g=parseFloat(u.substring(1));if(h>g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>1&&u[0]==="<"){let g=parseFloat(u.substring(1));if(h<g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else{let g=u.split("-");if(g.length>1&&(g[0]===""||h>=parseFloat(g[0]))&&(g[1]===""||parseFloat(g[1])>=h)){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}!m&&e[1].converterDefault!==void 0&&(p=e[1].converterDefault)}}if(e[1].inverted&&(p=!p),e[1].writeBackSignal){let d=e[1].writeBackSignal;d[0]==="."&&(d=c+d),this._visualizationHandler.setState(d,p,!0)}e[1].target==f.property?t[e[0]]=p:e[1].target==f.attribute?t.setAttribute(e[0],p):e[1].target==f.css?t.style[e[0]]=p:e[1].target==f.cssvar?t.style.setProperty(e[0],p):e[1].target==f.class?p?t.classList.add(e[0]):t.classList.remove(e[0]):e[1].target==f.visible&&(t.style.visibility=p?"":"collapse")}static camelToDotCase(t){return t.replace(/([A-Z])/g,s=>`.${s[0].toLowerCase()}`)}static dotToCamelCase(t){return t.replace(/\.([a-z])/g,s=>s[1].toUpperCase())}};var se=class{name;relativeSignalsPath;commands;parameters};import{deepValue as _,setDeepValue as ae,sleep as Ue}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import W from"long";import{EventsService as Je}from"@node-projects/web-component-designer";var M="cyclic",ie=class n extends Je{static _cyclicEvent=[{name:`${M}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(t){let s=super.getPossibleEvents(t);return s.push(...n._cyclicEvent),s}getEvent(t,s){return s.includes(M)?n._cyclicEvent.find(i=>i.name==s)??{name:s,propertyName:"on"+s,eventObjectName:"Event"}:super.getEvent(t,s)}};var Xe={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},ne=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(n){this._visualizationHandler=n}async execute(n,t){let s=-1,e=!1,i=t.event?.type,r=i?Xe[i]:null;if(r){let o=t.element;i=="pointerdown"&&(o=window),o.addEventListener(r,()=>{e=!0},{once:!0})}for(let o=0;o<n.length;o++){let a=n[o];if(a.type=="Exit")break;if(a.type=="Goto"){let l=await this.getValue(a.label,t);if(o=n.findIndex(c=>c.type=="Label"&&c.label==l),o<0)break}else if(a.type=="Condition"){let l=await this.getValue(a.value1,t),c=await this.getValue(a.value2,t),p=await this.getValue(a.comparisonType,t),d=!1;switch(p){case"==null":d=l==null;break;case"!=null":d=l!=null;break;case"==true":d=l==!0;break;case"==false":d=l==!1;break;case"==":d=l==c;break;case"!=":d=l!=c;break;case">":d=l>c;break;case"<":d=l<c;break;case">=":d=l>=c;break;case"<=":d=l<=c;break;case"&&":d=l&&c;break;case"||":d=l||c;break}if(d){await this.runExternalScript(await this.getValue(a.trueScriptName,t),await this.getValue(a.trueScriptType,t));let m=await this.getValue(a.trueGotoLabel,t);if(m&&(o=n.findIndex(h=>h.type=="Label"&&h.label==m),o<0))break}else{await this.runExternalScript(await this.getValue(a.falseScriptName,t),await this.getValue(a.falseScriptType,t));let m=await this.getValue(a.falseGotoLabel,t);if(m&&(o=n.findIndex(h=>h.type=="Label"&&h.label==m),o<0))break}}else if(a.type=="Repeat"){let l=await this.getValue(a.label,t),c=await this.getValue(a.count,t);if(await this.getValue(a.mode,t)=="eventValid"&&e){e=!1;continue}if(c!=0&&s==-1&&(s=c-1),s==0||(s>0&&s--,o=-1,l&&(o=n.findIndex(d=>d.type=="Label"&&d.label==l),o<0)))continue}else if(!await this.runScriptCommand(a,t))break}}async getValueFromTarget(n,t,s){return n==="property"?_(s.root,t):n==="elementProperty"?_(s.element,t):(await this._visualizationHandler.getState(this.getSignalName(t,s)))?.val}async setValueOnTarget(n,t,s,e){n==="property"?ae(s.root,t,e):n==="elementProperty"?ae(s.element,t,e):await this._visualizationHandler.setState(this.getSignalName(t,s),e)}async runExternalScript(n,t){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let n=await this.getValue(command.value??500,context);await Ue(n);break}case"Console":{let n=await this.getValue(command.target??"log",context),t=await this.getValue(command.message,context);console[n](t);break}case"ToggleSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),s=await this.getValueFromTarget(t,n,context);await this._visualizationHandler.setState(this.getSignalName(n,context),!s);break}case"ToggleSignalValueThroughList":{let n=await this.getValue(command.valueList,context),t=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,t,context),i=n.indexOf(e)+1;i>=n.length&&(i=0);let r=n[i];await this._visualizationHandler.setState(this.getSignalName(t,context),r);break}case"SetSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context);await this.setValueOnTarget(t,n,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,n,context)+await this.getValue(command.value,context);await this.setValueOnTarget(t,n,context,e);break}case"DecrementSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,n,context)-await this.getValue(command.value,context);await this.setValueOnTarget(t,n,context,e);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 n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t),r=W.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"ClearBitInSignal":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t);i.negate();let r=W.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"ToggleBitInSignal":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t),r=W.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"Javascript":{let n=await this.getValue(command.script,context),t=context;t.shadowRoot=context.element.getRootNode(),t.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",n)),command.compiledScript(t);break}case"SetElementProperty":{command=N.upgradeSetElementProperty(command);let n=await this.getValue(command.name,context);n===""&&(n=null);let t=await this.getValue(command.value,context),s=await this.getValue(command.parentIndex??0,context),e=await this.getValue(command.target??"property",context),i=await this.getValue(command.targetSelectorTarget??"container",context),r=await this.getValue(command.targetSelector,context),o=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,s,r);for(let l of a)e=="attribute"?l.setAttribute(n,t):e=="property"?l[n]=t:e=="css"?l.style[n]=t:e=="class"&&(o==="toggle"?l.classList.toggle(n??t):o==="remove"?l.classList.remove(n??t):l.classList.add(n??t));break}case"SubscribeSignal":{let n=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let s=()=>{this._visualizationHandler.unsubscribeState(n,s,null)};this._visualizationHandler.subscribeState(n,s)}else this._visualizationHandler.subscribeState(n,this._subscriptionCallback);break}case"UnsubscribeSignal":{let n=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(n,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let n=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(n);break}case"ClearSignalsInGroup":{let n=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(n);break}case"RunScript":{let n=await this.getValue(command.name,context),t=await this.getValue(command.scriptType,context);this.runExternalScript(n,t);break}case"ShowMessageBox":{let n=null,t=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let i=await this.getValue(command.message,context);confirm(i)?n=1:n=2}else{let i=await this.getValue(command.message,context);alert(i),n=1}let e=await this.getValue(command.resultSignal,context);if(e&&this._visualizationHandler.setState(e,n),t&&n!=1)return!1;break}case"ShowPrompt":{let n=await this.getValue(command.message,context),t=await this.getValue(command.default,context),s=prompt(n,t),e=await this.getValue(command.resultSignal,context);e&&s&&this._visualizationHandler.setState(e,s);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(n,t,s){if(t==="container"){let e=n.element.getRootNode().host;for(let i=0;i<(s??0);i++)e=e.getRootNode().host;return e}else if(t==="element"){let e=n.element;for(let i=0;i<(s??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(n,t,s,e){let i=this.getTarget(n,t,s),r=[i];return e&&(t==="container"?r=i.shadowRoot.querySelectorAll(e):r=i.querySelectorAll(e)),r}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return _(outerContext.root,value.name);case"elementProperty":return _(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let n=_(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(n,outerContext)))?.val}case"event":{let n=outerContext.event;return value.name&&(n=_(n,value.name)),n}case"parameter":return outerContext.parameters[value.name];case"context":return _(outerContext,value.name);case"complexString":{let n=value.name;return n!=null?await this.parseStringWithValues(n,outerContext):null}case"complexSignal":{let n=value.name;if(n!=null){let t=await this.parseStringWithValues(n,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(t,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(n,t){let s=U(n),e=await Promise.all(s.signals.map(r=>this.getStateOrFieldOrParameter(this.getSignalName(r,t),t))),i=s.parts[0];for(let r=0;r<s.parts.length-1;r++){let o=e[r];typeof o=="object"&&(o=o.val),o==null&&(o=""),i+=o+s.parts[r+1]}return i}getSignalName(n,t){return n[0]==="."?t.relativeSignalsPath+n:n}createScriptContext(n,t,s,e,i){return{root:n,event:t,element:s,parameters:e,relativeSignalsPath:i}}async assignAllScripts(n,t,s,e,i,r,o,a){r??=this.createScriptContext;let l=await this.loadAndInitJsObject(n,t,s,e,a);for(let c of s.querySelectorAll("*"))for(let p of c.attributes)if(p.name[0]==="@")try{let d=p.name.substring(1),m=p.value.trim(),h=d.startsWith(M),u=h?parseInt(d.substring(d.indexOf(":")+1)):null,g=await this.resolveHandler(m,l,c,s,e,i,r,o,d);g&&this.bindHandler(c,d,h,u,g)}catch{console.warn("error assigning script",c,p)}return l}async loadAndInitJsObject(n,t,s,e,i){if(!t)return null;try{let o=await import(URL.createObjectURL(new Blob([t],{type:"application/javascript"})));return i?i(o):o.init?.(e,s),o}catch(r){return console.error("error parsing javascript - "+n,r),null}}async resolveHandler(n,t,s,e,i,r,o,a,l){if(n[0]!=="{")return p=>{t?.[n]?t[n](p,s,e,i):console.warn(`javascript function named: "${n}" not found, maybe missing a "export" ?`)};let c=JSON.parse(n);if("commands"in c)return p=>this.execute(c.commands,o(i,p,s,c.parameters,c.relativeSignalsPath));if("blocks"in c){let p=null;return async d=>{p??=await G(c),p(d,e,c.parameters,c.relativeSignalsPath??"",r,o(i,d,s,c.parameters,c.relativeSignalsPath))}}if("name"in c){if(a)return a(s,l,c),null;let p=c.name;return d=>{t?.[p]?t[p](d,s,e,i,c.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(n,t,s,e,i){if(!s){n.addEventListener(t,i);return}let r=setInterval(()=>{n.isConnected?i(null):clearInterval(r)},e)}};import{OverlayLayer as Ge,DesignItem as T,InsertAction as $e,BindingTarget as k,PropertyType as H}from"@node-projects/web-component-designer";var re=class{constructor(t,s){this._bindingsHelper=t,this._visualizationHandler=s}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(t,s,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let r=t.getNormalizedElementCoordinates(e);this.rect=t.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",r.x,r.y,r.width,r.height,"",null,Ge.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(t,s,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let r=this.rectMap.get(e);t.overlayLayer.removeOverlay(r),this.rectMap.delete(e)}}dragOver(t,s,e){return"copy"}async drop(t,s,e,i){for(let l of this.rectMap.values())t.overlayLayer.removeOverlay(l);this.rectMap.clear();let r=T.GetDesignItem(i),o=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(o);if(r&&!r.isRootItem)if(i instanceof HTMLInputElement){let l={signal:e.fullName,target:k.property},c=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",l);r.setAttribute(c[0],c[1])}else{let l={signal:e.fullName,target:k.content},c=this._bindingsHelper.serializeBinding(i,null,l);r.setAttribute(c[0],c[1])}else{let l=t.getNormalizedEventCoordinates(s),c,p,d=await this._visualizationHandler.getState(e.fullName);if(a.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 m=document.createElement("img");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}else if(d.val.endsWith("mp4")){let m=document.createElement("video");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}else{let m=document.createElement("iframe");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}if(!c){let m=document.createElement("input");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h=a.writeable!==!1,u={signal:e.fullName,target:k.property,twoWay:h},g=this._bindingsHelper.serializeBinding(m,"value",u);a.type==="boolean"?(g=this._bindingsHelper.serializeBinding(m,"checked",u),c.setAttribute("type","checkbox")):a.role=="date"?(u.twoWay=h,g=this._bindingsHelper.serializeBinding(m,"value-as-number",u),c.setAttribute("type","date"),c.setAttribute("readonly","")):a.role=="datetime"&&(u.twoWay=h,g=this._bindingsHelper.serializeBinding(m,"value-as-number",u),c.setAttribute("type","datetime-local"),c.setAttribute("readonly","")),c.setAttribute(g[0],g[1])}c.setStyle("position","absolute"),c.setStyle("left",l.x+"px"),c.setStyle("top",l.y+"px"),t.instanceServiceContainer.undoService.execute(new $e(t.rootDesignItem,t.rootDesignItem.childCount,c)),p.commit(),requestAnimationFrame(()=>t.instanceServiceContainer.selectionService.setSelectedElements([c]))}}dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){if(s.type=="signal"){s.service.setValue(i,s,e.fullName);return}let r={signal:e.fullName,target:k.property};s.propertyType==H.attribute&&(r.target=k.attribute),s.propertyType==H.cssValue&&(r.target=k.css),r.signal=e.fullName,r.twoWay=s.propertyType==H.property||s.propertyType==H.propertyAndAttribute;let o=i[0].openGroup("drop binding");for(let a of i){let l=this._bindingsHelper.serializeBinding(a.element,s.name,r);a.setAttribute(l[0],l[1])}o.commit()}};import{BindingMode as X,BindingTarget as oe,PropertiesHelper as qe}from"@node-projects/web-component-designer";var le=class n{constructor(t){this._bindingsHelper=t}_bindingsHelper;static type="visualization-binding";getBindings(t){return Array.from(this._bindingsHelper.getBindings(t.element)).map(e=>({targetName:e[1].target===oe.css||e[1].target===oe.attribute?qe.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?X.twoWay:X.oneWay,invert:e[1].inverted,bindableObjectNames:e[1].signal.split(";"),expression:e[1].expression,expressionTwoWay:e[1].expressionTwoWay,converter:e[1].converter,type:n.type,service:this,changedEvents:e[1].events,historic:e[1].historic,writeBackSignal:e[1].writeBackSignal}))}setBinding(t,s){let e={signal:s.bindableObjectNames.join(";"),target:s.target};e.inverted=s.invert,e.twoWay=s.mode==X.twoWay,e.expression=s.expression,e.expressionTwoWay=s.expressionTwoWay,e.historic=s.historic,e.type=s.type,e.converter=s.converters,e.target=s.target,e.events=s.changedEvents;let i=this._bindingsHelper.serializeBinding(t.element,s.targetName,e),r=t.openGroup("edit_binding");return t.setAttribute(i[0],i[1]),r.commit(),!0}clearBinding(t,s,e){let i=this._bindingsHelper.getBindingAttributeName(t.element,s,e);return t.removeAttribute(i),!0}};var ce=class{getRefactorings(t){let s=[];for(let e of t){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let r of i)for(let o of r.bindableObjectNames){let a="signal",l="";if(o.includes(":")){let c=o.split(":")[0],p=o.substring(c.length+1);p.startsWith("?")&&(p=p.substring(1),l="?",a="property",p.startsWith("?")&&(p=p.substring(1),l="??")),s.push({service:this,name:p,itemType:a,designItem:e,type:"binding",sourceObject:r,display:r.target+"/"+r.targetName+" - "+c+":",shortName:c,prefix:l})}else o.startsWith("?")&&(o=o.substring(1),l="?",a="property",o.startsWith("?")&&(o=o.substring(1),l="??")),s.push({service:this,name:o,itemType:a,designItem:e,type:"binding",sourceObject:r,display:r.target+"/"+r.targetName,prefix:l})}}return s}refactor(t,s,e){let i=t.sourceObject;t.shortName?i.bindableObjectNames=i.bindableObjectNames.map(r=>r==t.shortName+":"+t.prefix+s?t.shortName+":"+t.prefix+e:r):i.bindableObjectNames=i.bindableObjectNames.map(r=>r==t.prefix+s?t.prefix+e:r),t.designItem.serviceContainer.bindingService.setBinding(t.designItem,i)}};var pe=class{dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){s.service.setValue(i,s,e.text)}};import{BindingTarget as b}from"@node-projects/web-component-designer";var ue=class{getRefactorings(t){let s=[];for(let e of t)for(let i of e.attributes())if(i[0][0]=="@"){let r=i[1];if(r[0]=="{"){let o=JSON.parse(r);if("commands"in o)for(let a of o.commands){for(let l in a){let c=a[l];if(c!=null&&typeof c=="object"){let p=c;if(p.source==="signal")s.push({name:p.name,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[signal]",refactor:d=>p.name=d});else if(p.source==="property")s.push({name:p.name,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[property]",refactor:d=>p.name=d});else if(p.source==="complexString")for(let d of p.name.matchAll(/\{(.*?)\}/g)){let m=d[0],h=d[1];if(h[0]==="?"){let u="?";h=h.substring(1),h[0]==="?"&&(u="??",h=h.substring(1)),s.push({name:h,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[complexString]->property",refactor:g=>p.name=p.name.replace(m,"{"+u+g+"}")})}else s.push({name:h,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[complexString]->signal",refactor:u=>p.name=p.name.replace(m,"{"+u+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.screen=l});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.screen=l});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&s.push({name:a.targetSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.targetSignal=l});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&s.push({name:a.resultSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.resultSignal=l});break}}else"blocks"in o;if("parameters"in o)for(let a in o.parameters)typeof o.parameters[a]=="string"&&s.push({name:o.parameters[a],itemType:"parameter",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:i[0].substring(1)+"/parameters/"+a,refactor:l=>o.parameters[a]=l})}}return s}refactor(t,s,e){t.refactor(e);let i=JSON.stringify(t.sourceObject);t.designItem.setAttribute(t.targetName,i)}};import{BasePropertyEditor as Ye}from"@node-projects/web-component-designer";var de=class extends Ye{_ip;_container;constructor(t,s){super(t),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=i=>this._valueChanged(this._ip.value),this._ip.onfocus=i=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let e=document.createElement("button");e.textContent="...",e.onclick=async()=>{let i=s.createBindableObjectBrowser();i.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),i.title="select signal...";let r=new AbortController;i.objectDoubleclicked.on(()=>{r.abort(),this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value)}),await s.openConfirmation(i,{x:100,y:100,width:400,height:300,abortSignal:r.signal})&&(this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(e),this.element=this._container}refreshValue(t,s){s==null?this._ip.value="":this._ip.value=s}};export{re as BindableObjectDragDropService,D as BindingsEditor,E as BindingsEditorHistoric,te as BindingsHelper,C as BlocklyScriptEditor,P as EventAssignment,I as ParameterEditor,pe as PropertyGridDragDropService,se as Script,ue as ScriptRefactorService,ne as ScriptSystem,de as SignalPropertyEditor,O as SimpleScriptEditor,ce as VisualizationBindingsRefactorService,le as VisualizationBindingsService,ie as VisualizationEventsService,j as VisualizationPropertyGrid,B as bindingPrefixAttribute,R as bindingPrefixClass,w as bindingPrefixContent,V as bindingPrefixCss,A as bindingPrefixCssVar,He as bindingPrefixInsideCss,Fe as bindingPrefixInsideCssVarName,S as bindingPrefixProperty,F as bindingPrefixVisible,Xt as bindingsInCssRegex,M as cyclicAttributeName,G as generateEventCodeFromBlockly,L as getNestedProperty,z as isLit,U as parseBindingString};
+`)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[A+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+r]:((e.inverted===null||e.inverted===!1)&&delete i.inverted,(e.expression===null||e.expression==="")&&delete i.expression,(e.expressionTwoWay===null||e.expressionTwoWay==="")&&delete i.expressionTwoWay,(e.twoWay===null||e.twoWay===!1)&&delete i.twoWay,delete i.target,e.historic||delete i.historic,e.target==f.content?[w+"html",JSON.stringify(i)]:e.target==f.attribute?[B+v.camelToDashCase(s),JSON.stringify(i)]:e.target==f.class?[R+n.camelToDotCase(s),JSON.stringify(i)]:e.target==f.css?[V+v.camelToDashCase(s),JSON.stringify(i)]:e.target==f.cssvar?[A+n.camelToDotCase(s.substring(2)),JSON.stringify(i)]:e.target==f.property&&s=="innerHTML"?[w+"html",JSON.stringify(i)]:e.target==f.property&&s=="textContent"?[w+"text",JSON.stringify(i)]:[S+v.camelToDashCase(s),JSON.stringify(i)])}getBindingAttributeName(t,s,e){return e==f.attribute?B+v.camelToDashCase(s):e==f.class?R+n.camelToDotCase(s):e==f.css?V+v.camelToDashCase(s):e==f.visible?F:e==f.cssvar?A+n.camelToDotCase(s):e==f.property&&s=="innerHTML"?w+"html":e==f.property&&s=="textContent"?w+"text":S+v.camelToDashCase(s)}*getBindings(t){if(t.attributes)for(let s of t.attributes)s.name.startsWith(S)?yield this.parseBinding(t,s.name,s.value,f.property,S):s.name.startsWith(w)?yield this.parseBinding(t,s.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",s.value,f.property,S):s.name.startsWith(B)?yield this.parseBinding(t,s.name,s.value,f.attribute,B):s.name.startsWith(R)?yield this.parseBinding(t,s.name,s.value,f.class,R):s.name.startsWith(V)?yield this.parseBinding(t,s.name,s.value,f.css,V):s.name.startsWith(A)?yield this.parseBinding(t,s.name,s.value,f.cssvar,A):s.name.startsWith(F)&&(yield this.parseBinding(t,s.name,s.value,f.visible,F))}applyAllBindings(t,s,e,i,r){let o=[],a=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),l;for(;l=a.nextNode();){let c=this.getBindings(l);for(let p of c)try{let d=this.applyBinding(l,p,s,e,i);if(o.push(d),p[1].maybeLitElement&&l.localName.includes("-")&&!customElements.get(l.localName)){let m=l,h=p;customElements.whenDefined(l.localName).then(()=>{z(m)&&(d(),h[1].events=h[1].litEventNames,o.push(this.applyBinding(m,h,s,e,i)))})}}catch(d){console.warn("error applying binding",l,p,d)}if(r&&r(l)){l=a.nextSibling();continue}}return o}static#e=0;async parseCssBindings(t,s,e,i){let r=await import("@node-projects/css-parser"),o=r.parse(t),a;for(let c of o.stylesheet.rules)if(c.type===r.CssTypes.rule){for(let p of c.declarations)if(p.type===r.CssTypes.declaration&&p.value.includes(He)){let d=this.parseCssBinding(p.value,s,e,i);p.value=d[0],a?a.push(...d[1]):a=d[1]}}let l=r.stringify(o,{indent:"",compress:!0});return[Me(l),a]}parseCssBinding(t,s,e,i,r){t=t.trim();let o="",a="",l=!1,c="",p=!1,d=null,m=[];for(let h=0;h<t.length;h++){let u=t[h];if(l)if(p)c+=u;else if(d&&u==="\\")p=!0;else if(u===d)d=null;else if(d===null&&u===")"){let g=n.#e++,y=Fe+g,x=[y,{signal:c,target:f.cssvar}];c.startsWith("{")&&(x=JSON.parse(c)),m.push(this.applyBinding(s,x,e,i,r)),o+="var("+y+")",l=!1,c=""}else c+=u;else u==="("?(a!=="bind"?(o+=a,o+=u):(l=!0,t[h+1]==="'"||t[h+1]==='"'?(h++,d=t[h]):d=null),a=""):u===" "||u===","||u==="("||u==="+"||u==="-"||u==="*"||u==="/"?(o+=a+u,a=""):a+=u}return[o+a,m]}applyBinding(t,s,e,i,r){let o=[],a,l=()=>{for(let m of o)this._visualizationHandler.unsubscribeState(m[0],m[1],m[2]);if(a)for(let m of a)m()},c=s[1].signal.split(";"),p=new Array(c.length);for(let m=0;m<c.length;m++){let h=c[m];if(p[m]="__"+m,h.includes(":")){let u=h.split(":");p[m]=u[0],h=u[1],c[m]=h}if(h[0]==="?"){if(i){let u=h.substring(1);if(u[0]=="?")c[m]=u;else{c[m]=i[u],u[0]==="$"&&(u=u.substring(1),c[m]="$"+i[u]);let g=()=>{l(),this.applyBinding(t,s,e,i,r)},y=this.getChangedEventName(i,u);i.addEventListener(y,g),a||(a=[]),a.push(()=>i.removeEventListener(y,g))}}}else if(h[0]==="#"){let u=h.substring(1);if(u[0]=="#")c[m]=u;else{c[m]=i[u],u[0]==="$"&&(u=u.substring(1),c[m]="$"+i[u]);let g=()=>{l(),this.applyBinding(t,s,e,i,r)},y=this.getChangedEventName(t,u);i.addEventListener(y,g),a||(a=[]),a.push(()=>i.removeEventListener(y,g))}}h[0]==="."&&(c[m]=this._visualizationHandler.getNormalizedSignalName(h,e,t))}let d=new Array(c.length);for(let m=0;m<c.length;m++){let h=c[m];if(h[0]==="?"){if(i){let u=h.substring(1),g=()=>{let y=!1;y||(y=!0,this.handleValueChanged(t,i,s,i[u],d,m,p,!1,e),y=!1)};i.addEventListener(v.camelToDashCase(u)+"-changed",g),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(u)+"-changed",g));try{this.handleValueChanged(t,i,s,i[u],d,m,p,!1,e)}catch(y){console.error(y)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,y=>i[u]=y)}}else if(h[0]==="#"){let u=h.substring(1),g=()=>{let y=!1;y||(y=!0,this.handleValueChanged(t,i,s,t[u],d,m,p,!1,e),y=!1)};t.addEventListener(v.camelToDashCase(u)+"-changed",g),a||(a=[]),a.push(()=>t.removeEventListener(v.camelToDashCase(u)+"-changed",g));try{this.handleValueChanged(t,i,s,t[u],d,m,p,!1,e)}catch(y){console.error(y)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,y=>t[u]=y)}else if(h[0]==="$"){let u=h.substring(1);u[0]==="."&&(u=this._visualizationHandler.getNormalizedSignalName(u,e,t)),this._visualizationHandler.getObject(u).then(g=>{this.handleValueChanged(t,i,s,g,d,m,p,!0,e)})}else if(h[0]==="\xA7"){let u=h.substring(1),g=r.valueProvider(u,{element:t,binding:s,relativeSignalPath:e,root:i});g instanceof Promise?g.then(x=>this.handleValueChanged(t,i,s,x,d,m,p,!0,e)):this.handleValueChanged(t,i,s,g,d,m,p,!0,e),r.valueChangedCallbacks||(r.valueChangedCallbacks=new Map);let y=r.valueChangedCallbacks.get(u);y==null&&(y=[],r.valueChangedCallbacks.set(u,y)),y.push(()=>{let x=r.valueProvider(u,{element:t,binding:s,relativeSignalPath:e,root:i});x instanceof Promise?x.then(he=>this.handleValueChanged(t,i,s,he,d,m,p,!0,e)):this.handleValueChanged(t,i,s,x,d,m,p,!0,e)})}else if(h.includes("{")){let u=new J(this,this._visualizationHandler,h,g=>this.handleValueChanged(t,i,s,g.val,d,m,p,!1,e),t,e,i,r);a||(a=[]),a.push(()=>u.dispose()),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>u.setState(g))}else if(s[1].historic)if(s[1].historic.reloadInterval){let u={timerId:-1},g=async()=>{let y=await this._visualizationHandler.getHistoricData(h,s[1].historic);this.handleValueChanged(t,i,s,y?.values,d,m,p,!0,e),u.timerId!==null&&(u.timerId=setTimeout(g,s[1].historic.reloadInterval))};g(),a||(a=[]),a.push(()=>{u.timerId>0&&clearTimeout(u.timerId),u.timerId=null})}else this._visualizationHandler.getHistoricData(h,s[1].historic).then(u=>this.handleValueChanged(t,i,s,u?.values,d,m,p,!0,e));else{let u=(g,y)=>this.handleValueChanged(t,i,s,y.val,d,m,p,!1,e);o.push([h,u,this._visualizationHandler.subscribeState(h,u)]),this._visualizationHandler.getState(h).then(g=>this.handleValueChanged(t,i,s,g?.val,d,m,p,!1,e)),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>this._visualizationHandler.setState(h,g))}}return l}addTwoWayBinding(t,s,e){t[1].expressionTwoWay&&(t[1].compiledExpressionTwoWay||(t[1].expressionTwoWay.includes("return ")?t[1].compiledExpressionTwoWay=new Function(["value"],t[1].expressionTwoWay):t[1].compiledExpressionTwoWay=new Function(["value"],"return "+t[1].expressionTwoWay)));for(let i of t[1].events){let r=s[i];r instanceof Le?r.on(()=>{let o;t[1].target==f.attribute?o=s.getAttribute(t[0]):o=s[t[0]],o=n.parseValueWithType(o,t),t[1].compiledExpressionTwoWay&&(o=t[1].compiledExpressionTwoWay(o)),e(o)}):s.addEventListener(i,o=>{let a;t[1].target==f.attribute?a=s.getAttribute(t[0]):a=s[t[0]],a=n.parseValueWithType(a,t),t[1].compiledExpressionTwoWay&&(a=t[1].compiledExpressionTwoWay(a)),e(a)})}}static parseValueWithType(t,s){if(s[1].type)switch(s[1].type){case"number":return parseFloat(t);case"boolean":return t===!0||t==="true"||!!parseInt(t);case"string":return t?.toString();case"integer":return parseInt(t)}return t}handleValueChanged(t,s,e,i,r,o,a,l,c){let p=i;if(!l&&o==0&&(p=n.parseValueWithType(p,e)),r[o]=p,e[1].expression&&(e[1].compiledExpression||(a.push("__res"),a.push("__ctx"),e[1].expression.includes("return ")?e[1].compiledExpression=new Function(a,e[1].expression):e[1].compiledExpression=new Function(a,"return "+e[1].expression)),r[a.length-1]={element:t,root:s,boundNames:e[1].signal,boundTargetName:e[0],boundTargetType:e[1].target},p=e[1].compiledExpression(...r),r[a.length-1]=p),e[1].converter)if(typeof e[1].converter=="string")p=this.namedConverterCallback(e[1].converter,p,t,e);else{let d=p!=null?p.toString():p;if(d in e[1].converter){let m=e[1].converter[d];typeof m=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...r):p=m}else{let m=!1,h=parseFloat(p);for(let u in e[1].converter)if(u.length>2&&u[0]===">"&&u[1]==="="){let g=parseFloat(u.substring(2));if(h>=g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>2&&u[0]==="<"&&u[1]==="="){let g=parseFloat(u.substring(2));if(h<=g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>1&&u[0]===">"){let g=parseFloat(u.substring(1));if(h>g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else if(u.length>1&&u[0]==="<"){let g=parseFloat(u.substring(1));if(h<g){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}else{let g=u.split("-");if(g.length>1&&(g[0]===""||h>=parseFloat(g[0]))&&(g[1]===""||parseFloat(g[1])>=h)){let y=e[1].converter[u];typeof y=="string"?p=new Function(a,"return `"+e[1].converter[u]+"`")(...r):p=y,m=!0;break}}!m&&e[1].converterDefault!==void 0&&(p=e[1].converterDefault)}}if(e[1].inverted&&(p=!p),e[1].writeBackSignal){let d=e[1].writeBackSignal;d[0]==="."&&(d=c+d),this._visualizationHandler.setState(d,p,!0)}e[1].target==f.property?t[e[0]]=p:e[1].target==f.attribute?t.setAttribute(e[0],p):e[1].target==f.css?t.style[e[0]]=p:e[1].target==f.cssvar?t.style.setProperty(e[0],p):e[1].target==f.class?p?t.classList.add(e[0]):t.classList.remove(e[0]):e[1].target==f.visible&&(t.style.visibility=p?"":"collapse")}static camelToDotCase(t){return t.replace(/([A-Z])/g,s=>`.${s[0].toLowerCase()}`)}static dotToCamelCase(t){return t.replace(/\.([a-z])/g,s=>s[1].toUpperCase())}};var se=class{name;relativeSignalsPath;commands;parameters};import{deepValue as _,setDeepValue as ie,sleep as Je}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import W from"long";var M="cyclic",Ue={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},ae=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(n){this._visualizationHandler=n}async execute(n,t){let s=-1,e=!1,i=t.event?.type,r=i?Ue[i]:null;if(r){let o=t.element;i=="pointerdown"&&(o=window),o.addEventListener(r,()=>{e=!0},{once:!0})}for(let o=0;o<n.length;o++){let a=n[o];if(a.type=="Exit")break;if(a.type=="Goto"){let l=await this.getValue(a.label,t);if(o=n.findIndex(c=>c.type=="Label"&&c.label==l),o<0)break}else if(a.type=="Condition"){let l=await this.getValue(a.value1,t),c=await this.getValue(a.value2,t),p=await this.getValue(a.comparisonType,t),d=!1;switch(p){case"==null":d=l==null;break;case"!=null":d=l!=null;break;case"==true":d=l==!0;break;case"==false":d=l==!1;break;case"==":d=l==c;break;case"!=":d=l!=c;break;case">":d=l>c;break;case"<":d=l<c;break;case">=":d=l>=c;break;case"<=":d=l<=c;break;case"&&":d=l&&c;break;case"||":d=l||c;break}if(d){await this.runExternalScript(await this.getValue(a.trueScriptName,t),await this.getValue(a.trueScriptType,t));let m=await this.getValue(a.trueGotoLabel,t);if(m&&(o=n.findIndex(h=>h.type=="Label"&&h.label==m),o<0))break}else{await this.runExternalScript(await this.getValue(a.falseScriptName,t),await this.getValue(a.falseScriptType,t));let m=await this.getValue(a.falseGotoLabel,t);if(m&&(o=n.findIndex(h=>h.type=="Label"&&h.label==m),o<0))break}}else if(a.type=="Repeat"){let l=await this.getValue(a.label,t),c=await this.getValue(a.count,t);if(await this.getValue(a.mode,t)=="eventValid"&&e){e=!1;continue}if(c!=0&&s==-1&&(s=c-1),s==0||(s>0&&s--,o=-1,l&&(o=n.findIndex(d=>d.type=="Label"&&d.label==l),o<0)))continue}else if(!await this.runScriptCommand(a,t))break}}async getValueFromTarget(n,t,s){return n==="property"?_(s.root,t):n==="elementProperty"?_(s.element,t):(await this._visualizationHandler.getState(this.getSignalName(t,s)))?.val}async setValueOnTarget(n,t,s,e){n==="property"?ie(s.root,t,e):n==="elementProperty"?ie(s.element,t,e):await this._visualizationHandler.setState(this.getSignalName(t,s),e)}async runExternalScript(n,t){}async runScriptCommand(command,context){switch(command.type){case"Comment":case"Label":case"Condition":case"Goto":case"Exit":case"Repeat":break;case"OpenUrl":{window.open(await this.getValue(command.url,context),command.target);break}case"Delay":{let n=await this.getValue(command.value??500,context);await Je(n);break}case"Console":{let n=await this.getValue(command.target??"log",context),t=await this.getValue(command.message,context);console[n](t);break}case"ToggleSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),s=await this.getValueFromTarget(t,n,context);await this._visualizationHandler.setState(this.getSignalName(n,context),!s);break}case"ToggleSignalValueThroughList":{let n=await this.getValue(command.valueList,context),t=await this.getValue(command.signal,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,t,context),i=n.indexOf(e)+1;i>=n.length&&(i=0);let r=n[i];await this._visualizationHandler.setState(this.getSignalName(t,context),r);break}case"SetSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context);await this.setValueOnTarget(t,n,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,n,context)+await this.getValue(command.value,context);await this.setValueOnTarget(t,n,context,e);break}case"DecrementSignalValue":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,n,context)-await this.getValue(command.value,context);await this.setValueOnTarget(t,n,context,e);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 n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t),r=W.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"ClearBitInSignal":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t);i.negate();let r=W.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"ToggleBitInSignal":{let n=await this.getValue(command.signal,context),t=await this.getValue(command.bitNumber??0,context),s=await this.getValue(command.target,context),e=await this.getValueFromTarget(s,n,context),i=W.fromNumber(1).shiftLeft(t),r=W.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(s,n,context,r);break}case"Javascript":{let n=await this.getValue(command.script,context),t=context;t.shadowRoot=context.element.getRootNode(),t.instance=context.shadowRoot.host,command.compiledScript||(command.compiledScript=new Function("context",n)),command.compiledScript(t);break}case"SetElementProperty":{command=N.upgradeSetElementProperty(command);let n=await this.getValue(command.name,context);n===""&&(n=null);let t=await this.getValue(command.value,context),s=await this.getValue(command.parentIndex??0,context),e=await this.getValue(command.target??"property",context),i=await this.getValue(command.targetSelectorTarget??"container",context),r=await this.getValue(command.targetSelector,context),o=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,s,r);for(let l of a)e=="attribute"?l.setAttribute(n,t):e=="property"?l[n]=t:e=="css"?l.style[n]=t:e=="class"&&(o==="toggle"?l.classList.toggle(n??t):o==="remove"?l.classList.remove(n??t):l.classList.add(n??t));break}case"SubscribeSignal":{let n=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let s=()=>{this._visualizationHandler.unsubscribeState(n,s,null)};this._visualizationHandler.subscribeState(n,s)}else this._visualizationHandler.subscribeState(n,this._subscriptionCallback);break}case"UnsubscribeSignal":{let n=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(n,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let n=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(n);break}case"ClearSignalsInGroup":{let n=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(n);break}case"RunScript":{let n=await this.getValue(command.name,context),t=await this.getValue(command.scriptType,context);this.runExternalScript(n,t);break}case"ShowMessageBox":{let n=null,t=await this.getValue(command.exitScriptOnCancel,context);if(await this.getValue(command.buttons,context)=="yesNo"){let i=await this.getValue(command.message,context);confirm(i)?n=1:n=2}else{let i=await this.getValue(command.message,context);alert(i),n=1}let e=await this.getValue(command.resultSignal,context);if(e&&this._visualizationHandler.setState(e,n),t&&n!=1)return!1;break}case"ShowPrompt":{let n=await this.getValue(command.message,context),t=await this.getValue(command.default,context),s=prompt(n,t),e=await this.getValue(command.resultSignal,context);e&&s&&this._visualizationHandler.setState(e,s);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(n,t,s){if(t==="container"){let e=n.element.getRootNode().host;for(let i=0;i<(s??0);i++)e=e.getRootNode().host;return e}else if(t==="element"){let e=n.element;for(let i=0;i<(s??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(n,t,s,e){let i=this.getTarget(n,t,s),r=[i];return e&&(t==="container"?r=i.shadowRoot.querySelectorAll(e):r=i.querySelectorAll(e)),r}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return _(outerContext.root,value.name);case"elementProperty":return _(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let n=_(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(n,outerContext)))?.val}case"event":{let n=outerContext.event;return value.name&&(n=_(n,value.name)),n}case"parameter":return outerContext.parameters[value.name];case"context":return _(outerContext,value.name);case"complexString":{let n=value.name;return n!=null?await this.parseStringWithValues(n,outerContext):null}case"complexSignal":{let n=value.name;if(n!=null){let t=await this.parseStringWithValues(n,outerContext);return(await this._visualizationHandler.getState(this.getSignalName(t,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(n,t){let s=U(n),e=await Promise.all(s.signals.map(r=>this.getStateOrFieldOrParameter(this.getSignalName(r,t),t))),i=s.parts[0];for(let r=0;r<s.parts.length-1;r++){let o=e[r];typeof o=="object"&&(o=o.val),o==null&&(o=""),i+=o+s.parts[r+1]}return i}getSignalName(n,t){return n[0]==="."?t.relativeSignalsPath+n:n}createScriptContext(n,t,s,e,i){return{root:n,event:t,element:s,parameters:e,relativeSignalsPath:i}}async assignAllScripts(n,t,s,e,i,r,o,a){r??=this.createScriptContext;let l=await this.loadAndInitJsObject(n,t,s,e,a);for(let c of s.querySelectorAll("*"))for(let p of c.attributes)if(p.name[0]==="@")try{let d=p.name.substring(1),m=p.value.trim(),h=d.startsWith(M),u=h?parseInt(d.substring(d.indexOf(":")+1)):null,g=await this.resolveHandler(m,l,c,s,e,i,r,o,d);g&&this.bindHandler(c,d,h,u,g)}catch{console.warn("error assigning script",c,p)}return l}async loadAndInitJsObject(n,t,s,e,i){if(!t)return null;try{let o=await import(URL.createObjectURL(new Blob([t],{type:"application/javascript"})));return i?i(o):o.init?.(e,s),o}catch(r){return console.error("error parsing javascript - "+n,r),null}}async resolveHandler(n,t,s,e,i,r,o,a,l){if(n[0]!=="{")return p=>{t?.[n]?t[n](p,s,e,i):console.warn(`javascript function named: "${n}" not found, maybe missing a "export" ?`)};let c=JSON.parse(n);if("commands"in c)return p=>this.execute(c.commands,o(i,p,s,c.parameters,c.relativeSignalsPath));if("blocks"in c){let p=null;return async d=>{p??=await G(c),p(d,e,c.parameters,c.relativeSignalsPath??"",r,o(i,d,s,c.parameters,c.relativeSignalsPath))}}if("name"in c){if(a)return a(s,l,c),null;let p=c.name;return d=>{t?.[p]?t[p](d,s,e,i,c.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(n,t,s,e,i){if(!s){n.addEventListener(t,i);return}let r=setInterval(()=>{n.isConnected?i(null):clearInterval(r)},e)}};import{OverlayLayer as Xe,DesignItem as T,InsertAction as Ge,BindingTarget as k,PropertyType as H}from"@node-projects/web-component-designer";var ne=class{constructor(t,s){this._bindingsHelper=t,this._visualizationHandler=s}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(t,s,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let r=t.getNormalizedElementCoordinates(e);this.rect=t.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",r.x,r.y,r.width,r.height,"",null,Xe.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(t,s,e){let i=T.GetDesignItem(e);if(i&&!i.isRootItem){let r=this.rectMap.get(e);t.overlayLayer.removeOverlay(r),this.rectMap.delete(e)}}dragOver(t,s,e){return"copy"}async drop(t,s,e,i){for(let l of this.rectMap.values())t.overlayLayer.removeOverlay(l);this.rectMap.clear();let r=T.GetDesignItem(i),o=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(o);if(r&&!r.isRootItem)if(i instanceof HTMLInputElement){let l={signal:e.fullName,target:k.property},c=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",l);r.setAttribute(c[0],c[1])}else{let l={signal:e.fullName,target:k.content},c=this._bindingsHelper.serializeBinding(i,null,l);r.setAttribute(c[0],c[1])}else{let l=t.getNormalizedEventCoordinates(s),c,p,d=await this._visualizationHandler.getState(e.fullName);if(a.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 m=document.createElement("img");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}else if(d.val.endsWith("mp4")){let m=document.createElement("video");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}else{let m=document.createElement("iframe");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h={signal:e.fullName,target:k.property},u=this._bindingsHelper.serializeBinding(m,"src",h);c.setAttribute(u[0],u[1]),c.element.src=d.val}if(!c){let m=document.createElement("input");c=T.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=c.openGroup("Insert");let h=a.writeable!==!1,u={signal:e.fullName,target:k.property,twoWay:h},g=this._bindingsHelper.serializeBinding(m,"value",u);a.type==="boolean"?(g=this._bindingsHelper.serializeBinding(m,"checked",u),c.setAttribute("type","checkbox")):a.role=="date"?(u.twoWay=h,g=this._bindingsHelper.serializeBinding(m,"value-as-number",u),c.setAttribute("type","date"),c.setAttribute("readonly","")):a.role=="datetime"&&(u.twoWay=h,g=this._bindingsHelper.serializeBinding(m,"value-as-number",u),c.setAttribute("type","datetime-local"),c.setAttribute("readonly","")),c.setAttribute(g[0],g[1])}c.setStyle("position","absolute"),c.setStyle("left",l.x+"px"),c.setStyle("top",l.y+"px"),t.instanceServiceContainer.undoService.execute(new Ge(t.rootDesignItem,t.rootDesignItem.childCount,c)),p.commit(),requestAnimationFrame(()=>t.instanceServiceContainer.selectionService.setSelectedElements([c]))}}dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){if(s.type=="signal"){s.service.setValue(i,s,e.fullName);return}let r={signal:e.fullName,target:k.property};s.propertyType==H.attribute&&(r.target=k.attribute),s.propertyType==H.cssValue&&(r.target=k.css),r.signal=e.fullName,r.twoWay=s.propertyType==H.property||s.propertyType==H.propertyAndAttribute;let o=i[0].openGroup("drop binding");for(let a of i){let l=this._bindingsHelper.serializeBinding(a.element,s.name,r);a.setAttribute(l[0],l[1])}o.commit()}};import{BindingMode as X,BindingTarget as re,PropertiesHelper as $e}from"@node-projects/web-component-designer";var oe=class n{constructor(t){this._bindingsHelper=t}_bindingsHelper;static type="visualization-binding";getBindings(t){return Array.from(this._bindingsHelper.getBindings(t.element)).map(e=>({targetName:e[1].target===re.css||e[1].target===re.attribute?$e.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?X.twoWay:X.oneWay,invert:e[1].inverted,bindableObjectNames:e[1].signal.split(";"),expression:e[1].expression,expressionTwoWay:e[1].expressionTwoWay,converter:e[1].converter,type:n.type,service:this,changedEvents:e[1].events,historic:e[1].historic,writeBackSignal:e[1].writeBackSignal}))}setBinding(t,s){let e={signal:s.bindableObjectNames.join(";"),target:s.target};e.inverted=s.invert,e.twoWay=s.mode==X.twoWay,e.expression=s.expression,e.expressionTwoWay=s.expressionTwoWay,e.historic=s.historic,e.type=s.type,e.converter=s.converters,e.target=s.target,e.events=s.changedEvents;let i=this._bindingsHelper.serializeBinding(t.element,s.targetName,e),r=t.openGroup("edit_binding");return t.setAttribute(i[0],i[1]),r.commit(),!0}clearBinding(t,s,e){let i=this._bindingsHelper.getBindingAttributeName(t.element,s,e);return t.removeAttribute(i),!0}};var le=class{getRefactorings(t){let s=[];for(let e of t){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let r of i)for(let o of r.bindableObjectNames){let a="signal",l="";if(o.includes(":")){let c=o.split(":")[0],p=o.substring(c.length+1);p.startsWith("?")&&(p=p.substring(1),l="?",a="property",p.startsWith("?")&&(p=p.substring(1),l="??")),s.push({service:this,name:p,itemType:a,designItem:e,type:"binding",sourceObject:r,display:r.target+"/"+r.targetName+" - "+c+":",shortName:c,prefix:l})}else o.startsWith("?")&&(o=o.substring(1),l="?",a="property",o.startsWith("?")&&(o=o.substring(1),l="??")),s.push({service:this,name:o,itemType:a,designItem:e,type:"binding",sourceObject:r,display:r.target+"/"+r.targetName,prefix:l})}}return s}refactor(t,s,e){let i=t.sourceObject;t.shortName?i.bindableObjectNames=i.bindableObjectNames.map(r=>r==t.shortName+":"+t.prefix+s?t.shortName+":"+t.prefix+e:r):i.bindableObjectNames=i.bindableObjectNames.map(r=>r==t.prefix+s?t.prefix+e:r),t.designItem.serviceContainer.bindingService.setBinding(t.designItem,i)}};var ce=class{dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){s.service.setValue(i,s,e.text)}};import{BindingTarget as b}from"@node-projects/web-component-designer";var pe=class{getRefactorings(t){let s=[];for(let e of t)for(let i of e.attributes())if(i[0][0]=="@"){let r=i[1];if(r[0]=="{"){let o=JSON.parse(r);if("commands"in o)for(let a of o.commands){for(let l in a){let c=a[l];if(c!=null&&typeof c=="object"){let p=c;if(p.source==="signal")s.push({name:p.name,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[signal]",refactor:d=>p.name=d});else if(p.source==="property")s.push({name:p.name,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[property]",refactor:d=>p.name=d});else if(p.source==="complexString")for(let d of p.name.matchAll(/\{(.*?)\}/g)){let m=d[0],h=d[1];if(h[0]==="?"){let u="?";h=h.substring(1),h[0]==="?"&&(u="??",h=h.substring(1)),s.push({name:h,itemType:"property",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[complexString]->property",refactor:g=>p.name=p.name.replace(m,"{"+u+g+"}")})}else s.push({name:h,itemType:"signal",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:a.type+"/"+i[0].substring(1)+"/"+l+"[complexString]->signal",refactor:u=>p.name=p.name.replace(m,"{"+u+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.screen=l});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.screen=l});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&s.push({name:a.targetSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.targetSignal=l});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.signal=l});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&s.push({name:a.resultSignal,itemType:"signal",target:b.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:o,refactor:l=>a.resultSignal=l});break}}else"blocks"in o;if("parameters"in o)for(let a in o.parameters)typeof o.parameters[a]=="string"&&s.push({name:o.parameters[a],itemType:"parameter",target:b.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:o,display:i[0].substring(1)+"/parameters/"+a,refactor:l=>o.parameters[a]=l})}}return s}refactor(t,s,e){t.refactor(e);let i=JSON.stringify(t.sourceObject);t.designItem.setAttribute(t.targetName,i)}};import{BasePropertyEditor as qe}from"@node-projects/web-component-designer";var ue=class extends qe{_ip;_container;constructor(t,s){super(t),this._container=document.createElement("div"),this._container.style.display="flex",this._ip=document.createElement("input"),this._ip.onchange=i=>this._valueChanged(this._ip.value),this._ip.onfocus=i=>{this._ip.selectionStart=0,this._ip.selectionEnd=this._ip.value?.length},this._container.appendChild(this._ip);let e=document.createElement("button");e.textContent="...",e.onclick=async()=>{let i=s.createBindableObjectBrowser();i.initialize(this.designItems[0].serviceContainer,this.designItems[0].instanceServiceContainer,"property"),i.title="select signal...";let r=new AbortController;i.objectDoubleclicked.on(()=>{r.abort(),this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value)}),await s.openConfirmation(i,{x:100,y:100,width:400,height:300,abortSignal:r.signal})&&(this._ip.value=i.selectedObject.fullName,this._valueChanged(this._ip.value))},this._container.appendChild(e),this.element=this._container}refreshValue(t,s){s==null?this._ip.value="":this._ip.value=s}};import{EventsService as Ye}from"@node-projects/web-component-designer";var de=class n extends Ye{static _cyclicEvent=[{name:`${M}:100`,propertyName:void 0,eventObjectName:"Event",description:"this event will retrigger itself every 100 ms"}];getPossibleEvents(t){let s=super.getPossibleEvents(t);return s.push(...n._cyclicEvent),s}getEvent(t,s){return s.includes(M)?n._cyclicEvent.find(i=>i.name==s)??{name:s,propertyName:"on"+s,eventObjectName:"Event"}:super.getEvent(t,s)}};export{ne as BindableObjectDragDropService,D as BindingsEditor,E as BindingsEditorHistoric,te as BindingsHelper,C as BlocklyScriptEditor,P as EventAssignment,I as ParameterEditor,ce as PropertyGridDragDropService,se as Script,pe as ScriptRefactorService,ae as ScriptSystem,ue as SignalPropertyEditor,O as SimpleScriptEditor,le as VisualizationBindingsRefactorService,oe as VisualizationBindingsService,de as VisualizationEventsService,j as VisualizationPropertyGrid,B as bindingPrefixAttribute,R as bindingPrefixClass,w as bindingPrefixContent,V as bindingPrefixCss,A as bindingPrefixCssVar,He as bindingPrefixInsideCss,Fe as bindingPrefixInsideCssVarName,S as bindingPrefixProperty,F as bindingPrefixVisible,Xt as bindingsInCssRegex,M as cyclicAttributeName,G as generateEventCodeFromBlockly,L as getNestedProperty,z as isLit,U as parseBindingString};
 //!varname => inverted

package/dist/scripting/ScriptSystem.d.ts

@@ -1,6 +1,7 @@
 import { VisualisationElementScript } from "../interfaces/VisualisationElementScript.js";
 import { VisualizationHandler } from "../interfaces/VisualizationHandler.js";
 import { ScriptCommands, signalTarget } from "./ScriptCommands.js";
+export declare const cyclicAttributeName = "cyclic";
 export type contextType = {
     event: Event;
     element: Element;

package/dist/scripting/ScriptSystem.js

@@ -3,7 +3,7 @@ import { generateEventCodeFromBlockly } from "../blockly/BlocklyJavascriptHelper
 import { parseBindingString } from "../helpers/BindingsHelper.js";
 import Long from 'long';
 import { ScriptUpgrades } from "./ScriptUpgrader.js";
-import { cyclicAttributeName } from "../services/VisualizationEventsService.js";
+export const cyclicAttributeName = 'cyclic';
 const eventOpposites = {
     'pointerdown': 'pointerup',
     'pointerenter': 'pointerleave',

package/dist/scripting/ScriptUpgrader.d.ts

@@ -1,5 +1,5 @@
 import { ScriptCommands, SetElementProperty } from "./ScriptCommands";
 export declare class ScriptUpgrades {
-    static upgradeScriptCommand(scriptCommand: ScriptCommands): SetElementProperty | import("./ScriptCommands").OpenScreen | import("./ScriptCommands").OpenUrl | import("./ScriptCommands").OpenDialog | import("./ScriptCommands").CloseDialog | import("./ScriptCommands").ToggleSignalValue | import("./ScriptCommands").ToggleSignalValueThroughList | import("./ScriptCommands").SetSignalValue | import("./ScriptCommands").IncrementSignalValue | import("./ScriptCommands").DecrementSignalValue | import("./ScriptCommands").SetBitInSignal | import("./ScriptCommands").ClearBitInSignal | import("./ScriptCommands").ToggleBitInSignal | import("./ScriptCommands").Console | import("./ScriptCommands").CalculateSignalValue | import("./ScriptCommands").Javascript | import("./ScriptCommands").Delay | import("./ScriptCommands").SwitchLanguage | import("./ScriptCommands").Login | import("./ScriptCommands").Logout | import("./ScriptCommands").SubscribeSignal | import("./ScriptCommands").UnsubscribeSignal | import("./ScriptCommands").WriteSignalsInGroup | import("./ScriptCommands").ClearSignalsInGroup | import("./ScriptCommands").RunScript | import("./ScriptCommands").CopySignalValuesFromFolder | import("./ScriptCommands").ShowMessageBox | import("./ScriptCommands").ShowPrompt | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Repeat | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
+    static upgradeScriptCommand(scriptCommand: ScriptCommands): import("./ScriptCommands").OpenScreen | import("./ScriptCommands").OpenUrl | import("./ScriptCommands").OpenDialog | import("./ScriptCommands").CloseDialog | import("./ScriptCommands").ToggleSignalValue | import("./ScriptCommands").ToggleSignalValueThroughList | import("./ScriptCommands").SetSignalValue | import("./ScriptCommands").IncrementSignalValue | import("./ScriptCommands").DecrementSignalValue | import("./ScriptCommands").SetBitInSignal | import("./ScriptCommands").ClearBitInSignal | import("./ScriptCommands").ToggleBitInSignal | import("./ScriptCommands").Console | import("./ScriptCommands").CalculateSignalValue | import("./ScriptCommands").Javascript | SetElementProperty | import("./ScriptCommands").Delay | import("./ScriptCommands").SwitchLanguage | import("./ScriptCommands").Login | import("./ScriptCommands").Logout | import("./ScriptCommands").SubscribeSignal | import("./ScriptCommands").UnsubscribeSignal | import("./ScriptCommands").WriteSignalsInGroup | import("./ScriptCommands").ClearSignalsInGroup | import("./ScriptCommands").RunScript | import("./ScriptCommands").CopySignalValuesFromFolder | import("./ScriptCommands").ShowMessageBox | import("./ScriptCommands").ShowPrompt | import("./ScriptCommands").ExportSignalValuesAsJson | import("./ScriptCommands").ImportSignalValuesFromJson | import("./ScriptCommands").Repeat | import("./ScriptCommands").Comment | import("./ScriptCommands").Condition | import("./ScriptCommands").Exit | import("./ScriptCommands").Label | import("./ScriptCommands").Goto;
     static upgradeSetElementProperty(scriptCommand: SetElementProperty): SetElementProperty;
 }

package/dist/services/VisualizationEventsService.d.ts

@@ -1,5 +1,4 @@
 import { EventsService, IDesignItem, IEvent } from "@node-projects/web-component-designer";
-export declare const cyclicAttributeName = "cyclic";
 export declare class VisualizationEventsService extends EventsService {
     static _cyclicEvent: IEvent[];
     getPossibleEvents(designItem: IDesignItem): IEvent[];

package/dist/services/VisualizationEventsService.js

@@ -1,5 +1,5 @@
 import { EventsService, } from "@node-projects/web-component-designer";
-export const cyclicAttributeName = 'cyclic';
+import { cyclicAttributeName } from "../scripting/ScriptSystem.js";
 export class VisualizationEventsService extends EventsService {
     static _cyclicEvent = [
         {

package/package.json

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