@gravitee/ui-components 3.25.3-typescript-e7256ca → 3.25.3-typescript-9cbc31e

package/src/policy-studio/gv-flow.js

@@ -1 +1,595 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.GvFlow=void 0;const t=require("lit"),e=require("lit/directives/class-map"),i=require("../lib/events");require("../atoms/gv-image");const o=require("../lib/utils"),r=require("./gv-flow-step"),s=require("../lib/studio");class l extends t.LitElement{static get properties(){return{flow:{type:Object},plan:{type:Object},policies:{type:Object},selectedStepId:{type:String},dragPolicy:{type:Object},dropPolicy:{type:Object},disabled:{type:Boolean,reflect:!0},hasPolicyFilter:{type:Boolean,attribute:"has-policy-filter"},flowsTitle:{type:String,attribute:"flows-title"},readonly:{type:Boolean,reflect:!0}}}constructor(){super(),this.flowsTitle="Flows",this.addEventListener("mouseleave",this._onMouseLeave)}_onMouseLeave(){this.dragPolicy=null,this.dropPolicy=null}getCandidate(){return this.shadowRoot.querySelector("gv-flow-step[empty]")}getFlowSteps(){return Array.from(this.shadowRoot.querySelectorAll("gv-flow-step"))}getOrCreateCandidate(){let t=this.getCandidate();return t||(t=document.createElement("gv-flow-step"),t.setAttribute("empty",!0)),t}removeCandidate(){const t=this.getCandidate();t&&t.remove()}_canDropPolicy(t,e){if(this.disabled||this.readonly)return!1;if(null!=e){if("pre"===t)return!0!==this.hasPolicyFilter||!0===e.onRequest;if("post"===t)return!0!==this.hasPolicyFilter||!0===e.onResponse;throw new Error(`The flowkey [${t}] parameter must be "pre" or "post"`)}return!1}_onDragOver(t,e){if(!this.disabled&&!this.readonly&&e.dataTransfer.items.length>0&&(e.preventDefault(),e.stopPropagation(),null==this.dropPolicy?this.dropPolicy=this.dragPolicy:this.dragPolicy=this.dropPolicy,null!=this.dropPolicy&&this._canDropPolicy(t,this.dropPolicy.policy)&&!e.target.classList.contains("candidate")&&!e.target.hasAttribute("dragging")))if("gv-flow-step"===e.target.tagName.toLowerCase()){const{x:i,width:o}=e.target.getBoundingClientRect();!("post"===t?e.clientX-i<=o/2:e.clientX-i>=o/2)||e.target.nextElementSibling&&e.target.nextElementSibling.hasAttribute("dragging")?e.target.previousElementSibling&&e.target.previousElementSibling.hasAttribute("dragging")||e.target.insertAdjacentElement("beforebegin",this.getOrCreateCandidate()):e.target.insertAdjacentElement("afterend",this.getOrCreateCandidate())}else if(e.target.classList&&e.target.classList.contains("drop-area-grid")){0===e.target.querySelectorAll("gv-flow-step").length&&e.target.prepend(this.getOrCreateCandidate())}else this.removeCandidate()}_onDragEnd(){this.disabled||this.readonly||(this._draggablePolicyImage&&(this._draggablePolicyImage.remove(),this._draggablePolicyImage=null),this.dragPolicy=null,this.dropPolicy=null)}_onDragStart(t,e,s,l){if(!this.disabled&&!this.readonly){const a=this.findPolicy(e.policy);if(null!=a){const d=document.createEvent("Events");if(d.initEvent("click",!0,!1),window.dispatchEvent(d),l.target.setAttribute("dragging",!0),this.shadowRoot.querySelector(".drop-area-grid").classList.add("dragging"),this.dropPolicy=new r.PolicyDraggable(a,s,t,this.flow._id,e),l.dataTransfer.setData("text/plain",this.dropPolicy.toString()),a){const t=100;this._draggablePolicyImage=(0,o.appendDraggableImage)(a.icon,t),l.dataTransfer.setDragImage(this._draggablePolicyImage,t/2,t/2)}(0,i.dispatchCustomEvent)(this,"drag-start",this.dropPolicy)}}}async performUpdate(){this.getFlowSteps().forEach((t=>{t.requestUpdate()})),super.performUpdate()}get draggingArea(){return this.shadowRoot.querySelector("gv-flow-step[dragging]")}_onDrop(t,e){this.shadowRoot.querySelectorAll("gv-flow-step").forEach((t=>t.resetConfirm())),e.preventDefault(),e.stopPropagation();const o=e.target.closest(".drop-area-grid"),r=this.getCandidate(),s=this.draggingArea;if(r){let e=0;[...o.querySelectorAll("gv-flow-step")].some((t=>(t.hasAttribute("empty")||e++,t.hasAttribute("empty"))));const{policy:l,sourceFlowKey:a,sourceFlowId:d,sourcePosition:n,flowStep:p}=this.dropPolicy,g=()=>{s&&s.removeAttribute("dragging"),r.remove(),(0,i.dispatchCustomEvent)(this,"drop",{flowId:this.flow._id,flowKey:t,position:e,flowStep:p,policy:l,sourcePosition:n,sourceFlowKey:a,sourceFlowId:d}),this.dragPolicy=null,this.dropPolicy=null};null!=d&&this.flow._id!==d?(r.setAttribute("confirm",!0),r.addEventListener("gv-flow-step:copy",(()=>{r.remove(),this.dragPolicy=null,this.dropPolicy=null,(0,i.dispatchCustomEvent)(this,"drop",{flowId:this.flow._id,flowKey:t,position:e,policy:l,flowStep:p,cancelEdit:!0})})),r.addEventListener("gv-flow-step:move",(()=>{r.remove(),g()}))):g()}else s&&(s.removeAttribute("dragging"),this.dragPolicy=null,this.dropPolicy=null)}getFlowStep(t,e){return this.flow[t][e]}_onEditStep({detail:{step:t,policy:e,group:o}}){(0,i.dispatchCustomEvent)(this,"edit",{flow:this.flow,step:t,policy:e,group:o})}_onDuplicateStep(t,e){const r=this.getFlowStep(t,e),s=e+1,l=this.findPolicy(r.policy),a={...r,_id:(0,o.uuid)()};(0,i.dispatchCustomEvent)(this,"drop",{flowId:this.flow._id,flowKey:t,position:s,flowStep:a,policy:l})}_isEditable(t){return this.selectedStepId&&this.selectedStepId===t._id}_onDeleteStep(t,e,o){(0,i.dispatchCustomEvent)(this,"delete",{flowKey:t,position:e,flowId:this.flow._id,target:o.target})}_onChangeStepState(t,e,{detail:o}){(0,i.dispatchCustomEvent)(this,"change-state",{flowKey:t,position:e,flowId:this.flow._id,...o})}_renderDropStep(e,i,o){return i?t.html`<gv-flow-step .step="${i}" .policy="${this.findPolicy(i.policy)}" .id="${i._id}" .group="${e}" .parent="${this.flow._id}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" .draggable="${!this.disabled&&!this.readonly}" ?editing="${this._isEditable(i)}" @dragstart="${this._onDragStart.bind(this,e,i,o)}" @dragend="${this._onDragEnd}" @gv-flow-step:edit="${this._onEditStep}" @gv-flow-step:change-state="${this._onChangeStepState.bind(this,e,o)}" @gv-flow-step:delete="${this._onDeleteStep.bind(this,e,o)}" @gv-flow-step:duplicate="${this._onDuplicateStep.bind(this,e,o)}"></gv-flow-step>`:t.html``}async getUpdateComplete(){await super.getUpdateComplete(),await Promise.all(this.getFlowSteps().map((t=>t.updateComplete)))}updated(t){t.has("data")&&this.onDragEnd(),(t.has("dropPolicy")||t.has("dragPolicy"))&&null==this.dropPolicy&&null==this.dragPolicy&&this.removeCandidate()}onDragEnd(){setTimeout((()=>{this.shadowRoot.querySelector(".drop-area-grid").classList.remove("dragging"),this.removeCandidate();const t=this.draggingArea;t&&t.removeAttribute("dragging")}),0)}_getLabel(e){return this.flow.type?t.html`<div class="drop-box-type">${e}</div><div>${"ROOT"===this.flow.type.toUpperCase()?"flow":this.flow.type}</div>`:"pre"===e?"request":"post"===e?"response":""}get collectionName(){return null!=this.plan?this.plan.name:this.flowsTitle}render(){const i=this.dragPolicy&&(!0!==this.hasPolicyFilter||this.dragPolicy.policy.onRequest),o=this.dragPolicy&&(!0!==this.hasPolicyFilter||this.dragPolicy.policy.onResponse),r=this.dragPolicy&&!0===this.hasPolicyFilter&&!this.dragPolicy.policy.onRequest,l=this.dragPolicy&&!0===this.hasPolicyFilter&&!this.dragPolicy.policy.onResponse,a=null==this.flow.type||this.flow.type&&"root"!==this.flow.type.toLowerCase();return t.html`<div class="box"><div class="container"><div class="header"><div class="title">${(0,s.getFlowName)(this.flow,this.collectionName)}</div></div><div class="content"><div class="flow"><div class="${(0,e.classMap)({pre:!0,targeted:i,forbidden:r})}"><div class="arrow arrow-right"></div><div class="drop-box" @drop="${this._onDrop.bind(this,"pre")}" @dragend="${this.onDragEnd}" @dragover="${this._onDragOver.bind(this,"pre")}"><div class="drop-box-title">${i?"drop here":this._getLabel("pre")}</div><div class="drop-area-grid">${this.flow.pre.map(((t,e)=>this._renderDropStep("pre",t,e)))}</div></div></div>${a?t.html`<div class="${(0,e.classMap)({post:!0,targeted:o,forbidden:l})}"><div class="arrow arrow-left"></div><div class="drop-box" @drop="${this._onDrop.bind(this,"post")}" @dragend="${this.onDragEnd}" @dragover="${this._onDragOver.bind(this,"post")}"><div class="drop-area-grid drop-area-grid-reverse">${this.flow.post.map(((t,e)=>this._renderDropStep("post",t,e)))}</div><div class="drop-box-title">${o?"drop here":this._getLabel("post")}</div></div></div>`:""}</div></div></div></div>`}findPolicy(t){return this.policies.find((e=>e.id===t))}static get styles(){return[s.methods,t.css`:host{box-sizing:border-box;position:relative;display:block;height:100%}.flow{padding-left:20px;display:flex;height:100%;flex-direction:column}.drop-area-grid{flex:1;border:1px dashed transparent;transition:all 350ms ease-in-out;position:relative;display:flex;flex-wrap:wrap;max-width:calc(100% - 40px);align-items:center;min-height:150px;box-sizing:border-box;padding:0 30px}.targeted .drop-area-grid{border:1px dashed #d9d9d9}.forbidden .drop-area-grid{background-color:#efefef;opacity:.2}gv-flow-step{flex:1}.message{text-transform:uppercase;color:#d9d9d9;opacity:0;transition:opacity 350ms ease-in-out;font-size:18px;text-align:center;align-self:center}.message{width:100%}.targeted .message{opacity:1}.targeted .drop-area-empty{opacity:0;transition:all 350ms ease-in-out}.post,.pre{position:relative;flex:1;display:flex}.arrow{background-color:#d9d9d9;width:calc(100% - 50px * 2 - 1px);text-align:center;position:absolute;margin:0 30px;color:#262626;top:calc(50% - 20px);height:40px}.arrow-right::after{width:0;height:0;border-top:40px solid transparent;border-bottom:40px solid transparent;border-left:40px solid #d9d9d9;content:' ';position:absolute;right:-20px;top:-20px}.drop-box-type{position:relative;writing-mode:horizontal-tb;margin-bottom:10px}.drop-box-title{position:relative;writing-mode:vertical-lr;text-orientation:upright;text-transform:uppercase;color:#bfbfbf;font-size:13px;font-weight:500;text-align:center;max-height:145px;line-height:13px;display:flex;align-items:center;min-width:30px}.pre .drop-box-title{position:absolute;left:-30px}.arrow-left::after{width:0;height:0;border-top:40px solid transparent;border-bottom:40px solid transparent;border-right:40px solid #d9d9d9;content:' ';position:absolute;left:-20px;top:-20px}.drop-box{display:flex;border:1px solid transparent;margin:0 30px;align-items:center;position:relative;width:100%}.drop-area-grid-reverse{flex-direction:row-reverse}.header{border-bottom:1px solid #d9d9d9;display:flex;min-height:45px;margin-bottom:.5rem}.header .title{color:#28444f;font-size:18px;display:flex;align-items:center;margin:0 .5rem;width:100%}.header .title .flow-path{flex:1}.box{position:absolute;display:flex;flex-direction:column;width:100%;top:0;bottom:0;left:0}.container{flex-grow:1;display:flex;flex-direction:column;min-height:0;height:100%}.content{background:#fff;flex-grow:1;overflow:auto;min-height:0;padding:.5rem}`]}}exports.GvFlow=l,window.customElements.define("gv-flow",l);
+/*
+ * Copyright (C) 2015 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { LitElement, html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map';
+import { dispatchCustomEvent } from '../lib/events';
+import '../atoms/gv-image';
+import { appendDraggableImage, uuid } from '../lib/utils';
+import { PolicyDraggable } from './gv-flow-step';
+import { getFlowName, methods } from '../lib/studio';
+/**
+ * Flow component
+ *
+ * @fires gv-flow:drop - Drop event
+ * @fires gv-flow:edit - Edit event
+ * @fires gv-flow:delete - Delete event
+ *
+ * @attr {Object} flow - the flow to display
+ * @attr {String} selectedStepId - the selected step id
+ * @attr {Object} targetedPolicy - true, if flow is targeted for drop action
+ * @attr {Boolean} has-policy-filter - true if policies have onRequest/onResponse properties
+ * @attr {String} flowsTitle - flows menu title
+ * @attr {Boolean} disabled - true for disabled
+ * @attr {Boolean} readonly - true if readonly
+ */
+export class GvFlow extends LitElement {
+    static get properties() {
+        return {
+            flow: { type: Object },
+            plan: { type: Object },
+            policies: { type: Object },
+            selectedStepId: { type: String },
+            dragPolicy: { type: Object },
+            dropPolicy: { type: Object },
+            disabled: { type: Boolean, reflect: true },
+            hasPolicyFilter: { type: Boolean, attribute: 'has-policy-filter' },
+            flowsTitle: { type: String, attribute: 'flows-title' },
+            readonly: { type: Boolean, reflect: true },
+        };
+    }
+    constructor() {
+        super();
+        this.flowsTitle = 'Flows';
+        this.addEventListener('mouseleave', this._onMouseLeave);
+    }
+    _onMouseLeave() {
+        this.dragPolicy = null;
+        this.dropPolicy = null;
+    }
+    getCandidate() {
+        return this.shadowRoot.querySelector('gv-flow-step[empty]');
+    }
+    getFlowSteps() {
+        return Array.from(this.shadowRoot.querySelectorAll('gv-flow-step'));
+    }
+    getOrCreateCandidate() {
+        let candidate = this.getCandidate();
+        if (!candidate) {
+            candidate = document.createElement('gv-flow-step');
+            candidate.setAttribute('empty', true);
+        }
+        return candidate;
+    }
+    removeCandidate() {
+        const candidate = this.getCandidate();
+        if (candidate) {
+            candidate.remove();
+        }
+    }
+    _canDropPolicy(flowKey, policy) {
+        if (this.disabled || this.readonly) {
+            return false;
+        }
+        if (policy != null) {
+            if (flowKey === 'pre') {
+                return this.hasPolicyFilter !== true || policy.onRequest === true;
+            }
+            else if (flowKey === 'post') {
+                return this.hasPolicyFilter !== true || policy.onResponse === true;
+            }
+            else {
+                throw new Error(`The flowkey [${flowKey}] parameter must be "pre" or "post"`);
+            }
+        }
+        return false;
+    }
+    _onDragOver(flowKey, e) {
+        if (!this.disabled && !this.readonly) {
+            if (e.dataTransfer.items.length > 0) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.dropPolicy == null) {
+                    this.dropPolicy = this.dragPolicy;
+                }
+                else {
+                    this.dragPolicy = this.dropPolicy;
+                }
+                if (this.dropPolicy != null &&
+                    this._canDropPolicy(flowKey, this.dropPolicy.policy) &&
+                    !e.target.classList.contains('candidate') &&
+                    !e.target.hasAttribute('dragging')) {
+                    if (e.target.tagName.toLowerCase() === 'gv-flow-step') {
+                        const { x, width } = e.target.getBoundingClientRect();
+                        const condition = flowKey === 'post' ? e.clientX - x <= width / 2 : e.clientX - x >= width / 2;
+                        if (condition && !(e.target.nextElementSibling && e.target.nextElementSibling.hasAttribute('dragging'))) {
+                            e.target.insertAdjacentElement('afterend', this.getOrCreateCandidate());
+                        }
+                        else if (!(e.target.previousElementSibling && e.target.previousElementSibling.hasAttribute('dragging'))) {
+                            e.target.insertAdjacentElement('beforebegin', this.getOrCreateCandidate());
+                        }
+                    }
+                    else if (e.target.classList && e.target.classList.contains('drop-area-grid')) {
+                        const dropAreas = e.target.querySelectorAll('gv-flow-step');
+                        if (dropAreas.length === 0) {
+                            e.target.prepend(this.getOrCreateCandidate());
+                        }
+                    }
+                    else {
+                        this.removeCandidate();
+                    }
+                }
+            }
+        }
+    }
+    _onDragEnd() {
+        if (!this.disabled && !this.readonly) {
+            if (this._draggablePolicyImage) {
+                this._draggablePolicyImage.remove();
+                this._draggablePolicyImage = null;
+            }
+            this.dragPolicy = null;
+            this.dropPolicy = null;
+        }
+    }
+    _onDragStart(sourceFlowKey, flowStep, sourcePosition, e) {
+        if (!this.disabled && !this.readonly) {
+            const policy = this.findPolicy(flowStep.policy);
+            if (policy != null) {
+                // Simulate click on window for close all dropdown menu
+                const windowClick = document.createEvent('Events');
+                windowClick.initEvent('click', true, false);
+                window.dispatchEvent(windowClick);
+                e.target.setAttribute('dragging', true);
+                this.shadowRoot.querySelector('.drop-area-grid').classList.add('dragging');
+                this.dropPolicy = new PolicyDraggable(policy, sourcePosition, sourceFlowKey, this.flow._id, flowStep);
+                e.dataTransfer.setData('text/plain', this.dropPolicy.toString());
+                if (policy) {
+                    const size = 100;
+                    this._draggablePolicyImage = appendDraggableImage(policy.icon, size);
+                    e.dataTransfer.setDragImage(this._draggablePolicyImage, size / 2, size / 2);
+                }
+                dispatchCustomEvent(this, 'drag-start', this.dropPolicy);
+            }
+        }
+    }
+    async performUpdate() {
+        this.getFlowSteps().forEach((s) => {
+            s.requestUpdate();
+        });
+        super.performUpdate();
+    }
+    get draggingArea() {
+        return this.shadowRoot.querySelector('gv-flow-step[dragging]');
+    }
+    _onDrop(flowKey, e) {
+        this.shadowRoot.querySelectorAll('gv-flow-step').forEach((step) => step.resetConfirm());
+        e.preventDefault();
+        e.stopPropagation();
+        const box = e.target.closest('.drop-area-grid');
+        const candidate = this.getCandidate();
+        const draggingArea = this.draggingArea;
+        if (candidate) {
+            let position = 0;
+            [...box.querySelectorAll('gv-flow-step')].some((area) => {
+                if (!area.hasAttribute('empty')) {
+                    position++;
+                }
+                return area.hasAttribute('empty');
+            });
+            const { policy, sourceFlowKey, sourceFlowId, sourcePosition, flowStep } = this.dropPolicy;
+            const move = () => {
+                if (draggingArea) {
+                    draggingArea.removeAttribute('dragging');
+                }
+                candidate.remove();
+                dispatchCustomEvent(this, 'drop', {
+                    flowId: this.flow._id,
+                    flowKey,
+                    position,
+                    flowStep,
+                    policy,
+                    sourcePosition,
+                    sourceFlowKey,
+                    sourceFlowId,
+                });
+                this.dragPolicy = null;
+                this.dropPolicy = null;
+            };
+            if (sourceFlowId != null && this.flow._id !== sourceFlowId) {
+                candidate.setAttribute('confirm', true);
+                candidate.addEventListener('gv-flow-step:copy', () => {
+                    candidate.remove();
+                    this.dragPolicy = null;
+                    this.dropPolicy = null;
+                    dispatchCustomEvent(this, 'drop', {
+                        flowId: this.flow._id,
+                        flowKey,
+                        position,
+                        policy,
+                        flowStep,
+                        cancelEdit: true,
+                    });
+                });
+                candidate.addEventListener('gv-flow-step:move', () => {
+                    candidate.remove();
+                    move();
+                });
+            }
+            else {
+                move();
+            }
+        }
+        else if (draggingArea) {
+            draggingArea.removeAttribute('dragging');
+            this.dragPolicy = null;
+            this.dropPolicy = null;
+        }
+    }
+    getFlowStep(flowKey, position) {
+        return this.flow[flowKey][position];
+    }
+    _onEditStep({ detail: { step, policy, group } }) {
+        dispatchCustomEvent(this, 'edit', { flow: this.flow, step, policy, group });
+    }
+    _onDuplicateStep(flowKey, position) {
+        const step = this.getFlowStep(flowKey, position);
+        const duplicatePosition = position + 1;
+        const policy = this.findPolicy(step.policy);
+        const duplicateStep = { ...step, _id: uuid() };
+        dispatchCustomEvent(this, 'drop', {
+            flowId: this.flow._id,
+            flowKey,
+            position: duplicatePosition,
+            flowStep: duplicateStep,
+            policy,
+        });
+    }
+    _isEditable(step) {
+        return this.selectedStepId && this.selectedStepId === step._id;
+    }
+    _onDeleteStep(flowKey, position, e) {
+        dispatchCustomEvent(this, 'delete', { flowKey, position, flowId: this.flow._id, target: e.target });
+    }
+    _onChangeStepState(flowKey, position, { detail }) {
+        dispatchCustomEvent(this, 'change-state', { flowKey, position, flowId: this.flow._id, ...detail });
+    }
+    _renderDropStep(group, step, position) {
+        if (step) {
+            return html `<gv-flow-step
+        .step="${step}"
+        .policy="${this.findPolicy(step.policy)}"
+        .id="${step._id}"
+        .group="${group}"
+        .parent="${this.flow._id}"
+        ?disabled="${this.disabled}"
+        ?readonly="${this.readonly}"
+        .draggable="${!this.disabled && !this.readonly}"
+        ?editing="${this._isEditable(step)}"
+        @dragstart="${this._onDragStart.bind(this, group, step, position)}"
+        @dragend="${this._onDragEnd}"
+        @gv-flow-step:edit="${this._onEditStep}"
+        @gv-flow-step:change-state="${this._onChangeStepState.bind(this, group, position)}"
+        @gv-flow-step:delete="${this._onDeleteStep.bind(this, group, position)}"
+        @gv-flow-step:duplicate="${this._onDuplicateStep.bind(this, group, position)}"
+      ></gv-flow-step>`;
+        }
+        else {
+            return html ``;
+        }
+    }
+    async getUpdateComplete() {
+        await super.getUpdateComplete();
+        await Promise.all(this.getFlowSteps().map((e) => e.updateComplete));
+    }
+    updated(properties) {
+        if (properties.has('data')) {
+            this.onDragEnd();
+        }
+        if (properties.has('dropPolicy') || properties.has('dragPolicy')) {
+            if (this.dropPolicy == null && this.dragPolicy == null) {
+                this.removeCandidate();
+            }
+        }
+    }
+    onDragEnd() {
+        setTimeout(() => {
+            this.shadowRoot.querySelector('.drop-area-grid').classList.remove('dragging');
+            this.removeCandidate();
+            const draggingArea = this.draggingArea;
+            if (draggingArea) {
+                draggingArea.removeAttribute('dragging');
+            }
+        }, 0);
+    }
+    _getLabel(flowKey) {
+        if (this.flow.type) {
+            return html `
+        <div class="drop-box-type">${flowKey}</div>
+        <div>${this.flow.type.toUpperCase() === 'ROOT' ? 'flow' : this.flow.type}</div>
+      `;
+        }
+        else if (flowKey === 'pre') {
+            return 'request';
+        }
+        else if (flowKey === 'post') {
+            return 'response';
+        }
+        return '';
+    }
+    get collectionName() {
+        return this.plan != null ? this.plan.name : this.flowsTitle;
+    }
+    render() {
+        const preTarget = this.dragPolicy && (this.hasPolicyFilter !== true || this.dragPolicy.policy.onRequest);
+        const postTarget = this.dragPolicy && (this.hasPolicyFilter !== true || this.dragPolicy.policy.onResponse);
+        const preForbidden = this.dragPolicy && this.hasPolicyFilter === true && !this.dragPolicy.policy.onRequest;
+        const postForbidden = this.dragPolicy && this.hasPolicyFilter === true && !this.dragPolicy.policy.onResponse;
+        const hasPost = this.flow.type == null || (this.flow.type && this.flow.type.toLowerCase() !== 'root');
+        return html `<div class="box">
+      <div class="container">
+        <div class="header">
+          <div class="title">${getFlowName(this.flow, this.collectionName)}</div>
+        </div>
+        <div class="content">
+          <div class="flow">
+            <div class="${classMap({ pre: true, targeted: preTarget, forbidden: preForbidden })}">
+              <div class="arrow arrow-right"></div>
+              <div
+                class="drop-box"
+                @drop="${this._onDrop.bind(this, 'pre')}"
+                @dragend="${this.onDragEnd}"
+                @dragover="${this._onDragOver.bind(this, 'pre')}"
+              >
+                <div class="drop-box-title">${preTarget ? 'drop here' : this._getLabel('pre')}</div>
+                <div class="drop-area-grid">${this.flow.pre.map((flowStep, i) => this._renderDropStep('pre', flowStep, i))}</div>
+              </div>
+            </div>
+
+            ${hasPost
+            ? html `
+                        <div class="${classMap({ post: true, targeted: postTarget, forbidden: postForbidden })}">
+                          <div class='arrow arrow-left'> </div>
+                            <div class="drop-box"
+                                 @drop="${this._onDrop.bind(this, 'post')}"
+                                 @dragend="${this.onDragEnd}"
+                                 @dragover="${this._onDragOver.bind(this, 'post')}">
+                                 <div class="drop-area-grid drop-area-grid-reverse">
+                                    ${this.flow.post.map((flowStep, i) => this._renderDropStep('post', flowStep, i))}
+                                 </div>
+                                 <div class="drop-box-title">${postTarget ? 'drop here' : this._getLabel('post')}</div>
+                             </div>
+                          </div>
+                        </div>`
+            : ''}
+          </div>
+        </div>
+      </div>
+    </div>`;
+    }
+    findPolicy(policyId) {
+        const policy = this.policies.find((p) => p.id === policyId);
+        if (policy == null) {
+            // throw new Error(`Policy ${policyId} not found`);
+        }
+        return policy;
+    }
+    static get styles() {
+        return [
+            methods,
+            // language=CSS
+            css `
+        :host {
+          box-sizing: border-box;
+          position: relative;
+          display: block;
+          height: 100%;
+        }
+
+        .flow {
+          padding-left: 20px;
+          display: flex;
+          height: 100%;
+          flex-direction: column;
+        }
+
+        .drop-area-grid {
+          flex: 1;
+          border: 1px dashed transparent;
+          transition: all 350ms ease-in-out;
+          position: relative;
+          display: flex;
+          flex-wrap: wrap;
+          max-width: calc(100% - 40px);
+          align-items: center;
+          min-height: 150px;
+          box-sizing: border-box;
+          padding: 0 30px;
+        }
+
+        .targeted .drop-area-grid {
+          border: 1px dashed #d9d9d9;
+        }
+
+        .forbidden .drop-area-grid {
+          background-color: #efefef;
+          opacity: 0.2;
+        }
+
+        gv-flow-step {
+          flex: 1;
+        }
+
+        .message {
+          text-transform: uppercase;
+          color: #d9d9d9;
+          opacity: 0;
+          transition: opacity 350ms ease-in-out;
+          font-size: 18px;
+          text-align: center;
+          align-self: center;
+        }
+
+        .message {
+          width: 100%;
+        }
+
+        .targeted .message {
+          opacity: 1;
+        }
+
+        .targeted .drop-area-empty {
+          opacity: 0;
+          transition: all 350ms ease-in-out;
+        }
+
+        .pre,
+        .post {
+          position: relative;
+          flex: 1;
+          display: flex;
+        }
+
+        .arrow {
+          background-color: #d9d9d9;
+          width: calc(100% - 50px * 2 - 1px);
+          text-align: center;
+          position: absolute;
+          margin: 0 30px;
+          color: #262626;
+          top: calc(50% - 20px);
+          height: 40px;
+        }
+
+        .arrow-right::after {
+          width: 0;
+          height: 0;
+          border-top: 40px solid transparent;
+          border-bottom: 40px solid transparent;
+          border-left: 40px solid #d9d9d9;
+          content: ' ';
+          position: absolute;
+          right: -20px;
+          top: -20px;
+        }
+
+        .drop-box-type {
+          position: relative;
+          writing-mode: horizontal-tb;
+          margin-bottom: 10px;
+        }
+
+        .drop-box-title {
+          position: relative;
+          writing-mode: vertical-lr;
+          text-orientation: upright;
+          text-transform: uppercase;
+          color: #bfbfbf;
+          font-size: 13px;
+          font-weight: 500;
+          text-align: center;
+          max-height: 145px;
+          line-height: 13px;
+          display: flex;
+          align-items: center;
+          min-width: 30px;
+        }
+
+        .pre .drop-box-title {
+          position: absolute;
+          left: -30px;
+        }
+
+        .arrow-left::after {
+          width: 0;
+          height: 0;
+          border-top: 40px solid transparent;
+          border-bottom: 40px solid transparent;
+          border-right: 40px solid #d9d9d9;
+          content: ' ';
+          position: absolute;
+          left: -20px;
+          top: -20px;
+        }
+
+        .drop-box {
+          display: flex;
+          border: 1px solid transparent;
+          margin: 0 30px;
+          align-items: center;
+          position: relative;
+          width: 100%;
+        }
+
+        .drop-area-grid-reverse {
+          flex-direction: row-reverse;
+        }
+
+        .header {
+          border-bottom: 1px solid #d9d9d9;
+          display: flex;
+          min-height: 45px;
+          margin-bottom: 0.5rem;
+        }
+
+        .header .title {
+          color: #28444f;
+          font-size: 18px;
+          display: flex;
+          align-items: center;
+          margin: 0 0.5rem;
+          width: 100%;
+        }
+
+        .header .title .flow-path {
+          flex: 1;
+        }
+
+        .box {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+          top: 0;
+          bottom: 0;
+          left: 0;
+        }
+
+        .container {
+          flex-grow: 1;
+
+          display: flex;
+          flex-direction: column;
+
+          /* for Firefox */
+          min-height: 0;
+          height: 100%;
+        }
+
+        .content {
+          background: white;
+          flex-grow: 1;
+
+          overflow: auto;
+
+          /* for Firefox */
+          min-height: 0;
+          padding: 0.5rem;
+        }
+      `,
+        ];
+    }
+}
+window.customElements.define('gv-flow', GvFlow);