@openremote/or-rules 1.8.0-snapshot.20250723094757 → 1.8.0-snapshot.20250725074716

package/lib/flow-viewer/components/confirmation-dialog.d.ts

@@ -3,7 +3,7 @@ declare const ConfirmationDialog_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -13,6 +13,6 @@ export declare class ConfirmationDialog extends ConfirmationDialog_base {
     disagreeText: string;
     question: string;
     static get styles(): import("lit").CSSResult;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
 }
 export {};

package/lib/flow-viewer/components/confirmation-dialog.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length,a=n<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,e,o,r);else for(var s=t.length-1;s>=0;s--)(i=t[s])&&(a=(n<3?i(a):n>3?i(e,o,a):i(e,o))||a);return n>3&&a&&Object.defineProperty(e,o,a),a};import{LitElement,html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{i18next,translate}from"@openremote/or-translate";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";let ConfirmationDialog=class extends(translate(i18next)(LitElement)){constructor(){super(...arguments),this.agreeText=i18next.t("ok"),this.disagreeText=i18next.t("cancel"),this.question=i18next.t("areYouSure","Are you sure?")}static get styles(){return css`
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,a=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,i);else for(var c=e.length-1;c>=0;c--)(r=e[c])&&(a=(n<3?r(a):n>3?r(t,o,a):r(t,o))||a);return n>3&&a&&Object.defineProperty(t,o,a),a};import{LitElement as e,html as t,css as o}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import{i18next as n,translate as a}from"@openremote/or-translate";import{InputType as c}from"@openremote/or-mwc-components/or-mwc-input";let ConfirmationDialog=class extends a(n)(e){constructor(){super(...arguments),this.agreeText=n.t("ok"),this.disagreeText=n.t("cancel"),this.question=n.t("areYouSure","Are you sure?")}static get styles(){return o`
         .question{
             width: 100%;
             padding: 15px 5px 25px 5px;
@@ -10,10 +10,10 @@ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length
             justify-content: space-between;
             justify-content: space-evenly;
             justify-content: space-around;
-        }`}render(){return html`
+        }`}render(){return t`
         <div class="question">${this.question}</div>
         <div class="container">
-            <or-mwc-input type="${InputType.BUTTON}" unElevated label="${this.agreeText}"
+            <or-mwc-input type="${c.BUTTON}" unElevated label="${this.agreeText}"
                 @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("agreed"))}}">
             </or-mwc-input>
 
@@ -21,4 +21,4 @@ var __decorate=this&&this.__decorate||function(t,e,o,r){var i,n=arguments.length
                 @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("disagreed"))}}">
             </or-mwc-input>
         </div>
-        `}};__decorate([property({type:String})],ConfirmationDialog.prototype,"agreeText",void 0),__decorate([property({type:String})],ConfirmationDialog.prototype,"disagreeText",void 0),__decorate([property({type:String})],ConfirmationDialog.prototype,"question",void 0),ConfirmationDialog=__decorate([customElement("confirmation-dialog")],ConfirmationDialog);export{ConfirmationDialog};
+        `}};__decorate([r({type:String})],ConfirmationDialog.prototype,"agreeText",void 0),__decorate([r({type:String})],ConfirmationDialog.prototype,"disagreeText",void 0),__decorate([r({type:String})],ConfirmationDialog.prototype,"question",void 0),ConfirmationDialog=__decorate([i("confirmation-dialog")],ConfirmationDialog);export{ConfirmationDialog};

package/lib/flow-viewer/components/connection-container.d.ts

@@ -2,5 +2,5 @@ import { LitElement } from "lit";
 export declare class ConnectionContainer extends LitElement {
     private workspace;
     constructor();
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
 }

package/lib/flow-viewer/components/connection-container.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,o,n){var r,c=arguments.length,i=c<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(i=(c<3?r(i):c>3?r(t,o,i):r(t,o))||i);return c>3&&i&&Object.defineProperty(t,o,i),i};import{LitElement,html}from"lit";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{project}from"./flow-editor";let ConnectionContainer=class extends LitElement{constructor(){super(),project.addListener("connectioncreated",(()=>{this.requestUpdate()})),project.addListener("connectionremoved",(()=>{this.requestUpdate()})),project.addListener("cleared",(()=>{this.requestUpdate()}))}render(){return html`${repeat(project.connections,(e=>e.from+e.to),(e=>html`<connection-line .workspace="${this.workspace}" .connection="${e}"></connection-line>`))}`}};__decorate([property({attribute:!1})],ConnectionContainer.prototype,"workspace",void 0),ConnectionContainer=__decorate([customElement("connection-container")],ConnectionContainer);export{ConnectionContainer};
+var __decorate=this&&this.__decorate||function(e,t,o,n){var r,i=arguments.length,c=i<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,o,n);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(c=(i<3?r(c):i>3?r(t,o,c):r(t,o))||c);return i>3&&c&&Object.defineProperty(t,o,c),c};import{LitElement as e,html as t}from"lit";import{customElement as o,property as n}from"lit/decorators.js";import{repeat as r}from"lit/directives/repeat.js";import{project as i}from"./flow-editor";let ConnectionContainer=class extends e{constructor(){super(),i.addListener("connectioncreated",()=>{this.requestUpdate()}),i.addListener("connectionremoved",()=>{this.requestUpdate()}),i.addListener("cleared",()=>{this.requestUpdate()})}render(){return t`${r(i.connections,e=>e.from+e.to,e=>t`<connection-line .workspace="${this.workspace}" .connection="${e}"></connection-line>`)}`}};__decorate([n({attribute:!1})],ConnectionContainer.prototype,"workspace",void 0),ConnectionContainer=__decorate([o("connection-container")],ConnectionContainer);export{ConnectionContainer};

package/lib/flow-viewer/components/connection-line.d.ts

@@ -15,7 +15,7 @@ export declare class ConnectionLine extends SelectableElement {
     constructor();
     disconnectedCallback(): void;
     protected firstUpdated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     static get styles(): import("lit").CSSResult;
     private nodeChanged;
     private get isInvalid();

package/lib/flow-viewer/components/connection-line.js

@@ -1,15 +1,15 @@
-var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,r=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{IdentityDomLink,IdentityAssigner,NodeUtilities}from"../node-structure";import{ResizeObserver}from"resize-observer";import{SelectableElement}from"./selectable-element";import{project}from"./flow-editor";let ConnectionLine=class extends SelectableElement{constructor(){super(),this.fancyLine=!0,this.curveIntensity=1,this.nodeChanged=()=>{this.requestUpdate()},this.polylineId=IdentityAssigner.generateIdentity()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),project.removeListener("connectionremoved",this.nodeChanged)}firstUpdated(){super.firstUpdated();const e=this.shadowRoot.getElementById(this.polylineId);e&&this.setHandle(e)}render(){if(this.isInvalid){const e=NodeUtilities.getSocketFromID(this.connection.from,project.nodes),t=NodeUtilities.getSocketFromID(this.connection.to,project.nodes);if(this.fromNodeElement=IdentityDomLink.map[e.nodeId],this.toNodeElement=IdentityDomLink.map[t.nodeId],this.fromElement=IdentityDomLink.map[e.id],this.toElement=IdentityDomLink.map[t.id],this.isInvalid)return console.warn(this.fromNodeElement),console.warn(this.toNodeElement),console.warn(this.fromElement),console.warn(this.toElement),console.warn("Attempt to render invalid connection"),html``;this.fromNodeElement.addEventListener("updated",this.nodeChanged),this.toNodeElement.addEventListener("updated",this.nodeChanged),this.resizeObserver=new ResizeObserver(this.nodeChanged),this.resizeObserver.observe(this.fromNodeElement),this.resizeObserver.observe(this.toNodeElement)}const e=this.workspace.clientRect,t=this.fromElement.connectionPosition,o=this.toElement.connectionPosition;if(this.fancyLine){const n=t.x-e.left,i=t.y-e.top,s=o.x-e.left,r=o.y-e.top,l=this.curveIntensity*(Math.abs(n-s)/2);return html`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;">
+var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length,r=s<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,o,n);else for(var l=e.length-1;l>=0;l--)(i=e[l])&&(r=(s<3?i(r):s>3?i(t,o,r):i(t,o))||r);return s>3&&r&&Object.defineProperty(t,o,r),r};import{html as e,css as t}from"lit";import{customElement as o,property as n}from"lit/decorators.js";import{IdentityDomLink as i,IdentityAssigner as s,NodeUtilities as r}from"../node-structure";import{ResizeObserver as l}from"resize-observer";import{SelectableElement as d}from"./selectable-element";import{project as c}from"./flow-editor";let ConnectionLine=class extends d{constructor(){super(),this.fancyLine=!0,this.curveIntensity=1,this.nodeChanged=()=>{this.requestUpdate()},this.polylineId=s.generateIdentity()}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.disconnect(),c.removeListener("connectionremoved",this.nodeChanged)}firstUpdated(){super.firstUpdated();let e=this.shadowRoot.getElementById(this.polylineId);e&&this.setHandle(e)}render(){if(this.isInvalid){let t=r.getSocketFromID(this.connection.from,c.nodes),o=r.getSocketFromID(this.connection.to,c.nodes);if(this.fromNodeElement=i.map[t.nodeId],this.toNodeElement=i.map[o.nodeId],this.fromElement=i.map[t.id],this.toElement=i.map[o.id],this.isInvalid)return console.warn(this.fromNodeElement),console.warn(this.toNodeElement),console.warn(this.fromElement),console.warn(this.toElement),console.warn("Attempt to render invalid connection"),e``;this.fromNodeElement.addEventListener("updated",this.nodeChanged),this.toNodeElement.addEventListener("updated",this.nodeChanged),this.resizeObserver=new l(this.nodeChanged),this.resizeObserver.observe(this.fromNodeElement),this.resizeObserver.observe(this.toNodeElement)}let t=this.workspace.clientRect,o=this.fromElement.connectionPosition,n=this.toElement.connectionPosition;if(this.fancyLine){let i=o.x-t.left,s=o.y-t.top,r=n.x-t.left,l=n.y-t.top,d=this.curveIntensity*(Math.abs(i-r)/2);return e`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;">
                 <path id="${this.polylineId}" 
-                d="M ${n} ${i} C ${n+l} ${i}, ${s-l} ${r}, ${s} ${r}"
+                d="M ${i} ${s} C ${i+d} ${s}, ${r-d} ${l}, ${r} ${l}"
                 selected="${this.selected}"
                 />
-            </svg>`}return html`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;"><polyline id="${this.polylineId}"
+            </svg>`}return e`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;"><polyline id="${this.polylineId}"
         selected="${this.selected}"
         points="
-        ${t.x-e.left}, ${t.y-e.top} 
-        ${o.x-e.left}, ${o.y-e.top}"
+        ${o.x-t.left}, ${o.y-t.top} 
+        ${n.x-t.left}, ${n.y-t.top}"
         ></polyline>
-        </svg>`}static get styles(){return css`
+        </svg>`}static get styles(){return t`
             svg{
                 fill: none;  
                 overflow: visible;
@@ -27,4 +27,4 @@ var __decorate=this&&this.__decorate||function(e,t,o,n){var i,s=arguments.length
             text{
                 fill: red;
                 stroke: none;
-            }`}get isInvalid(){return!(this.fromNodeElement&&this.toNodeElement&&this.fromElement&&this.toElement)}};__decorate([property({attribute:!1})],ConnectionLine.prototype,"connection",void 0),__decorate([property({attribute:!1})],ConnectionLine.prototype,"workspace",void 0),__decorate([property({type:String})],ConnectionLine.prototype,"polylineId",void 0),ConnectionLine=__decorate([customElement("connection-line")],ConnectionLine);export{ConnectionLine};
+            }`}get isInvalid(){return!this.fromNodeElement||!this.toNodeElement||!this.fromElement||!this.toElement}};__decorate([n({attribute:!1})],ConnectionLine.prototype,"connection",void 0),__decorate([n({attribute:!1})],ConnectionLine.prototype,"workspace",void 0),__decorate([n({type:String})],ConnectionLine.prototype,"polylineId",void 0),ConnectionLine=__decorate([o("connection-line")],ConnectionLine);export{ConnectionLine};

package/lib/flow-viewer/components/context-menu.d.ts

@@ -4,7 +4,7 @@ declare const ContextMenu_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -20,7 +20,7 @@ export declare class ContextMenu extends ContextMenu_base {
     private container;
     protected firstUpdated(): void;
     protected updated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private closeCallback;
     private buttonTemplate;
     private separatorTemplate;

package/lib/flow-viewer/components/context-menu.js

@@ -1,4 +1,4 @@
-var ContextMenu_1,__decorate=this&&this.__decorate||function(t,e,n,o){var i,r=arguments.length,s=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,n,o);else for(var a=t.length-1;a>=0;a--)(i=t[a])&&(s=(r<3?i(s):r>3?i(e,n,s):i(e,n))||s);return r>3&&s&&Object.defineProperty(e,n,s),s};import{LitElement,html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{translate,i18next}from"@openremote/or-translate";let ContextMenu=ContextMenu_1=class extends(translate(i18next)(LitElement)){constructor(){super(...arguments),this.entries=[],this.isOpen=!1,this.closeCallback=()=>{ContextMenu_1.close()}}static get opened(){return ContextMenu_1.main.isOpen}static get styles(){return css`
+var ContextMenu_1,__decorate=this&&this.__decorate||function(e,t,n,o){var i,r=arguments.length,s=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(i=e[a])&&(s=(r<3?i(s):r>3?i(t,n,s):i(t,n))||s);return r>3&&s&&Object.defineProperty(t,n,s),s};import{LitElement as e,html as t,css as n}from"lit";import{customElement as o,property as i}from"lit/decorators.js";import{translate as r,i18next as s}from"@openremote/or-translate";let ContextMenu=ContextMenu_1=class extends r(s)(e){constructor(){super(...arguments),this.entries=[],this.isOpen=!1,this.closeCallback=()=>{ContextMenu_1.close()}}static get opened(){return ContextMenu_1.main.isOpen}static get styles(){return n`
         :host{
             display: inline-block;
             position: fixed;
@@ -43,7 +43,7 @@ var ContextMenu_1,__decorate=this&&this.__decorate||function(t,e,n,o){var i,r=ar
             border-color: rgb(234,234,234);
             padding: 0;
             margin: 5px 10px calc(5px - var(--thickness)) 10px;
-        }`}static open(t,e,n,o){ContextMenu_1.main.container=n,ContextMenu_1.main.style.top=e+"px",ContextMenu_1.main.style.left=t+"px",window.addEventListener("mousedown",ContextMenu_1.main.closeCallback),window.addEventListener("blur",ContextMenu_1.main.closeCallback),window.addEventListener("wheel",ContextMenu_1.main.closeCallback),ContextMenu_1.main.entries=o,ContextMenu_1.main.isOpen=!0}static close(){window.removeEventListener("mousedown",ContextMenu_1.main.closeCallback),window.removeEventListener("blur",ContextMenu_1.main.closeCallback),window.removeEventListener("wheel",ContextMenu_1.main.closeCallback),ContextMenu_1.main.isOpen=!1}firstUpdated(){ContextMenu_1.main=this}updated(){if(!this.container)return;const t=this.container.getBoundingClientRect(),e=this.getBoundingClientRect();e.top+e.height>t.bottom&&(this.style.top=e.top-e.height+"px"),e.left+e.width>t.right&&(this.style.left=t.right-e.width+"px")}render(){if(this.style.display=this.isOpen?"unset":"none",!this.isOpen)return html``;const t=this.entries.map((t=>{switch(t.type){case"button":return this.buttonTemplate(t);case"separator":return this.separatorTemplate()}}));return html`${t.length>0?t:html`<div class="context-menu-button muted">...</div>`}`}buttonTemplate(t){return html`
-        <div class="context-menu-button ${t.disabled?"muted":""}" @mousedown="${e=>{1===e.buttons&&(ContextMenu_1.close(),t.action&&t.action(),e.stopImmediatePropagation(),e.stopPropagation())}}">
-        ${t.icon?html`<or-icon icon="${t.icon}"></or-icon>`:null}
-        <span class="label">${t.label}</span></div>`}separatorTemplate(){return html`<div class="context-menu-separator"></div>`}};__decorate([property({attribute:!1})],ContextMenu.prototype,"isOpen",void 0),ContextMenu=ContextMenu_1=__decorate([customElement("context-menu")],ContextMenu);export{ContextMenu};
+        }`}static open(e,t,n,o){ContextMenu_1.main.container=n,ContextMenu_1.main.style.top=t+"px",ContextMenu_1.main.style.left=e+"px",window.addEventListener("mousedown",ContextMenu_1.main.closeCallback),window.addEventListener("blur",ContextMenu_1.main.closeCallback),window.addEventListener("wheel",ContextMenu_1.main.closeCallback),ContextMenu_1.main.entries=o,ContextMenu_1.main.isOpen=!0}static close(){window.removeEventListener("mousedown",ContextMenu_1.main.closeCallback),window.removeEventListener("blur",ContextMenu_1.main.closeCallback),window.removeEventListener("wheel",ContextMenu_1.main.closeCallback),ContextMenu_1.main.isOpen=!1}firstUpdated(){ContextMenu_1.main=this}updated(){if(!this.container)return;let e=this.container.getBoundingClientRect(),t=this.getBoundingClientRect();t.top+t.height>e.bottom&&(this.style.top=t.top-t.height+"px"),t.left+t.width>e.right&&(this.style.left=e.right-t.width+"px")}render(){if(this.style.display=this.isOpen?"unset":"none",!this.isOpen)return t``;let e=this.entries.map(e=>{switch(e.type){case"button":return this.buttonTemplate(e);case"separator":return this.separatorTemplate()}});return t`${e.length>0?e:t`<div class="context-menu-button muted">...</div>`}`}buttonTemplate(e){return t`
+        <div class="context-menu-button ${e.disabled||0?"muted":""}" @mousedown="${t=>{1===t.buttons&&(ContextMenu_1.close(),e.action&&e.action(),t.stopImmediatePropagation(),t.stopPropagation())}}">
+        ${e.icon?t`<or-icon icon="${e.icon}"></or-icon>`:null}
+        <span class="label">${e.label}</span></div>`}separatorTemplate(){return t`<div class="context-menu-separator"></div>`}};__decorate([i({attribute:!1})],ContextMenu.prototype,"isOpen",void 0),ContextMenu=ContextMenu_1=__decorate([o("context-menu")],ContextMenu);export{ContextMenu};

package/lib/flow-viewer/components/editor-workspace.d.ts

@@ -6,7 +6,7 @@ declare const EditorWorkspace_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -56,7 +56,7 @@ export declare class EditorWorkspace extends EditorWorkspace_base {
     };
     pasteAt(x: number, y: number): Promise<void>;
     protected firstUpdated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private startPan;
     private onMove;
     private onZoom;

package/lib/flow-viewer/components/editor-workspace.js

@@ -1,5 +1,5 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s},__awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))((function(n,r){function s(t){try{c(i.next(t))}catch(t){r(t)}}function a(t){try{c(i.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,a)}c((i=i.apply(t,e||[])).next())}))};import{LitElement,html}from"lit";import{customElement,property}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{IdentityDomLink}from"../node-structure";import{List}from"linqts";import{EditorWorkspaceStyle}from"../styles/editor-workspace-style";import{i18next,translate}from"@openremote/or-translate";import{ContextMenu}from"./context-menu";import{project,input,copyPasteManager}from"./flow-editor";import{createContextMenuButtons}from"./workspace-contextmenu-options";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";let EditorWorkspace=class extends(translate(i18next)(LitElement)){get clientRect(){return this.cachedClientRect}static get styles(){return EditorWorkspaceStyle}get halfSize(){const t=this.cachedClientRect;return{x:t.width/2,y:t.height/2}}get isCameraInDefaultPosition(){return Math.abs(this.camera.x)<.05&&Math.abs(this.camera.y)<.05&&this.camera.zoom>.95&&this.camera.zoom<1.05}constructor(){super(),this.camera={x:0,y:0,zoom:1},this.topNodeZindex=1,this.scrollSensitivity=1.25,this.zoomLowerBound=.2,this.zoomUpperBound=10,this.connectionDragging=!1,this.connectionFrom={x:0,y:0},this.connectionTo={x:0,y:0},this.isPanning=!1,this.onMove=t=>{const e=window.devicePixelRatio;this.camera={x:this.camera.x+t.movementX/this.camera.zoom/e,y:this.camera.y+t.movementY/this.camera.zoom/e,zoom:this.camera.zoom},this.dispatchEvent(new CustomEvent("pan"))},this.onZoom=t=>{if(this.connectionDragging)return;if(this.isPanning)return;const e=.9*this.scrollSensitivity,o=t.deltaY<0?this.camera.zoom*e:this.camera.zoom/e;o<this.zoomLowerBound||o>this.zoomUpperBound||(this.camera={x:this.camera.x,y:this.camera.y,zoom:o},this.dispatchEvent(new CustomEvent("zoom")))},this.onEmptyConnectionRelease=t=>{project.isCurrentlyConnecting&&project.endConnectionDrag(t,null,!1)},this.stopPan=()=>{this.isPanning&&(window.removeEventListener("mousemove",this.onMove),this.isPanning=!1)},project.addListener("nodeadded",(t=>{this.requestUpdate()})),project.addListener("noderemoved",(t=>{this.requestUpdate()})),project.addListener("cleared",(()=>{this.requestUpdate()})),project.addListener("connectionstart",((t,e)=>{if(1!==t.buttons)return;const o=IdentityDomLink.map[e.id].connectionPosition;this.connectionFrom=this.pageToOffset(o),this.addEventListener("mousemove",project.connectionDragging),this.addEventListener("mouseup",this.onEmptyConnectionRelease)})),project.addListener("connecting",(t=>{this.connectionTo={x:t.pageX-this.clientRect.left,y:t.pageY-this.clientRect.top},this.connectionDragging=!0})),project.addListener("connectionend",(()=>{this.connectionDragging=!1,this.removeEventListener("mousemove",project.connectionDragging)})),project.addListener("fitview",(()=>{this.fitCamera(project.nodes)})),window.addEventListener("resize",(()=>{this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))})),this.addEventListener("mousedown",(t=>{this.startPan(t),1===t.buttons&&input.clearSelection()})),this.addEventListener("contextmenu",(t=>{const e=createContextMenuButtons(this,t);ContextMenu.open(t.pageX,t.pageY,this,e),t.preventDefault()})),project.workspace=this,this.addEventListener("wheel",this.onZoom,{passive:!0})}resetCamera(){this.camera={x:0,y:0,zoom:1},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}fitCamera(t,e=25){const o=new List;if(o.AddRange(t),0==o.Count())return;const i=o.OrderBy((t=>t.position.x)).First(),n=o.OrderBy((t=>t.position.y)).First(),r=o.OrderByDescending((t=>t.position.x+IdentityDomLink.map[t.id].scrollWidth)).First(),s=o.OrderByDescending((t=>t.position.y+IdentityDomLink.map[t.id].scrollHeight)).First(),a=IdentityDomLink.map[r.id].scrollWidth,c=IdentityDomLink.map[s.id].scrollHeight,p=i.position.x-e,d=r.position.x+e+a,h=s.position.y+e+c,m=n.position.y-e,l=d-p,u=h-m,y=this.clientRect,v=(p+d)/2,g=(h+m)/2,w=Math.min(y.width/l,y.height/u);this.camera={x:-v,y:-g,zoom:Math.min(Math.max(this.zoomLowerBound,w),this.zoomUpperBound)},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}offsetToWorld(t){const e=this.halfSize;return{x:(t.x-e.x)/this.camera.zoom-this.camera.x,y:(t.y-e.y)/this.camera.zoom-this.camera.y}}worldToOffset(t){const e=this.halfSize;return{x:(t.x+this.camera.x)*this.camera.zoom+e.x,y:(t.y+this.camera.y)*this.camera.zoom+e.y}}pageToOffset(t){const e=this.clientRect;return{x:t.x-e.left,y:t.y-e.top}}pasteAt(t,e){return __awaiter(this,void 0,void 0,(function*(){const o=copyPasteManager.getFromClipboard({x:t,y:e});o.nodes.forEach((t=>{project.addNode(t)})),yield this.updateComplete,o.connections.forEach((t=>{project.createConnection(t.from,t.to)}))}))}firstUpdated(){this.cachedClientRect=this.getBoundingClientRect(),this.application.nodePanel.drawer&&this.application.nodePanel.drawer.addEventListener("or-mwc-drawer-changed",(t=>__awaiter(this,void 0,void 0,(function*(){this.style.width=t.detail?"calc(100% - 255px)":"",yield this.updateComplete,this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))}))))}render(){return html`
-        ${repeat(project.nodes,(t=>t.id),(t=>html`<flow-node .node="${t}" .workspace="${this}"></flow-node>`))}
+var __decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length,s=r<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(s=(r<3?n(s):r>3?n(e,o,s):n(e,o))||s);return r>3&&s&&Object.defineProperty(e,o,s),s},__awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))(function(n,r){function s(t){try{c(i.next(t))}catch(t){r(t)}}function a(t){try{c(i.throw(t))}catch(t){r(t)}}function c(t){var e;t.done?n(t.value):((e=t.value)instanceof o?e:new o(function(t){t(e)})).then(s,a)}c((i=i.apply(t,e||[])).next())})};import{LitElement as t,html as e}from"lit";import{customElement as o,property as i}from"lit/decorators.js";import{repeat as n}from"lit/directives/repeat.js";import{IdentityDomLink as r}from"../node-structure";import{List as s}from"linqts";import{EditorWorkspaceStyle as a}from"../styles/editor-workspace-style";import{i18next as c,translate as d}from"@openremote/or-translate";import{ContextMenu as h}from"./context-menu";import{project as m,input as p,copyPasteManager as l}from"./flow-editor";import{createContextMenuButtons as u}from"./workspace-contextmenu-options";import{InputType as v}from"@openremote/or-mwc-components/or-mwc-input";let EditorWorkspace=class extends d(c)(t){get clientRect(){return this.cachedClientRect}static get styles(){return a}get halfSize(){let t=this.cachedClientRect;return{x:t.width/2,y:t.height/2}}get isCameraInDefaultPosition(){return .05>Math.abs(this.camera.x)&&.05>Math.abs(this.camera.y)&&this.camera.zoom>.95&&this.camera.zoom<1.05}constructor(){super(),this.camera={x:0,y:0,zoom:1},this.topNodeZindex=1,this.scrollSensitivity=1.25,this.zoomLowerBound=.2,this.zoomUpperBound=10,this.connectionDragging=!1,this.connectionFrom={x:0,y:0},this.connectionTo={x:0,y:0},this.isPanning=!1,this.onMove=t=>{let e=window.devicePixelRatio;this.camera={x:this.camera.x+t.movementX/this.camera.zoom/e,y:this.camera.y+t.movementY/this.camera.zoom/e,zoom:this.camera.zoom},this.dispatchEvent(new CustomEvent("pan"))},this.onZoom=t=>{if(this.connectionDragging||this.isPanning)return;let e=.9*this.scrollSensitivity,o=t.deltaY<0?this.camera.zoom*e:this.camera.zoom/e;o<this.zoomLowerBound||o>this.zoomUpperBound||(this.camera={x:this.camera.x,y:this.camera.y,zoom:o},this.dispatchEvent(new CustomEvent("zoom")))},this.onEmptyConnectionRelease=t=>{m.isCurrentlyConnecting&&m.endConnectionDrag(t,null,!1)},this.stopPan=()=>{this.isPanning&&(window.removeEventListener("mousemove",this.onMove),this.isPanning=!1)},m.addListener("nodeadded",t=>{this.requestUpdate()}),m.addListener("noderemoved",t=>{this.requestUpdate()}),m.addListener("cleared",()=>{this.requestUpdate()}),m.addListener("connectionstart",(t,e)=>{if(1!==t.buttons)return;let o=r.map[e.id].connectionPosition;this.connectionFrom=this.pageToOffset(o),this.addEventListener("mousemove",m.connectionDragging),this.addEventListener("mouseup",this.onEmptyConnectionRelease)}),m.addListener("connecting",t=>{this.connectionTo={x:t.pageX-this.clientRect.left,y:t.pageY-this.clientRect.top},this.connectionDragging=!0}),m.addListener("connectionend",()=>{this.connectionDragging=!1,this.removeEventListener("mousemove",m.connectionDragging)}),m.addListener("fitview",()=>{this.fitCamera(m.nodes)}),window.addEventListener("resize",()=>{this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))}),this.addEventListener("mousedown",t=>{this.startPan(t),1===t.buttons&&p.clearSelection()}),this.addEventListener("contextmenu",t=>{let e=u(this,t);h.open(t.pageX,t.pageY,this,e),t.preventDefault()}),m.workspace=this,this.addEventListener("wheel",this.onZoom,{passive:!0})}resetCamera(){this.camera={x:0,y:0,zoom:1},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}fitCamera(t,e=25){let o=new s;if(o.AddRange(t),0==o.Count())return;let i=o.OrderBy(t=>t.position.x).First(),n=o.OrderBy(t=>t.position.y).First(),a=o.OrderByDescending(t=>t.position.x+r.map[t.id].scrollWidth).First(),c=o.OrderByDescending(t=>t.position.y+r.map[t.id].scrollHeight).First(),d=r.map[a.id].scrollWidth,h=r.map[c.id].scrollHeight,m={left:i.position.x-e,right:a.position.x+e+d,top:c.position.y+e+h,bottom:n.position.y-e},p=m.right-m.left,l=m.top-m.bottom,u=this.clientRect,v={x:(m.left+m.right)/2,y:(m.top+m.bottom)/2},g=Math.min(u.width/p,u.height/l);this.camera={x:-v.x,y:-v.y,zoom:Math.min(Math.max(this.zoomLowerBound,g),this.zoomUpperBound)},this.dispatchEvent(new CustomEvent("pan")),this.dispatchEvent(new CustomEvent("zoom"))}offsetToWorld(t){let e=this.halfSize;return{x:(t.x-e.x)/this.camera.zoom-this.camera.x,y:(t.y-e.y)/this.camera.zoom-this.camera.y}}worldToOffset(t){let e=this.halfSize;return{x:(t.x+this.camera.x)*this.camera.zoom+e.x,y:(t.y+this.camera.y)*this.camera.zoom+e.y}}pageToOffset(t){let e=this.clientRect;return{x:t.x-e.left,y:t.y-e.top}}pasteAt(t,e){return __awaiter(this,void 0,void 0,function*(){let o=l.getFromClipboard({x:t,y:e});o.nodes.forEach(t=>{m.addNode(t)}),yield this.updateComplete,o.connections.forEach(t=>{m.createConnection(t.from,t.to)})})}firstUpdated(){this.cachedClientRect=this.getBoundingClientRect(),this.application.nodePanel.drawer&&this.application.nodePanel.drawer.addEventListener("or-mwc-drawer-changed",t=>__awaiter(this,void 0,void 0,function*(){this.style.width=t.detail?"calc(100% - 255px)":"",yield this.updateComplete,this.cachedClientRect=this.getBoundingClientRect(),this.dispatchEvent(new CustomEvent("pan"))}))}render(){return e`
+        ${n(m.nodes,t=>t.id,t=>e`<flow-node .node="${t}" .workspace="${this}"></flow-node>`)}
         <connection-container .workspace="${this}"></connection-container>
         <svg>
             <line style="display: 
@@ -14,7 +14,7 @@ var __decorate=this&&this.__decorate||function(t,e,o,i){var n,r=arguments.length
         </svg>
         <selection-box .workspace="${this}"></selection-box>
         <div class="view-options" style="z-index: ${this.topNodeZindex+1}">
-            ${this.isCameraInDefaultPosition?null:html`<or-mwc-input type="${InputType.BUTTON}" icon="vector-square" @or-mwc-input-changed="${this.resetCamera}" label="${i18next.t("resetView","Reset view")}"></or-mwc-input>`}
-            ${0!==project.nodes.length?html`<or-mwc-input type="button" icon="fit-to-page-outline" @or-mwc-input-changed="${()=>this.fitCamera(project.nodes)}" label="${i18next.t("fitView","Fit view")}"></or-mwc-input>`:null}
+            ${!this.isCameraInDefaultPosition?e`<or-mwc-input type="${v.BUTTON}" icon="vector-square" @or-mwc-input-changed="${this.resetCamera}" label="${c.t("resetView","Reset view")}"></or-mwc-input>`:null}
+            ${0!==m.nodes.length?e`<or-mwc-input type="button" icon="fit-to-page-outline" @or-mwc-input-changed="${()=>this.fitCamera(m.nodes)}" label="${c.t("fitView","Fit view")}"></or-mwc-input>`:null}
         </div>
-        `}startPan(t){return!this.connectionDragging&&4===t.buttons&&(this.isPanning=!0,window.addEventListener("mousemove",this.onMove),window.addEventListener("mouseup",this.stopPan),void t.preventDefault())}};__decorate([property({attribute:!1})],EditorWorkspace.prototype,"camera",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"topNodeZindex",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"scrollSensitivity",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"zoomLowerBound",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"zoomUpperBound",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"application",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"connectionDragging",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"connectionFrom",void 0),__decorate([property({attribute:!1})],EditorWorkspace.prototype,"connectionTo",void 0),EditorWorkspace=__decorate([customElement("editor-workspace")],EditorWorkspace);export{EditorWorkspace};
+        `}startPan(t){if(this.connectionDragging||4!==t.buttons)return!1;this.isPanning=!0,window.addEventListener("mousemove",this.onMove),window.addEventListener("mouseup",this.stopPan),t.preventDefault()}};__decorate([i({attribute:!1})],EditorWorkspace.prototype,"camera",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"topNodeZindex",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"scrollSensitivity",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"zoomLowerBound",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"zoomUpperBound",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"application",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionDragging",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionFrom",void 0),__decorate([i({attribute:!1})],EditorWorkspace.prototype,"connectionTo",void 0),EditorWorkspace=__decorate([o("editor-workspace")],EditorWorkspace);export{EditorWorkspace};

package/lib/flow-viewer/components/flow-editor.d.ts

@@ -23,7 +23,7 @@ declare const FlowEditor_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -41,7 +41,7 @@ export declare class FlowEditor extends FlowEditor_base implements RuleView {
     set ruleset(ruleset: RulesetUnion);
     static get styles(): import("lit").CSSResult[];
     protected firstUpdated(): Promise<void>;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private serialiseRule;
 }
 export {};

package/lib/flow-viewer/components/flow-editor.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a},__awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))((function(i,s){function a(e){try{p(r.next(e))}catch(e){s(e)}}function n(e){try{p(r.throw(e))}catch(e){s(e)}}function p(e){var t;e.done?i(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(a,n)}p((r=r.apply(e,t||[])).next())}))};import{LitElement,html,css}from"lit";import{customElement,property,query}from"lit/decorators.js";import{Integration}from"../services/integration";import{CopyPasteManager}from"../services/copy-paste-manager";import{Project}from"../services/project";import{Input}from"../services/input";import{ModalService}from"../services/modal";import{Exporter}from"../services/exporter";import{Shortcuts}from"../services/shortcuts";import{OrRulesRuleChangedEvent}from"../..";import{translate,i18next}from"@openremote/or-translate";import{NodeUtilities}from"../node-structure";export const integration=new Integration;export const copyPasteManager=new CopyPasteManager;export const project=new Project;export const input=new Input;export const modal=new ModalService;export const exporter=new Exporter;export const shortcuts=new Shortcuts;export const newIds=new Set;let FlowEditor=class extends(translate(i18next)(LitElement)){constructor(){super(),this.showTopbar=!1}validate(){return NodeUtilities.validate(exporter.jsonToFlow(this._ruleset.rules||"{}"))}beforeSave(){this.readonly||this.serialiseRule()}set ruleset(e){if(this._ruleset!==e)if(this._ruleset=e,e.rules){const t=exporter.jsonToFlow(e.rules);project.fromNodeCollection(t),project.setCurrentProject(e.id,e.name,t.description)}else project.clear(!0)}static get styles(){return[css`
+var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length,a=s<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,o,r);else for(var p=e.length-1;p>=0;p--)(i=e[p])&&(a=(s<3?i(a):s>3?i(t,o,a):i(t,o))||a);return s>3&&a&&Object.defineProperty(t,o,a),a},__awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))(function(i,s){function a(e){try{n(r.next(e))}catch(e){s(e)}}function p(e){try{n(r.throw(e))}catch(e){s(e)}}function n(e){var t;e.done?i(e.value):((t=e.value)instanceof o?t:new o(function(e){e(t)})).then(a,p)}n((r=r.apply(e,t||[])).next())})};import{LitElement as e,html as t,css as o}from"lit";import{customElement as r,property as i,query as s}from"lit/decorators.js";import{Integration as a}from"../services/integration";import{CopyPasteManager as p}from"../services/copy-paste-manager";import{Project as n}from"../services/project";import{Input as l}from"../services/input";import{ModalService as c}from"../services/modal";import{Exporter as d}from"../services/exporter";import{Shortcuts as h}from"../services/shortcuts";import{OrRulesRuleChangedEvent as u}from"../..";import{translate as w,i18next as m}from"@openremote/or-translate";import{NodeUtilities as f}from"../node-structure";export const integration=new a;export const copyPasteManager=new p;export const project=new n;export const input=new l;export const modal=new c;export const exporter=new d;export const shortcuts=new h;export const newIds=new Set;let FlowEditor=class extends w(m)(e){constructor(){super(),this.showTopbar=!1}validate(){return f.validate(exporter.jsonToFlow(this._ruleset.rules||"{}"))}beforeSave(){this.readonly||this.serialiseRule()}set ruleset(e){if(this._ruleset!==e)if(this._ruleset=e,e.rules){let t=exporter.jsonToFlow(e.rules);project.fromNodeCollection(t),project.setCurrentProject(e.id,e.name,t.description)}else project.clear(!0)}static get styles(){return[o`
             :host{
                 user-select: none;
                 display: grid;
@@ -38,10 +38,10 @@ var __decorate=this&&this.__decorate||function(e,t,o,r){var i,s=arguments.length
                 --output-color-h: hsl(282, 58%, 54%);
                 
                 overflow: hidden;
-            }`]}firstUpdated(){return __awaiter(this,void 0,void 0,(function*(){yield integration.refreshNodes(),this.requestUpdate(),yield this.updateComplete,project.emit("fitview"),project.addListener("changed",(()=>{this.serialiseRule(),this.dispatchEvent(new OrRulesRuleChangedEvent(this.validate()))}))}))}render(){return this.showTopbar&&(this.style.gridTemplateRows="var(--topbar-height) 1fr",this.style.gridTemplateAreas='"topbar topbar" "workspace node-panel";'),html`
-        ${this.showTopbar?html`<top-bar .application="${this}" style="grid-area: topbar"></top-bar>`:""}
+            }`]}firstUpdated(){return __awaiter(this,void 0,void 0,function*(){yield integration.refreshNodes(),this.requestUpdate(),yield this.updateComplete,project.emit("fitview"),project.addListener("changed",()=>{this.serialiseRule(),this.dispatchEvent(new u(this.validate()))})})}render(){return this.showTopbar&&(this.style.gridTemplateRows="var(--topbar-height) 1fr",this.style.gridTemplateAreas='"topbar topbar" "workspace node-panel";'),t`
+        ${this.showTopbar?t`<top-bar .application="${this}" style="grid-area: topbar"></top-bar>`:""}
         <node-panel .application="${this}" style="grid-area: node-panel; overflow:auto;" .nodes= "${integration.nodes}"></node-panel>
         <editor-workspace .application="${this}" id="workspace" style="grid-area: workspace"></editor-workspace>
         <context-menu></context-menu>
         <popup-modal id="popup-modal"></popup-modal>
-        `}serialiseRule(){this._ruleset.rules=exporter.flowToJson(project.toNodeCollection(this._ruleset.name,project.existingFlowRuleDesc))}};__decorate([query("node-panel")],FlowEditor.prototype,"nodePanel",void 0),__decorate([query("top-bar")],FlowEditor.prototype,"topBar",void 0),__decorate([query("editor-workspace")],FlowEditor.prototype,"editorWorkspace",void 0),__decorate([property({type:Boolean})],FlowEditor.prototype,"showTopbar",void 0),__decorate([property({attribute:!1})],FlowEditor.prototype,"readonly",void 0),__decorate([property({attribute:!1})],FlowEditor.prototype,"_ruleset",void 0),FlowEditor=__decorate([customElement("flow-editor")],FlowEditor);export{FlowEditor};
+        `}serialiseRule(){this._ruleset.rules=exporter.flowToJson(project.toNodeCollection(this._ruleset.name,project.existingFlowRuleDesc))}};__decorate([s("node-panel")],FlowEditor.prototype,"nodePanel",void 0),__decorate([s("top-bar")],FlowEditor.prototype,"topBar",void 0),__decorate([s("editor-workspace")],FlowEditor.prototype,"editorWorkspace",void 0),__decorate([i({type:Boolean})],FlowEditor.prototype,"showTopbar",void 0),__decorate([i({attribute:!1})],FlowEditor.prototype,"readonly",void 0),__decorate([i({attribute:!1})],FlowEditor.prototype,"_ruleset",void 0),FlowEditor=__decorate([r("flow-editor")],FlowEditor);export{FlowEditor};

package/lib/flow-viewer/components/flow-node-socket.d.ts

@@ -4,7 +4,7 @@ declare const FlowNodeSocket_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -24,7 +24,7 @@ export declare class FlowNodeSocket extends FlowNodeSocket_base {
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private forceUpdate;
     private linkIdentity;
 }

package/lib/flow-viewer/components/flow-node-socket.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length,s=n<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,o,i);else for(var d=e.length-1;d>=0;d--)(r=e[d])&&(s=(n<3?r(s):n>3?r(t,o,s):r(t,o))||s);return n>3&&s&&Object.defineProperty(t,o,s),s};import{LitElement,html,css}from"lit";import{customElement,property,query}from"lit/decorators.js";import{IdentityDomLink}from"../node-structure";import{Utilities}from"../utils";import{i18next,translate}from"@openremote/or-translate";import{project}from"./flow-editor";let FlowNodeSocket=class extends(translate(i18next)(LitElement)){constructor(){super(...arguments),this.renderLabel=!1,this.identityDeleted=!1,this.forceUpdate=()=>this.requestUpdate()}get connectionPosition(){return Utilities.getCenter(this.circleElem.getBoundingClientRect())}static get styles(){return css`
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,d=arguments.length,n=d<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(n=(d<3?r(n):d>3?r(t,o,n):r(t,o))||n);return d>3&&n&&Object.defineProperty(t,o,n),n};import{LitElement as e,html as t,css as o}from"lit";import{customElement as i,property as r,query as d}from"lit/decorators.js";import{IdentityDomLink as n}from"../node-structure";import{Utilities as s}from"../utils";import{i18next as c,translate as a}from"@openremote/or-translate";import{project as l}from"./flow-editor";let FlowNodeSocket=class extends a(c)(e){constructor(){super(...arguments),this.renderLabel=!1,this.identityDeleted=!1,this.forceUpdate=()=>this.requestUpdate()}get connectionPosition(){return s.getCenter(this.circleElem.getBoundingClientRect())}static get styles(){return o`
         :host{
             width: auto;
             height: var(--socket-size);
@@ -30,6 +30,6 @@ var __decorate=this&&this.__decorate||function(e,t,o,i){var r,n=arguments.length
             border-radius: 100%;
             pointer-events: none;
             border: 1px solid rgb(80,80,80);
-        }`}get socketTypeString(){return this.socket.type.toString().toLowerCase().replace("_array","")}disconnectedCallback(){this.identityDeleted=delete IdentityDomLink.map[this.socket.id],project.removeListener("connectioncreated",this.forceUpdate),project.removeListener("connectionremoved",this.forceUpdate),project.removeListener("nodeadded",this.forceUpdate),project.removeListener("noderemoved",this.forceUpdate),project.removeListener("cleared",this.forceUpdate),IdentityDomLink.map[this.socket.nodeId].removeEventListener("updated",this.forceUpdate)}firstUpdated(){this.title=Utilities.humanLike(this.socketTypeString),this.linkIdentity(),project.addListener("connectioncreated",this.forceUpdate),project.addListener("connectionremoved",this.forceUpdate),project.addListener("nodeadded",this.forceUpdate),project.addListener("noderemoved",this.forceUpdate),project.addListener("cleared",this.forceUpdate),IdentityDomLink.map[this.socket.nodeId].addEventListener("updated",this.forceUpdate);const e="input"===this.side;this.addEventListener("mousedown",(t=>{this.linkIdentity(),1===t.buttons&&(project.isCurrentlyConnecting||(project.startConnectionDrag(t,this.socket,e),t.stopPropagation(),t.stopImmediatePropagation()))})),this.addEventListener("mouseup",(t=>{project.createUndoSnapshot(),this.linkIdentity(),project.endConnectionDrag(t,this.socket,e),project.notifyChange(),1===t.buttons&&(t.stopPropagation(),t.stopImmediatePropagation())}))}updated(){this.linkIdentity()}render(){const e=`var(--${this.socketTypeString})`,t=html`<div class="socket">
+        }`}get socketTypeString(){return this.socket.type.toString().toLowerCase().replace("_array","")}disconnectedCallback(){this.identityDeleted=delete n.map[this.socket.id],l.removeListener("connectioncreated",this.forceUpdate),l.removeListener("connectionremoved",this.forceUpdate),l.removeListener("nodeadded",this.forceUpdate),l.removeListener("noderemoved",this.forceUpdate),l.removeListener("cleared",this.forceUpdate),n.map[this.socket.nodeId].removeEventListener("updated",this.forceUpdate)}firstUpdated(){this.title=s.humanLike(this.socketTypeString),this.linkIdentity(),l.addListener("connectioncreated",this.forceUpdate),l.addListener("connectionremoved",this.forceUpdate),l.addListener("nodeadded",this.forceUpdate),l.addListener("noderemoved",this.forceUpdate),l.addListener("cleared",this.forceUpdate),n.map[this.socket.nodeId].addEventListener("updated",this.forceUpdate);let e="input"===this.side;this.addEventListener("mousedown",t=>{this.linkIdentity(),1===t.buttons&&(l.isCurrentlyConnecting||(l.startConnectionDrag(t,this.socket,e),t.stopPropagation(),t.stopImmediatePropagation()))}),this.addEventListener("mouseup",t=>{l.createUndoSnapshot(),this.linkIdentity(),l.endConnectionDrag(t,this.socket,e),l.notifyChange(),1===t.buttons&&(t.stopPropagation(),t.stopImmediatePropagation())})}updated(){this.linkIdentity()}render(){let e=`var(--${this.socketTypeString})`,o=t`<div class="socket">
             <div class="circle" id="circle" style="background: ${e}"></div>
-            </div>`;if(!this.renderLabel)return t;const o=html`<div class="label">${i18next.t(Utilities.humanLike(this.socket.name))}</div>`;return"input"===this.side?html`${t}${o}`:html`${o}${t}`}linkIdentity(){this.identityDeleted||(IdentityDomLink.map[this.socket.id]=this)}};__decorate([property({type:Object})],FlowNodeSocket.prototype,"socket",void 0),__decorate([property({type:String})],FlowNodeSocket.prototype,"side",void 0),__decorate([property({type:Boolean})],FlowNodeSocket.prototype,"renderLabel",void 0),__decorate([query("#circle")],FlowNodeSocket.prototype,"circleElem",void 0),FlowNodeSocket=__decorate([customElement("flow-node-socket")],FlowNodeSocket);export{FlowNodeSocket};
+            </div>`;if(!this.renderLabel)return o;let i=t`<div class="label">${c.t(s.humanLike(this.socket.name))}</div>`;return"input"===this.side?t`${o}${i}`:t`${i}${o}`}linkIdentity(){this.identityDeleted||(n.map[this.socket.id]=this)}};__decorate([r({type:Object})],FlowNodeSocket.prototype,"socket",void 0),__decorate([r({type:String})],FlowNodeSocket.prototype,"side",void 0),__decorate([r({type:Boolean})],FlowNodeSocket.prototype,"renderLabel",void 0),__decorate([d("#circle")],FlowNodeSocket.prototype,"circleElem",void 0),FlowNodeSocket=__decorate([i("flow-node-socket")],FlowNodeSocket);export{FlowNodeSocket};

package/lib/flow-viewer/components/flow-node.d.ts

@@ -13,7 +13,7 @@ export declare class FlowNode extends SelectableElement {
     bringToFront(): void;
     protected firstUpdated(): Promise<void>;
     protected updated(): Promise<void>;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private forceUpdate;
     private setTranslate;
     private startDrag;

package/lib/flow-viewer/components/flow-node.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(t,e,o,i){var n,s=arguments.length,r=s<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,o,i);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(r=(s<3?n(r):s>3?n(e,o,r):n(e,o))||r);return s>3&&r&&Object.defineProperty(e,o,r),r},__awaiter=this&&this.__awaiter||function(t,e,o,i){return new(o||(o=Promise))((function(n,s){function r(t){try{d(i.next(t))}catch(t){s(t)}}function a(t){try{d(i.throw(t))}catch(t){s(t)}}function d(t){var e;t.done?n(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,a)}d((i=i.apply(t,e||[])).next())}))};import{css,html}from"lit";import{customElement,property}from"lit/decorators.js";import{IdentityDomLink}from"../node-structure";import{FlowNodeStyle}from"../styles/flow-node-style";import{i18next}from"@openremote/or-translate";import{nodeConverter}from"../converters/node-converter";import{SelectableElement}from"./selectable-element";import{newIds,project}from"./flow-editor";let FlowNode=class extends SelectableElement{constructor(){super(),this.frozen=!1,this.minimal=!1,this.isBeingDragged=!1,this.forceUpdate=()=>{this.requestUpdate()},this.setTranslate=()=>{const t=this.workspace.worldToOffset(this.node.position);this.style.transform=`translate(${t.x}px, ${t.y}px) scale(${this.workspace.camera.zoom})`,this.dispatchEvent(new CustomEvent("updated"))},this.startDrag=t=>{this.frozen||1===t.buttons&&(project.createUndoSnapshot(),this.bringToFront(),window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onDrag),this.isBeingDragged=!0)},this.onDrag=t=>{this.node.position={x:this.node.position.x+t.movementX/this.workspace.camera.zoom,y:this.node.position.y+t.movementY/this.workspace.camera.zoom},this.setTranslate()},this.stopDrag=()=>{window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onDrag),this.isBeingDragged=!1,project.notifyChange()},this.linkIdentity=()=>{IdentityDomLink.map[this.node.id]=this}}static get styles(){return[FlowNodeStyle,css`
+var __decorate=this&&this.__decorate||function(e,t,i,o){var n,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(n=e[a])&&(r=(s<3?n(r):s>3?n(t,i,r):n(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r},__awaiter=this&&this.__awaiter||function(e,t,i,o){return new(i||(i=Promise))(function(n,s){function r(e){try{d(o.next(e))}catch(e){s(e)}}function a(e){try{d(o.throw(e))}catch(e){s(e)}}function d(e){var t;e.done?n(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(r,a)}d((o=o.apply(e,t||[])).next())})};import{css as e,html as t}from"lit";import{customElement as i,property as o}from"lit/decorators.js";import{IdentityDomLink as n}from"../node-structure";import{FlowNodeStyle as s}from"../styles/flow-node-style";import{i18next as r}from"@openremote/or-translate";import{nodeConverter as a}from"../converters/node-converter";import{SelectableElement as d}from"./selectable-element";import{newIds as l,project as h}from"./flow-editor";let FlowNode=class extends d{constructor(){super(),this.frozen=!1,this.minimal=!1,this.isBeingDragged=!1,this.forceUpdate=()=>{this.requestUpdate()},this.setTranslate=()=>{let e=this.workspace.worldToOffset(this.node.position);this.style.transform=`translate(${e.x}px, ${e.y}px) scale(${this.workspace.camera.zoom})`,this.dispatchEvent(new CustomEvent("updated"))},this.startDrag=e=>{this.frozen||1===e.buttons&&(h.createUndoSnapshot(),this.bringToFront(),window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onDrag),this.isBeingDragged=!0)},this.onDrag=e=>{this.node.position={x:this.node.position.x+e.movementX/this.workspace.camera.zoom,y:this.node.position.y+e.movementY/this.workspace.camera.zoom},this.setTranslate()},this.stopDrag=()=>{window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onDrag),this.isBeingDragged=!1,h.notifyChange()},this.linkIdentity=()=>{n.map[this.node.id]=this}}static get styles(){return[s,e`
             .internal-item {
                 display: flex;
                 flex-direction: column;
@@ -11,21 +11,21 @@ var __decorate=this&&this.__decorate||function(t,e,o,i){var n,s=arguments.length
                 margin-top:3px;
                 text-align: left;
             }
-        `]}disconnectedCallback(){this.workspace.removeEventListener("pan",this.setTranslate),this.workspace.removeEventListener("zoom",this.setTranslate),project.removeListener("cleared",this.forceUpdate),project.removeListener("connectionremoved",this.linkIdentity),super.disconnectedCallback()}bringToFront(){this.frozen||(this.style.zIndex=""+this.workspace.topNodeZindex++)}firstUpdated(){const t=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return __awaiter(this,void 0,void 0,(function*(){if(t.firstUpdated.call(this),this.linkIdentity(),this.workspace.addEventListener("pan",this.setTranslate),this.workspace.addEventListener("zoom",this.setTranslate),project.addListener("cleared",this.forceUpdate),project.addListener("connectionremoved",this.linkIdentity),this.minimal=0!==(this.node.displayCharacter||"").length,this.bringToFront(),newIds.has(this.node.id)){yield this.updateComplete,yield this.updateComplete;const t=this.getBoundingClientRect();this.node.position.x-=t.width/2/this.workspace.camera.zoom,this.node.position.y-=t.height/2/this.workspace.camera.zoom,this.setTranslate(),newIds.delete(this.node.id)}this.minimal&&this.addEventListener("mousedown",this.startDrag)}))}updated(){return __awaiter(this,void 0,void 0,(function*(){this.linkIdentity(),this.dispatchEvent(new CustomEvent("updated"))}))}render(){this.minimal?this.style.background=`var(--${this.node.type.toLowerCase()}-color)`:this.style.background="",this.setTranslate(),this.style.boxShadow=this.selected?"var(--highlight) 0 0 0 3px":"";const t=this.minimal?html`<div class="title minimal" ?singlechar="${1===this.node.displayCharacter.length}">${i18next.t("flow."+this.node.displayCharacter,this.node.displayCharacter)}</div>`:html`<div class="title ${this.node.type.toLowerCase()}" @mousedown="${this.startDrag}">${i18next.t("flow."+this.node.name)||"invalid"}</div>`,e=html`<div class="socket-side inputs">${this.node.inputs.map((t=>html`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${t}" side="input"></flow-node-socket>`))}</div>`,o=html`<div class="socket-side outputs">${this.node.outputs.map((t=>html`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${t}" side="output"></flow-node-socket>`))}</div>`,i=html`<div style="width: 10px"></div>`;return html`
-        ${t}
-        ${this.node.inputs.length>0?e:i}
-        ${this.minimal?null:html`
+        `]}disconnectedCallback(){this.workspace.removeEventListener("pan",this.setTranslate),this.workspace.removeEventListener("zoom",this.setTranslate),h.removeListener("cleared",this.forceUpdate),h.removeListener("connectionremoved",this.linkIdentity),super.disconnectedCallback()}bringToFront(){this.frozen||(this.style.zIndex=`${this.workspace.topNodeZindex++}`)}firstUpdated(){let e=Object.create(null,{firstUpdated:{get:()=>super.firstUpdated}});return __awaiter(this,void 0,void 0,function*(){if(e.firstUpdated.call(this),this.linkIdentity(),this.workspace.addEventListener("pan",this.setTranslate),this.workspace.addEventListener("zoom",this.setTranslate),h.addListener("cleared",this.forceUpdate),h.addListener("connectionremoved",this.linkIdentity),this.minimal=0!==(this.node.displayCharacter||"").length,this.bringToFront(),l.has(this.node.id)){yield this.updateComplete,yield this.updateComplete;let e=this.getBoundingClientRect();this.node.position.x-=e.width/2/this.workspace.camera.zoom,this.node.position.y-=e.height/2/this.workspace.camera.zoom,this.setTranslate(),l.delete(this.node.id)}this.minimal&&this.addEventListener("mousedown",this.startDrag)})}updated(){return __awaiter(this,void 0,void 0,function*(){this.linkIdentity(),this.dispatchEvent(new CustomEvent("updated"))})}render(){this.minimal?this.style.background=`var(--${this.node.type.toLowerCase()}-color)`:this.style.background="",this.setTranslate(),this.style.boxShadow=this.selected?"var(--highlight) 0 0 0 3px":"";let e=this.minimal?t`<div class="title minimal" ?singlechar="${1===this.node.displayCharacter.length}">${r.t("flow."+this.node.displayCharacter,this.node.displayCharacter)}</div>`:t`<div class="title ${this.node.type.toLowerCase()}" @mousedown="${this.startDrag}">${r.t("flow."+this.node.name)||"invalid"}</div>`,i=t`<div class="socket-side inputs">${this.node.inputs.map(e=>t`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${e}" side="input"></flow-node-socket>`)}</div>`,o=t`<div class="socket-side outputs">${this.node.outputs.map(e=>t`<flow-node-socket ?renderlabel="${!this.minimal}" .socket="${e}" side="output"></flow-node-socket>`)}</div>`,n=t`<div style="width: 10px"></div>`;return t`
+        ${e}
+        ${this.node.inputs.length>0?i:n}
+        ${this.minimal?null:t`
             <div class="internal-container" style="padding-top: 8px">
-            ${this.node.internals.reduce(((t,e,o,i)=>(t[t.length-1].push(e),"NEW_LINE"===e.breakType&&o<i.length-1&&t.push([]),t)),[[]]).map((t=>html`
+            ${this.node.internals.reduce((e,t,i,o)=>(e[e.length-1].push(t),"NEW_LINE"===t.breakType&&i<o.length-1&&e.push([]),e),[[]]).map(e=>t`
             <div class="internal-group" style="max-width: fit-content; min-width: fit-content; padding-bottom: 8px;">
-                ${t.map((t=>html`
+                ${e.map(e=>t`
                     <div class="internal-item" style="display: inline-block">
-                        <internal-picker style="pointer-events: ${this.frozen?"none":"normal"};" @picked="${()=>__awaiter(this,void 0,void 0,(function*(){this.forceUpdate(),yield this.updateComplete,project.removeInvalidConnections()}))}" .node="${this.node}" .internalIndex="${this.node.internals.indexOf(t)}"></internal-picker>
+                        <internal-picker style="pointer-events: ${this.frozen?"none":"normal"};" @picked="${()=>__awaiter(this,void 0,void 0,function*(){this.forceUpdate(),yield this.updateComplete,h.removeInvalidConnections()})}" .node="${this.node}" .internalIndex="${this.node.internals.indexOf(e)}"></internal-picker>
                     </div>
-                `))}
+                `)}
             </div>
-        `))}
+        `)}
         </div>`}
-        ${this.node.outputs.length>0?o:i}
-        ${this.frozen?html`<or-icon class="lock-icon ${this.node.type.toLowerCase()}" icon="lock"></or-icon>`:""}
-        `}};__decorate([property({converter:nodeConverter})],FlowNode.prototype,"node",void 0),__decorate([property({attribute:!1})],FlowNode.prototype,"workspace",void 0),__decorate([property({type:Boolean,reflect:!0})],FlowNode.prototype,"frozen",void 0),__decorate([property({type:Boolean,reflect:!0})],FlowNode.prototype,"minimal",void 0),__decorate([property({attribute:!1})],FlowNode.prototype,"isBeingDragged",void 0),FlowNode=__decorate([customElement("flow-node")],FlowNode);export{FlowNode};
+        ${this.node.outputs.length>0?o:n}
+        ${this.frozen?t`<or-icon class="lock-icon ${this.node.type.toLowerCase()}" icon="lock"></or-icon>`:""}
+        `}};__decorate([o({converter:a})],FlowNode.prototype,"node",void 0),__decorate([o({attribute:!1})],FlowNode.prototype,"workspace",void 0),__decorate([o({type:Boolean,reflect:!0})],FlowNode.prototype,"frozen",void 0),__decorate([o({type:Boolean,reflect:!0})],FlowNode.prototype,"minimal",void 0),__decorate([o({attribute:!1})],FlowNode.prototype,"isBeingDragged",void 0),FlowNode=__decorate([i("flow-node")],FlowNode);export{FlowNode};

package/lib/flow-viewer/components/internal-picker.d.ts

@@ -5,7 +5,7 @@ declare const InternalPicker_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;

package/lib/flow-viewer/components/internal-picker.js

@@ -1,11 +1,11 @@
-var __decorate=this&&this.__decorate||function(e,t,i,r){var s,n=arguments.length,o=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(o=(n<3?s(o):n>3?s(t,i,o):s(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))((function(s,n){function o(e){try{a(r.next(e))}catch(e){n(e)}}function l(e){try{a(r.throw(e))}catch(e){n(e)}}function a(e){var t;e.done?s(e.value):(t=e.value,t instanceof i?t:new i((function(e){e(t)}))).then(o,l)}a((r=r.apply(e,t||[])).next())}))};import{LitElement,html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{AssetModelUtil}from"@openremote/model";import{nodeConverter}from"../converters/node-converter";import{InputType}from"@openremote/or-mwc-components/or-mwc-input";import rest from"@openremote/rest";import"@openremote/or-asset-tree";import{ResizeObserver}from"resize-observer";import{project}from"./flow-editor";import{NodeUtilities}from"../node-structure";import{translate,i18next}from"@openremote/or-translate";import{PickerStyle}from"../styles/picker-styles";import{Util}from"@openremote/core";import{OrAssetAttributePicker,OrAssetAttributePickerPickedEvent}from"@openremote/or-attribute-picker";import{showDialog}from"@openremote/or-mwc-components/or-mwc-dialog";import{getAssetDescriptorIconTemplate}from"@openremote/or-icon";import{ifDefined}from"lit/directives/if-defined.js";let InternalPicker=class extends(translate(i18next)(LitElement)){constructor(){super()}get internal(){return this.node.internals[this.internalIndex]}static get styles(){return[css`
+var __decorate=this&&this.__decorate||function(e,t,i,r){var s,n=arguments.length,o=n<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,i):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,r);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(o=(n<3?s(o):n>3?s(t,i,o):s(t,i))||o);return n>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,r){return new(i||(i=Promise))(function(s,n){function o(e){try{l(r.next(e))}catch(e){n(e)}}function a(e){try{l(r.throw(e))}catch(e){n(e)}}function l(e){var t;e.done?s(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(o,a)}l((r=r.apply(e,t||[])).next())})};import{LitElement as e,html as t,css as i}from"lit";import{customElement as r,property as s}from"lit/decorators.js";import{AssetModelUtil as n}from"@openremote/model";import{nodeConverter as o}from"../converters/node-converter";import{InputType as a}from"@openremote/or-mwc-components/or-mwc-input";import l from"@openremote/rest";import"@openremote/or-asset-tree";import{ResizeObserver as c}from"resize-observer";import{project as u}from"./flow-editor";import{NodeUtilities as d}from"../node-structure";import{translate as p,i18next as h}from"@openremote/or-translate";import{PickerStyle as m}from"../styles/picker-styles";import{Util as v}from"@openremote/core";import{OrAssetAttributePicker as f,OrAssetAttributePickerPickedEvent as y}from"@openremote/or-attribute-picker";import{showDialog as b}from"@openremote/or-mwc-components/or-mwc-dialog";import{getAssetDescriptorIconTemplate as g}from"@openremote/or-icon";import{ifDefined as w}from"lit/directives/if-defined.js";let InternalPicker=class extends p(h)(e){constructor(){super()}get internal(){return this.node.internals[this.internalIndex]}static get styles(){return[i`
             :host{
                 padding: 0;
                 margin: 0;
                 display: flex;
                 flex-direction: column;
                 --or-app-color4: var(--or-mwc-input-color);
-            }`,PickerStyle,css`.attribute-label-white {
+            }`,m,i`.attribute-label-white {
                 background: #ffffff;
             }
             .selected-asset-container {
@@ -36,19 +36,19 @@ var __decorate=this&&this.__decorate||function(e,t,i,r){var s,n=arguments.length
                 justify-content: center;
                 padding: 0px 5px 0px 5px;
                 --or-icon-width: 20px;
-            }`]}firstUpdated(){this.addEventListener("contextmenu",(e=>e.stopPropagation())),this.addEventListener("mousedown",(e=>(project.createUndoSnapshot(),project.notifyChange()))),this.resizeObserver=new ResizeObserver(((e,t)=>{const i=e[0].contentRect;this.node.size={x:i.width-20,y:i.height-20}})),this.resizeObserver.observe(this)}render(){switch(this.internal.picker.type){case"ASSET_ATTRIBUTE":return this.internal.value&&!this.selectedAsset&&this.setSelectedAssetFromInternalValue(),this.assetAttributeInput;case"COLOR":return this.colorInput;case"DOUBLE_DROPDOWN":return this.doubleDropdownInput;case"CHECKBOX":return this.checkBoxInput;case"DROPDOWN":return this.dropdownInput;case"MULTILINE":return this.multilineInput;case"DATE":return this.getNumberInput(0,void 0,50);case"NUMBER":return this.getNumberInput(void 0,void 0,void 0);case"TEXT":return this.textInput;default:return html`unimplemented picker`}}setSocketTypeDynamically(e){return __awaiter(this,void 0,void 0,(function*(){const t=(yield rest.api.AssetResource.queryAssets({ids:[e.assetId],select:{attributes:[e.attributeName]}})).data,i=this.node.outputs[0]||this.node.inputs[0];if(i.type="ANY",null!=t&&null!=t[0]&&null!=t[0].attributes)try{const r=t[0].attributes[e.attributeName],s=AssetModelUtil.getValueDescriptors().find((e=>e.name===r.type));i.type=NodeUtilities.convertValueTypeToSocketType(s)}catch(e){console.error(e)}}))}setSelectedAssetFromInternalValue(){return __awaiter(this,void 0,void 0,(function*(){const e=yield rest.api.AssetResource.queryAssets({ids:[this.internal.value.assetId]});0!==e.data.length?this.selectedAsset=e.data[0]:console.warn(`Asset with id ${this.internal.value.assetId} is missing`)}))}get assetAttributeInput(){var e,t,i,r;const s=()=>{showDialog((new OrAssetAttributePicker).setShowOnlyRuleStateAttrs(!0).setShowOnlyDatapointAttrs(!1).setMultiSelect(!1)).addEventListener(OrAssetAttributePickerPickedEvent.NAME,(e=>__awaiter(this,void 0,void 0,(function*(){const t={assetId:e.detail[0].id,attributeName:e.detail[0].name};yield this.setSocketTypeDynamically(t),this.setValue(t),yield this.setSelectedAssetFromInternalValue()}))))};let n="?";if(this.selectedAsset&&this.selectedAsset.attributes&&(null===(t=null===(e=this.internal)||void 0===e?void 0:e.value)||void 0===t?void 0:t.attributeName)){const e=null===(r=null===(i=this.internal)||void 0===i?void 0:i.value)||void 0===r?void 0:r.attributeName,t=AssetModelUtil.getAttributeDescriptor(e,this.selectedAsset.type);let s=this.selectedAsset.attributes[e];s&&(n=Util.getAttributeLabel(s,t,this.selectedAsset.type,!0))}const o=this.selectedAsset?AssetModelUtil.getAssetDescriptor(this.selectedAsset.type):void 0,l=getAssetDescriptorIconTemplate(o);return html`<div>
-            ${this.selectedAsset?html`<div class="attribute-label attribute-label-white selected-asset-container" @click="${()=>s()}">
-                        <div class="selected-asset-icon">${l}</div>
+            }`]}firstUpdated(){this.addEventListener("contextmenu",e=>e.stopPropagation()),this.addEventListener("mousedown",e=>(u.createUndoSnapshot(),u.notifyChange())),this.resizeObserver=new c((e,t)=>{let i=e[0].contentRect;this.node.size={x:i.width-20,y:i.height-20}}),this.resizeObserver.observe(this)}render(){switch(this.internal.picker.type){case"ASSET_ATTRIBUTE":return this.internal.value&&!this.selectedAsset&&this.setSelectedAssetFromInternalValue(),this.assetAttributeInput;case"COLOR":return this.colorInput;case"DOUBLE_DROPDOWN":return this.doubleDropdownInput;case"CHECKBOX":return this.checkBoxInput;case"DROPDOWN":return this.dropdownInput;case"MULTILINE":return this.multilineInput;case"DATE":return this.getNumberInput(0,void 0,50);case"NUMBER":return this.getNumberInput(void 0,void 0,void 0);case"TEXT":return this.textInput;default:return t`unimplemented picker`}}setSocketTypeDynamically(e){return __awaiter(this,void 0,void 0,function*(){let t=(yield l.api.AssetResource.queryAssets({ids:[e.assetId],select:{attributes:[e.attributeName]}})).data,i=this.node.outputs[0]||this.node.inputs[0];if((i.type="ANY",null!=t&&null!=t[0])&&null!=t[0].attributes)try{let r=t[0].attributes[e.attributeName],s=n.getValueDescriptors().find(e=>e.name===r.type);i.type=d.convertValueTypeToSocketType(s)}catch(e){console.error(e)}})}setSelectedAssetFromInternalValue(){return __awaiter(this,void 0,void 0,function*(){let e=yield l.api.AssetResource.queryAssets({ids:[this.internal.value.assetId]});if(0===e.data.length)return void console.warn(`Asset with id ${this.internal.value.assetId} is missing`);this.selectedAsset=e.data[0]})}get assetAttributeInput(){var e,i,r,s;let o=()=>{b(new f().setShowOnlyRuleStateAttrs(!0).setShowOnlyDatapointAttrs(!1).setMultiSelect(!1)).addEventListener(y.NAME,e=>__awaiter(this,void 0,void 0,function*(){let t={assetId:e.detail[0].id,attributeName:e.detail[0].name};yield this.setSocketTypeDynamically(t),this.setValue(t),yield this.setSelectedAssetFromInternalValue()}))},l="?";if(this.selectedAsset&&this.selectedAsset.attributes&&(null==(i=null==(e=this.internal)?void 0:e.value)?void 0:i.attributeName)){let e=null==(s=null==(r=this.internal)?void 0:r.value)?void 0:s.attributeName,t=n.getAttributeDescriptor(e,this.selectedAsset.type),i=this.selectedAsset.attributes[e];i&&(l=v.getAttributeLabel(i,t,this.selectedAsset.type,!0))}let c=g(this.selectedAsset?n.getAssetDescriptor(this.selectedAsset.type):void 0);return t`<div>
+            ${this.selectedAsset?t`<div class="attribute-label attribute-label-white selected-asset-container" @click="${()=>o()}">
+                        <div class="selected-asset-icon">${c}</div>
                         <div class="selected-asset-label">
                             <div class="asset">${this.selectedAsset.name}</div>
-                            <div class="asset-attribute">${n}</div>
+                            <div class="asset-attribute">${l}</div>
                         </div>
-                    </div>`:html`<or-mwc-input class="attribute-label-white" .type="${InputType.BUTTON}" label="attribute" icon="plus" @or-mwc-input-changed="${()=>s()}"></or-mwc-input>`}
-        </div>`}get colorInput(){return html`<or-mwc-input type="color"></or-mwc-input>`}get doubleDropdownInput(){return html`unimplemented`}get dropdownInput(){return html`<writable-dropdown @input="${e=>this.setValue(e.target.value)}" .value="${this.internal.value}" .options="${this.internal.picker.options}">
-        </writable-dropdown>`}get checkBoxInput(){return html`<input type="checkbox" ?checked="${this.internal.value||!1}" @input="${e=>this.setValue(e.target.checked)}"/>`}get multilineInput(){const e=this.node.size?`width:${this.node.size.x}px; height:${this.node.size.y}px`:"";return html`<textarea @wheel="${e=>{if(e.target.clientHeight<e.target.scrollHeight)return e.stopPropagation()}}" style="${e}" @input="${e=>this.setValue(e.target.value)}" placeholder="${this.internal.name}">${this.internal.value||""}</textarea>`}getNumberInput(e,t,i){return html`<input
+                    </div>`:t`<or-mwc-input class="attribute-label-white" .type="${a.BUTTON}" label="attribute" icon="plus" @or-mwc-input-changed="${()=>o()}"></or-mwc-input>`}
+        </div>`}get colorInput(){return t`<or-mwc-input type="color"></or-mwc-input>`}get doubleDropdownInput(){return t`unimplemented`}get dropdownInput(){return t`<writable-dropdown @input="${e=>this.setValue(e.target.value)}" .value="${this.internal.value}" .options="${this.internal.picker.options}">
+        </writable-dropdown>`}get checkBoxInput(){return t`<input type="checkbox" ?checked="${this.internal.value||!1}" @input="${e=>this.setValue(e.target.checked)}"/>`}get multilineInput(){let e=this.node.size?`width:${this.node.size.x}px; height:${this.node.size.y}px`:"";return t`<textarea @wheel="${e=>{if(e.target.clientHeight<e.target.scrollHeight)return e.stopPropagation()}}" style="${e}" @input="${e=>this.setValue(e.target.value)}" placeholder="${this.internal.name}">${this.internal.value||""}</textarea>`}getNumberInput(e,i,r){return t`<input
                 @wheel="${e=>{if(e.target===this.shadowRoot.activeElement)return e.stopPropagation()}}"
                 @input="${e=>this.setValue(parseFloat(e.target.value))}"
                 value="${this.internal.value||0}" type="number" placeholder="${this.internal.name}"
-                style="max-width: ${ifDefined(i)}px"
-                min="${ifDefined(e)}" max="${ifDefined(t)}"
-        />`}get textInput(){return html`<input @input="${e=>this.setValue(e.target.value)}" value="${this.internal.value||""}" type="text" placeholder="${this.internal.name}"/>`}setValue(e){this.node.internals[this.internalIndex].value=e,this.onPicked()}onPicked(){return __awaiter(this,void 0,void 0,(function*(){yield this.updateComplete,this.dispatchEvent(new CustomEvent("picked"))}))}};__decorate([property({converter:nodeConverter,reflect:!0})],InternalPicker.prototype,"node",void 0),__decorate([property({type:Number,reflect:!0})],InternalPicker.prototype,"internalIndex",void 0),__decorate([property({type:Object})],InternalPicker.prototype,"selectedAsset",void 0),InternalPicker=__decorate([customElement("internal-picker")],InternalPicker);export{InternalPicker};
+                style="max-width: ${w(r)}px"
+                min="${w(e)}" max="${w(i)}"
+        />`}get textInput(){return t`<input @input="${e=>this.setValue(e.target.value)}" value="${this.internal.value||""}" type="text" placeholder="${this.internal.name}"/>`}setValue(e){this.node.internals[this.internalIndex].value=e,this.onPicked()}onPicked(){return __awaiter(this,void 0,void 0,function*(){yield this.updateComplete,this.dispatchEvent(new CustomEvent("picked"))})}};__decorate([s({converter:o,reflect:!0})],InternalPicker.prototype,"node",void 0),__decorate([s({type:Number,reflect:!0})],InternalPicker.prototype,"internalIndex",void 0),__decorate([s({type:Object})],InternalPicker.prototype,"selectedAsset",void 0),InternalPicker=__decorate([r("internal-picker")],InternalPicker);export{InternalPicker};

package/lib/flow-viewer/components/node-menu-item.d.ts

@@ -4,7 +4,7 @@ declare const NodeMenuItem_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -19,7 +19,7 @@ export declare class NodeMenuItem extends NodeMenuItem_base {
     private yOffset;
     constructor();
     static get styles(): import("lit").CSSResult;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private get dragNodeTemplate();
     private get flowNodeName();
     private startDrag;

package/lib/flow-viewer/components/node-menu-item.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(s=e[a])&&(n=(r<3?s(n):r>3?s(t,i,n):s(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};import{LitElement,html,css}from"lit";import{customElement,property}from"lit/decorators.js";import{Utilities}from"../utils";import{i18next,translate}from"@openremote/or-translate";import{newIds,project}from"./flow-editor";import{CopyMachine}from"../node-structure";let NodeMenuItem=class extends(translate(i18next)(LitElement)){constructor(){super(),this.isDragging=!1,this.x=0,this.y=0,this.xOffset=0,this.yOffset=0,this.startDrag=e=>{this.xOffset=e.offsetX,this.yOffset=e.offsetY,this.x=e.clientX,this.y=e.clientY,this.isDragging=!0,window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onMove)},this.onMove=e=>{this.x=e.clientX,this.y=e.clientY},this.stopDrag=e=>{if(window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onMove),this.isDragging=!1,Utilities.isPointInsideBox(e.offsetX,e.offsetY,{x:this.workspace.clientRect.left,y:this.workspace.clientRect.top,width:this.workspace.clientRect.width,height:this.workspace.clientRect.height})){const t=CopyMachine.copy(this.node);newIds.add(t.id),t.position=this.workspace.offsetToWorld({x:e.offsetX-this.workspace.clientRect.left,y:e.offsetY-this.workspace.clientRect.top}),project.createUndoSnapshot(),project.addNode(t),project.notifyChange()}},this.addEventListener("mousedown",this.startDrag)}static get styles(){return css`
+var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length,a=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(s=e[n])&&(a=(r<3?s(a):r>3?s(t,i,a):s(t,i))||a);return r>3&&a&&Object.defineProperty(t,i,a),a};import{LitElement as e,html as t,css as i}from"lit";import{customElement as o,property as s}from"lit/decorators.js";import{Utilities as r}from"../utils";import{i18next as a,translate as n}from"@openremote/or-translate";import{newIds as d,project as h}from"./flow-editor";import{CopyMachine as l}from"../node-structure";let NodeMenuItem=class extends n(a)(e){constructor(){super(),this.isDragging=!1,this.x=0,this.y=0,this.xOffset=0,this.yOffset=0,this.startDrag=e=>{this.xOffset=e.offsetX,this.yOffset=e.offsetY,this.x=e.clientX,this.y=e.clientY,this.isDragging=!0,window.addEventListener("mouseup",this.stopDrag),window.addEventListener("mousemove",this.onMove)},this.onMove=e=>{this.x=e.clientX,this.y=e.clientY},this.stopDrag=e=>{if(window.removeEventListener("mouseup",this.stopDrag),window.removeEventListener("mousemove",this.onMove),this.isDragging=!1,r.isPointInsideBox(e.offsetX,e.offsetY,{x:this.workspace.clientRect.left,y:this.workspace.clientRect.top,width:this.workspace.clientRect.width,height:this.workspace.clientRect.height})){let t=l.copy(this.node);d.add(t.id),t.position=this.workspace.offsetToWorld({x:e.offsetX-this.workspace.clientRect.left,y:e.offsetY-this.workspace.clientRect.top}),h.createUndoSnapshot(),h.addNode(t),h.notifyChange()}},this.addEventListener("mousedown",this.startDrag)}static get styles(){return i`
         :host, .node-drag-item{
             padding: 4px;
             margin: 0 0 15px 0;
@@ -28,7 +28,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,r=arguments.length
             filter: opacity(90%);
             pointer-events: none;
         }
-        `}render(){switch(this.node.type){case"INPUT":this.classList.add("input-node");break;case"PROCESSOR":this.classList.add("processor-node");break;case"OUTPUT":this.classList.add("output-node")}return this.node.displayCharacter&&this.classList.add("small"),this.title=i18next.t(this.node.name,Utilities.humanLike(this.node.name.toLowerCase())),html`
+        `}render(){switch(this.node.type){case"INPUT":this.classList.add("input-node");break;case"PROCESSOR":this.classList.add("processor-node");break;case"OUTPUT":this.classList.add("output-node")}return this.node.displayCharacter&&this.classList.add("small"),this.title=a.t(this.node.name,r.humanLike(this.node.name.toLowerCase())),t`
         <div class="label">${this.flowNodeName}</div>
         ${this.isDragging?this.dragNodeTemplate:null}
-        `}get dragNodeTemplate(){return html`<div class="node-drag-item ${this.node.displayCharacter?"small":null}" style="top: ${this.y-this.yOffset}px; left: ${this.x-this.xOffset}px"><div class="label">${this.flowNodeName}</div></div>`}get flowNodeName(){return i18next.t(this.node.displayCharacter?"flow."+this.node.displayCharacter:"flow."+this.node.name,this.node.displayCharacter||this.node.name||"invalid node name")}};__decorate([property({attribute:!1})],NodeMenuItem.prototype,"node",void 0),__decorate([property({attribute:!1})],NodeMenuItem.prototype,"isDragging",void 0),__decorate([property({attribute:!1})],NodeMenuItem.prototype,"x",void 0),__decorate([property({attribute:!1})],NodeMenuItem.prototype,"y",void 0),__decorate([property({attribute:!1})],NodeMenuItem.prototype,"workspace",void 0),NodeMenuItem=__decorate([customElement("node-menu-item")],NodeMenuItem);export{NodeMenuItem};
+        `}get dragNodeTemplate(){return t`<div class="node-drag-item ${this.node.displayCharacter?"small":null}" style="top: ${this.y-this.yOffset}px; left: ${this.x-this.xOffset}px"><div class="label">${this.flowNodeName}</div></div>`}get flowNodeName(){return a.t(this.node.displayCharacter?"flow."+this.node.displayCharacter:"flow."+this.node.name,this.node.displayCharacter||this.node.name||"invalid node name")}};__decorate([s({attribute:!1})],NodeMenuItem.prototype,"node",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"isDragging",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"x",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"y",void 0),__decorate([s({attribute:!1})],NodeMenuItem.prototype,"workspace",void 0),NodeMenuItem=__decorate([o("node-menu-item")],NodeMenuItem);export{NodeMenuItem};

package/lib/flow-viewer/components/node-panel.d.ts

@@ -6,7 +6,7 @@ declare const NodePanel_base: (new (...args: any[]) => {
     _i18nextJustInitialized: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    shouldUpdate(changedProps: import("lit").PropertyValueMap<any> | Map<PropertyKey, unknown>): any;
+    shouldUpdate(changedProps: import("lit").PropertyValues): any;
     initCallback: (options: import("i18next").InitOptions) => void;
     langChangedCallback: () => void;
     readonly isConnected: boolean;
@@ -17,7 +17,7 @@ export declare class NodePanel extends NodePanel_base {
     drawer: OrMwcDrawer;
     application: FlowEditor;
     protected firstUpdated(): void;
-    protected render(): import("lit-html").TemplateResult<1>;
+    protected render(): import("lit").TemplateResult<1>;
     private nodeTemplate;
     private get listTemplate();
 }