var __decorate=this&&this.__decorate||function(t,o,e,i){var r,n=arguments.length,a=n<3?o:null===i?i=Object.getOwnPropertyDescriptor(o,e):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(t,o,e,i);else for(var p=t.length-1;p>=0;p--)(r=t[p])&&(a=(n<3?r(a):n>3?r(o,e,a):r(o,e))||a);return n>3&&a&&Object.defineProperty(o,e,a),a};import{LitElement as t,css as o,html as e}from"lit";import{customElement as i,property as r}from"lit/decorators.js";import{modal as n}from"./flow-editor";import{translate as a,i18next as p}from"@openremote/or-translate";let PopupModal=class extends a(p)(t){constructor(){super(),this.closeButton=!0,this.isOpen=!1}close(){this.isOpen=!1}open(){this.isOpen=!0}static get styles(){return o`
        :host{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;

            display: flex;
            justify-content: center;
            align-items: center;

            background: rgba(0, 0, 0, 0.2);
            z-index: 10000;

            --topbar-height: 42px;
            --closebutton-padding: 12px;
            --modal-padding: 10px;
        }
        :host(:not([isopen])){
            display: none;
        }
        .modal{
            min-width: 300px;
            min-height: 64px;
            width: auto;
            height: auto;
            display: inline-block;
            background: white;
            border-radius: var(--roundness);
            position: relative;
            padding: var(--modal-padding);
        }
        .close-button{
            position: absolute;
            top: 0;
            right: 0;
            width: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
            height: calc(var(--topbar-height) - var(--closebutton-padding) * 2);
            padding: var(--closebutton-padding);
            cursor: pointer;
        }
        .title{
            margin: 0;
            height: calc(var(--topbar-height) - var(--modal-padding));
            width: 100%;
            text-transform: uppercase;
            font-weight: bold;
        }`}firstUpdated(){n.element=this,this.addEventListener("mousedown",this.close),window.addEventListener("keyup",t=>{"Escape"===t.key&&this.close()})}render(){return this.isOpen?(this.style.display="",e`
        <div class="modal" @mousedown="${t=>{t.stopPropagation()}}">
            <div class="title">${this.header}</div>
            ${this.content}
            ${this.closeButton?e`<or-icon class="close-button" icon="window-close" @click="${this.close}"></or-icon>`:null}
        </div>
        `):(this.style.display="none",e``)}};__decorate([r({type:Boolean})],PopupModal.prototype,"closeButton",void 0),__decorate([r({type:String})],PopupModal.prototype,"header",void 0),__decorate([r({attribute:!1})],PopupModal.prototype,"content",void 0),__decorate([r({type:Boolean,reflect:!0})],PopupModal.prototype,"isOpen",void 0),PopupModal=__decorate([i("popup-modal")],PopupModal);export{PopupModal};