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;
        }
        .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(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};