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

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

@@ -1,24 +1,61 @@
-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;
-            text-align: center;
-        }
-        .container{
-            display: flex;
-            flex-direction: row;
-            justify-content: space-between;
-            justify-content: space-evenly;
-            justify-content: space-around;
-        }`}render(){return t`
-        <div class="question">${this.question}</div>
-        <div class="container">
-            <or-mwc-input type="${c.BUTTON}" unElevated label="${this.agreeText}"
-                @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("agreed"))}}">
-            </or-mwc-input>
-
-            <or-mwc-input type="button" label="${this.disagreeText}"
-                @or-mwc-input-changed="${()=>{this.dispatchEvent(new CustomEvent("disagreed"))}}">
-            </or-mwc-input>
-        </div>
-        `}};__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};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 ConfirmationDialog 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 `
+        .question{
+            width: 100%;
+            padding: 15px 5px 25px 5px;
+            text-align: center;
+        }
+        .container{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-between;
+            justify-content: space-evenly;
+            justify-content: space-around;
+        }`;
+    }
+    render() {
+        return html `
+        <div class="question">${this.question}</div>
+        <div class="container">
+            <or-mwc-input type="${InputType.BUTTON}" unElevated label="${this.agreeText}"
+                @or-mwc-input-changed="${() => { this.dispatchEvent(new CustomEvent("agreed")); }}">
+            </or-mwc-input>
+
+            <or-mwc-input type="button" label="${this.disagreeText}"
+                @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 };
+//# sourceMappingURL=confirmation-dialog.js.map

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

@@ -1 +1,35 @@
-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};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 ConnectionContainer 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, (c) => c.from + c.to, (c) => html `<connection-line .workspace="${this.workspace}" .connection="${c}"></connection-line>`)}`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ConnectionContainer.prototype, "workspace", void 0);
+ConnectionContainer = __decorate([
+    customElement("connection-container")
+], ConnectionContainer);
+export { ConnectionContainer };
+//# sourceMappingURL=connection-container.js.map

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

@@ -1,30 +1,119 @@
-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 ${i} ${s} C ${i+d} ${s}, ${r-d} ${l}, ${r} ${l}"
-                selected="${this.selected}"
-                />
-            </svg>`}return e`<svg style="stroke-width: ${this.workspace.camera.zoom*(this.selected?5:3)}px;"><polyline id="${this.polylineId}"
-        selected="${this.selected}"
-        points="
-        ${o.x-t.left}, ${o.y-t.top} 
-        ${n.x-t.left}, ${n.y-t.top}"
-        ></polyline>
-        </svg>`}static get styles(){return t`
-            svg{
-                fill: none;  
-                overflow: visible;
-                position: absolute;
-                pointer-events: none;
-                stroke-linejoin: round;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, 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 ConnectionLine extends SelectableElement {
+    constructor() {
+        super();
+        this.fancyLine = true;
+        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 elem = this.shadowRoot.getElementById(this.polylineId);
+        if (elem)
+            this.setHandle(elem);
+    }
+    render() {
+        if (this.isInvalid) {
+            const fromSocket = NodeUtilities.getSocketFromID(this.connection.from, project.nodes);
+            const toSocket = NodeUtilities.getSocketFromID(this.connection.to, project.nodes);
+            this.fromNodeElement = IdentityDomLink.map[fromSocket.nodeId];
+            this.toNodeElement = IdentityDomLink.map[toSocket.nodeId];
+            this.fromElement = IdentityDomLink.map[fromSocket.id];
+            this.toElement = IdentityDomLink.map[toSocket.id];
+            if (this.isInvalid) {
+                console.warn(this.fromNodeElement);
+                console.warn(this.toNodeElement);
+                console.warn(this.fromElement);
+                console.warn(this.toElement);
+                console.warn("Attempt to render invalid connection");
+                return html ``;
             }
-            path, line{
-                position: absolute;
-                pointer-events: all;
+            else {
+                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);
             }
-            path:hover, line:hover, path[selected = true], line[selected = true]{
-                stroke: var(--highlight);
-            }
-            text{
-                fill: red;
-                stroke: none;
-            }`}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};
+        }
+        const parentSize = this.workspace.clientRect;
+        const from = this.fromElement.connectionPosition;
+        const to = this.toElement.connectionPosition;
+        if (this.fancyLine) {
+            const x1 = from.x - parentSize.left;
+            const y1 = from.y - parentSize.top;
+            const x2 = to.x - parentSize.left;
+            const y2 = to.y - parentSize.top;
+            const intensity = this.curveIntensity * (Math.abs(x1 - x2) / 2);
+            // const intensity = 100 * this.workspace.camera.zoom;
+            return html `<svg style="stroke-width: ${this.workspace.camera.zoom * (this.selected ? 5 : 3)}px;">
+                <path id="${this.polylineId}" 
+                d="M ${x1} ${y1} C ${x1 + intensity} ${y1}, ${x2 - intensity} ${y2}, ${x2} ${y2}"
+                selected="${this.selected}"
+                />
+            </svg>`;
+        }
+        return html `<svg style="stroke-width: ${this.workspace.camera.zoom * (this.selected ? 5 : 3)}px;"><polyline id="${this.polylineId}"
+        selected="${this.selected}"
+        points="
+        ${from.x - parentSize.left}, ${from.y - parentSize.top} 
+        ${to.x - parentSize.left}, ${to.y - parentSize.top}"
+        ></polyline>
+        </svg>`;
+    }
+    static get styles() {
+        return css `
+            svg{
+                fill: none;  
+                overflow: visible;
+                position: absolute;
+                pointer-events: none;
+                stroke-linejoin: round;
+            }
+            path, line{
+                position: absolute;
+                pointer-events: all;
+            }
+            path:hover, line:hover, path[selected = true], line[selected = true]{
+                stroke: var(--highlight);
+            }
+            text{
+                fill: red;
+                stroke: none;
+            }`;
+    }
+    get isInvalid() {
+        return (!this.fromNodeElement || !this.toNodeElement || !this.fromElement || !this.toElement);
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ConnectionLine.prototype, "connection", void 0);
+__decorate([
+    property({ attribute: false })
+], ConnectionLine.prototype, "workspace", void 0);
+__decorate([
+    property({ type: String })
+], ConnectionLine.prototype, "polylineId", void 0);
+ConnectionLine = __decorate([
+    customElement("connection-line")
+], ConnectionLine);
+export { ConnectionLine };
+//# sourceMappingURL=connection-line.js.map

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

@@ -1,49 +1,144 @@
-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;
-            background: white;
-            outline: 1px solid rgb(200,200,200);
-            box-shadow: rgba(0, 0, 0, 0.05) 0 2px 4px;
-            font-size: 13px;
-            z-index: 1000000;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var ContextMenu_1;
+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 ContextMenu extends translate(i18next)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.entries = [];
+        this.isOpen = false;
+        this.closeCallback = () => {
+            ContextMenu_1.close();
+        };
+    }
+    static get opened() { return ContextMenu_1.main.isOpen; }
+    static get styles() {
+        return css `
+        :host{
+            display: inline-block;
+            position: fixed;
+            background: white;
+            outline: 1px solid rgb(200,200,200);
+            box-shadow: rgba(0, 0, 0, 0.05) 0 2px 4px;
+            font-size: 13px;
+            z-index: 1000000;
+        }
+        .context-menu-button{
+            color: rgb(0,0,0);
+            display: grid;
+            align-items: center;
+            justify-items: start;
+            grid-template-rows: 32px;
+            grid-template-columns: 32px 220px;
+            grid-template-areas:
+                "icon label";
+        }
+        .context-menu-button:hover{
+            background: whitesmoke;
+        }
+        .label
+        {
+            grid-area: label;
+        }
+        or-icon{
+            justify-self: center;
+            grid-area: icon;
+            height: 16px;
+            width: 16px;
+        }
+        .muted{
+            pointer-events: none;
+            color: rgb(150,150,150);
+        }
+        .context-menu-separator{
+            --thickness: 1px;
+            border: 0;
+            height: var(--thickness);
+            border-bottom: solid var(--thickness);
+            border-color: rgb(234,234,234);
+            padding: 0;
+            margin: 5px 10px calc(5px - var(--thickness)) 10px;
+        }`;
+    }
+    static open(x, y, container, buttons) {
+        ContextMenu_1.main.container = container;
+        ContextMenu_1.main.style.top = y + "px";
+        ContextMenu_1.main.style.left = x + "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 = buttons;
+        ContextMenu_1.main.isOpen = true;
+    }
+    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 = false;
+    }
+    firstUpdated() {
+        ContextMenu_1.main = this;
+    }
+    updated() {
+        if (!this.container) {
+            return;
         }
-        .context-menu-button{
-            color: rgb(0,0,0);
-            display: grid;
-            align-items: center;
-            justify-items: start;
-            grid-template-rows: 32px;
-            grid-template-columns: 32px 220px;
-            grid-template-areas:
-                "icon label";
+        const bounds = this.container.getBoundingClientRect();
+        const box = this.getBoundingClientRect();
+        if (box.top + box.height > bounds.bottom) {
+            this.style.top = box.top - box.height + "px";
         }
-        .context-menu-button:hover{
-            background: whitesmoke;
+        if (box.left + box.width > bounds.right) {
+            this.style.left = bounds.right - box.width + "px";
         }
-        .label
-        {
-            grid-area: label;
+    }
+    render() {
+        this.style.display = this.isOpen ? "unset" : "none";
+        if (!this.isOpen) {
+            return html ``;
         }
-        or-icon{
-            justify-self: center;
-            grid-area: icon;
-            height: 16px;
-            width: 16px;
-        }
-        .muted{
-            pointer-events: none;
-            color: rgb(150,150,150);
-        }
-        .context-menu-separator{
-            --thickness: 1px;
-            border: 0;
-            height: var(--thickness);
-            border-bottom: solid var(--thickness);
-            border-color: rgb(234,234,234);
-            padding: 0;
-            margin: 5px 10px calc(5px - var(--thickness)) 10px;
-        }`}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};
+        const elements = this.entries.map((e) => {
+            switch (e.type) {
+                case "button":
+                    return this.buttonTemplate(e);
+                case "separator":
+                    return this.separatorTemplate();
+            }
+        });
+        return html `${elements.length > 0 ? elements : html `<div class="context-menu-button muted">...</div>`}`;
+    }
+    buttonTemplate(button) {
+        const action = (e) => {
+            if (e.buttons !== 1) {
+                return;
+            }
+            ContextMenu_1.close();
+            if (button.action) {
+                button.action();
+            }
+            e.stopImmediatePropagation();
+            e.stopPropagation();
+        };
+        return html `
+        <div class="context-menu-button ${(button.disabled || false) ? `muted` : ``}" @mousedown="${action}">
+        ${button.icon ? html `<or-icon icon="${button.icon}"></or-icon>` : null}
+        <span class="label">${button.label}</span></div>`;
+    }
+    separatorTemplate() {
+        return html `<div class="context-menu-separator"></div>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], ContextMenu.prototype, "isOpen", void 0);
+ContextMenu = ContextMenu_1 = __decorate([
+    customElement("context-menu")
+], ContextMenu);
+export { ContextMenu };
+//# sourceMappingURL=context-menu.js.map