var __decorate=this&&this.__decorate||function(e,t,r,o){var a,i=arguments.length,d=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)d=Reflect.decorate(e,t,r,o);else for(var n=e.length-1;n>=0;n--)(a=e[n])&&(d=(i<3?a(d):i>3?a(t,r,d):a(t,r))||d);return i>3&&d&&Object.defineProperty(t,r,d),d};import{LitElement as e,html as t,css as r}from"lit";import{customElement as o,property as a,query as i}from"lit/decorators.js";import{i18next as d,translate as n}from"@openremote/or-translate";let NodePanel=class extends n(d)(e){constructor(){super(...arguments),this.nodes=[]}static get styles(){return r`
        .list{
            overflow-x: hidden;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            background: #F9F9F9;
        }
        .category{
            display: flex;
            width: 80%;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 15px 15px 0 15px;
        }
        .category span{
            margin:0;
            color: rgb(125,125,125);
            padding: 0 0 15px 0 ;
        }
        .small-node-grid{
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(2, 1fr);
            grid-gap: 6px;
            justify-items: stretch;
            align-items: stretch;
            margin-bottom: 15px;
            width: var(--nodepanel-width);
        }
        .input-node{ background-color: var(--input-color); }
        .processor-node{ background-color: var(--processor-color); }
        .output-node{ background-color: var(--output-color); }
        .input-node:hover{ background-color: var(--input-color-h); }
        .processor-node:hover{ background-color: var(--processor-color-h); }
        .output-node:hover{ background-color: var(--output-color-h); }`}firstUpdated(){this.drawer&&(this.drawer.open=!0)}render(){return t`
        <!-- <or-mwc-drawer rightsided dismissible transparent> -->
            ${this.listTemplate}
        <!-- </or-mwc-drawer> -->
        `}nodeTemplate(e){return t`<node-menu-item class="node-item" .node="${e}" .workspace="${this.application.editorWorkspace}"></node-menu-item>`}get listTemplate(){return t`
        <div class="list">
            <div class="category"> <span>${d.t("input","Input")}</span> 
                ${this.nodes.filter(e=>"INPUT"===e.type).map(e=>this.nodeTemplate(e))}
            </div>

            <div class="category"><span>${d.t("processors","Processors")}</span> 
                <div class="small-node-grid">
                    ${this.nodes.filter(e=>"PROCESSOR"===e.type&&e.displayCharacter).sort((e,t)=>e.priority-t.priority).map(e=>this.nodeTemplate(e))}
                </div>
                ${this.nodes.filter(e=>"PROCESSOR"===e.type&&!e.displayCharacter).map(e=>this.nodeTemplate(e))}
            </div>

            <div class="category"> <span>${d.t("output","Output")}</span> 
                ${this.nodes.filter(e=>"OUTPUT"===e.type).map(e=>this.nodeTemplate(e))}
            </div>
        </div>
        `}};__decorate([a({type:Array})],NodePanel.prototype,"nodes",void 0),__decorate([i("or-mwc-drawer")],NodePanel.prototype,"drawer",void 0),__decorate([a({attribute:!1})],NodePanel.prototype,"application",void 0),NodePanel=__decorate([o("node-panel")],NodePanel);export{NodePanel};