@node-projects/web-component-designer-visualization-addons 0.1.152 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index-min.js CHANGED
@@ -1,12 +1,12 @@
1
- Blockly.Blocks.console={init:function(){this.appendDummyInput().appendField("console").appendField(new Blockly.FieldDropdown([["debug","DEBUG"],["error","ERROR"],["info","INFO"],["log","LOG"],["warn","WARN"]]),"LEVEL"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.console=function(l,t){var s=l.getFieldValue("LEVEL");let e=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`console['${s.toLowerCase()}'](${e});
2
- `};Blockly.Blocks.debugger={init:function(){this.appendDummyInput().appendField("debugger"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.debugger=function(l){return`debugger;
3
- `};Blockly.Blocks.delay={init:function(){this.appendValueInput("DELAY").setCheck("Number").appendField("delay"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.delay=function(l){return"await delay("+Blockly.JavaScript.valueToCode(l,"DELAY",Blockly.JavaScript.ORDER_ATOMIC)+`);
4
- `};Blockly.Blocks.get_parameter={init:function(){this.appendValueInput("NAME").setCheck("String").appendField("get_parameter"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_parameter=function(l,t){return[`context.parameters[${Blockly.JavaScript.valueToCode(l,"NAME",Blockly.JavaScript.ORDER_ATOMIC)}]`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("get_state"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_state=function(l,t){let s=Blockly.JavaScript.valueToCode(l,"OID",Blockly.JavaScript.ORDER_ATOMIC);return[`(await visualizationHandler.getState((${s}[0] === '.' ? relativeSignalsPath : '') + ${s})).val`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_sub_property={init:function(){this.appendDummyInput().appendField("getSubProperty"),this.appendValueInput("OBJECT").setCheck("Object").appendField("object"),this.appendValueInput("PROPERTYPATH").setCheck("String").appendField("propertypath"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_sub_property=function(l,t){let s=Blockly.JavaScript.valueToCode(l,"OBJECT",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"PROPERTYPATH",Blockly.JavaScript.ORDER_ATOMIC);return[`extractPart(${s}, ${e})`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.open_screen={init:function(){this.appendDummyInput().appendField("open screen"),this.appendValueInput("SCREEN").setCheck("String").appendField("screen"),this.appendValueInput("RELATIVESIGNALSPATH").setCheck("String").appendField("relativeSignalsPath"),this.appendValueInput("NOHISTORY").setCheck("Boolean").appendField("noHistory"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.open_screen=function(l){let t=Blockly.JavaScript.valueToCode(l,"SCREEN",Blockly.JavaScript.ORDER_ATOMIC),s=Blockly.JavaScript.valueToCode(l,"RELATIVESIGNALSPATH",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"NOHISTORY",Blockly.JavaScript.ORDER_ATOMIC);return`RUNTIME.openScreen({screen: ${t}, relativeSignalsPath: ${s}, noHistory: ${e}})`};Blockly.Blocks.query_selector={init:function(){this.appendDummyInput().appendField("querySelector").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Element"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector=function(l,t){var s=l.getFieldValue("SOURCE");let e=Blockly.JavaScript.valueToCode(l,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),i;return s==="CURRENTSCREEN"?i=`shadowRoot.querySelector(${e})`:s==="PARENTSCREEN"&&(i=`shadowRoot.host.getRootNode().querySelector(${e})`),[i,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.query_selector_all={init:function(){this.appendDummyInput().appendField("querySelectorAll").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Array"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector_all=function(l,t){var s=l.getFieldValue("SOURCE");let e=Blockly.JavaScript.valueToCode(l,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),i;return s==="CURRENTSCREEN"?i=`shadowRoot.querySelectorall(${e})`:s==="PARENTSCREEN"&&(i=`shadowRoot.querySelectorall(${e})`),[i,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.set_element={init:function(){this.appendDummyInput().appendField("setElement").appendField(new Blockly.FieldDropdown([["property","PROPERTY"],["attribute","ATTRIBUTE"],["style","STYLE"]]),"TARGET"),this.appendValueInput("ELEMENT").setCheck("Element").appendField("element"),this.appendValueInput("NAME").setCheck("String").appendField("name"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_element=function(l){var t=l.getFieldValue("TARGET");let s=Blockly.JavaScript.valueToCode(l,"ELEMENT",Blockly.JavaScript.ORDER_ATOMIC),e=Blockly.JavaScript.valueToCode(l,"NAME",Blockly.JavaScript.ORDER_ATOMIC),i=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC),n="";return t==="PROPERTY"?n+=s+"["+e+"] = "+i+`;
5
- `:t==="ATTRIBUTE"?n+=s+".setAttribute("+e+", "+i+`);
6
- `:t==="STYLE"&&(n+=s+".style["+e+"] = "+i+`;
7
- `),n};Blockly.Blocks.set_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("set_state"),this.appendValueInput("VALUE").setCheck(null).appendField("with"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_state=function(l){let t=Blockly.JavaScript.valueToCode(l,"OID",Blockly.JavaScript.ORDER_ATOMIC),s=Blockly.JavaScript.valueToCode(l,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`await visualizationHandler.setState((${t}[0] === '.' ? relativeSignalsPath : '') + ${t}, ${s});
8
- `};Blockly.defineBlocksWithJsonArray([{type:"start_event",message0:"Event %1",nextStatement:null,style:"hat_blocks",args0:[{type:"field_variable",name:"EVENTVAR",variable:"event"}]}]);Blockly.JavaScript.forBlock.start_event=function(l){return Blockly.JavaScript.getVariableName(l.getField("EVENTVAR").variable.name)+` = eventData;
9
- `};var He=`function extractPart(obj, propertyPath) {
1
+ Blockly.Blocks.console={init:function(){this.appendDummyInput().appendField("console").appendField(new Blockly.FieldDropdown([["debug","DEBUG"],["error","ERROR"],["info","INFO"],["log","LOG"],["warn","WARN"]]),"LEVEL"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.console=function(r,e){var t=r.getFieldValue("LEVEL");let i=Blockly.JavaScript.valueToCode(r,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`console['${t.toLowerCase()}'](${i});
2
+ `};Blockly.Blocks.debugger={init:function(){this.appendDummyInput().appendField("debugger"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.debugger=function(r){return`debugger;
3
+ `};Blockly.Blocks.delay={init:function(){this.appendValueInput("DELAY").setCheck("Number").appendField("delay"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.delay=function(r){return"await delay("+Blockly.JavaScript.valueToCode(r,"DELAY",Blockly.JavaScript.ORDER_ATOMIC)+`);
4
+ `};Blockly.Blocks.get_parameter={init:function(){this.appendValueInput("NAME").setCheck("String").appendField("get_parameter"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_parameter=function(r,e){return[`context.parameters[${Blockly.JavaScript.valueToCode(r,"NAME",Blockly.JavaScript.ORDER_ATOMIC)}]`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("get_state"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_state=function(r,e){let t=Blockly.JavaScript.valueToCode(r,"OID",Blockly.JavaScript.ORDER_ATOMIC);return[`(await visualizationHandler.getState((${t}[0] === '.' ? relativeSignalsPath : '') + ${t})).val`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.get_sub_property={init:function(){this.appendDummyInput().appendField("getSubProperty"),this.appendValueInput("OBJECT").setCheck("Object").appendField("object"),this.appendValueInput("PROPERTYPATH").setCheck("String").appendField("propertypath"),this.setInputsInline(!0),this.setOutput(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.get_sub_property=function(r,e){let t=Blockly.JavaScript.valueToCode(r,"OBJECT",Blockly.JavaScript.ORDER_ATOMIC),i=Blockly.JavaScript.valueToCode(r,"PROPERTYPATH",Blockly.JavaScript.ORDER_ATOMIC);return[`extractPart(${t}, ${i})`,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.open_screen={init:function(){this.appendDummyInput().appendField("open screen"),this.appendValueInput("SCREEN").setCheck("String").appendField("screen"),this.appendValueInput("RELATIVESIGNALSPATH").setCheck("String").appendField("relativeSignalsPath"),this.appendValueInput("NOHISTORY").setCheck("Boolean").appendField("noHistory"),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.open_screen=function(r){let e=Blockly.JavaScript.valueToCode(r,"SCREEN",Blockly.JavaScript.ORDER_ATOMIC),t=Blockly.JavaScript.valueToCode(r,"RELATIVESIGNALSPATH",Blockly.JavaScript.ORDER_ATOMIC),i=Blockly.JavaScript.valueToCode(r,"NOHISTORY",Blockly.JavaScript.ORDER_ATOMIC);return`RUNTIME.openScreen({screen: ${e}, relativeSignalsPath: ${t}, noHistory: ${i}})`};Blockly.Blocks.query_selector={init:function(){this.appendDummyInput().appendField("querySelector").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Element"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector=function(r,e){var t=r.getFieldValue("SOURCE");let i=Blockly.JavaScript.valueToCode(r,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),s;return t==="CURRENTSCREEN"?s=`shadowRoot.querySelector(${i})`:t==="PARENTSCREEN"&&(s=`shadowRoot.host.getRootNode().querySelector(${i})`),[s,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.query_selector_all={init:function(){this.appendDummyInput().appendField("querySelectorAll").appendField(new Blockly.FieldDropdown([["currentScreen","CURRENTSCREEN"],["parentScreen","PARENTSCREEN"]]),"SOURCE"),this.appendValueInput("SELECTOR").setCheck("String").appendField("selector"),this.setInputsInline(!0),this.setOutput(!0,"Array"),this.setColour(230)}};Blockly.JavaScript.forBlock.query_selector_all=function(r,e){var t=r.getFieldValue("SOURCE");let i=Blockly.JavaScript.valueToCode(r,"SELECTOR",Blockly.JavaScript.ORDER_ATOMIC),s;return t==="CURRENTSCREEN"?s=`shadowRoot.querySelectorall(${i})`:t==="PARENTSCREEN"&&(s=`shadowRoot.querySelectorall(${i})`),[s,Blockly.JavaScript.ORDER_NONE]};Blockly.Blocks.set_element={init:function(){this.appendDummyInput().appendField("setElement").appendField(new Blockly.FieldDropdown([["property","PROPERTY"],["attribute","ATTRIBUTE"],["style","STYLE"]]),"TARGET"),this.appendValueInput("ELEMENT").setCheck("Element").appendField("element"),this.appendValueInput("NAME").setCheck("String").appendField("name"),this.appendValueInput("VALUE").setCheck(null).appendField("value"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_element=function(r){var e=r.getFieldValue("TARGET");let t=Blockly.JavaScript.valueToCode(r,"ELEMENT",Blockly.JavaScript.ORDER_ATOMIC),i=Blockly.JavaScript.valueToCode(r,"NAME",Blockly.JavaScript.ORDER_ATOMIC),s=Blockly.JavaScript.valueToCode(r,"VALUE",Blockly.JavaScript.ORDER_ATOMIC),l="";return e==="PROPERTY"?l+=t+"["+i+"] = "+s+`;
5
+ `:e==="ATTRIBUTE"?l+=t+".setAttribute("+i+", "+s+`);
6
+ `:e==="STYLE"&&(l+=t+".style["+i+"] = "+s+`;
7
+ `),l};Blockly.Blocks.set_state={init:function(){this.appendValueInput("OID").setCheck("String").appendField("set_state"),this.appendValueInput("VALUE").setCheck(null).appendField("with"),this.setInputsInline(!0),this.setPreviousStatement(!0,null),this.setNextStatement(!0,null),this.setColour(230)}};Blockly.JavaScript.forBlock.set_state=function(r){let e=Blockly.JavaScript.valueToCode(r,"OID",Blockly.JavaScript.ORDER_ATOMIC),t=Blockly.JavaScript.valueToCode(r,"VALUE",Blockly.JavaScript.ORDER_ATOMIC);return`await visualizationHandler.setState((${e}[0] === '.' ? relativeSignalsPath : '') + ${e}, ${t});
8
+ `};Blockly.defineBlocksWithJsonArray([{type:"start_event",message0:"Event %1",nextStatement:null,style:"hat_blocks",args0:[{type:"field_variable",name:"EVENTVAR",variable:"event"}]}]);Blockly.JavaScript.forBlock.start_event=function(r){return Blockly.JavaScript.getVariableName(r.getField("EVENTVAR").variable.name)+` = eventData;
9
+ `};var ot=`function extractPart(obj, propertyPath) {
10
10
  let retVal = obj;
11
11
  for (let p of propertyPath.split('.')) {
12
12
  retVal = retVal?.[p];
@@ -21,16 +21,16 @@ function delay(ms) {
21
21
  }
22
22
 
23
23
  export async function run(eventData, shadowRoot, parameters, relativeSignalsPath, visualizationHandler, context) {
24
- `,Je="}";async function ve(l){let t=new Blockly.Workspace;Blockly.serialization.workspaces.load(l,t),Blockly.JavaScript.addReservedWords("eventData"),Blockly.JavaScript.addReservedWords("shadowRoot"),Blockly.JavaScript.addReservedWords("extractPart"),Blockly.JavaScript.addReservedWords("parameters"),Blockly.JavaScript.addReservedWords("relativeSignalsPath"),Blockly.JavaScript.addReservedWords("delay"),Blockly.JavaScript.addReservedWords("visualizationHandler"),Blockly.JavaScript.addReservedWords("context");let s=Blockly.JavaScript.workspaceToCode(t);return(await import(URL.createObjectURL(new Blob([He+s+Je],{type:"application/javascript"})))).run}import{BaseCustomWebComponentConstructorAppend as Ue,html as $e,css as Ge}from"@node-projects/base-custom-webcomponent";var A=class extends Ue{static template=$e`
24
+ `,rt="}";async function Ee(r){let e=new Blockly.Workspace;Blockly.serialization.workspaces.load(r,e),Blockly.JavaScript.addReservedWords("eventData"),Blockly.JavaScript.addReservedWords("shadowRoot"),Blockly.JavaScript.addReservedWords("extractPart"),Blockly.JavaScript.addReservedWords("parameters"),Blockly.JavaScript.addReservedWords("relativeSignalsPath"),Blockly.JavaScript.addReservedWords("delay"),Blockly.JavaScript.addReservedWords("visualizationHandler"),Blockly.JavaScript.addReservedWords("context");let t=Blockly.JavaScript.workspaceToCode(e);return(await import(URL.createObjectURL(new Blob([ot+t+rt],{type:"application/javascript"})))).run}import{BaseCustomWebComponentConstructorAppend as lt,html as ct,css as pt}from"@node-projects/base-custom-webcomponent";var Y=class extends lt{static template=ct`
25
25
  <div id="blocklyDiv" style="position: absolute; width: 100%; height: 100%;"></div>
26
- `;static style=Ge`
26
+ `;static style=pt`
27
27
  :host {
28
28
  box-sizing: border-box;
29
29
  position: absolute;
30
30
  height: 100%;
31
31
  width: 100%;
32
32
  display: block;
33
- }`;static is="node-projects-blockly-script-editor";blocklyDiv;workspace;resizeObserver;_toolbox;constructor(t){super(),super._restoreCachedInititalValues(),this._toolbox=t,this.blocklyDiv=this._getDomElement("blocklyDiv"),this._assignEvents(),this.createBlockly()}createBlockly(){let t="zelos",e=Blockly.Theme.defineTheme("webui",{base:Blockly.Themes.Zelos,blockStyles:{hat_blocks:{colourPrimary:"#4a148c"}},categoryStyles:{start_category:{colour:"#4a148c"},system_category:{colour:"#01579b"}}});this.workspace=Blockly.inject(this.blocklyDiv,{theme:e,toolbox:this._toolbox,renderer:t,trashcan:!0,zoom:{controls:!0,wheel:!1,startScale:.7,maxScale:3,minScale:.3,scaleSpeed:1.2,pinch:!1},move:{scrollbars:{horizontal:!0,vertical:!0},drag:!0,wheel:!0},maxInstances:{start_event:1}}),new ZoomToFitControl(this.workspace).init()}ready(){Blockly.svgResize(this.workspace),this.resizeObserver=new ResizeObserver(t=>{Blockly.svgResize(this.workspace)}),this.resizeObserver.observe(this)}save(){return Blockly.serialization.workspaces.save(this.workspace)}load(t){Blockly.serialization.workspaces.load(t,this.workspace)}};customElements.define(A.is,A);import{BaseCustomWebComponentConstructorAppend as Ze,html as Ke,css as Qe}from"@node-projects/base-custom-webcomponent";import{BindingMode as et,BindingTarget as be,assetsPath as K}from"@node-projects/web-component-designer";import{BaseCustomWebComponentConstructorAppend as qe,html as Xe,css as Ye}from"@node-projects/base-custom-webcomponent";var z=class extends qe{static template=Xe`
33
+ }`;static is="node-projects-blockly-script-editor";blocklyDiv;workspace;resizeObserver;_toolbox;constructor(e){super(),super._restoreCachedInititalValues(),this._toolbox=e,this.blocklyDiv=this._getDomElement("blocklyDiv"),this._assignEvents(),this.createBlockly()}createBlockly(){let e="zelos",i=Blockly.Theme.defineTheme("webui",{base:Blockly.Themes.Zelos,blockStyles:{hat_blocks:{colourPrimary:"#4a148c"}},categoryStyles:{start_category:{colour:"#4a148c"},system_category:{colour:"#01579b"}}});this.workspace=Blockly.inject(this.blocklyDiv,{theme:i,toolbox:this._toolbox,renderer:e,trashcan:!0,zoom:{controls:!0,wheel:!1,startScale:.7,maxScale:3,minScale:.3,scaleSpeed:1.2,pinch:!1},move:{scrollbars:{horizontal:!0,vertical:!0},drag:!0,wheel:!0},maxInstances:{start_event:1}}),new ZoomToFitControl(this.workspace).init()}ready(){Blockly.svgResize(this.workspace),this.resizeObserver=new ResizeObserver(e=>{Blockly.svgResize(this.workspace)}),this.resizeObserver.observe(this)}save(){return Blockly.serialization.workspaces.save(this.workspace)}load(e){Blockly.serialization.workspaces.load(e,this.workspace)}};customElements.define(Y.is,Y);import{BaseCustomWebComponentConstructorAppend as ht,html as gt,css as ft}from"@node-projects/base-custom-webcomponent";import{BindingMode as yt,BindingTarget as Ne,assetsPath as me}from"@node-projects/web-component-designer";import{BaseCustomWebComponentConstructorAppend as dt,html as ut,css as mt}from"@node-projects/base-custom-webcomponent";var K=class extends dt{static template=ut`
34
34
  <span style="position:absolute;left:30px;top:26px;">from</span>
35
35
  <span style="position:absolute;left:30px;top:77px;">count</span>
36
36
  <span style="position:absolute;left:30px;top:123px;">limit</span>
@@ -97,10 +97,10 @@ export async function run(eventData, shadowRoot, parameters, relativeSignalsPath
97
97
  <input css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" value="{{this.historic.quantile}}" type="number" id="quantile" style="position:absolute;left:107px;top:325px;width:153px;">
98
98
  <span css:visibility="[[this.historic.aggregate == 'quantile' ? 'visible' : 'collapse']]" id="lblQuantile" style="position:absolute;left:30px;top:325px;">quantile</span>
99
99
  <span style="position:absolute;left:34px;top:417px;">instance</span>
100
- <input type="text" value="{{?this.historic.instance}}" style="position:absolute;left:104px;top:419px;width:155px;">`;static style=Ye`
100
+ <input type="text" value="{{?this.historic.instance}}" style="position:absolute;left:104px;top:419px;width:155px;">`;static style=mt`
101
101
  :host {
102
102
  box-sizing: border-box;
103
- }`;static is="node-projects-visualization-bindings-editor-historic";historic;static properties={historic:Object};constructor(t){super(),this._restoreCachedInititalValues(),this.historic=t??{reloadInterval:2e3}}ready(){this._bindingsParse()}#e=!1;refresh(){this.#e||(this.#e=!0,this._bindingsRefresh(null,!0),this.#e=!1)}};customElements.define(z.is,z);var de=`<!DOCTYPE html>
103
+ }`;static is="node-projects-visualization-bindings-editor-historic";historic;static properties={historic:Object};constructor(e){super(),this._restoreCachedInititalValues(),this.historic=e??{reloadInterval:2e3}}ready(){this._bindingsParse()}#e=!1;refresh(){this.#e||(this.#e=!0,this._bindingsRefresh(null,!0),this.#e=!1)}};customElements.define(K.is,K);var we=`<!DOCTYPE html>
104
104
  <html>
105
105
  <head>
106
106
  <meta charset="UTF-8">
@@ -270,8 +270,12 @@ code {
270
270
  <tr><td>__name</td><td>Internal screen variable \u2014 local to the current screen, not connected to any external data source. Initial value is <code>null</code>. Useful for screen-local state like tab selection or panel visibility.</td></tr>
271
271
  <tr><td>?name</td><td>A signal in a screen property</td></tr>
272
272
  <tr><td>??name</td><td>The current value of a screen property</td></tr>
273
+ <tr><td>?$name</td><td>The signal object stored in a screen property</td></tr>
274
+ <tr><td>?@name</td><td>The current value of a screen attribute</td></tr>
273
275
  <tr><td>#name</td><td>A signal in a property of the bound target element</td></tr>
274
276
  <tr><td>##name</td><td>The current value of a property of the bound target element</td></tr>
277
+ <tr><td>#$name</td><td>The signal object stored in a property of the bound target element</td></tr>
278
+ <tr><td>#@name</td><td>The current value of an attribute of the bound target element</td></tr>
275
279
  <tr><td>$objectId</td><td>The entire signal object</td></tr>
276
280
  <tr><td>\xA7name</td><td>A special framework-provided value (if supported)</td></tr>
277
281
  <tr><td>{name}</td><td>Dynamic signal path: embed another signal's value inside the path, e.g. <code>.Plant.{.ActiveLine}.Speed</code></td></tr>
@@ -327,13 +331,13 @@ __res <span style="color:#6a737d;font-style:italic">// the res
327
331
 
328
332
  </div>
329
333
  </body>
330
- </html>`;var Q=class l extends Ze{static template=Ke`
334
+ </html>`;var he=class r extends ht{static template=gt`
331
335
  <div id="root">
332
336
  <div class="vertical-grid">
333
337
  <div id="full-width-col">
334
338
  <div id="signals-area">
335
339
  <div class="row">
336
- <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal objects in properties via ?propertyName, access the propertyValue via ??propertyName.&#010;Access signal objects in properties of the target via #propertyName, access a propertyValue of the target via ##propertyName.&#010;Bind to signal configurations via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
340
+ <span class="section-label" title="Add signals by name and path. The variable name is used in the formula (__0, __1,... or a custom name).&#010;Access signal names in properties via ?propertyName and #propertyName, property values via ??propertyName and ##propertyName, and signal objects stored in properties via ?$propertyName and #$propertyName.&#010;Access screen attributes via ?@attributeName and target attributes via #@attributeName.&#010;Resolve a named signal object via $objectId.&#010;Bind to special values via §name (if supported by your framework).&#010;You could also use signals inside of a Signal Name via {name}">objects</span>
337
341
  <button id="helpBtn" class="info-btn" title="Help"><svg viewBox="0 0 512 512" width="16" height="16"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg></button>
338
342
  </div>
339
343
  <div class="bordered-section">
@@ -382,7 +386,7 @@ __res <span style="color:#6a737d;font-style:italic">// the res
382
386
  <input id="namedConverterInput" value="{{?this.convertersString::change}}">
383
387
  <button id="namedConverterBrowse" class="signal-select-btn" @click="[[this._selectNamedConverter()]]">...</button>
384
388
  </div>
385
- <div class="bordered-section">
389
+ <div id="converterSection" class="bordered-section">
386
390
  <div class="signal-row signal-header">
387
391
  <span class="converter-header-col">condition</span>
388
392
  <span class="converter-header-col">value</span>
@@ -391,7 +395,7 @@ __res <span style="color:#6a737d;font-style:italic">// the res
391
395
  <div id="converterListContainer"></div>
392
396
  <button class="add-signal-btn" @click="[[this._addConverter()]]">+ Add entry</button>
393
397
  </div>
394
- </div>`;static style=Qe`
398
+ </div>`;static style=ft`
395
399
  :host {
396
400
  box-sizing: border-box;
397
401
  }
@@ -407,10 +411,15 @@ __res <span style="color:#6a737d;font-style:italic">// the res
407
411
  }
408
412
 
409
413
  #converterListContainer {
410
- max-height: 72px;
411
414
  overflow-y: auto;
412
415
  }
413
416
 
417
+ #converterSection {
418
+ display: grid;
419
+ grid-template-rows: min-content minmax(22px, 1fr) min-content;
420
+ min-height: 0;
421
+ }
422
+
414
423
  .input-headline {
415
424
  height: 30px;
416
425
  }
@@ -428,7 +437,7 @@ __res <span style="color:#6a737d;font-style:italic">// the res
428
437
  #root {
429
438
  padding: 2px 10px;
430
439
  display: grid;
431
- grid-template-rows: min-content min-content;
440
+ grid-template-rows: min-content min-content minmax(0, 1fr);
432
441
  overflow: auto;
433
442
  height: calc(100% - 4px)
434
443
  }
@@ -606,6 +615,7 @@ __res <span style="color:#6a737d;font-style:italic">// the res
606
615
 
607
616
  .add-signal-btn {
608
617
  align-self: flex-start;
618
+ justify-self: start;
609
619
  margin-top: 4px;
610
620
  height: 22px;
611
621
  cursor: pointer;
@@ -629,13 +639,13 @@ __res <span style="color:#6a737d;font-style:italic">// the res
629
639
  .info-btn:hover {
630
640
  background: #eee;
631
641
  border-radius: 3px;
632
- }`;static is="node-projects-visualization-bindings-editor";static properties={twoWayPossible:Boolean,twoWay:Boolean,expression:String,events:String,invert:Boolean,historic:Object};twoWayPossible=!1;twoWay=!1;expression="";writeBackSignal="";expressionTwoWay="";historic;objectNames="";events="";invert=!1;converters=[];static namedConverters=[];static helpSections=[];convertersString;get converter(){if(this.convertersString)return this.convertersString;if(this.converters.length>0)return Object.fromEntries(this.converters.map(t=>[t.key,t.value]))}_property;_binding;_bindingTarget;_serviceContainer;_instanceServiceContainer;_shell;_signals=[];_signalListContainer;_converterListContainer;constructor(t,s,e,i,n,r,a={}){super(),super._restoreCachedInititalValues(),this._property=t,this._binding=s,this._bindingTarget=e,this._serviceContainer=i,this._instanceServiceContainer=n,this._shell=r,a?.namedConverters===!1&&(this._getDomElement("namedConverterRow").style.display="none");let c=this._getDomElement("historicBtn");a?.showHistoric===!1?c.style.display="none":a?.historicLabel&&(c.textContent=a.historicLabel)}ready(){if(this._parseAttributesToProperties(),this._assignEvents(),this._signalListContainer=this._getDomElement("signalListContainer"),this._converterListContainer=this._getDomElement("converterListContainer"),this._getDomElement("helpBtn").onclick=()=>this._showHelp(),l.namedConverters.length===0&&(this._getDomElement("namedConverterBrowse").style.display="none"),this.twoWayPossible=!1,(this._bindingTarget==be.property||this._bindingTarget==be.attribute)&&(this.twoWayPossible=!0),this._binding){if(this.twoWay=this._binding.mode==et.twoWay,this.expression=this._binding.expression,this.writeBackSignal=this._binding.writeBackSignal,this.expressionTwoWay=this._binding.expressionTwoWay,this.historic=this._binding.historic,this.invert=this._binding.invert,this._binding.bindableObjectNames&&(this.objectNames=this._binding.bindableObjectNames.join(";")),this._binding.converter)if(typeof this._binding.converter=="string")this.convertersString=this._binding.converter;else for(let t in this._binding.converter)this.converters.push({key:t,value:this._binding.converter[t]});this._binding.changedEvents&&this._binding.changedEvents.length&&(this.events=this._binding.changedEvents.join(";"))}if(this.expression){let t=this._getDomElement("expression");this.expression.indexOf(`
633
- `)>=0&&(t.style.height="51px")}if(this.expressionTwoWay){let t=this._getDomElement("expression2way");this.expressionTwoWay.indexOf(`
634
- `)>=0&&(t.style.height="51px")}this._signals=this._parseObjectNames(this.objectNames),this._signals.length===0&&this._signals.push({name:"",signal:""}),this._renderSignalList(),this._renderConverterList(),this._bindingsParse()}_parseObjectNames(t){return t?t.split(";").filter(s=>s.length>0).map(s=>{let e=s.indexOf(":");return e>0?{name:s.slice(0,e),signal:s.slice(e+1)}:{name:"",signal:s}}):[]}_signalsToObjectNames(){return this._signals.map(t=>t.name?t.name+":"+t.signal:t.signal).join(";")}_renderSignalList(){let t=this._signalListContainer;t.innerHTML="",this._signals.forEach((s,e)=>{let i=document.createElement("div");i.className="signal-row";let n=document.createElement("input");n.className="signal-name-input",n.placeholder=`__${e}`,n.value=s.name,n.title="variable name used in the formula (defaults to __"+e+" if empty)",n.oninput=()=>{this._signals[e].name=n.value,this._syncSignals()};let r=document.createElement("input");r.className="signal-path-input",r.value=s.signal,r.placeholder="signal path",r.title="signal path (prefix: ? = signalProperty, ?? = property value, # = target property, ## = target property value)",r.oninput=()=>{this._signals[e].signal=r.value,this._syncSignals()};let a=document.createElement("button");a.className="signal-icon-btn",a.title="Duplicate";let c=document.createElement("img");c.src=K+"icons/copy.svg",c.style.cssText="width:12px; height:12px;",a.appendChild(c),a.onclick=()=>{this._signals.splice(e+1,0,{...this._signals[e]}),this._syncSignals(),this._renderSignalList()};let o=document.createElement("button");o.className="signal-select-btn",o.textContent="...",o.title="Browse signal",o.onclick=()=>this._selectForRow(e,r);let p=document.createElement("button");p.className="signal-icon-btn",p.title="Remove";let h=document.createElement("img");h.src=K+"icons/delete.svg",h.style.cssText="width:12px; height:12px;",p.appendChild(h),p.onclick=()=>{this._signals.splice(e,1),this._syncSignals(),this._renderSignalList()},i.appendChild(n),i.appendChild(r),i.appendChild(o),i.appendChild(a),i.appendChild(p),t.appendChild(i)})}_syncSignals(){this.objectNames=this._signalsToObjectNames(),this._bindingsRefresh()}_addSignal(){this._signals.push({name:"",signal:""}),this._renderSignalList()}async _selectForRow(t,s){let e=this._shell.createBindableObjectBrowser();e.initialize(this._serviceContainer,this._instanceServiceContainer,"binding"),e.title="select signal...";let i=new AbortController;if(e.objectDoubleclicked.on(()=>{i.abort();let r="";e.selectedObject.specialType=="signalProperty"?r="?":e.selectedObject.bindabletype==="property"&&(r="??"),this._signals[t].signal=r+e.selectedObject.fullName,s.value=this._signals[t].signal,this._syncSignals()}),await this._shell.openConfirmation(e,{x:100,y:100,width:400,height:300,parent:this,abortSignal:i.signal})){let r="";e.selectedObject.specialType=="signalProperty"?r="?":e.selectedObject.bindabletype==="property"&&(r="??"),this._signals[t].signal=r+e.selectedObject.fullName,s.value=this._signals[t].signal,this._syncSignals()}}_renderConverterList(){let t=this._converterListContainer;t.innerHTML="";let s=this._property?.type==="color"?"color":"text";this.converters.forEach((e,i)=>{let n=document.createElement("div");n.className="signal-row";let r=document.createElement("input");r.style.cssText="flex:1 1 auto; height:22px; box-sizing:border-box;",r.value=e.key,r.placeholder="condition",r.oninput=()=>{this.converters[i].key=r.value};let a=document.createElement("input");a.type=s,a.style.cssText="flex:1 1 auto; height:22px; box-sizing:border-box;",a.value=e.value,a.placeholder="value",a.oninput=()=>{this.converters[i].value=a.value};let c=document.createElement("button");c.className="signal-icon-btn",c.title="Duplicate";let o=document.createElement("img");o.src=K+"icons/copy.svg",o.style.cssText="width:12px; height:12px;",c.appendChild(o),c.onclick=()=>{this.converters.splice(i+1,0,{...this.converters[i]}),this._renderConverterList()};let p=document.createElement("button");p.className="signal-icon-btn",p.title="Remove";let h=document.createElement("img");h.src=K+"icons/delete.svg",h.style.cssText="width:12px; height:12px;",p.appendChild(h),p.onclick=()=>{this.converters.splice(i,1),this._renderConverterList()},n.appendChild(r),n.appendChild(a),n.appendChild(c),n.appendChild(p),t.appendChild(n)})}_addConverter(){this.converters.push({key:"",value:""}),this._renderConverterList()}async _selectNamedConverter(){let t=l.namedConverters;if(t.length===0)return;let s="",e=null,i=document.createElement("div");i.style.cssText="display:flex; flex-direction:column; height:100%; box-sizing:border-box; font-size:12px;";let n=document.createElement("div");n.style.cssText="padding:6px 8px 4px; color:#666; font-size:11px; border-bottom:1px solid #e0e0e0; flex-shrink:0;",n.textContent="Select a converter and confirm with OK.",i.appendChild(n);let r=document.createElement("div");r.style.cssText="flex:1; overflow-y:auto; padding:4px;",i.appendChild(r);let a=p=>{p.style.background="",p.style.borderLeftColor="transparent"},c=(p,h)=>{e&&a(e),e=p,p.style.background="#e8f4fd",p.style.borderLeftColor="#0078d7",s=h};for(let p of t){let h=document.createElement("div");h.style.cssText="padding:5px 6px 5px 9px; cursor:pointer; border-radius:3px; border-left:3px solid transparent; margin-bottom:2px;";let m=document.createElement("div");if(m.style.cssText="font-family:monospace; font-weight:bold; color:#111;",m.textContent=p.name,h.appendChild(m),p.description){let u=document.createElement("div");u.style.cssText="color:#555; font-size:11px; margin-top:2px;",u.textContent=p.description,h.appendChild(u)}if(p.converter&&Object.keys(p.converter).length>0){let u=document.createElement("div");u.style.cssText="display:grid; grid-template-columns:max-content max-content 1fr; gap:1px 6px; margin-top:4px; padding:4px 6px; background:#f5f5f5; border-radius:2px; font-family:monospace; font-size:11px; color:#333;";for(let[d,g]of Object.entries(p.converter)){let f=document.createElement("span");f.style.cssText="color:#555; text-align:right;",f.textContent=d;let b=document.createElement("span");b.style.cssText="color:#aaa;",b.textContent="\u2192";let _=document.createElement("span");_.style.cssText="color:#0078d7; font-weight:bold;",_.textContent=String(g),u.appendChild(f),u.appendChild(b),u.appendChild(_)}h.appendChild(u)}h.onmouseenter=()=>{h!==e&&(h.style.background="#f5f5f5")},h.onmouseleave=()=>{h!==e&&(h.style.background="")},h.onclick=()=>c(h,p.name),r.appendChild(h)}await this._shell.openConfirmation(i,{x:100,y:100,width:320,height:300,parent:this})&&s&&(this.convertersString=s,this._getDomElement("namedConverterInput").value=s,this._bindingsRefresh())}_refresh(){requestAnimationFrame(()=>{this._bindingsRefresh()})}async showHistoric(){let t=new z(this.historic),s=new AbortController;t.title="Edit historic binding to: "+this._property.name,await this._shell.openConfirmation(t,{x:100,y:100,width:420,height:510,parent:this,abortSignal:s.signal,disableResize:!0,cancelText:"Remove"})?this.historic=t.historic:this.historic=null,this._bindingsRefresh()}_showHelp(){let t=document.createElement("iframe");t.srcdoc=l.helpSections.length>0?de.replace(`</div>
635
- </body>`,l.helpSections.join("")+`</div>
636
- </body>`):de,t.style.cssText="width:100%; height:100%; border:none; display:block;",this._shell.openModal(t,{title:"Bindings Editor Help",parent:this,x:-660,y:-80,width:630,height:580})}};customElements.define(Q.is,Q);import{BaseCustomWebComponentConstructorAppend as pt,TypedEvent as dt,css as ut,html as ht}from"@node-projects/base-custom-webcomponent";import{ContextMenu as mt,assetsPath as ue}from"@node-projects/web-component-designer";import{typeInfoFromJsonSchema as Ce}from"@node-projects/propertygrid.webcomponent";import{defaultOptions as gt,defaultStyle as ft}from"@node-projects/web-component-designer-widgets-wunderbaum";import{Wunderbaum as yt}from"wunderbaum";import vt from"wunderbaum/dist/wunderbaum.css"with{type:"css"};import{PropertyGrid as tt}from"@node-projects/propertygrid.webcomponent";import{CodeViewMonaco as xe}from"@node-projects/web-component-designer-codeview-monaco";var q=class extends tt{serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;bindableObjectsTarget="property";constructor(){super()}bindingDoubleClicked;setNameColumnWidth(t){let s=this._tree?.columns?.[0];s&&(s.width=t+"px",this._tree.update("colStructure"))}async getEditorForType(t,s,e,i,n){if(this.getSpecialEditorForType){let r=await this.getSpecialEditorForType(t,s,e,i,n);if(r)return r}switch(t.format){case"screen":{let r=document.createElement("select");r.style.width="100%";let a=document.createElement("option");a.value=s??"",a.innerText=s??"",r.appendChild(a);for(let c of await this.visualizationHandler.getAllNames("screen")){if(c==s)continue;let o=document.createElement("option");o.value=c,o.innerText=c,r.appendChild(o)}return r.onchange=()=>{this.setPropertyValue(e,r.value)},r.value=s,r}case"signal":{let r=document.createElement("div");r.style.display="flex";let a=document.createElement("input");a.value=s??"",a.style.flexGrow="1",a.style.width="0",a.onchange=o=>this.setPropertyValue(e,a.value),a.onfocus=o=>{a.selectionStart=0,a.selectionEnd=a.value?.length},r.appendChild(a);let c=document.createElement("button");return c.textContent="...",c.onclick=async()=>{let o=this.visualizationShell.createBindableObjectBrowser();o.initialize(this.serviceContainer,this.instanceServiceContainer,this.bindableObjectsTarget),o.title="select signal...";let p=new AbortController;o.objectDoubleclicked.on(()=>{this.bindingDoubleClicked&&this.bindingDoubleClicked(o.selectedObject),p.abort(),a.value=o.selectedObject.fullName,this.setPropertyValue(e,a.value)}),await this.visualizationShell.openConfirmation(o,{x:100,y:100,width:400,height:300,parent:this,abortSignal:p.signal})&&(a.value=o.selectedObject.fullName,this.setPropertyValue(e,a.value))},r.appendChild(c),r}case"html":case"script":{let r=document.createElement("div");r.style.boxSizing="border-box",r.style.width="100%",r.style.display="flex";let a=document.createElement("textarea");a.style.boxSizing="border-box",a.value=s??"",a.style.width="100%",a.onblur=o=>{this.setPropertyValue(e,a.value)},r.appendChild(a);let c=document.createElement("button");return c.innerHTML="...",c.style.boxSizing="border-box",c.onclick=async()=>{let o=new xe,p=await xe.getMonacoLib();if(t.format=="html")o.language="html";else{let m={content:`declare global {
642
+ }`;static is="node-projects-visualization-bindings-editor";static properties={twoWayPossible:Boolean,twoWay:Boolean,expression:String,events:String,invert:Boolean,historic:Object};twoWayPossible=!1;twoWay=!1;expression="";writeBackSignal="";expressionTwoWay="";historic;objectNames="";events="";invert=!1;converters=[];static namedConverters=[];static helpSections=[];convertersString;get converter(){if(this.convertersString)return this.convertersString;if(this.converters.length>0)return Object.fromEntries(this.converters.map(e=>[e.key,e.value]))}_property;_binding;_bindingTarget;_serviceContainer;_instanceServiceContainer;_shell;_signals=[];_signalListContainer;_converterListContainer;constructor(e,t,i,s,l,a,n={}){super(),super._restoreCachedInititalValues(),this._property=e,this._binding=t,this._bindingTarget=i,this._serviceContainer=s,this._instanceServiceContainer=l,this._shell=a,n?.namedConverters===!1&&(this._getDomElement("namedConverterRow").style.display="none");let o=this._getDomElement("historicBtn");n?.showHistoric===!1?o.style.display="none":n?.historicLabel&&(o.textContent=n.historicLabel)}ready(){if(this._parseAttributesToProperties(),this._assignEvents(),this._signalListContainer=this._getDomElement("signalListContainer"),this._converterListContainer=this._getDomElement("converterListContainer"),this._getDomElement("helpBtn").onclick=()=>this._showHelp(),r.namedConverters.length===0&&(this._getDomElement("namedConverterBrowse").style.display="none"),this.twoWayPossible=!1,(this._bindingTarget==Ne.property||this._bindingTarget==Ne.attribute)&&(this.twoWayPossible=!0),this._binding){if(this.twoWay=this._binding.mode==yt.twoWay,this.expression=this._binding.expression,this.writeBackSignal=this._binding.writeBackSignal,this.expressionTwoWay=this._binding.expressionTwoWay,this.historic=this._binding.historic,this.invert=this._binding.invert,this._binding.bindableObjectNames&&(this.objectNames=this._binding.bindableObjectNames.join(";")),this._binding.converter)if(typeof this._binding.converter=="string")this.convertersString=this._binding.converter;else for(let e in this._binding.converter)this.converters.push({key:e,value:this._binding.converter[e]});this._binding.changedEvents&&this._binding.changedEvents.length&&(this.events=this._binding.changedEvents.join(";"))}if(this.expression){let e=this._getDomElement("expression");this.expression.indexOf(`
643
+ `)>=0&&(e.style.height="51px")}if(this.expressionTwoWay){let e=this._getDomElement("expression2way");this.expressionTwoWay.indexOf(`
644
+ `)>=0&&(e.style.height="51px")}this._signals=this._parseObjectNames(this.objectNames),this._signals.length===0&&this._signals.push({name:"",signal:""}),this._renderSignalList(),this._renderConverterList(),this._bindingsParse()}_parseObjectNames(e){return e?e.split(";").filter(t=>t.length>0).map(t=>{let i=t.indexOf(":");return i>0?{name:t.slice(0,i),signal:t.slice(i+1)}:{name:"",signal:t}}):[]}_signalsToObjectNames(){return this._signals.map(e=>e.name?e.name+":"+e.signal:e.signal).join(";")}_renderSignalList(){let e=this._signalListContainer;e.innerHTML="",this._signals.forEach((t,i)=>{let s=document.createElement("div");s.className="signal-row";let l=document.createElement("input");l.className="signal-name-input",l.placeholder=`__${i}`,l.value=t.name,l.title="variable name used in the formula (defaults to __"+i+" if empty)",l.oninput=()=>{this._signals[i].name=l.value,this._syncSignals()};let a=document.createElement("input");a.className="signal-path-input",a.value=t.signal,a.placeholder="signal path",a.title="signal path (prefix: ? = signal name in screen property, ?? = screen property value, ?$ = signal object in screen property, ?@ = screen attribute, # = signal name in target property, ## = target property value, #$ = signal object in target property, #@ = target attribute)",a.oninput=()=>{this._signals[i].signal=a.value,this._syncSignals()};let n=document.createElement("button");n.className="signal-icon-btn",n.title="Duplicate";let o=document.createElement("img");o.src=me+"icons/copy.svg",o.style.cssText="width:12px; height:12px;",n.appendChild(o),n.onclick=()=>{this._signals.splice(i+1,0,{...this._signals[i]}),this._syncSignals(),this._renderSignalList()};let c=document.createElement("button");c.className="signal-select-btn",c.textContent="...",c.title="Browse signal",c.onclick=()=>this._selectForRow(i,a);let p=document.createElement("button");p.className="signal-icon-btn",p.title="Remove";let d=document.createElement("img");d.src=me+"icons/delete.svg",d.style.cssText="width:12px; height:12px;",p.appendChild(d),p.onclick=()=>{this._signals.splice(i,1),this._syncSignals(),this._renderSignalList()},s.appendChild(l),s.appendChild(a),s.appendChild(c),s.appendChild(n),s.appendChild(p),e.appendChild(s)})}_syncSignals(){this.objectNames=this._signalsToObjectNames(),this._bindingsRefresh()}_addSignal(){this._signals.push({name:"",signal:""}),this._renderSignalList()}async _selectForRow(e,t){let i=this._shell.createBindableObjectBrowser();i.initialize(this._serviceContainer,this._instanceServiceContainer,"binding"),i.title="select signal...";let s=new AbortController;if(i.objectDoubleclicked.on(()=>{s.abort();let a="";i.selectedObject.specialType=="signalProperty"?a="?":i.selectedObject.bindabletype==="property"&&(a="??"),this._signals[e].signal=a+i.selectedObject.fullName,t.value=this._signals[e].signal,this._syncSignals()}),await this._shell.openConfirmation(i,{x:100,y:100,width:400,height:300,parent:this,abortSignal:s.signal})){let a="";i.selectedObject.specialType=="signalProperty"?a="?":i.selectedObject.bindabletype==="property"&&(a="??"),this._signals[e].signal=a+i.selectedObject.fullName,t.value=this._signals[e].signal,this._syncSignals()}}_renderConverterList(){let e=this._converterListContainer;e.innerHTML="";let t=this._property?.type==="color"?"color":"text";this.converters.forEach((i,s)=>{let l=document.createElement("div");l.className="signal-row";let a=document.createElement("input");a.style.cssText="flex:1 1 auto; height:22px; box-sizing:border-box;",a.value=i.key,a.placeholder="condition",a.oninput=()=>{this.converters[s].key=a.value};let n=document.createElement("input");n.type=t,n.style.cssText="flex:1 1 auto; height:22px; box-sizing:border-box;",n.value=i.value,n.placeholder="value",n.oninput=()=>{this.converters[s].value=n.value};let o=document.createElement("button");o.className="signal-icon-btn",o.title="Duplicate";let c=document.createElement("img");c.src=me+"icons/copy.svg",c.style.cssText="width:12px; height:12px;",o.appendChild(c),o.onclick=()=>{this.converters.splice(s+1,0,{...this.converters[s]}),this._renderConverterList()};let p=document.createElement("button");p.className="signal-icon-btn",p.title="Remove";let d=document.createElement("img");d.src=me+"icons/delete.svg",d.style.cssText="width:12px; height:12px;",p.appendChild(d),p.onclick=()=>{this.converters.splice(s,1),this._renderConverterList()},l.appendChild(a),l.appendChild(n),l.appendChild(o),l.appendChild(p),e.appendChild(l)})}_addConverter(){this.converters.push({key:"",value:""}),this._renderConverterList()}async _selectNamedConverter(){let e=r.namedConverters;if(e.length===0)return;let t="",i=null,s=document.createElement("div");s.style.cssText="display:flex; flex-direction:column; height:100%; box-sizing:border-box; font-size:12px;";let l=document.createElement("div");l.style.cssText="padding:6px 8px 4px; color:#666; font-size:11px; border-bottom:1px solid #e0e0e0; flex-shrink:0;",l.textContent="Select a converter and confirm with OK.",s.appendChild(l);let a=document.createElement("div");a.style.cssText="flex:1; overflow-y:auto; padding:4px;",s.appendChild(a);let n=p=>{p.style.background="",p.style.borderLeftColor="transparent"},o=(p,d)=>{i&&n(i),i=p,p.style.background="#e8f4fd",p.style.borderLeftColor="#0078d7",t=d};for(let p of e){let d=document.createElement("div");d.style.cssText="padding:5px 6px 5px 9px; cursor:pointer; border-radius:3px; border-left:3px solid transparent; margin-bottom:2px;";let h=document.createElement("div");if(h.style.cssText="font-family:monospace; font-weight:bold; color:#111;",h.textContent=p.name,d.appendChild(h),p.description){let u=document.createElement("div");u.style.cssText="color:#555; font-size:11px; margin-top:2px;",u.textContent=p.description,d.appendChild(u)}if(p.converter&&Object.keys(p.converter).length>0){let u=document.createElement("div");u.style.cssText="display:grid; grid-template-columns:max-content max-content 1fr; gap:1px 6px; margin-top:4px; padding:4px 6px; background:#f5f5f5; border-radius:2px; font-family:monospace; font-size:11px; color:#333;";for(let[g,f]of Object.entries(p.converter)){let w=document.createElement("span");w.style.cssText="color:#555; text-align:right;",w.textContent=g;let x=document.createElement("span");x.style.cssText="color:#aaa;",x.textContent="\u2192";let T=document.createElement("span");T.style.cssText="color:#0078d7; font-weight:bold;",T.textContent=String(f),u.appendChild(w),u.appendChild(x),u.appendChild(T)}d.appendChild(u)}d.onmouseenter=()=>{d!==i&&(d.style.background="#f5f5f5")},d.onmouseleave=()=>{d!==i&&(d.style.background="")},d.onclick=()=>o(d,p.name),a.appendChild(d)}await this._shell.openConfirmation(s,{x:100,y:100,width:320,height:300,parent:this})&&t&&(this.convertersString=t,this._getDomElement("namedConverterInput").value=t,this._bindingsRefresh())}_refresh(){requestAnimationFrame(()=>{this._bindingsRefresh()})}async showHistoric(){let e=new K(this.historic),t=new AbortController;e.title="Edit historic binding to: "+this._property.name,await this._shell.openConfirmation(e,{x:100,y:100,width:420,height:510,parent:this,abortSignal:t.signal,disableResize:!0,cancelText:"Remove"})?this.historic=e.historic:this.historic=null,this._bindingsRefresh()}_showHelp(){let e=document.createElement("iframe");e.srcdoc=r.helpSections.length>0?we.replace(`</div>
645
+ </body>`,r.helpSections.join("")+`</div>
646
+ </body>`):we,e.style.cssText="width:100%; height:100%; border:none; display:block;",this._shell.openModal(e,{title:"Bindings Editor Help",parent:this,x:-660,y:-80,width:630,height:580})}};customElements.define(he.is,he);import{BaseCustomWebComponentConstructorAppend as Et,TypedEvent as Nt,css as Bt,html as Ot}from"@node-projects/base-custom-webcomponent";import{ContextMenu as It,assetsPath as _e}from"@node-projects/web-component-designer";import{typeInfoFromJsonSchema as Re}from"@node-projects/propertygrid.webcomponent";import{defaultOptions as Vt,defaultStyle as At}from"@node-projects/web-component-designer-widgets-wunderbaum";import{Wunderbaum as Rt}from"wunderbaum";import zt from"wunderbaum/dist/wunderbaum.css"with{type:"css"};import{PropertyGrid as bt}from"@node-projects/propertygrid.webcomponent";import{CodeViewMonaco as Be}from"@node-projects/web-component-designer-codeview-monaco";var re=class extends bt{serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;bindableObjectsTarget="property";constructor(){super()}bindingDoubleClicked;setNameColumnWidth(e){let t=this._tree?.columns?.[0];t&&(t.width=e+"px",this._tree.update("colStructure"))}async getEditorForType(e,t,i,s,l){if(this.getSpecialEditorForType){let a=await this.getSpecialEditorForType(e,t,i,s,l);if(a)return a}switch(e.format){case"screen":{let a=document.createElement("select");a.style.width="100%";let n=document.createElement("option");n.value=t??"",n.innerText=t??"",a.appendChild(n);for(let o of await this.visualizationHandler.getAllNames("screen")){if(o==t)continue;let c=document.createElement("option");c.value=o,c.innerText=o,a.appendChild(c)}return a.onchange=()=>{this.setPropertyValue(i,a.value)},a.value=t,a}case"signal":{let a=document.createElement("div");a.style.display="flex";let n=document.createElement("input");n.value=t??"",n.style.flexGrow="1",n.style.width="0",n.onchange=c=>this.setPropertyValue(i,n.value),n.onfocus=c=>{n.selectionStart=0,n.selectionEnd=n.value?.length},a.appendChild(n);let o=document.createElement("button");return o.textContent="...",o.onclick=async()=>{let c=this.visualizationShell.createBindableObjectBrowser();c.initialize(this.serviceContainer,this.instanceServiceContainer,this.bindableObjectsTarget),c.title="select signal...";let p=new AbortController;c.objectDoubleclicked.on(()=>{this.bindingDoubleClicked&&this.bindingDoubleClicked(c.selectedObject),p.abort(),n.value=c.selectedObject.fullName,this.setPropertyValue(i,n.value)}),await this.visualizationShell.openConfirmation(c,{x:100,y:100,width:400,height:300,parent:this,abortSignal:p.signal})&&(n.value=c.selectedObject.fullName,this.setPropertyValue(i,n.value))},a.appendChild(o),a}case"html":case"script":{let a=document.createElement("div");a.style.boxSizing="border-box",a.style.width="100%",a.style.display="flex";let n=document.createElement("textarea");n.style.boxSizing="border-box",n.value=t??"",n.style.width="100%",n.onblur=c=>{this.setPropertyValue(i,n.value)},a.appendChild(n);let o=document.createElement("button");return o.innerHTML="...",o.style.boxSizing="border-box",o.onclick=async()=>{let c=new Be,p=await Be.getMonacoLib();if(e.format=="html")c.language="html";else{let h={content:`declare global {
637
647
  var context: { event: Event, element: Element };
638
- }`,filePath:"global.d.ts"};p.languages.typescript.typescriptDefaults.setExtraLibs([m]),o.language="javascript"}o.code=a.value,o.style.position="relative",await this.visualizationShell.openConfirmation(o,{x:200,y:200,width:600,height:400,parent:this})&&(a.value=o.getText(),this.setPropertyValue(e,a.value))},r.appendChild(c),r}}return super.getEditorForType(t,s,e,i,n)}};customElements.define("node-projects-visualization-property-grid",q);import{CodeViewMonaco as Te}from"@node-projects/web-component-designer-codeview-monaco";import{BaseCustomWebComponentConstructorAppend as it,TypedEvent as we,css as at,html as nt}from"@node-projects/base-custom-webcomponent";import{defaultOptions as ot,defaultStyle as rt}from"@node-projects/web-component-designer-widgets-wunderbaum";import{Wunderbaum as lt}from"wunderbaum";import ct from"wunderbaum/dist/wunderbaum.css"with{type:"css"};function st(l){return l.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function B(l){return st(l).replace(/("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|\b(-?\d+(?:\.\d+)?)\b/g,(s,e,i,n,r)=>e?`<span class="${i?"cs-key":"cs-str"}">${e}</span>${i??""}`:n?`<span class="cs-bool">${n}</span>`:r?`<span class="cs-num">${r}</span>`:s)}var L=class l extends it{static style=at`
648
+ }`,filePath:"global.d.ts"};p.languages.typescript.typescriptDefaults.setExtraLibs([h]),c.language="javascript"}c.code=n.value,c.style.position="relative",await this.visualizationShell.openConfirmation(c,{x:200,y:200,width:600,height:400,parent:this})&&(n.value=c.getText(),this.setPropertyValue(i,n.value))},a.appendChild(o),a}}return super.getEditorForType(e,t,i,s,l)}};customElements.define("node-projects-visualization-property-grid",re);import{CodeViewMonaco as ze}from"@node-projects/web-component-designer-codeview-monaco";import{BaseCustomWebComponentConstructorAppend as xt,TypedEvent as Oe,css as wt,html as _t}from"@node-projects/base-custom-webcomponent";import{defaultOptions as St,defaultStyle as kt}from"@node-projects/web-component-designer-widgets-wunderbaum";import{Wunderbaum as Ct}from"wunderbaum";import Tt from"wunderbaum/dist/wunderbaum.css"with{type:"css"};function vt(r){return r.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}function H(r){return vt(r).replace(/("(?:\\.|[^"\\])*")(\s*:)?|\b(true|false|null)\b|\b(-?\d+(?:\.\d+)?)\b/g,(t,i,s,l,a)=>i?`<span class="${s?"cs-key":"cs-str"}">${i}</span>${s??""}`:l?`<span class="cs-bool">${l}</span>`:a?`<span class="cs-num">${a}</span>`:t)}var Z=class r extends xt{static style=wt`
639
649
  :host {
640
650
  display: block;
641
651
  background: white;
@@ -780,7 +790,7 @@ __res <span style="color:#6a737d;font-style:italic">// the res
780
790
  font-style: italic;
781
791
  color: #666;
782
792
  }
783
- `;static template=nt`
793
+ `;static template=_t`
784
794
  <div class="root">
785
795
  <input id="filter" placeholder="Filter..." autocomplete="off">
786
796
  <div class="content">
@@ -794,14 +804,14 @@ __res <span style="color:#6a737d;font-style:italic">// the res
794
804
  <button id="closeBtn" @click="[[this.closeClicked()]]">Close</button>
795
805
  </div>
796
806
  </div>
797
- `;static is="node-projects-visualization-simple-script-command-picker";_title;get title(){return this._title}set title(t){this._title=t}selectedType;commandTypeChosen=new we;closeRequested=new we;_tree;_filter;_descriptionDiv;_addBtn;_typeInfo;_descriptions;constructor(){super(),this._restoreCachedInititalValues(),this.shadowRoot.adoptedStyleSheets=[ct,rt,l.style],this._descriptionDiv=this._getDomElement("description"),this._addBtn=this._getDomElement("addBtn"),this._filter=this._getDomElement("filter"),this._filter.onkeyup=()=>{let t=this._filter.value;this._tree.filterNodes(s=>new RegExp(t,"i").test(s.title),{})},this._tree=new lt({...ot,element:this._getDomElement("commandList"),icon:!1,filter:{autoExpand:!0,mode:"hide",highlight:!0},activate:t=>{this.selectedType=t.node.title,this._addBtn.disabled=!1,this._renderDescription(t.node.title)},dblclick:t=>(this.selectedType=t.node.title,this.commandTypeChosen.emit(),!1),render:t=>{t.isNew&&(t.nodeElem.oncontextmenu=s=>(s.preventDefault(),!1))},dnd:{guessDropEffect:!1,serializeClipboardData:!0,dragStart:t=>(t.event.dataTransfer.effectAllowed="copy",t.event.dataTransfer.dropEffect="copy",!0)}})}async ready(){this._parseAttributesToProperties(),this._bindingsParse(null,!0),this._assignEvents()}addClicked(){this.selectedType&&this.commandTypeChosen.emit()}closeClicked(){this.closeRequested.emit()}_renderDescription(t){let s=this._descriptions?.[t];if(s){this._descriptionDiv.innerHTML=`
798
- <div class="cmd-title">${t}<span class="hint">${s.description}</span></div>
799
- <pre class="snippet">${B(s.example)}</pre>
800
- ${s.note?`<div class="note">${s.note}</div>`:""}
801
- `;return}let e=this._typeInfo?.definitions?.[t]?.description;this._descriptionDiv.innerHTML=`
802
- <div class="cmd-title">${t}</div>
803
- ${e?`<div class="note">${e}</div>`:""}
804
- `}loadCommands(t,s){this._typeInfo=t,this._descriptions=s??{};let e=Object.keys(t.definitions).filter(i=>t.definitions[i].type==="object"&&i!=="ScriptCommands");this._tree.root.addChildren(e.map(i=>({title:i})))}};customElements.define(L.is,L);function _e(l,t){return`<span class="cs-attr">${l}</span>='${B(t)}'`}var Se=`<!DOCTYPE html>
807
+ `;static is="node-projects-visualization-simple-script-command-picker";_title;get title(){return this._title}set title(e){this._title=e}selectedType;commandTypeChosen=new Oe;closeRequested=new Oe;_tree;_filter;_descriptionDiv;_addBtn;_typeInfo;_descriptions;constructor(){super(),this._restoreCachedInititalValues(),this.shadowRoot.adoptedStyleSheets=[Tt,kt,r.style],this._descriptionDiv=this._getDomElement("description"),this._addBtn=this._getDomElement("addBtn"),this._filter=this._getDomElement("filter"),this._filter.onkeyup=()=>{let e=this._filter.value;this._tree.filterNodes(t=>new RegExp(e,"i").test(t.title),{})},this._tree=new Ct({...St,element:this._getDomElement("commandList"),icon:!1,filter:{autoExpand:!0,mode:"hide",highlight:!0},activate:e=>{this.selectedType=e.node.title,this._addBtn.disabled=!1,this._renderDescription(e.node.title)},dblclick:e=>(this.selectedType=e.node.title,this.commandTypeChosen.emit(),!1),render:e=>{e.isNew&&(e.nodeElem.oncontextmenu=t=>(t.preventDefault(),!1))},dnd:{guessDropEffect:!1,serializeClipboardData:!0,dragStart:e=>(e.event.dataTransfer.effectAllowed="copy",e.event.dataTransfer.dropEffect="copy",!0)}})}async ready(){this._parseAttributesToProperties(),this._bindingsParse(null,!0),this._assignEvents()}addClicked(){this.selectedType&&this.commandTypeChosen.emit()}closeClicked(){this.closeRequested.emit()}_renderDescription(e){let t=this._descriptions?.[e];if(t){this._descriptionDiv.innerHTML=`
808
+ <div class="cmd-title">${e}<span class="hint">${t.description}</span></div>
809
+ <pre class="snippet">${H(t.example)}</pre>
810
+ ${t.note?`<div class="note">${t.note}</div>`:""}
811
+ `;return}let i=this._typeInfo?.definitions?.[e]?.description;this._descriptionDiv.innerHTML=`
812
+ <div class="cmd-title">${e}</div>
813
+ ${i?`<div class="note">${i}</div>`:""}
814
+ `}loadCommands(e,t){this._typeInfo=e,this._descriptions=t??{};let i=Object.keys(e.definitions).filter(s=>e.definitions[s].type==="object"&&s!=="ScriptCommands");this._tree.root.addChildren(i.map(s=>({title:s})))}};customElements.define(Z.is,Z);function Ie(r,e){return`<span class="cs-attr">${r}</span>='${H(e)}'`}var Ve=`<!DOCTYPE html>
805
815
  <html>
806
816
  <head>
807
817
  <meta charset="UTF-8">
@@ -922,7 +932,7 @@ html, body {
922
932
 
923
933
  <div class="content-section">
924
934
  <div class="section-title"><span class="section-num">1</span> Basic structure <span class="section-hint">commands array, sequential execution</span></div>
925
- <pre class="snippet">${_e("@click",`{"commands":[
935
+ <pre class="snippet">${Ie("@click",`{"commands":[
926
936
  { "type": "SetSignalValue", "signal": ".Some.Signal", "value": true },
927
937
  { "type": "SetSignalValue", "signal": ".Some.Other", "value": false }
928
938
  ]}`)}</pre>
@@ -932,22 +942,22 @@ html, body {
932
942
  <div class="content-section">
933
943
  <div class="section-title"><span class="section-num">2</span> Dynamic / indirect values <span class="section-hint">IScriptMultiplexValue</span></div>
934
944
  <div class="note">Instead of a plain value, most command values can be an object <code>{ "source": ..., "name": ... }</code> that is resolved at runtime.</div>
935
- <pre class="snippet">${B('{ "source": "expression", "name": "ctx.event.srcElement.value" }')} <span class="cs-comment">// js expression, 'ctx' is the context object</span>
936
- ${B('{ "source": "complexString", "name": "prefix-{.Some.Signal}-suffix" }')} <span class="cs-comment">// signal names in {}</span>
937
- ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">// a parameter handed into the script</span></pre>
945
+ <pre class="snippet">${H('{ "source": "expression", "name": "ctx.event.srcElement.value" }')} <span class="cs-comment">// js expression, 'ctx' is the context object</span>
946
+ ${H('{ "source": "complexString", "name": "prefix-{.Some.Signal}-suffix" }')} <span class="cs-comment">// signal names in {}</span>
947
+ ${H('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">// a parameter handed into the script</span></pre>
938
948
  <div class="note">Other sources: signal, property, signalInProperty, event, complexSignal, context, elementProperty. The property grid's "..." button opens an editor for these.</div>
939
949
  </div>
940
950
 
941
951
  <div class="content-section">
942
952
  <div class="section-title"><span class="section-num">3</span> Cyclic events <span class="section-hint">re-triggering timer event</span></div>
943
- <pre class="snippet">${_e("@cyclic:100",`{"commands":[
953
+ <pre class="snippet">${Ie("@cyclic:100",`{"commands":[
944
954
  { "type": "SetSignalValue", "signal": ".Local.Tick", "value": true }
945
955
  ]}`)}</pre>
946
956
  <div class="note">A <code>@cyclic:&lt;ms&gt;</code> event retriggers itself automatically every &lt;ms&gt; milliseconds.</div>
947
957
  </div>
948
958
  </div>
949
959
  </body>
950
- </html>`;var ke={Comment:{description:"has no effect on script execution",example:'{ "type": "Comment", "comment": "explains the next step" }'},OpenScreen:{description:"navigate to a screen (with history)",example:'{ "type": "OpenScreen", "screen": "MyScreen" }'},OpenDialog:{description:"open a screen as a movable/closable dialog",example:`{ "type": "OpenDialog", "screen": "MyScreen", "title": "My Dialog",
960
+ </html>`;var Ae={Comment:{description:"has no effect on script execution",example:'{ "type": "Comment", "comment": "explains the next step" }'},OpenScreen:{description:"navigate to a screen (with history)",example:'{ "type": "OpenScreen", "screen": "MyScreen" }'},OpenDialog:{description:"open a screen as a movable/closable dialog",example:`{ "type": "OpenDialog", "screen": "MyScreen", "title": "My Dialog",
951
961
  "moveable": true, "closeable": true }`},CloseDialog:{description:"close the parent dialog this command runs in",example:'{ "type": "CloseDialog" }'},OpenUrl:{description:"open an URL, optionally as an in-app dialog",example:'{ "type": "OpenUrl", "url": "https://example.com", "target": "_blank", "openInDialog": false }'},ShowMessageBox:{description:"ask the user to confirm before continuing",example:`{ "type": "ShowMessageBox", "title": "Confirm", "message": "Are you sure?",
952
962
  "messageType": "warning", "buttons": "yesNo", "resultSignal": ".Local.Result",
953
963
  "exitScriptOnCancel": true }`,note:"exitScriptOnCancel: true stops the chain when the user picks a negative button."},ShowPrompt:{description:"ask the user for text input",example:`{ "type": "ShowPrompt", "title": "Name?", "message": "Enter a name",
@@ -956,7 +966,7 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
956
966
  "targetSelector": ".my-class", "name": "disabled", "value": true }`,note:'target: "property" (default) | "attribute" | "css" | "class". targetSelectorTarget: "container" (screen/customControl, default) | "element" (current element).'},Delay:{description:"pause the script chain",example:'{ "type": "Delay", "value": 500 }'},Console:{description:"write a message to the browser console",example:'{ "type": "Console", "target": "log", "message": "done" }',note:'target: "log" (default) | "info" | "debug" | "warn" | "error".'},SwitchLanguage:{description:"switch the active UI language",example:'{ "type": "SwitchLanguage", "language": "en" }'},Login:{description:"log a user in",example:'{ "type": "Login", "username": "user", "password": "pass" }'},Logout:{description:"log the current user out",example:'{ "type": "Logout" }'},SubscribeSignal:{description:"subscribe to a signal so its updates are pushed to the client",example:'{ "type": "SubscribeSignal", "signal": ".Some.Signal", "oneTime": false }'},UnsubscribeSignal:{description:"unsubscribe from a previously subscribed signal",example:'{ "type": "UnsubscribeSignal", "signal": ".Some.Signal" }'},WriteSignalsInGroup:{description:"write all pending signal values of a named group",example:'{ "type": "WriteSignalsInGroup", "group": "MyGroup" }'},ClearSignalsInGroup:{description:"clear all pending signal values of a named group",example:'{ "type": "ClearSignalsInGroup", "group": "MyGroup" }'},RunScript:{description:"run another named script",example:'{ "type": "RunScript", "name": "MyScript", "scriptType": "SimpleScript" }'},CopySignalValuesFromFolder:{description:"copy signal values from one signal folder to another",example:'{ "type": "CopySignalValuesFromFolder", "sourceFolder": ".Source", "destinationFolder": ".Target" }'},ExportSignalValuesAsJson:{description:"export matching signal values as a downloadable JSON file",example:'{ "type": "ExportSignalValuesAsJson", "regex": "^\\\\.Some\\\\..*", "fileName": "export.json" }'},ImportSignalValuesFromJson:{description:"import signal values from a JSON string",example:'{ "type": "ImportSignalValuesFromJson", "data": "{ \\".Some.Signal\\": true }" }'},Repeat:{description:"jump back to a label a number of times, or indefinitely",example:'{ "type": "Repeat", "label": "lbl_loop", "count": 0, "mode": "eventValid" }',note:'mode: "eventValid" (default, repeats until the event is no longer active) | "always" (repeats until count is 0 or indefinitely when count is 0).'},Condition:{description:"compare two values and jump to a label depending on the result",example:`{ "type": "Condition", "value1": {"source":"signal","name":".Is.On"}, "value2": true,
957
967
  "comparisonType": "==", "trueGotoLabel": "lbl_off", "falseGotoLabel": "lbl_on" }`,note:"comparisonType: ==null | !=null | ==true | ==false | == | != | > | < | >= | <= | && | ||."},If:{description:"evaluate a formula and run nested commands depending on the result",example:`{ "type": "If",
958
968
  "signals": [{"source":"signal","name":".Is.On"}, {"varName":"ready","source":"signal","name":".Is.Ready"}],
959
- "formula": "__0 == true && ready == false", "trueCommands": [], "elseCommands": [] }`,note:"signals is a list of values (like Condition.value1). Each is referenced in the formula either positionally as __0, __1, ... or, if varName is set, by that name. trueCommands/elseCommands are edited as nested commands in the tree, not as JSON here."},Exit:{description:"stop executing the current script chain",example:'{ "type": "Exit" }'},Label:{description:"a named jump target for Condition / Goto / Repeat",example:'{ "type": "Label", "label": "lbl_on" }'},Goto:{description:"jump unconditionally to a label",example:'{ "type": "Goto", "label": "lbl_on" }'}};import"@node-projects/splitview.webcomponent";var D=class l{static upgradeScriptCommand(t){return t.type==="SetElementProperty"?l.upgradeSetElementProperty(t):(t.type==="If"&&(t.trueCommands=(t.trueCommands??[]).map(s=>l.upgradeScriptCommand(s)),t.elseCommands=(t.elseCommands??[]).map(s=>l.upgradeScriptCommand(s))),t)}static upgradeSetElementProperty(t){return t.targetSelectorTarget==="currentScreen"?t.targetSelectorTarget="container":t.targetSelectorTarget==="parentScreen"?(t.targetSelectorTarget="container",t.parentIndex=1):t.targetSelectorTarget==="currentElement"?t.targetSelectorTarget="element":t.targetSelectorTarget==="parentElement"&&(t.targetSelectorTarget="element",t.parentIndex=1),t}};var j="application/x-simple-script-move",W=class l extends pt{static style=ut`
969
+ "formula": "__0 == true && ready == false", "trueCommands": [], "elseCommands": [] }`,note:"signals is a list of values (like Condition.value1). Each is referenced in the formula either positionally as __0, __1, ... or, if varName is set, by that name. trueCommands/elseCommands are edited as nested commands in the tree, not as JSON here."},Exit:{description:"stop executing the current script chain",example:'{ "type": "Exit" }'},Label:{description:"a named jump target for Condition / Goto / Repeat",example:'{ "type": "Label", "label": "lbl_on" }'},Goto:{description:"jump unconditionally to a label",example:'{ "type": "Goto", "label": "lbl_on" }'}};import"@node-projects/splitview.webcomponent";var Q=class r{static upgradeScriptCommand(e){return e.type==="SetElementProperty"?r.upgradeSetElementProperty(e):(e.type==="If"&&(e.trueCommands=(e.trueCommands??[]).map(t=>r.upgradeScriptCommand(t)),e.elseCommands=(e.elseCommands??[]).map(t=>r.upgradeScriptCommand(t))),e)}static upgradeSetElementProperty(e){return e.targetSelectorTarget==="currentScreen"?e.targetSelectorTarget="container":e.targetSelectorTarget==="parentScreen"?(e.targetSelectorTarget="container",e.parentIndex=1):e.targetSelectorTarget==="currentElement"?e.targetSelectorTarget="element":e.targetSelectorTarget==="parentElement"&&(e.targetSelectorTarget="element",e.parentIndex=1),e}};var ee="application/x-simple-script-move",te=class r extends Et{static style=Bt`
960
970
  :host {
961
971
  background: white;
962
972
  }
@@ -1154,7 +1164,7 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1154
1164
  height: 12px;
1155
1165
  cursor: pointer;
1156
1166
  }
1157
- `;static template=ht`
1167
+ `;static template=Ot`
1158
1168
  <div class="root">
1159
1169
  <div class="content">
1160
1170
  <node-projects-split-view
@@ -1204,8 +1214,8 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1204
1214
  </node-projects-split-view>
1205
1215
  </div>
1206
1216
  </div>
1207
- `;static is="node-projects-visualization-simple-script-editor";_title;get title(){return this._title}set title(t){this._title=t}serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;scriptCommandsTypeInfo;propertiesTypeInfo;helpRequested=new dt;commandDescriptions={...ke};_script;_commandListDiv;_commandListFancyTree;_propertygrid;_splitView;_codeView;_codeToggleBtn;_addCommandBtn;_showingCode=!1;_dragFromHandle=!1;_draggedNode=null;constructor(){super(),this._restoreCachedInititalValues(),this._commandListDiv=this._getDomElement("commandList"),this._propertygrid=this._getDomElement("propertygrid"),this._splitView=this._getDomElement("splitView"),this._codeView=this._getDomElement("codeView"),this._codeToggleBtn=this._getDomElement("codeToggleBtn"),this._addCommandBtn=this._getDomElement("addCommandBtn");let t=this._getDomElement("listContent");t.addEventListener("mousedown",s=>{this._dragFromHandle=!!s.target?.closest(".drag-handle")}),document.addEventListener("dragend",()=>{this._draggedNode=null},!0),t.addEventListener("dragover",s=>{if(s.preventDefault(),s.dataTransfer){let e=s.dataTransfer.types.includes(j);s.dataTransfer.dropEffect=e?"move":"copy"}}),t.addEventListener("drop",s=>{if(s.preventDefault(),s.dataTransfer?.types.includes(j)&&this._draggedNode){let i=this._commandListFancyTree.root.children,n=i?.[i.length-1];n&&this._draggedNode.moveTo(n,"after"),this._draggedNode.setClass("wb-drag-source",!1)}else{let i=s.dataTransfer?.getData("text/plain");if(i){let n={type:i};this._commandListFancyTree.root.addChildren(this.createTreeItem(n))}}}),this.shadowRoot.adoptedStyleSheets=[vt,ft,l.style]}async ready(){this._parseAttributesToProperties(),this._bindingsParse(null,!0),this._assignEvents();let t=async c=>{let o=new q;o.visualizationHandler=this.visualizationHandler,o.visualizationShell=this.visualizationShell,o.serviceContainer=this.serviceContainer,o.instanceServiceContainer=this.instanceServiceContainer,o.bindableObjectsTarget="script",o.getTypeInfo=(h,m)=>Ce(this.propertiesTypeInfo,h,m),o.showHead=!1,o.typeName="IScriptMultiplexValue",o.title='Complex for "'+c.propertyPath+'"',typeof c.value=="object"?o.selectedObject=c.value??{}:o.selectedObject={},o.bindingDoubleClicked=h=>{h.bindabletype=="property"?o.setPropertyValue("source","property"):h.bindabletype=="context"?o.setPropertyValue("source","context"):o.setPropertyValue("source","signal"),o.setPropertyValue("name",h.fullName),o.refresh()},await this.visualizationShell.openConfirmation(o,{x:100,y:100,width:400,height:500,parent:this})&&(this._propertygrid.setPropertyValue(c.propertyPath,o.selectedObject),this._propertygrid.refresh())},s=async c=>{let o=new Te;o.language="javascript",o.style.position="relative",o.code=c.value??"",await this.visualizationShell.openConfirmation(o,{title:"Edit formula",x:100,y:50,width:700,height:450,parent:this})&&(this._propertygrid.setPropertyValue(c.propertyPath,o.code),this._propertygrid.refresh())},e=["signal","property","elementProperty","signalInProperty","event","parameter","context","complexString","complexSignal","expression"],i=/^[A-Za-z_$][A-Za-z0-9_$]*$/,n=new Set(["break","case","catch","class","const","continue","debugger","default","delete","do","else","export","extends","finally","for","function","if","import","in","instanceof","new","return","super","switch","this","throw","try","typeof","var","void","while","with","yield","let","static","enum","await","implements","package","protected","interface","private","public","null","true","false","undefined","arguments","eval"]),r={signal:"read the value from a Signal",property:"read the value from a property of the customControl (not usable in screens)",elementProperty:"a property defined on the element raising the event",signalInProperty:"read the value from a Signal (wich name is in the Property)",event:"read the value of a property of the event object",parameter:"a parameter you hand over",context:"a value of the context",complexString:"a string with signals (contained in {})",complexSignal:"read the value from a signal wich name is build here (it can contain other signals in {})",expression:"js expression, 'ctx' is context object"},a=async c=>{let o=(c.value??[]).map(w=>({...w})),p=w=>{let S=(o[w].varName??"").trim();return S?i.test(S)?n.has(S)?`"${S}" is a reserved word and cannot be used as a variable name.`:o.some((k,C)=>C!==w&&(k.varName??"").trim()===S)?`"${S}" is used by more than one signal.`:null:`"${S}" is not a valid JavaScript variable name.`:null},h="height:22px; box-sizing:border-box; font-size:12px;",m=document.createElement("div");m.style.cssText="display:flex; flex-direction:column; gap:6px; padding:8px; height:100%; box-sizing:border-box; overflow-y:auto; font-size:12px;";let u=document.createElement("div");u.style.cssText="display:flex; align-items:center; gap:4px; font-weight:bold;";let d=document.createElement("span");d.textContent="Name",d.style.cssText="flex:0 0 120px;";let g=document.createElement("span");g.textContent="Typ",g.style.cssText="flex:0 0 130px;";let f=document.createElement("span");f.textContent="Signal",f.style.cssText="flex:1 1 auto;";let b=document.createElement("span");b.style.cssText="flex:0 0 22px;",u.append(d,g,f,b),m.appendChild(u);let _=document.createElement("div");_.style.cssText="display:flex; flex-direction:column; gap:4px;",m.appendChild(_);let $=document.createElement("div");$.style.cssText="flex:0 0 auto; margin-top:4px; padding-top:6px; border-top:1px solid #ccc; font-size:12px;";let ae=document.createElement("div");ae.style.cssText="font-weight:bold; margin-bottom:2px;";let ne=document.createElement("div");ne.style.cssText="color:#333; white-space:pre-line;",$.append(ae,ne);let oe=w=>{ae.textContent="Typ: "+w,ne.textContent=r[w]??""},re=[],ye=()=>{o.forEach((w,S)=>{let k=re[S];if(!k)return;let C=p(S);k.title=C??`Variable name used in the formula (defaults to __${S} if empty)`,k.style.borderColor=C?"#c0392b":"",k.style.backgroundColor=C?"#fdecea":""})},le=()=>{_.innerHTML="",re.length=0,o.forEach((w,S)=>{let k=document.createElement("div");k.style.cssText="display:flex; align-items:center; gap:4px;";let C=document.createElement("input");C.value=w.varName??"",C.placeholder="__"+S,C.style.cssText=h+" flex:0 0 120px; min-width: 120px; font-family:monospace;",C.oninput=()=>{w.varName=C.value||void 0,ye()},re.push(C),k.appendChild(C);let N=document.createElement("select");N.style.cssText=h+" flex:0 0 130px;";for(let pe of e){let Z=document.createElement("option");Z.value=pe,Z.textContent=pe,w.source===pe&&(Z.selected=!0),N.appendChild(Z)}N.onchange=()=>{w.source=N.value,oe(N.value)},N.onfocus=()=>oe(N.value),k.appendChild(N);let R=document.createElement("input");R.value=w.name??"",R.placeholder="e.g. srm.rbg{__tagRoot}.error",R.style.cssText=h+" flex:1 1 auto;",R.oninput=()=>{w.name=R.value},k.appendChild(R);let G=document.createElement("button");G.title="Remove signal",G.style.cssText=h+" flex:0 0 22px; width:22px; padding:0; display:flex; align-items:center; justify-content:center;";let ce=document.createElement("img");ce.src=ue+"icons/delete.svg",ce.style.cssText="width:12px; height:12px;",G.appendChild(ce),G.onclick=()=>{o.splice(S,1),le()},k.appendChild(G),_.appendChild(k)}),ye()};le();let Y=document.createElement("button");Y.textContent="+ Add signal",Y.style.cssText=h+" align-self:flex-start; padding:0 8px;",Y.onclick=()=>{o.push({source:"signal",name:""}),le()},m.appendChild(Y),oe(o[0]?.source??"signal"),m.appendChild($),await this.visualizationShell.openConfirmation(m,{title:"Edit signals",x:100,y:50,width:500,height:400,parent:this})&&(this._propertygrid.setPropertyValue(c.propertyPath,o),this._propertygrid.refresh())};this._propertygrid.visualizationHandler=this.visualizationHandler,this._propertygrid.visualizationShell=this.visualizationShell,this._propertygrid.serviceContainer=this.serviceContainer,this._propertygrid.instanceServiceContainer=this.instanceServiceContainer,this._propertygrid.bindableObjectsTarget="script",this._propertygrid.setNameColumnWidth(130),this._propertygrid.getTypeInfo=(c,o)=>{let p=Ce(this.scriptCommandsTypeInfo,c,o);return p&&(o==="If"||c?.type==="If")&&(p.properties=p.properties.filter(h=>h.name!=="trueCommands"&&h.name!=="elseCommands")),p},this._propertygrid.getSpecialEditorForType=async(c,o,p,h,m)=>{if(!c.specialAllreadyAdded&&(c.specialAllreadyAdded=!0,c.format!=="collection"))if(c.format==="signalList"){let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.innerText="del",u.onclick=()=>{this._propertygrid.setPropertyValue(p,void 0),this._propertygrid.refresh()},h.nodeElem.insertAdjacentElement("afterbegin",u);let d=Array.isArray(o)?o:[],g=document.createElement("div");g.style.display="flex";let f=document.createElement("span");f.innerText=d.map((_,$)=>(_?.varName||"__"+$)+": "+(_?.source??"")+":"+(_?.name??"")).join(", "),f.style.overflow="hidden",f.style.whiteSpace="nowrap",f.style.textOverflow="ellipsis",f.style.flexGrow="1",f.title=JSON.stringify(d),g.appendChild(f);let b=document.createElement("button");return b.innerText="...",b.onclick=()=>{a({value:d,propertyPath:p})},g.appendChild(b),h.nodeElem.style.display="flex",g}else if(c.format==="formula"){let u=document.createElement("div");u.style.cssText="display:flex; width:100%; height:100%; align-items:stretch;";let d=new Te;d.language="javascript",d.singleRow=!0,d.style.cssText="flex:1 1 auto; min-width:0; height:100%; position:relative; overflow:hidden;",d.code=o??"",d.addEventListener("code-changed",()=>{this._propertygrid.setPropertyValue(p,d.code)}),u.appendChild(d);let g=document.createElement("button");return g.innerText="...",g.title="Open in larger editor",g.style.cssText="flex:0 0 28px; width:20px;",g.onclick=()=>s({value:d.code,propertyPath:p}),u.appendChild(g),h.nodeElem.style.display="flex",u}else if(typeof o=="object"&&o!==null||c.format==="complex"){let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.innerText="del",u.onclick=()=>{this._propertygrid.setPropertyValue(p,void 0),this._propertygrid.refresh()},h.nodeElem.insertAdjacentElement("afterbegin",u);let d=document.createElement("div");d.style.display="flex";let g=document.createElement("span");o?g.innerText=(o.source??"")+": "+(o.name??""):g.innerText="",g.style.overflow="hidden",g.style.whiteSpace="nowrap",g.style.textOverflow="ellipsis",g.style.flexGrow="1",g.title=JSON.stringify(o),d.appendChild(g);let f=document.createElement("button");return f.innerText="...",f.onclick=()=>{t({value:o,propertyPath:p})},d.appendChild(f),h.nodeElem.style.display="flex",d}else{let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.title="complex property value",u.style.opacity="0.2",u.innerText="...",u.onclick=()=>{t({value:o,propertyPath:p})},h.nodeElem.insertAdjacentElement("afterbegin",u),h.nodeElem.style.display="flex"}return null},this._propertygrid.propertyNodeContextMenu.on(c=>{mt.show([{title:"edit complex value",action:async()=>{t(c)}},{title:"edit string",action:async()=>{let o=prompt("enter value:");o&&(this._propertygrid.setPropertyValue(c.propertyPath,o),this._propertygrid.refresh())}},{title:"remove complex value",action:async()=>{this._propertygrid.setPropertyValue(c.propertyPath,void 0),this._propertygrid.refresh()}}],c.event)})}helpClicked(){let t=document.createElement("iframe");t.srcdoc=Se,t.style.cssText="width:100%; height:100%; border:none; display:block;",this.visualizationShell.openModal(t,{title:"Simple Script Editor Help",parent:this,x:-650,y:-100,width:620,height:620}),this.helpRequested.emit()}toggleCodeView(){if(!this._showingCode){let s=JSON.stringify({commands:this.getScriptCommands()},null,2);this._codeView.update(s),this._showCodeView(!0);return}let t=this._parseCodeViewScript();t&&(this._showCodeView(!1),this.loadScript(t))}_showCodeView(t){this._codeView.classList.toggle("visible",t),this._commandListDiv.classList.toggle("hidden",t),this._splitView.classList.toggle("code-mode",t),this._addCommandBtn.disabled=t,this._codeToggleBtn.innerText=t?"Visual":"Code",this._showingCode=t,t&&requestAnimationFrame(()=>this._codeView.activated())}_parseCodeViewScript(){let t;try{t=JSON.parse(this._codeView.getText())}catch(s){return alert(`Invalid JSON:
1208
- `+s.message),null}return Array.isArray(t?.commands)?t:(alert('The JSON must have a "commands" array.'),null)}loadScript(t){this._script=t,this._commandListFancyTree&&(this._commandListFancyTree.destroy(),this._commandListDiv=this._getDomElement("commandList"));let s=[];for(let e of this._script.commands)e=D.upgradeScriptCommand(e),s.push(this.createTreeItem(e));this._commandListFancyTree=new yt({...gt,element:this._commandListDiv,icon:!1,source:s,activate:e=>{this._propertygrid.selectedObject=e.node.data.data.item??null},render:e=>{let i=!!e.node.data.data?.branch;if(e.isNew){e.nodeElem.oncontextmenu=a=>(a.preventDefault(),!1);let r=document.createElement("span");if(r.style.cssText="display:inline-block; width:24px;",e.nodeElem.prepend(r),i)e.nodeElem._reservedRowWidth=r.offsetWidth;else{let a=document.createElement("div");a.className="drag-handle",a.title="Drag to reorder",a.innerHTML='<svg viewBox="0 0 24 24" width="14" height="14"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',e.nodeElem.prepend(a);let c=e.nodeElem.parentElement,o=document.createElement("span");o.style.cssText="display:inline-block; width:32px;",e.nodeElem.appendChild(o);let p=document.createElement("div");p.className="cmd";let h=document.createElement("img");h.src=ue+"icons/copy.svg",h.title="Duplicate",h.onclick=()=>{let u=structuredClone(e.node.data.data.item);e.node.parent.addChildren(this.createTreeItem(u)).moveTo(e.node,"after")};let m=document.createElement("img");m.src=ue+"icons/delete.svg",m.title="Remove",m.onclick=()=>e.node.remove(),p.append(h,m),c.appendChild(p),e.nodeElem._reservedRowWidth=r.offsetWidth+o.offsetWidth}}let n=e.nodeElem._reservedRowWidth??0;if(n){let r=e.nodeElem.querySelector("span.wb-title");if(r){let a=parseFloat(r.style.width);isNaN(a)||(r.style.width=Math.max(0,a-n)+"px")}}},dnd:{guessDropEffect:!0,preventRecursion:!0,preventVoidMoves:!1,serializeClipboardData:!1,dragStart:e=>this._dragFromHandle?(this._draggedNode=e.node,e.event.dataTransfer.effectAllowed="move",e.event.dataTransfer.dropEffect="move",e.event.dataTransfer.setData(j,"1"),!0):!1,dragEnd:()=>{this._draggedNode=null},dragEnter:e=>{let i=e.event.dataTransfer?.types.includes(j);return e.event.dataTransfer.dropEffect=i?"move":"copy",!!e.node.data.data?.branch?new Set(["over"]):new Set(["before","after"])},dragOver:e=>{let i=e.event.dataTransfer?.types.includes(j);e.event.dataTransfer.dropEffect=i?"move":"copy"},drop:async e=>{let i=e.event.dataTransfer?.types.includes(j);if(e.region==="over"){if(i&&this._draggedNode)this._draggedNode.moveTo(e.node,"appendChild"),this._draggedNode.setClass("wb-drag-source",!1);else{let r=e.event.dataTransfer?.getData("text/plain");r&&e.node.addChildren(this.createTreeItem({type:r}))}return}let n=e.region=="before"?"before":"after";if(i&&this._draggedNode)this._draggedNode.moveTo(e.node,n),this._draggedNode.setClass("wb-drag-source",!1);else{let r=e.event.dataTransfer?.getData("text/plain");if(r){let a={type:r},c=this.createTreeItem(a);e.node.parent.addChildren(c).moveTo(e.node,n)}}}}}),this._commandListFancyTree.root.children?.[0]?.setActive()}createTreeItem(t){if(t.type==="If"){let s=t;return s.trueCommands??=[],s.elseCommands??=[],{title:"If",expanded:!0,data:{item:t},children:[{title:"true",expanded:!0,data:{branch:"true"},children:s.trueCommands.map(e=>this.createTreeItem(e))},{title:"else",expanded:!0,data:{branch:"else"},children:s.elseCommands.map(e=>this.createTreeItem(e))}]}}return{title:t.type,data:{item:t}}}nodeToCommand(t){let s=t.data.data.item;if(s.type==="If"){let e=t.children?.find(n=>n.data.data?.branch==="true"),i=t.children?.find(n=>n.data.data?.branch==="else");s.trueCommands=(e?.children??[]).map(n=>this.nodeToCommand(n)),s.elseCommands=(i?.children??[]).map(n=>this.nodeToCommand(n))}return s}_getBranchContainerNode(t){let s=t;for(;s;){if(s.data?.data?.branch)return s;s=s.parent}return null}async addCommand(){let t=new L;t.loadCommands(this.scriptCommandsTypeInfo,this.commandDescriptions),t.title="Add Script Command",t.commandTypeChosen.on(()=>{if(t.selectedType){let e={type:t.selectedType},i=this.createTreeItem(e),n=this._getBranchContainerNode(this._commandListFancyTree.activeNode);n?n.addChildren(i):this._commandListFancyTree.addChildren(i)}});let s=new AbortController;t.closeRequested.on(()=>s.abort()),await this.visualizationShell.openModal(t,{title:"Add Script Command",x:300,y:50,width:620,height:400,parent:this,abortSignal:s.signal})}getScriptCommands(){if(this._showingCode){let s=this._parseCodeViewScript();s&&this.loadScript(s)}return this._commandListFancyTree.root.children.map(s=>this.nodeToCommand(s))}};customElements.define(W.is,W);import{BaseCustomWebComponentConstructorAppend as bt,css as xt,html as wt}from"@node-projects/base-custom-webcomponent";var M=class extends bt{static style=xt`
1217
+ `;static is="node-projects-visualization-simple-script-editor";_title;get title(){return this._title}set title(e){this._title=e}serviceContainer;instanceServiceContainer;visualizationHandler;visualizationShell;scriptCommandsTypeInfo;propertiesTypeInfo;helpRequested=new Nt;commandDescriptions={...Ae};_script;_commandListDiv;_commandListFancyTree;_propertygrid;_splitView;_codeView;_codeToggleBtn;_addCommandBtn;_showingCode=!1;_dragFromHandle=!1;_draggedNode=null;constructor(){super(),this._restoreCachedInititalValues(),this._commandListDiv=this._getDomElement("commandList"),this._propertygrid=this._getDomElement("propertygrid"),this._splitView=this._getDomElement("splitView"),this._codeView=this._getDomElement("codeView"),this._codeToggleBtn=this._getDomElement("codeToggleBtn"),this._addCommandBtn=this._getDomElement("addCommandBtn");let e=this._getDomElement("listContent");e.addEventListener("mousedown",t=>{this._dragFromHandle=!!t.target?.closest(".drag-handle")}),document.addEventListener("dragend",()=>{this._draggedNode=null},!0),e.addEventListener("dragover",t=>{if(t.preventDefault(),t.dataTransfer){let i=t.dataTransfer.types.includes(ee);t.dataTransfer.dropEffect=i?"move":"copy"}}),e.addEventListener("drop",t=>{if(t.preventDefault(),t.dataTransfer?.types.includes(ee)&&this._draggedNode){let s=this._commandListFancyTree.root.children,l=s?.[s.length-1];l&&this._draggedNode.moveTo(l,"after"),this._draggedNode.setClass("wb-drag-source",!1)}else{let s=t.dataTransfer?.getData("text/plain");if(s){let l={type:s};this._commandListFancyTree.root.addChildren(this.createTreeItem(l))}}}),this.shadowRoot.adoptedStyleSheets=[zt,At,r.style]}async ready(){this._parseAttributesToProperties(),this._bindingsParse(null,!0),this._assignEvents();let e=async o=>{let c=new re;c.visualizationHandler=this.visualizationHandler,c.visualizationShell=this.visualizationShell,c.serviceContainer=this.serviceContainer,c.instanceServiceContainer=this.instanceServiceContainer,c.bindableObjectsTarget="script",c.getTypeInfo=(d,h)=>Re(this.propertiesTypeInfo,d,h),c.showHead=!1,c.typeName="IScriptMultiplexValue",c.title='Complex for "'+o.propertyPath+'"',typeof o.value=="object"?c.selectedObject=o.value??{}:c.selectedObject={},c.bindingDoubleClicked=d=>{d.bindabletype=="property"?c.setPropertyValue("source","property"):d.bindabletype=="context"?c.setPropertyValue("source","context"):c.setPropertyValue("source","signal"),c.setPropertyValue("name",d.fullName),c.refresh()},await this.visualizationShell.openConfirmation(c,{x:100,y:100,width:400,height:500,parent:this})&&(this._propertygrid.setPropertyValue(o.propertyPath,c.selectedObject),this._propertygrid.refresh())},t=async o=>{let c=new ze;c.language="javascript",c.style.position="relative",c.code=o.value??"",await this.visualizationShell.openConfirmation(c,{title:"Edit formula",x:100,y:50,width:700,height:450,parent:this})&&(this._propertygrid.setPropertyValue(o.propertyPath,c.code),this._propertygrid.refresh())},i=["signal","property","elementProperty","signalInProperty","event","parameter","context","complexString","complexSignal","expression"],s=/^[A-Za-z_$][A-Za-z0-9_$]*$/,l=new Set(["break","case","catch","class","const","continue","debugger","default","delete","do","else","export","extends","finally","for","function","if","import","in","instanceof","new","return","super","switch","this","throw","try","typeof","var","void","while","with","yield","let","static","enum","await","implements","package","protected","interface","private","public","null","true","false","undefined","arguments","eval"]),a={signal:"read the value from a Signal",property:"read the value from a property of the customControl (not usable in screens)",elementProperty:"a property defined on the element raising the event",signalInProperty:"read the value from a Signal (wich name is in the Property)",event:"read the value of a property of the event object",parameter:"a parameter you hand over",context:"a value of the context",complexString:"a string with signals (contained in {})",complexSignal:"read the value from a signal wich name is build here (it can contain other signals in {})",expression:"js expression, 'ctx' is context object"},n=async o=>{let c=(o.value??[]).map(k=>({...k})),p=k=>{let N=(c[k].varName??"").trim();return N?s.test(N)?l.has(N)?`"${N}" is a reserved word and cannot be used as a variable name.`:c.some((E,B)=>B!==k&&(E.varName??"").trim()===N)?`"${N}" is used by more than one signal.`:null:`"${N}" is not a valid JavaScript variable name.`:null},d="height:22px; box-sizing:border-box; font-size:12px;",h=document.createElement("div");h.style.cssText="display:flex; flex-direction:column; gap:6px; padding:8px; height:100%; box-sizing:border-box; overflow-y:auto; font-size:12px;";let u=document.createElement("div");u.style.cssText="display:flex; align-items:center; gap:4px; font-weight:bold;";let g=document.createElement("span");g.textContent="Name",g.style.cssText="flex:0 0 120px;";let f=document.createElement("span");f.textContent="Typ",f.style.cssText="flex:0 0 130px;";let w=document.createElement("span");w.textContent="Signal",w.style.cssText="flex:1 1 auto;";let x=document.createElement("span");x.style.cssText="flex:0 0 22px;",u.append(g,f,w,x),h.appendChild(u);let T=document.createElement("div");T.style.cssText="display:flex; flex-direction:column; gap:4px;",h.appendChild(T);let z=document.createElement("div");z.style.cssText="flex:0 0 auto; margin-top:4px; padding-top:6px; border-top:1px solid #ccc; font-size:12px;";let P=document.createElement("div");P.style.cssText="font-weight:bold; margin-bottom:2px;";let G=document.createElement("div");G.style.cssText="color:#333; white-space:pre-line;",z.append(P,G);let q=k=>{P.textContent="Typ: "+k,G.textContent=a[k]??""},M=[],X=()=>{c.forEach((k,N)=>{let E=M[N];if(!E)return;let B=p(N);E.title=B??`Variable name used in the formula (defaults to __${N} if empty)`,E.style.borderColor=B?"#c0392b":"",E.style.backgroundColor=B?"#fdecea":""})},I=()=>{T.innerHTML="",M.length=0,c.forEach((k,N)=>{let E=document.createElement("div");E.style.cssText="display:flex; align-items:center; gap:4px;";let B=document.createElement("input");B.value=k.varName??"",B.placeholder="__"+N,B.style.cssText=d+" flex:0 0 120px; min-width: 120px; font-family:monospace;",B.oninput=()=>{k.varName=B.value||void 0,X()},M.push(B),E.appendChild(B);let m=document.createElement("select");m.style.cssText=d+" flex:0 0 130px;";for(let R of i){let S=document.createElement("option");S.value=R,S.textContent=R,k.source===R&&(S.selected=!0),m.appendChild(S)}m.onchange=()=>{k.source=m.value,q(m.value)},m.onfocus=()=>q(m.value),E.appendChild(m);let b=document.createElement("input");b.value=k.name??"",b.placeholder="e.g. srm.rbg{__tagRoot}.error",b.style.cssText=d+" flex:1 1 auto;",b.oninput=()=>{k.name=b.value},E.appendChild(b);let v=document.createElement("button");v.title="Remove signal",v.style.cssText=d+" flex:0 0 22px; width:22px; padding:0; display:flex; align-items:center; justify-content:center;";let V=document.createElement("img");V.src=_e+"icons/delete.svg",V.style.cssText="width:12px; height:12px;",v.appendChild(V),v.onclick=()=>{c.splice(N,1),I()},E.appendChild(v),T.appendChild(E)}),X()};I();let L=document.createElement("button");L.textContent="+ Add signal",L.style.cssText=d+" align-self:flex-start; padding:0 8px;",L.onclick=()=>{c.push({source:"signal",name:""}),I()},h.appendChild(L),q(c[0]?.source??"signal"),h.appendChild(z),await this.visualizationShell.openConfirmation(h,{title:"Edit signals",x:100,y:50,width:500,height:400,parent:this})&&(this._propertygrid.setPropertyValue(o.propertyPath,c),this._propertygrid.refresh())};this._propertygrid.visualizationHandler=this.visualizationHandler,this._propertygrid.visualizationShell=this.visualizationShell,this._propertygrid.serviceContainer=this.serviceContainer,this._propertygrid.instanceServiceContainer=this.instanceServiceContainer,this._propertygrid.bindableObjectsTarget="script",this._propertygrid.setNameColumnWidth(130),this._propertygrid.getTypeInfo=(o,c)=>{let p=Re(this.scriptCommandsTypeInfo,o,c);return p&&(c==="If"||o?.type==="If")&&(p.properties=p.properties.filter(d=>d.name!=="trueCommands"&&d.name!=="elseCommands")),p},this._propertygrid.getSpecialEditorForType=async(o,c,p,d,h)=>{if(!o.specialAllreadyAdded&&(o.specialAllreadyAdded=!0,o.format!=="collection"))if(o.format==="signalList"){let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.innerText="del",u.onclick=()=>{this._propertygrid.setPropertyValue(p,void 0),this._propertygrid.refresh()},d.nodeElem.insertAdjacentElement("afterbegin",u);let g=Array.isArray(c)?c:[],f=document.createElement("div");f.style.display="flex";let w=document.createElement("span");w.innerText=g.map((T,z)=>(T?.varName||"__"+z)+": "+(T?.source??"")+":"+(T?.name??"")).join(", "),w.style.overflow="hidden",w.style.whiteSpace="nowrap",w.style.textOverflow="ellipsis",w.style.flexGrow="1",w.title=JSON.stringify(g),f.appendChild(w);let x=document.createElement("button");return x.innerText="...",x.onclick=()=>{n({value:g,propertyPath:p})},f.appendChild(x),d.nodeElem.style.display="flex",f}else if(o.format==="formula"){let u=document.createElement("div");u.style.cssText="display:flex; width:100%; height:100%; align-items:stretch;";let g=new ze;g.language="javascript",g.singleRow=!0,g.style.cssText="flex:1 1 auto; min-width:0; height:100%; position:relative; overflow:hidden;",g.code=c??"",g.addEventListener("code-changed",()=>{this._propertygrid.setPropertyValue(p,g.code)}),u.appendChild(g);let f=document.createElement("button");return f.innerText="...",f.title="Open in larger editor",f.style.cssText="flex:0 0 28px; width:20px;",f.onclick=()=>t({value:g.code,propertyPath:p}),u.appendChild(f),d.nodeElem.style.display="flex",u}else if(typeof c=="object"&&c!==null||o.format==="complex"){let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.innerText="del",u.onclick=()=>{this._propertygrid.setPropertyValue(p,void 0),this._propertygrid.refresh()},d.nodeElem.insertAdjacentElement("afterbegin",u);let g=document.createElement("div");g.style.display="flex";let f=document.createElement("span");c?f.innerText=(c.source??"")+": "+(c.name??""):f.innerText="",f.style.overflow="hidden",f.style.whiteSpace="nowrap",f.style.textOverflow="ellipsis",f.style.flexGrow="1",f.title=JSON.stringify(c),g.appendChild(f);let w=document.createElement("button");return w.innerText="...",w.onclick=()=>{e({value:c,propertyPath:p})},g.appendChild(w),d.nodeElem.style.display="flex",g}else{let u=document.createElement("button");u.style.height="calc(100% - 6px)",u.style.position="relative",u.style.display="flex",u.style.justifyContent="center",u.style.width="20px",u.style.boxSizing="content-box",u.title="complex property value",u.style.opacity="0.2",u.innerText="...",u.onclick=()=>{e({value:c,propertyPath:p})},d.nodeElem.insertAdjacentElement("afterbegin",u),d.nodeElem.style.display="flex"}return null},this._propertygrid.propertyNodeContextMenu.on(o=>{It.show([{title:"edit complex value",action:async()=>{e(o)}},{title:"edit string",action:async()=>{let c=prompt("enter value:");c&&(this._propertygrid.setPropertyValue(o.propertyPath,c),this._propertygrid.refresh())}},{title:"remove complex value",action:async()=>{this._propertygrid.setPropertyValue(o.propertyPath,void 0),this._propertygrid.refresh()}}],o.event)})}helpClicked(){let e=document.createElement("iframe");e.srcdoc=Ve,e.style.cssText="width:100%; height:100%; border:none; display:block;",this.visualizationShell.openModal(e,{title:"Simple Script Editor Help",parent:this,x:-650,y:-100,width:620,height:620}),this.helpRequested.emit()}toggleCodeView(){if(!this._showingCode){let t=JSON.stringify({commands:this.getScriptCommands()},null,2);this._codeView.update(t),this._showCodeView(!0);return}let e=this._parseCodeViewScript();e&&(this._showCodeView(!1),this.loadScript(e))}_showCodeView(e){this._codeView.classList.toggle("visible",e),this._commandListDiv.classList.toggle("hidden",e),this._splitView.classList.toggle("code-mode",e),this._addCommandBtn.disabled=e,this._codeToggleBtn.innerText=e?"Visual":"Code",this._showingCode=e,e&&requestAnimationFrame(()=>this._codeView.activated())}_parseCodeViewScript(){let e;try{e=JSON.parse(this._codeView.getText())}catch(t){return alert(`Invalid JSON:
1218
+ `+t.message),null}return Array.isArray(e?.commands)?e:(alert('The JSON must have a "commands" array.'),null)}loadScript(e){this._script=e,this._commandListFancyTree&&(this._commandListFancyTree.destroy(),this._commandListDiv=this._getDomElement("commandList"));let t=[];for(let i of this._script.commands)i=Q.upgradeScriptCommand(i),t.push(this.createTreeItem(i));this._commandListFancyTree=new Rt({...Vt,element:this._commandListDiv,icon:!1,source:t,activate:i=>{this._propertygrid.selectedObject=i.node.data.data.item??null},render:i=>{let s=!!i.node.data.data?.branch;if(i.isNew){i.nodeElem.oncontextmenu=n=>(n.preventDefault(),!1);let a=document.createElement("span");if(a.style.cssText="display:inline-block; width:24px;",i.nodeElem.prepend(a),s)i.nodeElem._reservedRowWidth=a.offsetWidth;else{let n=document.createElement("div");n.className="drag-handle",n.title="Drag to reorder",n.innerHTML='<svg viewBox="0 0 24 24" width="14" height="14"><path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',i.nodeElem.prepend(n);let o=i.nodeElem.parentElement,c=document.createElement("span");c.style.cssText="display:inline-block; width:32px;",i.nodeElem.appendChild(c);let p=document.createElement("div");p.className="cmd";let d=document.createElement("img");d.src=_e+"icons/copy.svg",d.title="Duplicate",d.onclick=()=>{let u=structuredClone(i.node.data.data.item);i.node.parent.addChildren(this.createTreeItem(u)).moveTo(i.node,"after")};let h=document.createElement("img");h.src=_e+"icons/delete.svg",h.title="Remove",h.onclick=()=>i.node.remove(),p.append(d,h),o.appendChild(p),i.nodeElem._reservedRowWidth=a.offsetWidth+c.offsetWidth}}let l=i.nodeElem._reservedRowWidth??0;if(l){let a=i.nodeElem.querySelector("span.wb-title");if(a){let n=parseFloat(a.style.width);isNaN(n)||(a.style.width=Math.max(0,n-l)+"px")}}},dnd:{guessDropEffect:!0,preventRecursion:!0,preventVoidMoves:!1,serializeClipboardData:!1,dragStart:i=>this._dragFromHandle?(this._draggedNode=i.node,i.event.dataTransfer.effectAllowed="move",i.event.dataTransfer.dropEffect="move",i.event.dataTransfer.setData(ee,"1"),!0):!1,dragEnd:()=>{this._draggedNode=null},dragEnter:i=>{let s=i.event.dataTransfer?.types.includes(ee);return i.event.dataTransfer.dropEffect=s?"move":"copy",!!i.node.data.data?.branch?new Set(["over"]):new Set(["before","after"])},dragOver:i=>{let s=i.event.dataTransfer?.types.includes(ee);i.event.dataTransfer.dropEffect=s?"move":"copy"},drop:async i=>{let s=i.event.dataTransfer?.types.includes(ee);if(i.region==="over"){if(s&&this._draggedNode)this._draggedNode.moveTo(i.node,"appendChild"),this._draggedNode.setClass("wb-drag-source",!1);else{let a=i.event.dataTransfer?.getData("text/plain");a&&i.node.addChildren(this.createTreeItem({type:a}))}return}let l=i.region=="before"?"before":"after";if(s&&this._draggedNode)this._draggedNode.moveTo(i.node,l),this._draggedNode.setClass("wb-drag-source",!1);else{let a=i.event.dataTransfer?.getData("text/plain");if(a){let n={type:a},o=this.createTreeItem(n);i.node.parent.addChildren(o).moveTo(i.node,l)}}}}}),this._commandListFancyTree.root.children?.[0]?.setActive()}createTreeItem(e){if(e.type==="If"){let t=e;return t.trueCommands??=[],t.elseCommands??=[],{title:"If",expanded:!0,data:{item:e},children:[{title:"true",expanded:!0,data:{branch:"true"},children:t.trueCommands.map(i=>this.createTreeItem(i))},{title:"else",expanded:!0,data:{branch:"else"},children:t.elseCommands.map(i=>this.createTreeItem(i))}]}}return{title:e.type,data:{item:e}}}nodeToCommand(e){let t=e.data.data.item;if(t.type==="If"){let i=e.children?.find(l=>l.data.data?.branch==="true"),s=e.children?.find(l=>l.data.data?.branch==="else");t.trueCommands=(i?.children??[]).map(l=>this.nodeToCommand(l)),t.elseCommands=(s?.children??[]).map(l=>this.nodeToCommand(l))}return t}_getBranchContainerNode(e){let t=e;for(;t;){if(t.data?.data?.branch)return t;t=t.parent}return null}async addCommand(){let e=new Z;e.loadCommands(this.scriptCommandsTypeInfo,this.commandDescriptions),e.title="Add Script Command",e.commandTypeChosen.on(()=>{if(e.selectedType){let i={type:e.selectedType},s=this.createTreeItem(i),l=this._getBranchContainerNode(this._commandListFancyTree.activeNode);l?l.addChildren(s):this._commandListFancyTree.addChildren(s)}});let t=new AbortController;e.closeRequested.on(()=>t.abort()),await this.visualizationShell.openModal(e,{title:"Add Script Command",x:300,y:50,width:620,height:400,parent:this,abortSignal:t.signal})}getScriptCommands(){if(this._showingCode){let t=this._parseCodeViewScript();t&&this.loadScript(t)}return this._commandListFancyTree.root.children.map(t=>this.nodeToCommand(t))}};customElements.define(te.is,te);import{BaseCustomWebComponentConstructorAppend as Dt,css as Lt,html as jt}from"@node-projects/base-custom-webcomponent";var ie=class extends Dt{static style=Lt`
1209
1219
  :host {
1210
1220
  display: grid;
1211
1221
  grid-template-columns: 80px 80px 80px auto;
@@ -1219,7 +1229,7 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1219
1229
 
1220
1230
  span {
1221
1231
  font-size: 10px;
1222
- }`;static template=wt`
1232
+ }`;static template=jt`
1223
1233
  <span></span>
1224
1234
  <span>name</span>
1225
1235
  <span>type</span>
@@ -1238,7 +1248,7 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1238
1248
  <input hidden="[[item.type !== 'boolean']]" type="checkbox" checked="{{item.value}}">
1239
1249
  <div hidden="[[item.type !== 'null']]">-null-</div>
1240
1250
  </template>
1241
- <button @click="[[this._add()]]" style="width: 40px; height: 20px; align-self: center;">add</button>`;static is="node-projects-visualization-parameter-editor";constructor(){super(),this._restoreCachedInititalValues()}ready(){this._bindingsParse()}_parameterArray;setParametersObject(t){t!=null?this._parameterArray=Object.keys(t).map(s=>({key:s,type:typeof t[s]=="object"?"null":typeof t[s],value:t[s]})):this._parameterArray=[],this._bindingsRefresh()}getParametersObject(){let t=!1,s={};for(let e of this._parameterArray)if(e.key)switch(t=!0,s[e.key]=null,e.type){case"string":s[e.key]=e.value.toString();break;case"number":let i=parseFloat(e.value);s[e.key]=isNaN(i)?0:i;break;case"boolean":s[e.key]=!!e.value;break}return t?s:null}_remove(t){this._parameterArray.splice(t,1),this._bindingsRefresh()}_add(){this._parameterArray.push({type:"null"}),this._bindingsRefresh()}};customElements.define(M.is,M);import{BaseCustomWebComponentConstructorAppend as _t,css as St,html as Ee}from"@node-projects/base-custom-webcomponent";import{ContextMenu as Ne,copyTextToClipboard as Be,getTextFromClipboard as Ie,PropertiesHelper as kt}from"@node-projects/web-component-designer";var ee=class l extends _t{static style=St`
1251
+ <button @click="[[this._add()]]" style="width: 40px; height: 20px; align-self: center;">add</button>`;static is="node-projects-visualization-parameter-editor";constructor(){super(),this._restoreCachedInititalValues()}ready(){this._bindingsParse()}_parameterArray;setParametersObject(e){e!=null?this._parameterArray=Object.keys(e).map(t=>({key:t,type:typeof e[t]=="object"?"null":typeof e[t],value:e[t]})):this._parameterArray=[],this._bindingsRefresh()}getParametersObject(){let e=!1,t={};for(let i of this._parameterArray)if(i.key)switch(e=!0,t[i.key]=null,i.type){case"string":t[i.key]=i.value.toString();break;case"number":let s=parseFloat(i.value);t[i.key]=isNaN(s)?0:s;break;case"boolean":t[i.key]=!!i.value;break}return e?t:null}_remove(e){this._parameterArray.splice(e,1),this._bindingsRefresh()}_add(){this._parameterArray.push({type:"null"}),this._bindingsRefresh()}};customElements.define(ie.is,ie);import{BaseCustomWebComponentConstructorAppend as Pt,css as Mt,html as De}from"@node-projects/base-custom-webcomponent";import{ContextMenu as Le,copyTextToClipboard as je,getTextFromClipboard as Pe,PropertiesHelper as Wt}from"@node-projects/web-component-designer";var ge=class r extends Pt{static style=Mt`
1242
1252
  :host {
1243
1253
  display: grid;
1244
1254
  grid-template-columns: 20px 1fr auto;
@@ -1272,22 +1282,81 @@ ${B('{ "source": "parameter", "name": "myParam" }')} <span class="cs-comment">/
1272
1282
  }
1273
1283
  button {
1274
1284
  cursor: pointer;
1275
- }`;static template=Ee`
1285
+ }`;static template=De`
1276
1286
  <template repeat:item="[[this.events]]">
1277
1287
  <div @click="[[this._ctxMenu(event, item)]]" @contextmenu="[[this._ctxMenu(event, item)]]" class="rect" title="[[this._getScriptType(item)]]" css:background-color="[[this._getScriptTypeColor(item)]]"></div>
1278
1288
  <a @click="[[this._showContextMenuAssignScript(event, item, false)]]" @contextmenu="[[this._ctxMenu(event, item)]]" title="[[item.name]]">[[item.name]]</a>
1279
1289
  <div>[[this._createControlsForScript(item)]]</div>
1280
1290
  </template>
1281
1291
  <span style="grid-column: 1 / span 3; margin-top: 8px; margin-left: 3px;">add event:</span>
1282
- <input id="addEventInput" style="grid-column: 1 / span 3; margin: 5px;" @keypress="[[this._addEvent(event)]]" type="text">`;static editRowTemplate=Ee`
1292
+ <input id="addEventInput" style="grid-column: 1 / span 3; margin: 5px;" @keypress="[[this._addEvent(event)]]" type="text">`;static editRowTemplate=De`
1283
1293
  <div style="display: flex; justify-content: flex-end;">
1284
1294
  <input value="[[this._getScriptName(item)]]" @keypress="[[this._changeScriptName(event, item)]]" hidden="[[this._getScriptType(item) !== 'js']]" placeholder="name" title="name" style="min-width: 50px; flex-basis: 30px; flex-grow: 2;" class="mth" type="text">
1285
1295
  <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">
1286
1296
  <button css:background="[[this._hasParameters(item) ? 'lime' : '']]" style="display: flex; padding: 0; flex-grow: 0;" title="parameter" @click="[[this._editParameter(event, item)]]">p</button>
1287
- </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(t,s,e,i,n,r){this._visualizationHandler=t,this._visualizationShell=s,this._scriptCommandsTypeInfo=e,this._propertiesTypeInfo=i,this._blocklyToolbox=n,this._commandDescriptions=r}set instanceServiceContainer(t){this._instanceServiceContainer=t,this._selectionChangedHandler?.dispose(),this._selectionChangedHandler=this._instanceServiceContainer.selectionService.onSelectionChanged.on(s=>{this.selectedItems=s.selectedElements}),this.selectedItems=this._instanceServiceContainer.selectionService.selectedElements}_createControlsForScript(t){switch(this._getScriptType(t)){case"none":return""}return this.constructor.editRowTemplate.content.cloneNode(!0)}_getScriptName(t){if(this.selectedItems[0].hasAttribute("@"+t.name)){let s=this.selectedItems[0].getAttribute("@"+t.name);if(s[0]==="{"){if(s.includes("name"))return JSON.parse(s).name}else return s}return null}async _changeScriptName(t,s){if(t.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+s.name)){let e=t.target.value,i=this.selectedItems[0].getAttribute("@"+s.name);if(i.startsWith("{")){let n=JSON.parse(i);n.name=e,this._selectedItems[0].setAttribute("@"+s.name,JSON.stringify(n))}else this._selectedItems[0].setAttribute("@"+s.name,e)}}_getRelativeSignalsPath(t){if(this.selectedItems[0].hasAttribute("@"+t.name)){let s=this.selectedItems[0].getAttribute("@"+t.name);if(s[0]==="{"&&s.includes("relativeSignalsPath"))return JSON.parse(s).relativeSignalsPath}return null}async _changeRelativeSignalsPath(t,s){if(t.key=="Enter"&&this.selectedItems&&this.selectedItems.length&&this.selectedItems[0].hasAttribute("@"+s.name)){let e=t.target.value,i=this.selectedItems[0].getAttribute("@"+s.name);if(i.startsWith("{")){let n=JSON.parse(i);n.relativeSignalsPath=e,this._selectedItems[0].setAttribute("@"+s.name,JSON.stringify(n))}else{let n={name:i,relativeSignalsPath:e};this._selectedItems[0].setAttribute("@"+s.name,JSON.stringify(n))}}}_hasParameters(t){return this.selectedItems[0].hasAttribute("@"+t.name)?this.selectedItems[0].getAttribute("@"+t.name).includes("parameters"):!1}_getScriptTypeColor(t){let s=this._getScriptType(t);return l.scriptTypeColors[s]??"white"}_getScriptType(t){if(t.designItem.hasAttribute("@"+t.name)){let s=t.designItem.getAttribute("@"+t.name);if(s.startsWith("{")){let e=JSON.parse(s);return"blocks"in e?"blockly":"commands"in e?"script":"js"}else return s==""?"empty":"js"}return"none"}_getEventMethodname(t){return this.selectedItems.length?this.selectedItems[0].getAttribute("@"+t.name):""}_inputMthName(t,s){let e=t.target;this.selectedItems[0].setAttribute("@"+s.name,e.value)}_ctxMenu(t,s){t.preventDefault();let e=this._getScriptType(s);if(e=="empty")this._showContextMenuAssignScript(t,s,!0);else if(e!="none"){let i=[{title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+s.name),this._bindingsRefresh()}},{title:"-"},{title:"copy",action:()=>{Be(this.selectedItems[0].getAttribute("@"+s.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+s.name,await Ie()),this._bindingsRefresh()}}];Ne.show(i,t)}else this._showContextMenuAssignScript(t,s,!0)}async _addEvent(t){if(t.key=="Enter"){let s=this._getDomElement("addEventInput");this._selectedItems[0].setAttribute("@"+kt.camelToDashCase(s.value.replaceAll(" ","-")),""),s.value="",this.scrollTop=0,this.refresh()}}_createAssignScriptContextMenu(t,s){let e=[{title:"Simple Script",action:()=>{this._editEvent("script",t,s)}},{title:"Javascript",action:()=>{let n=prompt("name of function ?");n&&(this._selectedItems[0].setAttribute("@"+s.name,n),this.refresh(),this._editEvent("js",null,s))}},{title:"Blockly",action:()=>{this._editBlockly(null,s)}}],i=this._getScriptType(s);return i!="none"&&(e.push({title:"-"}),e.push({title:"remove",action:()=>{this.selectedItems[0].removeAttribute("@"+s.name),this._bindingsRefresh()}})),i!="empty"&&e.push({title:"-"},{title:"copy",action:()=>{Be(this.selectedItems[0].getAttribute("@"+s.name))}},{title:"paste",action:async()=>{this.selectedItems[0].setAttribute("@"+s.name,await Ie()),this._bindingsRefresh()}}),e}async _showContextMenuAssignScript(t,s,e){t.preventDefault();let i=this._getScriptType(s);if(i!="none"&&i!="empty"&&!e)this._editEvent(i,t,s);else{let n=this._createAssignScriptContextMenu(t,s);Ne.show(n,t)}}async _editParameter(t,s){let e=new M,i={};e.title="ParameterEditor for '"+s.name+"' of '"+s.designItem.name+"'";let n=s.designItem.getAttribute("@"+s.name);if(n&&n[0]=="{")try{i=JSON.parse(n).parameters}catch{}if(e.setParametersObject(i),await this._visualizationShell.openConfirmation(e,{x:100,y:100,width:700,height:500})){let a=e.getParametersObject(),c={name:n,parameters:a};n&&n[0]=="{"&&(c=JSON.parse(n),c.parameters=a),a==null&&delete c.parameters;let o=JSON.stringify(c);s.designItem.setAttribute("@"+s.name,o),this._bindingsRefresh()}}async _editBlockly(t,s){let e=new A(this._blocklyToolbox);e.title="Blockly Script for '"+s.name+"' of '"+s.designItem.name+"'";let i=s.designItem.getAttribute("@"+s.name),n=null,r=null;if(i){let c=JSON.parse(i);n=c.parameters,r=c.relativeSignalsPath,e.load(c)}if(await this._visualizationShell.openConfirmation(e,{x:100,y:100,width:700,height:500})){let c=e.save();n&&(c.parameters=n),r&&(c.relativeSignalsPath=r),s.designItem.setAttribute("@"+s.name,JSON.stringify(c)),this._bindingsRefresh()}}async _editJavascript(t,s){}async _editSimpleScript(t,s){let e=s.designItem.getAttribute("@"+s.name);if(!e||e.startsWith("{")){let i={commands:[]},n=null,r=null;e&&(i=JSON.parse(e),n=i.parameters,r=i.relativeSignalsPath);let a=new W;if(a.serviceContainer=s.designItem.serviceContainer,a.instanceServiceContainer=s.designItem.instanceServiceContainer,a.scriptCommandsTypeInfo=this._scriptCommandsTypeInfo,a.propertiesTypeInfo=this._propertiesTypeInfo,a.visualizationShell=this._visualizationShell,a.visualizationHandler=this._visualizationHandler,this._commandDescriptions&&(a.commandDescriptions={...a.commandDescriptions,...this._commandDescriptions}),a.loadScript(i),a.title="Script '"+s.name+"' on "+s.designItem.name,await this._visualizationShell.openConfirmation(a,{title:a.title,width:600,height:500})){let o=a.getScriptCommands();if(o&&o.length){let p={commands:o};n&&(p.parameters=n),r&&(p.relativeSignalsPath=r);let h=JSON.stringify(p);s.designItem.setAttribute("@"+s.name,h),this._bindingsRefresh()}}}}async _editEvent(t,s,e){t=="js"?this._editJavascript(s,e):t=="blockly"?this._editBlockly(s,e):this._editSimpleScript(s,e)}refresh(){this._selectedItems!=null&&this._selectedItems.length?this.events=this._selectedItems[0].serviceContainer.getLastServiceWhere("eventsService",t=>t.isHandledElementFromEventsService(this._selectedItems[0])).getPossibleEvents(this._selectedItems[0]).map(t=>({...t,designItem:this._selectedItems[0]})):this.events=[],this._bindingsRefresh()}get selectedItems(){return this._selectedItems}set selectedItems(t){this._selectedItems!=t&&(this._selectedItems=t,this.refresh())}};customElements.define(ee.is,ee);import{TypedEvent as Ct,cssFromString as Tt}from"@node-projects/base-custom-webcomponent";import{BindingTarget as y}from"@node-projects/web-component-designer/dist/elements/item/BindingTarget.js";import{PropertiesHelper as v}from"@node-projects/web-component-designer/dist/elements/services/propertiesService/services/PropertiesHelper.js";var I="bind-prop:",P="bind-attr:",F="bind-class:",H="bind-css:",J="bind-cssvar:",T="bind-content:",he="bind-visible:",Et="bind(",Nt="--tmpBinding_",qs=/{{(.*)}}/;function X(l){return l.constructor?.elementProperties!=null}function ge(l){let t=[],s=[],e="";for(let i=0;i<l.length;i++)l[i]=="{"?(t.push(e),e=""):l[i]=="}"?(s.push(e),e=""):e+=l[i];return t.push(e),{parts:t,signals:s}}function te(l,t){let s=t.split("."),e=l;for(let i of s){if(e==null||typeof e!="object")return;e=e[i]}return e}var me=class{parts;signals;values;unsubscribeTargetValue;cleanupCalls=[];combinedName;disposed;valueChangedCb;visualizationHandler;element;relativeSignalPath;constructor(t,s,e,i,n,r,a,c){this.visualizationHandler=s,this.valueChangedCb=i,this.element=n,this.relativeSignalPath=r,this.parseIndirectBinding(e),this.values=new Array(this.signals.length);for(let o=0;o<this.signals.length;o++){let p=this.signals[o];if(p[0]==="?"&&p[1]==="?"){let u=p.substring(2);if(u.includes(".")){let d=te(a,u);this.handleValueChanged(d,o)}else{this.handleValueChanged(a[u],o);let d=()=>this.handleValueChanged(a[u],o),g=t.getChangedEventName(a,u);a.addEventListener(g,d),this.cleanupCalls.push(()=>a.removeEventListener(g,d))}continue}else if(p[0]==="#"&&p[1]==="#"){let u=p.substring(2);if(u.includes(".")){let d=te(n,u);this.handleValueChanged(d,o)}else{this.handleValueChanged(n[u],o);let d=()=>this.handleValueChanged(n[u],o),g=t.getChangedEventName(n,u);n.addEventListener(g,d),this.cleanupCalls.push(()=>n.removeEventListener(g,d))}continue}else if(p[0]==="\xA7"){let u=p.substring(1),d=c.valueProvider(u,{element:n,relativeSignalPath:r,root:a});d instanceof Promise?d.then(f=>this.handleValueChanged(f,o)):this.handleValueChanged(d,o),c.valueChangedCallbacks||(c.valueChangedCallbacks=new Map);let g=c.valueChangedCallbacks.get(u);g==null&&(g=[],c.valueChangedCallbacks.set(u,g)),g.push(()=>{let f=c.valueProvider(u,{element:n,relativeSignalPath:r,root:a});f instanceof Promise?f.then(b=>this.handleValueChanged(b,o)):this.handleValueChanged(f,o)})}else(p[0]==="?"||p[0]==="#")&&(p.includes(".")?p=te(a,p.substring(1)):p=a[p.substring(1)]);let h=(u,d)=>this.handleValueChanged(d.val,o),m=this.visualizationHandler.subscribeState(p,h);this.cleanupCalls.push(()=>this.visualizationHandler.unsubscribeState(this.signals[o],h,m))}}parseIndirectBinding(t){let{parts:s,signals:e}=ge(t);this.parts=s,this.signals=e;for(let i=0;i<e.length;i++)e[i][0]=="."&&(e[i]=this.visualizationHandler.getNormalizedSignalName(e[i],this.relativeSignalPath,this.element))}handleValueChanged(t,s){this.values[s]=t;let e=this.parts[0];for(let i=0;i<this.parts.length-1;i++){let n=this.values[i];if(n==null)return;e+=n+this.parts[i+1]}if(e[0]=="."&&(e=this.visualizationHandler.getNormalizedSignalName(e,this.relativeSignalPath,this.element)),this.combinedName!=e&&(this.unsubscribeTargetValue&&this.visualizationHandler.unsubscribeState(this.combinedName,this.unsubscribeTargetValue[0],this.unsubscribeTargetValue[1]),!this.disposed)){this.combinedName=e;let i=(n,r)=>this.valueChangedCb(r);this.unsubscribeTargetValue=[i,this.visualizationHandler.subscribeState(e,i)]}}dispose(){this.disposed=!0,this.unsubscribeTargetValue&&(this.visualizationHandler.unsubscribeState(this.combinedName,this.unsubscribeTargetValue[0],this.unsubscribeTargetValue[1]),this.unsubscribeTargetValue=null);for(let t=0;t<this.signals.length;t++)this.cleanupCalls[t]()}setState(t){this.disposed||this.visualizationHandler.setState(this.combinedName,t)}},Oe=class l{_visualizationHandler;namedConverterCallback;constructor(t){this._visualizationHandler=t}getChangedEventName(t,s){let e=s.indexOf("::");return e>=0?s.substring(e+2):t instanceof HTMLInputElement||t instanceof HTMLSelectElement?"change":X(t)?v.camelToDashCase(s):v.camelToDashCase(s)+"-changed"}parseBinding(t,s,e,i,n){let r=s.substring(n.length);if(i===y.cssvar&&(r="--"+r),!e.startsWith("{")){let c={signal:e,target:i};if(e[0]==="="){if(e=e.substring(1),c.signal=e,e.includes("::")){let o=e.split("::");e=o[0],c.signal=e,c.events=o[1].split(",")}c.twoWay=!0,c.events||(t instanceof HTMLInputElement?c.events=[this.getChangedEventName(t,r)]:t instanceof HTMLSelectElement?c.events=[this.getChangedEventName(t,r)]:X(t)?c.events=[this.getChangedEventName(t,r)]:(c.events=[this.getChangedEventName(t,r)],c.maybeLitElement=!0,c.litEventNames=[this.getChangedEventName(t,r)]))}if(e[0]==="!"&&(c.signal=e.substring(1),c.inverted=!0),c.signal.includes(";")){let o=c.signal.split(";");c.expression=o.pop(),c.signal=o.join(";")}return i===y.cssvar||i===y.class?[l.dotToCamelCase(r),c]:i===y.attribute?[r,c]:[v.dashToCamelCase(r),c]}let a=JSON.parse(e);return a.target=i,a.twoWay&&(a.events==null||a.events.length==0)&&(t instanceof HTMLInputElement?a.events=["change"]:t instanceof HTMLSelectElement?a.events=["change"]:a.events=[this.getChangedEventName(t,r)]),i===y.cssvar||i===y.class?[l.dotToCamelCase(r),a]:i===y.attribute?[r,a]:[v.dashToCamelCase(r),a]}serializeBinding(t,s,e){let i={...e};delete i.type,e.twoWay?e.events!=null&&e.events.length==1&&(t instanceof HTMLInputElement&&e.events?.[0]=="change"||t instanceof HTMLSelectElement&&e.events?.[0]=="change"||X(t)&&e.events?.[0]==s||!X(t)&&e.events?.[0]==s+"-changed")&&delete i.events:(delete i.events,delete i.expressionTwoWay);let n=i.twoWay&&i.events?.length>0?"::"+i.events.join(","):"",r=!1;return(n&&e.expression?.includes("::")||e.expressionTwoWay?.includes("::"))&&(r=!0),e.signal.trim()[0]=="{"&&(r=!0),!r&&e.target==y.property&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?s=="textContent"?[T+"text",(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:s=="innerHTML"?[T+"html",(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:[I+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.property&&e.expression&&!e.expression.includes(`
1288
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?s=="textContent"?[T+"text",(e.inverted?"!":"")+e.signal+";"+e.expression+n]:s=="innerHTML"?[T+"html",(e.inverted?"!":"")+e.signal+";"+e.expression+n]:[I+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.attribute&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[P+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.attribute&&e.expression&&!e.expression.includes(`
1289
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[P+v.camelToDashCase(s),(e.twoWay?"=":"")+(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.class&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[F+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.class&&e.expression&&!e.expression.includes(`
1290
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[F+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.css&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[H+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.css&&e.expression&&!e.expression.includes(`
1291
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[H+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:!r&&e.target==y.cssvar&&!e.expression&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[J+l.camelToDotCase(s.substring(2)),(e.inverted?"!":"")+e.signal+(!e.twoWay&&e.signal.includes(";")?";":"")+n]:!r&&e.target==y.cssvar&&e.expression&&!e.expression.includes(`
1292
- `)&&!e.expression.includes(";")&&!e.expressionTwoWay&&e.converter==null&&!e.historic&&!e.writeBackSignal?[J+v.camelToDashCase(s),(e.inverted?"!":"")+e.signal+";"+e.expression+n]:((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==y.content?[T+"html",JSON.stringify(i)]:e.target==y.attribute?[P+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.class?[F+l.camelToDotCase(s),JSON.stringify(i)]:e.target==y.css?[H+v.camelToDashCase(s),JSON.stringify(i)]:e.target==y.cssvar?[J+l.camelToDotCase(s.substring(2)),JSON.stringify(i)]:e.target==y.property&&s=="innerHTML"?[T+"html",JSON.stringify(i)]:e.target==y.property&&s=="textContent"?[T+"text",JSON.stringify(i)]:[I+v.camelToDashCase(s),JSON.stringify(i)])}getBindingAttributeName(t,s,e){return e==y.attribute?P+v.camelToDashCase(s):e==y.class?F+l.camelToDotCase(s):e==y.css?H+v.camelToDashCase(s):e==y.visible?he:e==y.cssvar?J+l.camelToDotCase(s):e==y.property&&s=="innerHTML"?T+"html":e==y.property&&s=="textContent"?T+"text":I+v.camelToDashCase(s)}*getBindings(t){if(t.attributes)for(let s of t.attributes)s.name.startsWith(I)?yield this.parseBinding(t,s.name,s.value,y.property,I):s.name.startsWith(T)?yield this.parseBinding(t,s.name==="bind-content:html"?"bind-prop:inner-h-t-m-l":"bind-prop:text-content",s.value,y.property,I):s.name.startsWith(P)?yield this.parseBinding(t,s.name,s.value,y.attribute,P):s.name.startsWith(F)?yield this.parseBinding(t,s.name,s.value,y.class,F):s.name.startsWith(H)?yield this.parseBinding(t,s.name,s.value,y.css,H):s.name.startsWith(J)?yield this.parseBinding(t,s.name,s.value,y.cssvar,J):s.name.startsWith(he)&&(yield this.parseBinding(t,s.name,s.value,y.visible,he))}applyAllBindings(t,s,e,i,n){let r=[],a=document.createTreeWalker(t,NodeFilter.SHOW_ELEMENT),c=a.nextNode();for(;c;){let o=this.getBindings(c);for(let p of o)try{let h=this.applyBinding(c,p,s,e,i);if(r.push(h),p[1].maybeLitElement&&c.localName.includes("-")&&!customElements.get(c.localName)){let m=c,u=p;customElements.whenDefined(c.localName).then(()=>{X(m)&&(h(),u[1].events=u[1].litEventNames,r.push(this.applyBinding(m,u,s,e,i)))})}}catch(h){console.warn("error applying binding",c,p,h)}if(n&&n(c)){let p=a.nextSibling();for(;!p&&c;)c=a.parentNode(),p=a.nextSibling();c=p}else c=a.nextNode()}return r}static#e=0;async parseCssBindings(t,s,e,i){let n=await import("@node-projects/css-parser"),r=n.parse(t),a;for(let o of r.stylesheet.rules)if(o.type===n.CssTypes.rule){for(let p of o.declarations)if(p.type===n.CssTypes.declaration&&p.value.includes(Et)){let h=this.parseCssBinding(p.value,s,e,i);p.value=h[0],a?a.push(...h[1]):a=h[1]}}let c=n.stringify(r,{indent:"",compress:!0});return[Tt(c),a]}parseCssBinding(t,s,e,i,n){t=t.trim();let r="",a="",c=!1,o="",p=!1,h=null,m=[];for(let u=0;u<t.length;u++){let d=t[u];if(c)if(p)o+=d;else if(h&&d==="\\")p=!0;else if(d===h)h=null;else if(h===null&&d===")"){let g=l.#e++,f=Nt+g,b=[f,{signal:o,target:y.cssvar}];o.startsWith("{")&&(b=JSON.parse(o)),m.push(this.applyBinding(s,b,e,i,n)),r+="var("+f+")",c=!1,o=""}else o+=d;else d==="("?(a!=="bind"?(r+=a,r+=d):(c=!0,t[u+1]==="'"||t[u+1]==='"'?(u++,h=t[u]):h=null),a=""):d===" "||d===","||d==="("||d==="+"||d==="-"||d==="*"||d==="/"?(r+=a+d,a=""):a+=d}return[r+a,m]}applyBinding(t,s,e,i,n){let r=[],a,c=()=>{for(let m of r)this._visualizationHandler.unsubscribeState(m[0],m[1],m[2]);if(a)for(let m of a)m()},o=s[1].signal.split(";"),p=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(p[m]="__"+m,u.includes(":")){let d=u.split(":");p[m]=d[0],u=d[1],o[m]=u}if(u[0]==="?"){if(i){let d=u.substring(1);if(d[0]=="?")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(i,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}}else if(u[0]==="#"){let d=u.substring(1);if(d[0]=="#")o[m]=d;else{o[m]=i[d],d[0]==="$"&&(d=d.substring(1),o[m]="$"+i[d]);let g=()=>{c(),this.applyBinding(t,s,e,i,n)},f=this.getChangedEventName(t,d);i.addEventListener(f,g),a||(a=[]),a.push(()=>i.removeEventListener(f,g))}}u[0]==="."&&(o[m]=this._visualizationHandler.getNormalizedSignalName(u,e,t))}let h=new Array(o.length);for(let m=0;m<o.length;m++){let u=o[m];if(u[0]==="?"){if(i){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e),f=!1)};i.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>i.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,i[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>i[d]=f)}}else if(u[0]==="#"){let d=u.substring(1),g=()=>{let f=!1;f||(f=!0,this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e),f=!1)};t.addEventListener(v.camelToDashCase(d)+"-changed",g),a||(a=[]),a.push(()=>t.removeEventListener(v.camelToDashCase(d)+"-changed",g));try{this.handleValueChanged(t,i,s,t[d],h,m,p,!1,e)}catch(f){console.error(f)}s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,f=>t[d]=f)}else if(u[0]==="$"){let d=u.substring(1);d[0]==="."&&(d=this._visualizationHandler.getNormalizedSignalName(d,e,t)),this._visualizationHandler.getObject(d).then(g=>{this.handleValueChanged(t,i,s,g,h,m,p,!0,e)})}else if(u[0]==="\xA7"){let d=u.substring(1),g=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});g instanceof Promise?g.then(b=>this.handleValueChanged(t,i,s,b,h,m,p,!0,e)):this.handleValueChanged(t,i,s,g,h,m,p,!0,e),n.valueChangedCallbacks||(n.valueChangedCallbacks=new Map);let f=n.valueChangedCallbacks.get(d);f==null&&(f=[],n.valueChangedCallbacks.set(d,f)),f.push(()=>{let b=n.valueProvider(d,{element:t,binding:s,relativeSignalPath:e,root:i});b instanceof Promise?b.then(_=>this.handleValueChanged(t,i,s,_,h,m,p,!0,e)):this.handleValueChanged(t,i,s,b,h,m,p,!0,e)})}else if(u.includes("{")){let d=new me(this,this._visualizationHandler,u,g=>this.handleValueChanged(t,i,s,g.val,h,m,p,!1,e),t,e,i,n);a||(a=[]),a.push(()=>d.dispose()),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>d.setState(g))}else if(s[1].historic)if(s[1].historic.reloadInterval){let d={timerId:-1},g=async()=>{let f=await this._visualizationHandler.getHistoricData(u,s[1].historic);this.handleValueChanged(t,i,s,f?.values,h,m,p,!0,e),d.timerId!==null&&(d.timerId=setTimeout(g,s[1].historic.reloadInterval))};g(),a||(a=[]),a.push(()=>{d.timerId>0&&clearTimeout(d.timerId),d.timerId=null})}else this._visualizationHandler.getHistoricData(u,s[1].historic).then(d=>this.handleValueChanged(t,i,s,d?.values,h,m,p,!0,e));else{let d=(g,f)=>this.handleValueChanged(t,i,s,f.val,h,m,p,!1,e);r.push([u,d,this._visualizationHandler.subscribeState(u,d)]),this._visualizationHandler.getState(u).then(g=>this.handleValueChanged(t,i,s,g?.val,h,m,p,!1,e)),s[1].twoWay&&m==0&&this.addTwoWayBinding(s,t,g=>this._visualizationHandler.setState(u,g))}}return c}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 n=s[i];n instanceof Ct?n.on(()=>{let r;t[1].target==y.attribute?r=s.getAttribute(t[0]):r=s[t[0]],r=l.parseValueWithType(r,t),t[1].compiledExpressionTwoWay&&(r=t[1].compiledExpressionTwoWay(r)),e(r)}):s.addEventListener(i,r=>{let a;t[1].target==y.attribute?a=s.getAttribute(t[0]):a=s[t[0]],a=l.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,n,r,a,c,o){let p=i;if(!c&&r==0&&(p=l.parseValueWithType(p,e)),n[r]=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)),n[a.length-1]={element:t,root:s,boundNames:e[1].signal,boundTargetName:e[0],boundTargetType:e[1].target},p=e[1].compiledExpression(...n),n[a.length-1]=p),e[1].converter)if(typeof e[1].converter=="string")p=this.namedConverterCallback(e[1].converter,p,t,e);else{let h=p!=null?p.toString():p;if(h in e[1].converter){let m=e[1].converter[h];typeof m=="string"?p=new Function(a,"return `"+e[1].converter[h]+"`")(...n):p=m}else{let m=!1,u=parseFloat(p);for(let d in e[1].converter)if(d.length>2&&d[0]===">"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u>=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>2&&d[0]==="<"&&d[1]==="="){let g=parseFloat(d.substring(2));if(u<=g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]===">"){let g=parseFloat(d.substring(1));if(u>g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else if(d.length>1&&d[0]==="<"){let g=parseFloat(d.substring(1));if(u<g){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}else{let g=d.split("-");if(g.length>1&&(g[0]===""||u>=parseFloat(g[0]))&&(g[1]===""||parseFloat(g[1])>=u)){let f=e[1].converter[d];typeof f=="string"?p=new Function(a,"return `"+e[1].converter[d]+"`")(...n):p=f,m=!0;break}}!m&&e[1].converterDefault!==void 0&&(p=e[1].converterDefault)}}if(e[1].inverted&&(p=!p),e[1].writeBackSignal){let h=e[1].writeBackSignal;h[0]==="."&&(h=o+h),this._visualizationHandler.setState(h,p,!0)}e[1].target==y.property?t[e[0]]=p:e[1].target==y.attribute?typeof p=="boolean"?p?t.setAttribute(e[0],""):t.removeAttribute(e[0]):t.setAttribute(e[0],p):e[1].target==y.css?t.style[e[0]]=p:e[1].target==y.cssvar?t.style.setProperty(e[0],p):e[1].target==y.class?p?t.classList.add(e[0]):t.classList.remove(e[0]):e[1].target==y.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 Ve=class{name;relativeSignalsPath;commands;parameters};import{deepValue as O,setDeepValue as Re,sleep as Bt}from"@node-projects/web-component-designer/dist/elements/helper/Helper.js";import U from"long";var se="cyclic",It={pointerdown:"pointerup",pointerenter:"pointerleave",mouseenter:"mouseleave",mouseover:"mouseout",focus:"blur",focusin:"focusout",keydown:"keyup"},Ae=class{_visualizationHandler;_subscriptionCallback=()=>{};constructor(l){this._visualizationHandler=l}async execute(l,t){let s=-1,e=!1,i=!1,n=t.event?.type,r=n?It[n]:null;if(r){let a=t.element;n=="pointerdown"&&(a=window),a.addEventListener(r,()=>{e=!0},{once:!0})}for(let a=0;a<l.length;a++){let c=l[a];if(c.type=="Exit"){i=!0;break}else if(c.type=="If"){let p=(await this.evaluateIfFormula(c,t)?c.trueCommands:c.elseCommands)??[];if(!await this.execute(p,t)){i=!0;break}}else if(c.type=="Goto"){let o=await this.getValue(c.label,t);if(a=l.findIndex(p=>p.type=="Label"&&p.label==o),a<0)break}else if(c.type=="Condition"){let o=await this.getValue(c.value1,t),p=await this.getValue(c.value2,t),h=await this.getValue(c.comparisonType,t),m=!1;switch(h){case"==null":m=o==null;break;case"!=null":m=o!=null;break;case"==true":m=o==!0;break;case"==false":m=o==!1;break;case"==":m=o==p;break;case"!=":m=o!=p;break;case">":m=o>p;break;case"<":m=o<p;break;case">=":m=o>=p;break;case"<=":m=o<=p;break;case"&&":m=o&&p;break;case"||":m=o||p;break}if(m){await this.runExternalScript(await this.getValue(c.trueScriptName,t),await this.getValue(c.trueScriptType,t));let u=await this.getValue(c.trueGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}else{await this.runExternalScript(await this.getValue(c.falseScriptName,t),await this.getValue(c.falseScriptType,t));let u=await this.getValue(c.falseGotoLabel,t);if(u&&(a=l.findIndex(d=>d.type=="Label"&&d.label==u),a<0))break}}else if(c.type=="Repeat"){let o=await this.getValue(c.label,t),p=await this.getValue(c.count,t);if(await this.getValue(c.mode,t)=="eventValid"&&e){e=!1;continue}if(p!=0&&s==-1&&(s=p-1),s==0||(s>0&&s--,a=-1,o&&(a=l.findIndex(m=>m.type=="Label"&&m.label==o),a<0)))continue}else if(!await this.runScriptCommand(c,t)){i=!0;break}}return!i}async getValueFromTarget(l,t,s){return l==="property"?O(s.root,t):l==="elementProperty"?O(s.element,t):(await this._visualizationHandler.getState(this.getSignalName(t,s)))?.val}async setValueOnTarget(l,t,s,e){l==="property"?Re(s.root,t,e):l==="elementProperty"?Re(s.element,t,e):await this._visualizationHandler.setState(this.getSignalName(t,s),e)}async runExternalScript(l,t){}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 l=await this.getValue(command.value??500,context);await Bt(l);break}case"Console":{let l=await this.getValue(command.target??"log",context),t=await this.getValue(command.message,context);console[l](t);break}case"ToggleSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),s=await this.getValueFromTarget(t,l,context);await this._visualizationHandler.setState(this.getSignalName(l,context),!s);break}case"ToggleSignalValueThroughList":{let l=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=l.indexOf(e)+1;i>=l.length&&(i=0);let n=l[i];await this._visualizationHandler.setState(this.getSignalName(t,context),n);break}case"SetSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context);await this.setValueOnTarget(t,l,context,await this.getValue(command.value,context));break}case"IncrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)+await this.getValue(command.value,context);await this.setValueOnTarget(t,l,context,e);break}case"DecrementSignalValue":{let l=await this.getValue(command.signal,context),t=await this.getValue(command.target,context),e=await this.getValueFromTarget(t,l,context)-await this.getValue(command.value,context);await this.setValueOnTarget(t,l,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 l=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,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).or(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ClearBitInSignal":{let l=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,l,context),i=U.fromNumber(1).shiftLeft(t);i.negate();let n=U.fromNumber(e).and(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"ToggleBitInSignal":{let l=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,l,context),i=U.fromNumber(1).shiftLeft(t),n=U.fromNumber(e).xor(i).toNumber();await this.setValueOnTarget(s,l,context,n);break}case"Javascript":{let l=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",l)),command.compiledScript(t);break}case"SetElementProperty":{command=D.upgradeSetElementProperty(command);let l=await this.getValue(command.name,context);l===""&&(l=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),n=await this.getValue(command.targetSelector,context),r=await this.getValue(command.mode??"toggle",context),a=this.getTargetFromTargetSelector(context,i,s,n);for(let c of a)e=="attribute"?c.setAttribute(l,t):e=="property"?c[l]=t:e=="css"?c.style[l]=t:e=="class"&&(r==="toggle"?c.classList.toggle(l??t):r==="remove"?c.classList.remove(l??t):c.classList.add(l??t));break}case"SubscribeSignal":{let l=await this.getValue(command.signal,context);if(await this.getValue(command.oneTime,context)){let s=()=>{this._visualizationHandler.unsubscribeState(l,s,null)};this._visualizationHandler.subscribeState(l,s)}else this._visualizationHandler.subscribeState(l,this._subscriptionCallback);break}case"UnsubscribeSignal":{let l=await this.getValue(command.signal,context);this._visualizationHandler.unsubscribeState(l,this._subscriptionCallback,null);break}case"WriteSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.writeSignalsInGroup(l);break}case"ClearSignalsInGroup":{let l=await this.getValue(command.group,context);this._visualizationHandler.clearSignalsInGroup(l);break}case"RunScript":{let l=await this.getValue(command.name,context),t=await this.getValue(command.scriptType,context);this.runExternalScript(l,t);break}case"ShowMessageBox":{let l=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)?l=1:l=2}else{let i=await this.getValue(command.message,context);alert(i),l=1}let e=await this.getValue(command.resultSignal,context);if(e&&this._visualizationHandler.setState(e,l),t&&l!=1)return!1;break}case"ShowPrompt":{let l=await this.getValue(command.message,context),t=await this.getValue(command.default,context),s=prompt(l,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(l,t,s){if(t==="container"){let e=l.element.getRootNode().host;for(let i=0;i<(s??0);i++)e=e.getRootNode().host;return e}else if(t==="element"){let e=l.element;for(let i=0;i<(s??0);i++)e=e.parentElement;return e}return null}getTargetFromTargetSelector(l,t,s,e){let i=this.getTarget(l,t,s),n=[i];return e&&(t==="container"?n=i.shadowRoot.querySelectorAll(e):n=i.querySelectorAll(e)),n}async getValue(value,outerContext){if(value==null)return null;if(typeof value=="object")switch(value.source){case"property":return O(outerContext.root,value.name);case"elementProperty":return O(outerContext.element,value.name);case"signal":return(await this._visualizationHandler.getState(this.getSignalName(value.name,outerContext)))?.val;case"signalInProperty":{let l=O(outerContext.root,value.name);return(await this._visualizationHandler.getState(this.getSignalName(l,outerContext)))?.val}case"event":{let l=outerContext.event;return value.name&&(l=O(l,value.name)),l}case"parameter":return outerContext.parameters[value.name];case"context":return O(outerContext,value.name);case"complexString":{let l=value.name;return l!=null?await this.parseStringWithValues(l,outerContext):null}case"complexSignal":{let l=value.name;if(l!=null){let t=await this.parseStringWithValues(l,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(l,t){let s=ge(l),e=await Promise.all(s.signals.map(n=>this.getStateOrFieldOrParameter(this.getSignalName(n,t),t))),i=s.parts[0];for(let n=0;n<s.parts.length-1;n++){let r=e[n];typeof r=="object"&&(r=r.val),r==null&&(r=""),i+=r+s.parts[n+1]}return i}async evaluateIfFormula(l,t){let s=l.signals??[],e=s.map((r,a)=>r.varName?.trim()||"__"+a),i=await Promise.all(s.map(r=>this.getValue(r,t))),n=await this.getValue(l.formula,t);return(!l.compiledFormula||l._compiledFormulaSrc!==n)&&(l.compiledFormula=new Function(...e,"return ("+n+");"),l._compiledFormulaSrc=n),!!l.compiledFormula(...i)}getSignalName(l,t){return l[0]==="."?t.relativeSignalsPath+l:l}createScriptContext(l,t,s,e,i){return{root:l,event:t,element:s,parameters:e,relativeSignalsPath:i}}async assignAllScripts(l,t,s,e,i,n,r,a){n??=this.createScriptContext;let c=await this.loadAndInitJsObject(l,t,s,e,a);for(let o of s.querySelectorAll("*"))for(let p of o.attributes)if(p.name[0]==="@")try{let h=p.name.substring(1),m=p.value.trim(),u=h.startsWith(se),d=u?parseInt(h.substring(h.indexOf(":")+1)):null,g=await this.resolveHandler(m,c,o,s,e,i,n,r,h);g&&this.bindHandler(o,h,u,d,g)}catch{console.warn("error assigning script",o,p)}return c}async loadAndInitJsObject(l,t,s,e,i){if(!t)return null;try{let r=await import(URL.createObjectURL(new Blob([t],{type:"application/javascript"})));return i?i(r):r.init?.(e,s),r}catch(n){return console.error("error parsing javascript - "+l,n),null}}async resolveHandler(l,t,s,e,i,n,r,a,c){if(l[0]!=="{")return p=>{t?.[l]?t[l](p,s,e,i):console.warn(`javascript function named: "${l}" not found, maybe missing a "export" ?`)};let o=JSON.parse(l);if("commands"in o)return p=>this.execute(o.commands,r(i,p,s,o.parameters,o.relativeSignalsPath));if("blocks"in o){let p=null;return async h=>{p??=await ve(o),p(h,e,o.parameters,o.relativeSignalsPath??"",n,r(i,h,s,o.parameters,o.relativeSignalsPath))}}if("name"in o){if(a)return a(s,c,o),null;let p=o.name;return h=>{t?.[p]?t[p](h,s,e,i,o.parameters):console.warn(`javascript function named: "${p}" not found, maybe missing a "export" ?`)}}return null}bindHandler(l,t,s,e,i){if(!s){l.addEventListener(t,i);return}let n=setInterval(()=>{l.isConnected?i(null):clearInterval(n)},e)}};import{OverlayLayer as Ot,DesignItem as V,InsertAction as Vt,BindingTarget as E,PropertyType as ie}from"@node-projects/web-component-designer";var ze=class{constructor(t,s){this._bindingsHelper=t,this._visualizationHandler=s}_bindingsHelper;_visualizationHandler;rectMap=new Map;rect;dragEnter(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=t.getNormalizedElementCoordinates(e);this.rect=t.overlayLayer.drawRect("IobrokerWebuiBindableObjectDragDropService",n.x,n.y,n.width,n.height,"",null,Ot.Background),this.rect.style.fill="#ff0000",this.rect.style.opacity="0.3",this.rectMap.set(e,this.rect)}}dragLeave(t,s,e){let i=V.GetDesignItem(e);if(i&&!i.isRootItem){let n=this.rectMap.get(e);t.overlayLayer.removeOverlay(n),this.rectMap.delete(e)}}dragOver(t,s,e){return"copy"}async drop(t,s,e,i){for(let c of this.rectMap.values())t.overlayLayer.removeOverlay(c);this.rectMap.clear();let n=V.GetDesignItem(i),r=await this._visualizationHandler.getObject(e.fullName),a=this._visualizationHandler.getSignalInformation(r);if(n&&!n.isRootItem)if(i instanceof HTMLInputElement){let c={signal:e.fullName,target:E.property},o=this._bindingsHelper.serializeBinding(i,i.type=="checkbox"?"checked":"value",c);n.setAttribute(o[0],o[1])}else{let c={signal:e.fullName,target:E.content},o=this._bindingsHelper.serializeBinding(i,null,c);n.setAttribute(o[0],o[1])}else{let c=t.getNormalizedEventCoordinates(s),o,p,h=await this._visualizationHandler.getState(e.fullName);if(a.role==="url"&&typeof h?.val=="string")if(h.val.endsWith("jpg")||h.val.endsWith("jpeg")||h.val.endsWith("png")||h.val.endsWith("gif")||h.val.endsWith("svg")){let m=document.createElement("img");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else if(h.val.endsWith("mp4")){let m=document.createElement("video");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}else{let m=document.createElement("iframe");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u={signal:e.fullName,target:E.property},d=this._bindingsHelper.serializeBinding(m,"src",u);o.setAttribute(d[0],d[1]),o.element.src=h.val}if(!o){let m=document.createElement("input");o=V.createDesignItemFromInstance(m,t.serviceContainer,t.instanceServiceContainer),p=o.openGroup("Insert");let u=a.writeable!==!1,d={signal:e.fullName,target:E.property,twoWay:u},g=this._bindingsHelper.serializeBinding(m,"value",d);a.type==="boolean"?(g=this._bindingsHelper.serializeBinding(m,"checked",d),o.setAttribute("type","checkbox")):a.role=="date"?(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","date"),o.setAttribute("readonly","")):a.role=="datetime"&&(d.twoWay=u,g=this._bindingsHelper.serializeBinding(m,"value-as-number",d),o.setAttribute("type","datetime-local"),o.setAttribute("readonly","")),o.setAttribute(g[0],g[1])}o.setStyle("position","absolute"),o.setStyle("left",c.x+"px"),o.setStyle("top",c.y+"px"),t.instanceServiceContainer.undoService.execute(new Vt(t.rootDesignItem,t.rootDesignItem.childCount,o)),p.commit(),requestAnimationFrame(()=>t.instanceServiceContainer.selectionService.setSelectedElements([o]))}}dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){if(s.type=="signal"){s.service.setValue(i,s,e.fullName);return}let n={signal:e.fullName,target:E.property};s.propertyType==ie.attribute&&(n.target=E.attribute),s.propertyType==ie.cssValue&&(n.target=E.css),n.signal=e.fullName,n.twoWay=s.propertyType==ie.property||s.propertyType==ie.propertyAndAttribute;let r=i[0].openGroup("drop binding");for(let a of i){let c=this._bindingsHelper.serializeBinding(a.element,s.name,n);a.setAttribute(c[0],c[1])}r.commit()}};import{BindingMode as fe,BindingTarget as Le,PropertiesHelper as Rt}from"@node-projects/web-component-designer";var De=class l{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===Le.css||e[1].target===Le.attribute?Rt.camelToDashCase(e[0]):e[0],target:e[1].target,mode:e[1].twoWay?fe.twoWay:fe.oneWay,invert:e[1].inverted,bindableObjectNames:e[1].signal.split(";"),expression:e[1].expression,expressionTwoWay:e[1].expressionTwoWay,converter:e[1].converter,type:l.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==fe.twoWay,e.expression=s.expression,e.expressionTwoWay=s.expressionTwoWay,e.historic=s.historic,e.type=s.type,typeof s.converters=="string"?e.converter=s.converters:Array.isArray(s.converters)&&s.converters.length>0?e.converter=Object.fromEntries(s.converters.map(r=>[r.key,r.value])):s.converters!=null&&(e.converter=s.converters),e.target=s.target,e.events=s.changedEvents;let i=this._bindingsHelper.serializeBinding(t.element,s.targetName,e),n=t.openGroup("edit_binding");return t.setAttribute(i[0],i[1]),n.commit(),!0}clearBinding(t,s,e){let i=this._bindingsHelper.getBindingAttributeName(t.element,s,e);return t.removeAttribute(i),!0}};var je=class{getRefactorings(t){let s=[];for(let e of t){let i=e.serviceContainer.bindingService.getBindings(e);if(i)for(let n of i)for(let r of n.bindableObjectNames){let a="signal",c="";if(r.includes(":")){let o=r.split(":")[0],p=r.substring(o.length+1);p.startsWith("?")&&(p=p.substring(1),c="?",a="property",p.startsWith("?")&&(p=p.substring(1),c="??")),s.push({service:this,name:p,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName+" - "+o+":",shortName:o,prefix:c})}else r.startsWith("?")&&(r=r.substring(1),c="?",a="property",r.startsWith("?")&&(r=r.substring(1),c="??")),s.push({service:this,name:r,itemType:a,designItem:e,type:"binding",sourceObject:n,display:n.target+"/"+n.targetName,prefix:c})}}return s}refactor(t,s,e){let i=t.sourceObject;t.shortName?i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.shortName+":"+t.prefix+s?t.shortName+":"+t.prefix+e:n):i.bindableObjectNames=i.bindableObjectNames.map(n=>n==t.prefix+s?t.prefix+e:n),t.designItem.serviceContainer.bindingService.setBinding(t.designItem,i)}};var We=class{dragOverOnProperty(t,s,e){return"copy"}dropOnProperty(t,s,e,i){s.service.setValue(i,s,e.text)}};import{BindingTarget as x}from"@node-projects/web-component-designer";var Me=class{getRefactorings(t){let s=[];for(let e of t)for(let i of e.attributes())if(i[0][0]=="@"){let n=i[1];if(n[0]=="{"){let r=JSON.parse(n);if("commands"in r)for(let a of r.commands){for(let c in a){let o=a[c];if(o!=null&&typeof o=="object"){let p=o;if(p.source==="signal")s.push({name:p.name,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[signal]",refactor:h=>p.name=h});else if(p.source==="property")s.push({name:p.name,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[property]",refactor:h=>p.name=h});else if(p.source==="complexString")for(let h of p.name.matchAll(/\{(.*?)\}/g)){let m=h[0],u=h[1];if(u[0]==="?"){let d="?";u=u.substring(1),u[0]==="?"&&(d="??",u=u.substring(1)),s.push({name:u,itemType:"property",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->property",refactor:g=>p.name=p.name.replace(m,"{"+d+g+"}")})}else s.push({name:u,itemType:"signal",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:a.type+"/"+i[0].substring(1)+"/"+c+"[complexString]->signal",refactor:d=>p.name=p.name.replace(m,"{"+d+"}")})}}}switch(a.type){case"SetSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"IncrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"DecrementSignalValue":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"SetBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ClearBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ToggleBitInSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"OpenScreen":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"OpenDialog":a.screen&&typeof a.screen=="string"&&s.push({name:a.screen,itemType:"screen",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/screen",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.screen=c});break;case"CalculateSignalValue":a.targetSignal&&typeof a.targetSignal=="string"&&s.push({name:a.targetSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/targetSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.targetSignal=c});break;case"SubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"UnsubscribeSignal":a.signal&&typeof a.signal=="string"&&s.push({name:a.signal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/signal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.signal=c});break;case"ShowMessageBox":a.resultSignal&&typeof a.resultSignal=="string"&&s.push({name:a.resultSignal,itemType:"signal",target:x.event,targetName:i[0],display:a.type+"/"+i[0].substring(1)+"/resultSignal",service:this,designItem:e,type:"script",sourceObject:r,refactor:c=>a.resultSignal=c});break}}else"blocks"in r;if("parameters"in r)for(let a in r.parameters)typeof r.parameters[a]=="string"&&s.push({name:r.parameters[a],itemType:"parameter",target:x.event,targetName:i[0],service:this,designItem:e,type:"script",sourceObject:r,display:i[0].substring(1)+"/parameters/"+a,refactor:c=>r.parameters[a]=c})}}return s}refactor(t,s,e){t.refactor(e);let i=JSON.stringify(t.sourceObject);t.designItem.setAttribute(t.targetName,i)}};import{BasePropertyEditor as At}from"@node-projects/web-component-designer";var Pe=class extends At{_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 n=new AbortController;i.objectDoubleclicked.on(()=>{n.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:n.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 zt}from"@node-projects/web-component-designer";var Fe=class l extends zt{static _cyclicEvent=[{name:`${se}: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(...l._cyclicEvent),s}getEvent(t,s){return s.includes(se)?l._cyclicEvent.find(i=>i.name==s)??{name:s,propertyName:"on"+s,eventObjectName:"Event"}:super.getEvent(t,s)}};export{ze as BindableObjectDragDropService,Q as BindingsEditor,z as BindingsEditorHistoric,Oe as BindingsHelper,A as BlocklyScriptEditor,ee as EventAssignment,M as ParameterEditor,We as PropertyGridDragDropService,Ve as Script,Me as ScriptRefactorService,Ae as ScriptSystem,Pe as SignalPropertyEditor,L as SimpleScriptCommandPicker,W as SimpleScriptEditor,je as VisualizationBindingsRefactorService,De as VisualizationBindingsService,Fe as VisualizationEventsService,q as VisualizationPropertyGrid,P as bindingPrefixAttribute,F as bindingPrefixClass,T as bindingPrefixContent,H as bindingPrefixCss,J as bindingPrefixCssVar,Et as bindingPrefixInsideCss,Nt as bindingPrefixInsideCssVarName,I as bindingPrefixProperty,he as bindingPrefixVisible,qs as bindingsInCssRegex,se as cyclicAttributeName,ve as generateEventCodeFromBlockly,te as getNestedProperty,X as isLit,ke as nativeScriptCommandDescriptions,ge as parseBindingString,Se as simpleScriptEditorHelpHtml};
1297
+ </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(`
1298
+ `)&&!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`
1299
+ :host { display: block; grid-column: 1 / -1; min-width: 0; color: var(--wcd-color-text, white); }
1300
+ :host([hidden]) { display: none !important; }
1301
+ .header, .row { display: flex; align-items: center; gap: 8px; min-height: 28px; }
1302
+ .row { padding-left: 16px; }
1303
+ button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; padding: 4px; }
1304
+ button:focus-visible { outline: 2px solid var(--wcd-color-accent, #e91e63); outline-offset: -2px; }
1305
+ button:disabled { opacity: .5; cursor: default; }
1306
+ .toggle, .name { text-align: left; }
1307
+ .toggle { flex: 1; }
1308
+ .name { flex: 0 1 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
1309
+ .summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wcd-color-text-muted, #bdbdbd); }
1310
+ .message { padding: 4px 16px; font-size: 12px; color: var(--wcd-color-text-muted, #bdbdbd); }
1311
+ dialog { box-sizing: border-box; width: min(420px, calc(100vw - 32px)); color: inherit; background: var(--wcd-property-grid-background, var(--wcd-color-surface-raised, #2f3545)); border: 1px solid var(--wcd-color-border, #596c7a); padding: 16px; }
1312
+ dialog::backdrop { background: #0006; }
1313
+ form, label { display: grid; gap: 8px; }
1314
+ form { gap: 16px; }
1315
+ h3 { font: inherit; font-weight: 600; margin: 0; }
1316
+ input { box-sizing: border-box; width: 100%; padding: 6px; font: inherit; color: inherit; background: transparent; border: 1px solid var(--wcd-color-border, #596c7a); }
1317
+ .help { font-size: 12px; color: var(--wcd-color-text-muted, #bdbdbd); }
1318
+ .error { color: var(--wcd-color-error, #ff8a80); font-size: 12px; }
1319
+ .actions { display: flex; justify-content: flex-end; gap: 8px; }
1320
+ .actions button { border: 1px solid var(--wcd-color-border, #596c7a); padding: 6px 12px; }
1321
+ [hidden] { display: none !important; }
1322
+ :host([appearance="modern"]) { color: var(--_wcd-pg-text); font-size: 13px; }
1323
+ :host([appearance="modern"]) .header {
1324
+ padding: 5px 12px;
1325
+ min-height: 38px;
1326
+ background: var(--_wcd-pg-raised);
1327
+ border-bottom: 1px solid var(--_wcd-pg-border);
1328
+ }
1329
+ :host([appearance="modern"]) .toggle { font-weight: 600; }
1330
+ :host([appearance="modern"]) .row {
1331
+ display: grid;
1332
+ grid-template-columns: minmax(0, .85fr) minmax(0, 1fr) 28px;
1333
+ padding: 5px 12px 5px 24px;
1334
+ min-height: 38px;
1335
+ border-bottom: 1px solid var(--_wcd-pg-border);
1336
+ }
1337
+ :host([appearance="modern"]) .row:hover,
1338
+ :host([appearance="modern"]) .row:focus-within { background: var(--_wcd-pg-hover); }
1339
+ :host([appearance="modern"]) .summary { color: var(--_wcd-pg-muted); }
1340
+ :host([appearance="modern"]) button { border-radius: 4px; }
1341
+ :host([appearance="modern"]) button:hover { background: var(--_wcd-pg-hover); }
1342
+ :host([appearance="modern"]) button:focus-visible { outline-color: var(--wcd-color-focus, var(--_wcd-pg-accent)); }
1343
+ :host([appearance="modern"]) dialog {
1344
+ padding: 24px;
1345
+ border-radius: 10px;
1346
+ color: var(--_wcd-pg-text);
1347
+ background: var(--_wcd-pg-surface);
1348
+ border-color: var(--_wcd-pg-border);
1349
+ box-shadow: 0 16px 64px #0003;
1350
+ }
1351
+ :host([appearance="modern"]) h3 { font-size: 16px; }
1352
+ :host([appearance="modern"]) input { border-radius: 5px; border-color: var(--_wcd-pg-border); padding: 8px; }
1353
+ :host([appearance="modern"]) input:focus-visible { outline: 2px solid var(--wcd-color-focus, var(--_wcd-pg-accent)); outline-offset: 1px; }
1354
+ :host([appearance="modern"]) .help { color: var(--_wcd-pg-muted); }
1355
+ :host([appearance="modern"]) .actions button { border-color: var(--_wcd-pg-border); }
1356
+ :host([appearance="modern"]) .actions button[type="submit"] {
1357
+ background: var(--_wcd-pg-accent);
1358
+ color: var(--wcd-color-accent-text, light-dark(white, #162b48));
1359
+ border-color: transparent;
1360
+ }
1361
+ `;constructor(){super();let e=document.createElement("div");e.className="header",this._toggle=document.createElement("button"),this._toggle.type="button",this._toggle.className="toggle",this._toggle.textContent="\u25BE Class bindings",this._toggle.setAttribute("aria-expanded","true"),this._toggle.onclick=()=>{this._rows.hidden=!this._rows.hidden,this._toggle.textContent=(this._rows.hidden?"\u25B8":"\u25BE")+" Class bindings",this._toggle.setAttribute("aria-expanded",String(!this._rows.hidden))},this._add=document.createElement("button"),this._add.type="button",this._add.textContent="+",this._add.title="Add class binding\u2026",this._add.setAttribute("aria-label","Add class binding"),this._add.onclick=()=>this.addBinding(),e.append(this._toggle,this._add),this._rows=document.createElement("div"),this.shadowRoot.append(e,this._rows)}refresh(e){let t=this._items[0]!==e?.[0]||this._items.length!==e?.length;t&&this.shadowRoot.querySelector("dialog")?.close(),this._items=e??[];let i=this._items.length===1?this._items[0]:null,s=i?this._service.getBindings(i):[];this._add.disabled=!i||!i.serviceContainer.config.openBindingsEditor;let l=JSON.stringify(s.map(({service:a,...n})=>n));if(!(!t&&l===this._signature)){if(this._signature=l,this._rows.replaceChildren(),!i){let a=document.createElement("div");a.className="message",a.textContent="Select one element to edit class bindings.",this._rows.appendChild(a);return}for(let a of s){let n=document.createElement("div");n.className="row";let o=document.createElement("button");o.type="button",o.className="name",o.textContent=a.targetName,o.title=`Edit class binding: ${a.targetName}`,o.onclick=()=>this.editBinding(i,a);let c=document.createElement("span");c.className="summary",c.textContent="\u2190 "+(a.expression||a.bindableObjectNames?.join(";")||a.rawValue||"binding"),c.title=c.textContent,c.ondblclick=()=>this.editBinding(i,a);let p=document.createElement("button");p.type="button",p.textContent="\u22EF",p.setAttribute("aria-label",`Actions for class binding ${a.targetName}`);let d=h=>{h.preventDefault(),ai.show([{title:"Edit binding\u2026",action:()=>this.editBinding(i,a)},{title:"Rename class\u2026",action:()=>this.showNameDialog(i,a)},{title:"Remove binding",action:()=>{this._service.remove(i,a),this.refresh(this._items)}}],h)};p.onclick=d,n.oncontextmenu=d,n.append(o,c,p),this._rows.appendChild(n)}}}addBinding(){this._add.disabled||this.showNameDialog(this._items[0])}async editBinding(e,t,i=t?.targetName){if(this._editing)return;let s=e.serviceContainer.config.openBindingsEditor;if(s){this._editing=!0;try{await s(this._service.createProperty(i),[e],t,ni.class),this.refresh(this._items)}finally{this._editing=!1}}}showNameDialog(e,t,i=t?.targetName??""){if(this.shadowRoot.querySelector("dialog"))return;let s=document.createElement("dialog"),l=document.createElement("form"),a=document.createElement("h3");a.textContent=t?"Rename class":"Add class binding";let n=document.createElement("label");n.textContent="Class name";let o=document.createElement("input");o.value=i,o.required=!0;let c=document.createElement("span");c.className="help",c.textContent="Use lowercase names, e.g. is-active.",n.append(o,c);let p=document.createElement("div");p.className="error",p.setAttribute("role","alert"),p.hidden=!0;let d=document.createElement("div");d.className="actions";let h=document.createElement("button");h.type="button",h.textContent="Cancel",h.onclick=()=>s.close();let u=document.createElement("button");u.type="submit",u.textContent=t?"Save":"Next\u2026",d.append(h,u),l.append(a,n),l.append(p,d),s.appendChild(l),this.shadowRoot.appendChild(s),s.onclose=()=>s.remove(),l.onsubmit=async g=>{g.preventDefault();let f=o.value.trim(),w=this._service.validateName(e,f,t?.targetName);try{if(w)throw new Error(w);t&&this._service.rename(e,t,f),s.close(),t||await this.editBinding(e,void 0,f),this.refresh(this._items)}catch(x){p.textContent=x.message,p.hidden=!1}},s.showModal(),o.focus()}};customElements.define("node-projects-property-grid-class-bindings",ue);var nt=class{createExtension(e){if(e.name!=="class"&&e.name!=="className"||e.propertyType===oi.cssValue)return;let t=new ue;return{element:t,refresh:i=>t.refresh(i),getContextMenuItems:i=>[{title:"Add class binding\u2026",disabled:i?.length!==1||!i[0].serviceContainer.config.openBindingsEditor,action:()=>t.addBinding()}]}}};export{qe as BindableObjectDragDropService,he as BindingsEditor,K as BindingsEditorHistoric,Fe as BindingsHelper,Y as BlocklyScriptEditor,nt as ClassBindingsPropertyGridExtensionProvider,ge as EventAssignment,ie as ParameterEditor,Qe as PropertyGridDragDropService,Ue as Script,et as ScriptRefactorService,Ge as ScriptSystem,tt as SignalPropertyEditor,Z as SimpleScriptCommandPicker,te as SimpleScriptEditor,Ze as VisualizationBindingsRefactorService,Ye as VisualizationBindingsService,it as VisualizationEventsService,re as VisualizationPropertyGrid,le as bindingPrefixAttribute,ce as bindingPrefixClass,J as bindingPrefixContent,pe as bindingPrefixCss,ne as bindingPrefixCssVar,We as bindingPrefixInsideCss,Ht as bindingPrefixInsideCssVarName,se as bindingPrefixProperty,Se as bindingPrefixVisible,bs as bindingsInCssRegex,ye as cyclicAttributeName,Ee as generateEventCodeFromBlockly,Jt as getNestedProperty,de as isLit,Ae as nativeScriptCommandDescriptions,Ce as parseBindingString,Ve as simpleScriptEditorHelpHtml};
1293
1362
  //!varname => inverted