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);
            margin: 2px;
            display: inline-block;
        }
        .socket{
            background: none;
            height: var(--socket-size);
            width: var(--socket-size);
            border-radius: 100%;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
        .socket:hover{
            background: var(--highlight);
        }
        .label{
            display:inline-block;
            vertical-align: top;
            color: rgba(0,0,0,.5);
        }
        .circle{
            box-sizing: border-box;
            background: grey;
            width: var(--socket-display-size);
            height: var(--socket-display-size);
            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 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,t=t=>{this.linkIdentity(),1!==t.buttons||l.isCurrentlyConnecting||(l.startConnectionDrag(t,this.socket,e),t.stopPropagation(),t.stopImmediatePropagation())},o=t=>{l.createUndoSnapshot(),this.linkIdentity(),l.endConnectionDrag(t,this.socket,e),l.notifyChange(),1===t.buttons&&(t.stopPropagation(),t.stopImmediatePropagation())};this.addEventListener("mousedown",t),this.addEventListener("mouseup",o)}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 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};